#superoptionModal .modal-dialog { width:calc(100% - 24px); max-width:500px; margin:12px auto; }
#superoptionModal .modal-content { max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
#superoptionModal .modal-body { overflow-y:auto; min-height:0; }
#superoptionModal #super_option_html { padding:18px 20px!important; }
#superoptionModal .modal-header { display:flex; align-items:center; justify-content:flex-start; gap:10px; }
#superoptionModal .pos-so-header-icon { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:42px; height:42px; margin:0; border-radius:12px; border:1px solid rgba(255,95,109,.16); background:#fff; color:#ff5f6d; font-size:17px; }
#superoptionModal .pos-so-header-copy { display:flex; flex:1; flex-direction:column; min-width:0; gap:2px; }
#superoptionModal .pos-so-title-row { display:flex; align-items:center; gap:10px; }
#superoptionModal .modal-title { flex:0 1 auto; min-width:0; margin:0; line-height:32px; text-align:left; }
#superoptionModal .modal-header .close { flex-shrink:0; margin:0 0 0 auto; }
#superoptionModal .pos-so-message { margin:0; font-size:12px; line-height:1.5; color:#687588; }
#superoptionModal .pos-so-message:empty { display:none; }
#superoptionModal .pos-so-manage { display:inline-flex; flex-shrink:0; align-items:center; gap:4px; width:auto; height:32px; border:1px solid #d7dce2; border-radius:999px; background:#fff; color:#253247; padding:0 10px; white-space:nowrap; font-size:12px; font-weight:700; }
#superoptionModal .pos-so-manage[aria-pressed="true"] { background:#f0f3f7; border-color:#aab6c5; }
#superoptionModal .pos-so-group + .pos-so-group { border-top:1px solid #e4e7eb; padding-top:18px; margin-top:18px; }
#superoptionModal .pos-so-heading { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; text-align:left; }
#superoptionModal .pos-so-heading h3 { margin:0; font-size:16px; line-height:1.4; font-weight:700; }
#superoptionModal .pos-so-heading p { margin:0; color:#697586; font-size:13px; line-height:1.4; }
#superoptionModal .pos-so-choices { display:flex; flex-wrap:wrap; align-items:flex-start; gap:13px 14px; padding:8px 14px 0 0; }
#superoptionModal .pos-so-choice { display:flex; flex:0 1 auto; min-width:0; max-width:100%; }
#superoptionModal .super_option_list_btn,#superoptionModal .pos-so-toggle { position:relative; display:block; width:auto; min-width:68px; min-height:38px; margin:0; padding:8px; border:2px solid #666; border-radius:4px; line-height:18px; text-align:center; font-size:13px; font-weight:400; color:#111; background:#fff; }
#superoptionModal .super_option_list_btn > span:first-child,#superoptionModal .pos-so-name { overflow-wrap:anywhere; }
#superoptionModal .super_option_selected { background:#fff0ef; border:2px solid #fc443d; }
#superoptionModal .pos-so-price { position:absolute; top:-16px; right:-16px; display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 5px; border-radius:999px; box-sizing:border-box; white-space:nowrap; background:var(--storebgVar,#fc443d); color:var(--pos-so-badge-color,#fff); font-size:12px; line-height:1; }
#superoptionModal .pos-so-price small { display:inline; flex:none; font-size:70%; line-height:1; }
#superoptionModal #super_option_add { border-radius:999px; min-height:48px; font-size:15px; font-weight:800; }
#superoptionModal .is-unavailable .super_option_list_btn { min-width:82px; color:#7a8491; background:#f1f3f5; border-color:#d5d9de; }
#superoptionModal .is-unavailable .pos-so-price { color:#fff; background:#7b8490; font-size:10px; padding:0 7px; }
#superoptionModal .pos-so-toggle { min-width:82px; }
#superoptionModal .pos-so-toggle:lang(en) { min-width:108px; }
#superoptionModal .pos-so-toggle.is-published { background:#e8f6ee; border-color:#9fd3b5; color:#236a46; }
#superoptionModal .pos-so-toggle.is-unpublished { background:#fff0f1; border-color:#e9aeb8; color:#a23b48; }
#superoptionModal .pos-so-toggle.is-published:hover:not(:disabled) { background:#d8efe2; }
#superoptionModal .pos-so-toggle.is-unpublished:hover:not(:disabled) { background:#fbe0e4; }
#superoptionModal .pos-so-state { position:absolute; top:-10px; left:4px; padding:0 4px; border-radius:4px; font-size:10px; line-height:16px; font-weight:700; white-space:nowrap; background:inherit; }
#superoptionModal .pos-so-toggle.is-published .pos-so-state { background:#e8f6ee; }
#superoptionModal .pos-so-toggle.is-unpublished .pos-so-state { background:#fff0f1; }
#superoptionModal .pos-so-toggle:disabled,#superoptionModal .pos-so-manage:disabled { opacity:.55; cursor:wait; }
#superoptionModal .modal-footer { flex-shrink:0; }
#superoptionModal button:focus-visible { outline:2px solid #285dd1; outline-offset:2px; }
@media (min-width:992px) {
    #superoptionModal .modal-dialog { width:calc(100% - 64px); max-width:1100px; }
}
@media (max-width:480px) {
    #superoptionModal .modal-header { padding:14px; gap:8px; }
    #superoptionModal .pos-so-title-row { gap:8px; }
    #superoptionModal .modal-title { font-size:15px; line-height:30px; }
    #superoptionModal .pos-so-header-icon { width:32px; height:32px; border-radius:10px; }
    #superoptionModal .modal-header .close { width:32px!important; height:32px!important; }
    #superoptionModal .pos-so-manage { height:30px; padding:0 8px; font-size:11px; }
    #superoptionModal #super_option_html { padding:14px!important; }
    #superoptionModal .pos-so-heading h3 { font-size:16px; }
}