/* makeorder.css */

/* ── Shelf ── */
.mo-shelf{display:flex;gap:12px;overflow-x:auto;padding:4px 24px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mo-shelf::-webkit-scrollbar{display:none}
.mo-pick{flex:0 0 190px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;overflow:hidden;position:relative;background:var(--surface);transition:border-color .2s}
.mo-pick:hover{border-color:var(--text-3)}
.mo-pick:active{opacity:.85}
.mo-pick img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--subtle)}
.mo-pick__badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px}
.mo-pick__badge--ok{background:rgba(43,42,41,.75);color:#fff}
.mo-pick__badge--wait{background:rgba(255,255,255,.82);color:var(--text-2);border:1px solid var(--border)}
[data-theme="dark"] .mo-pick__badge--wait{background:rgba(30,29,28,.82)}
.mo-pick__info{padding:10px 12px}
.mo-pick__title{display:block;font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-pick__price{font-size:13px;font-weight:700;color:var(--text-1)}
.mo-empty{text-align:center;padding:40px 20px;color:var(--text-3)}
.mo-empty b{font-size:15px;font-weight:600;color:var(--text-2);display:block;margin-bottom:6px}
.mo-empty a{color:var(--text-1);text-decoration:underline;text-underline-offset:2px}

/* ═══ Zone ═══ */
.sc-zone{padding:24px 0 0!important;overflow:hidden;border:1px solid var(--border);border-top:none}
.sc-zone__head{padding:0 24px}
.sc-zone__divider{height:1px;background:var(--border);margin:14px 24px}

/* ═══ Config cards ═══ */
.sc{margin:0;border:none;border-radius:0;background:transparent}
.sc__inner{min-height:0}
.sc__body{padding:16px 24px 12px}
.sc__footer{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;background:var(--subtle);border-top:1px solid var(--border);border-bottom:2px solid var(--border)}
.sc__del{font-size:13px;font-weight:600;color:#B91C1C;background:none;border:none;padding:4px 10px;cursor:pointer;border-radius:4px}
.sc__del:hover{background:rgba(185,28,28,0.06)}
.sc__price{font-size:15px;font-weight:600;color:var(--text-1)}

/* Enter: grid 0fr→1fr */
.sc--enter{display:grid;grid-template-rows:1fr;animation:sc-open .45s cubic-bezier(.22,1,.36,1)}
.sc--enter>.sc__inner{overflow:hidden}
@keyframes sc-open{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}

/* Exit: same speed/curve reversed */
.sc--exit{display:grid;animation:sc-close .45s cubic-bezier(.22,1,.36,1) forwards}
.sc--exit>.sc__inner{overflow:hidden}
@keyframes sc-close{from{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}

/* ═══ Top ═══ */
.sc__top{display:flex;gap:14px;align-items:flex-start}
.sc__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

.sc__img{
    width:107.5px;height:107.5px;object-fit:cover;border-radius:4px;
    border:1px solid var(--border);flex-shrink:0;cursor:zoom-in;
    transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.sc__img--open{width:200px;height:200px;box-shadow:4px 0 24px rgba(0,0,0,.08);cursor:zoom-out}
[data-theme="dark"] .sc__img--open{box-shadow:4px 0 24px rgba(0,0,0,.3)}

/* Quantity corner for goods (desktop only) */
.sc__qty-corner{display:none}
@media(min-width:641px){
  .sc--good .sc__qty-corner{
    display:flex;flex-direction:column;align-items:flex-end;
    margin-left:auto;flex-shrink:0;
  }
}

/* Spread row */
.sc__r{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.sc__field{flex-shrink:0}
.sc__label{display:block;font-size:11px;font-weight:500;color:var(--text-3);margin-bottom:2px;letter-spacing:.2px}
.sc__label i{font-size:10px;vertical-align:baseline}
.sc__size{display:flex;align-items:flex-end;gap:6px}
.sc__x{font-size:12px;color:var(--text-3);padding-bottom:8px;line-height:1;user-select:none}

/* ═══ Switches ═══ */
.sc__switches{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.sc__sw{display:flex;align-items:center;padding-left:2.8em;margin:0;min-height:auto}
.sc__sw .form-check-input{margin-top:0;margin-left:-2.8em;margin-right:.5em}
.sc__sw .form-check-label{font-size:12px;font-weight:500;color:var(--text-1);cursor:pointer;white-space:nowrap}
.sc__sw .form-check-label i{font-size:10px;color:var(--text-3)}
.sc .form-check-input{
    cursor:pointer;
    background-color:var(--subtle)!important;border-color:var(--border)!important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239E9B97'/%3e%3c/svg%3e")!important;
    transition:background-color .15s ease,border-color .15s ease,background-position .15s ease!important;
}
.sc .form-check-input:focus{box-shadow:none!important;border-color:var(--border)!important}
.sc .form-check-input:active{filter:none!important}
.sc .form-check-input:checked{
    background-color:var(--dark)!important;border-color:var(--dark)!important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}
.sc .form-check-input:checked:focus{box-shadow:none!important;border-color:var(--dark)!important}

/* ═══ Extras ═══ */
.sc__extra{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.sc__pricetoggle{font-size:11px;color:var(--text-3);background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sc__pricetoggle:hover{color:var(--text-2)}
.sc__copylink{font-size:11px;font-weight:500;color:var(--text-3);background:none;border:none;padding:2px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border);transition:all .15s}
.sc__copylink:hover{color:var(--text-2);text-decoration-color:var(--text-3)}
.sc__copylink--ok{color:var(--text-1);text-decoration:none;pointer-events:none}
.sc__prices{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 10px;padding:6px 0;width:100%;font-variant-numeric:tabular-nums}
.sc__prices div{font-size:12px;line-height:1.6;white-space:nowrap;min-width:0}
.sc__prices b{display:inline-block;min-width:7ch}
.sc__prices span{color:var(--text-3);margin-right:2px}
.sc__prices b{color:var(--text-1);font-weight:600}
.sc__prices small,.sc__prices .text-success{color:var(--text-3)!important;font-weight:400;font-size:11px}
.sc__meta{font-size:11px;color:var(--text-3)}

/* ── Stepper ── */
.mo-step{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;overflow:hidden;height:32px;width:108px}
.mo-step--qty{width:120px}
.mo-step__side{display:flex}
.mo-step__side button{width:30px;padding:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-1);font-size:14px;font-weight:700;cursor:pointer;transition:background .1s}
.mo-step__side:first-child button{border-right:1px solid var(--border)}
.mo-step__side:last-child button{border-left:1px solid var(--border)}
.mo-step__side button:hover{background:var(--subtle)}
.mo-step__side button.disabled{opacity:.3;pointer-events:none}
.mo-step__val{flex:1;display:flex;min-width:0}
.mo-step__val .form-control,.mo-step__val input[type=number]{border:none!important;box-shadow:none!important;border-radius:0!important;text-align:center;font-size:13px;font-weight:600;padding:0;height:100%;width:100%;min-width:0;background:transparent;color:var(--text-1)}
.mo-step__val .form-control:focus{outline:none;box-shadow:none!important}
.mo-select .form-select,.mo-select .form-control{font-size:13px;border:1px solid var(--border);border-radius:6px;height:32px;padding:3px 28px 3px 8px;color:var(--text-1)}

/* ── Lamination pills ── */
.mo-lam .btn-group{gap:3px}
.mo-lam .btn{font-size:12px;padding:4px 12px;border-radius:5px!important;border:1px solid var(--border);color:var(--text-2);font-weight:500;transition:all .15s;line-height:1.4}
.mo-lam .btn:hover{border-color:var(--text-3);color:var(--text-1)}
.mo-lam .btn-check:checked+.btn,.mo-lam input[type=radio]:checked+label{background:var(--dark);color:#fff;border-color:var(--dark)}

/* ═══ Checkout ═══ */
.sc-checkout{padding:16px 24px 24px}
.sc-checkout__head{margin-bottom:10px}
.sc-input{font-size:14px!important;border-color:var(--border)!important;border-radius:8px!important}
.sc-input:focus{border-color:var(--text-3)!important;box-shadow:0 0 0 .2rem rgba(43,42,41,.06)!important}
.mo-field-label{font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:3px}
#order_button{font-size:14px;font-weight:700;border-radius:var(--radius);padding:12px;border:none;background:var(--dark);color:#fff;width:100%;cursor:pointer;transition:background .15s}
#order_button:hover:not(:disabled){background:var(--dark-soft)}
#order_button:disabled{opacity:.5;cursor:not-allowed}

/* ── Receipt ── */
.sc-receipt{display:flex;flex-direction:column;gap:8px}
.sc-receipt__row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--text-2)}
.sc-receipt__row span:last-child{font-weight:600;color:var(--text-1)}
.sc-receipt__row--discount{font-size:13px}
.sc-receipt__row--discount span:last-child{font-weight:500;color:var(--text-2)}
.sc-receipt__row--total{font-size:15px;font-weight:700;color:var(--text-1);padding-top:10px;margin-top:2px;border-top:1px solid var(--border)}
.sc-receipt__row--total span:last-child{font-weight:800}
.sc-receipt__old{font-size:13px;color:var(--text-3);text-decoration:line-through;margin-right:6px;font-weight:400}
#promoCodeDiv{position:relative;padding-bottom:18px}
.mo-promo-ok,.mo-promo-err{font-size:12px;margin:3px 0 0;position:absolute;left:0;bottom:0}
.mo-promo-ok{color:var(--text-2)}
.mo-promo-err{color:#B91C1C}

/* ── Tablet (≤640) ── */
@media(max-width:640px){
  .mo-shelf{padding:4px 16px 8px;gap:10px}.mo-pick{flex:0 0 150px}
  .sc-zone__head{padding:0 16px}.sc-zone__divider{margin:12px 16px}
  .sc__body{padding:14px 16px 10px}.sc__footer{padding:8px 16px}
  .sc__img--open{width:160px;height:160px}
  .sc__r{gap:8px}
  .sc__prices{grid-template-columns:repeat(2,1fr)}
  .sc-checkout{padding:12px 16px 20px}
  .sc--good .sc__qty-corner{display:none}
  .sc--good .sc__main{gap:10px}
  .sc--good .sc__main::after{
    content:'';display:block;order:999;
    padding-top:10px;
  }
}
@media(max-width:480px){
  .sc__top{flex-direction:column;align-items:center}
  .sc__img{width:72px;height:72px}
  .sc__img--open{width:100%;height:auto}
  .sc__main{width:100%;align-items:stretch}
  .sc__r{flex-direction:column;align-items:stretch;gap:8px}
  .sc__field{width:100%}
  .sc__field .mo-select,.sc__field .mo-select .form-select,.sc__field .mo-select .form-control{max-width:100%;width:100%}
  .sc__field .mo-lam{display:flex}.sc__field .mo-lam .btn-group{flex:1}
  .sc__field .mo-lam .btn{flex:1;text-align:center}
  .sc__size{width:100%;justify-content:center}
  .form-quantity-div .mo-step{width:100%}
  .sc__switches{justify-content:center;gap:6px 16px}
  .sc__prices{grid-template-columns:repeat(2,1fr)}
  .sc__footer{flex-direction:column-reverse;gap:6px;text-align:center}
  .sc__del{align-self:center}
}
@media(max-width:380px){
  .mo-pick{flex:0 0 130px}
  .sc__size{flex-direction:column;gap:6px;align-items:stretch}
  .sc__x{display:none}.mo-step{width:100%}
  .sc__switches{flex-direction:column;align-items:flex-start;gap:8px;width:100%}
}

/* ═══ Desktop enhancements (≥641px) ═══ */
@media(min-width:641px){
  .sc__img{width:120px;height:120px}
  .sc__body{padding:20px 28px 14px}
  .sc__footer{padding:12px 28px}
  .sc-zone__head{padding:0 28px}
  .sc-zone__divider{margin:14px 28px}
  .sc__label{font-size:12px}
  .sc__sw .form-check-label{font-size:13px}
  .mo-step__val .form-control,.mo-step__val input[type=number]{font-size:14px}
  .mo-select .form-select,.mo-select .form-control{font-size:14px;height:36px}
  .mo-step{height:36px;width:118px}
  .mo-step--qty{width:130px}
  .mo-lam .btn{font-size:13px;padding:6px 14px}
  .sc__prices div{font-size:13px}
  .sc__del{font-size:14px}
  .sc__meta{font-size:12px}
  .sc__pricetoggle{font-size:12px}
  .sc__img--open{width:200px;height:200px}
  .sc__switches{gap:8px 22px}
  .sc__x{font-size:13px}
}