/* ══════════════════════════════════════════════════
   Car Order Modal — Shared CSS (tires + pads)
   ══════════════════════════════════════════════════ */

/* ── Modal view switching ── */
.modal-view{display:none;flex-direction:column;opacity:0;transition:opacity .25s ease}
.modal-view.active{display:flex;opacity:1}
.modal-view-car{min-height:60vh}
.modal-view-order{min-height:0}

/* ── Order Header ── */
.order-header{display:flex;align-items:center;padding:20px 22px 14px;direction:ltr;gap:10px;border-bottom:1px solid rgba(0,0,0,.06)}
.order-close{width:34px;height:34px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.order-close svg{width:13px;height:13px;fill:#666}
.order-title{flex:1;text-align:center;font-size:1rem;font-weight:800;color:#000;direction:rtl}

/* ── Order Info Bar ── */
.order-info{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #f0f0f0;margin-top:14px}
.order-info-right{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.order-info-badge{display:inline-block;padding:4px 11px;border-radius:50px;background:#f3f3f3;font-size:.62rem;font-weight:500;color:#888}
.order-info-name{font-size:.92rem;font-weight:800;color:#000}
.order-info-left{display:flex;flex-direction:column;align-items:flex-start;gap:4px;direction:ltr}
.order-info-tax{font-size:.62rem;color:#999;direction:rtl}
.order-info-price{display:inline-flex;align-items:baseline;gap:5px;font-size:1.18rem;font-weight:800;color:#000;direction:ltr;line-height:1}

/* ── Order Body ── */
.order-body{flex:1;overflow-y:auto;padding:16px 22px 0;-webkit-overflow-scrolling:touch}
.order-img{display:flex;align-items:center;justify-content:center;padding:12px 0 16px}
.order-img img{max-height:140px;object-fit:contain}

/* ── Form Fields ── */
.order-field-label{font-size:.88rem;font-weight:700;color:#000;text-align:right;margin-bottom:8px}
.order-field-label .req{color:#ef4444}
.order-car-field{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1.5px solid #e5e5e5;border-radius:14px;cursor:pointer;margin-bottom:18px;transition:border-color .2s}
.order-car-field:active{border-color:#000}
.order-car-text{font-size:.85rem;font-weight:600;color:#111}
.order-car-arrow{width:16px;height:16px;fill:#999}

/* ── Option Chips ── */
.order-chips{display:flex;gap:8px;direction:rtl;margin-bottom:8px;flex-wrap:wrap}
.order-chip{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:14px;border:1.5px solid #e5e5e5;background:#fff;cursor:pointer;transition:all .18s;position:relative;-webkit-tap-highlight-color:transparent;min-width:calc(25% - 8px)}
.order-chip:active{transform:scale(.97)}
.order-chip.selected{background:#000;border-color:#000}
.order-chip .oc-name{font-size:.78rem;font-weight:700;color:#111}
.order-chip .oc-price{font-size:.65rem;font-weight:600;color:#888;display:inline-flex;align-items:baseline;gap:2px;direction:ltr}
.order-chip .oc-save{font-size:.55rem;font-weight:700;color:#15803d}
.order-chip.selected .oc-name{color:#fff}
.order-chip.selected .oc-price{color:rgba(255,255,255,.7)}
.order-chip.selected .oc-price img{filter:brightness(0) invert(1)!important}
.order-chip .oc-badge{position:absolute;top:-8px;right:50%;transform:translateX(50%);font-size:.5rem;font-weight:700;color:#fff;background:#ed1b24;padding:1px 8px;border-radius:10px;white-space:nowrap}
.order-chip .oc-per-unit{font-size:.5rem;font-weight:500;color:#999}
.order-chip.selected .oc-per-unit{color:rgba(255,255,255,.5)}

/* ── Progress Bar ── */
.order-progress{height:3px;background:#f0f0f0;margin:0 22px;border-radius:3px;overflow:hidden}
.order-progress-bar{height:100%;background:#000;border-radius:3px;width:100%;transition:width .35s cubic-bezier(.22,1,.36,1)}

/* ── Hide sticky bar when modal is open ── */
.bs-overlay.open~.sticky-bar{transform:translateY(100%)!important;pointer-events:none}