/* ═══ TINT MODAL ═══ */
.tint-overlay{position:fixed;inset:0;z-index:99999;visibility:hidden;opacity:0;transition:all .3s ease}
.tint-overlay.open{visibility:visible;opacity:1}
.tint-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.tint-sheet{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:22px 22px 0 0;max-height:96vh;min-height:78vh;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-tajawal,'Janna LT',sans-serif)}
.tint-overlay.open .tint-sheet{transform:translateY(0)}

body.tint-open{overflow:hidden!important;position:fixed!important;width:100%!important;top:var(--scroll-y,0)!important}
body.tint-open .header,body.tint-open .sticky-filters{z-index:1!important}
body.tint-open .cart-overlay{z-index:1!important}
body.tint-open .cart-toast{display:none!important}

/* Header */
.tint-header{display:flex;align-items:center;padding:20px 22px 14px;direction:ltr;gap:10px;position:relative}
.tint-close{width:34px;height:34px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0;order:0}
.tint-close svg{width:13px;height:13px;fill:#666}
.tint-header-title{flex:1;text-align:center;font-size:1.02rem;font-weight:800;color:#000;direction:rtl;order:1}
.tint-back{width:34px;height:34px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0;order:2;padding:0;transition:opacity .2s}
.tint-back:active{opacity:.7}
.tint-back svg{width:15px;height:15px}

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

/* Info bar — uses shared .order-info-* classes from car-order-modal.css */
/* Legacy aliases for backward compatibility */
.tint-info-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #f0f0f0;margin-top:14px}
.tint-info-price .currency-svg{height:14px;width:auto;margin:0;vertical-align:baseline;transform:translateY(1px);filter:brightness(0)}

/* Body */
.tint-body{flex:1;overflow-y:auto;padding:0 0 16px;-webkit-overflow-scrolling:touch}

/* Car image — clean, no frame */
.tint-car-wrap{
  position:relative;
  margin:18px 18px 10px;
  background:transparent;
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
}
.tint-car-wrap img{
  max-width:100%;
  max-height:180px;
  object-fit:contain;
}
/* Base car image: smooth opacity transition only (no transforms → no movement) */
#tintCarImg{
  transition:opacity .4s ease;
}
#tintCarImg.tint-car-fade{opacity:0}
/* Highlight overlay: stacked exactly on top of the base car, only its opacity animates.
   Because the highlight PNG is identical to the clean PNG except for the red window,
   fading its opacity makes only the red window appear/disappear — the car stays still. */
.tint-car-highlight{
  position:absolute;
  inset:0;
  margin:auto;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}

/* Step section */
.tint-step-section{padding:6px 22px 0}
.tint-step-title{font-size:1.05rem;font-weight:800;color:#000;text-align:right;margin-bottom:14px;letter-spacing:-.2px}
.tint-step-title .req{color:#ef4444;font-weight:800;margin-left:2px}
.tint-note{font-size:.68rem;color:#888;line-height:1.7;text-align:right;margin-bottom:14px}
.tint-note:empty{display:none}

/* Chips */
.tint-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  direction:rtl;
  justify-content:flex-start;
  padding-top:10px;
}
.tint-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:7px 14px 6px;
  border-radius:999px;
  border:1px solid #d4d4d4;
  background:#fff;
  cursor:pointer;
  transition:all .18s ease;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
  direction:rtl;
}
.tint-chip .chip-label{
  font-size:.76rem;
  font-weight:700;
  color:#111;
  line-height:1.15;
  white-space:nowrap;
}
.tint-chip .chip-code{
  font-weight:700;
  color:#888;
  font-size:.72rem;
  margin-left:2px;
}
.tint-chip .chip-traffic{
  display:block;
  font-size:.52rem;
  font-weight:600;
  color:#888;
  line-height:1;
  margin-top:1px;
  white-space:nowrap;
}
.tint-chip.selected{background:#000;border-color:#000}
.tint-chip.selected .chip-label{color:#fff}
.tint-chip.selected .chip-code{color:rgba(255,255,255,.6)}
.tint-chip.selected .chip-traffic{color:rgba(255,255,255,.7)}
.tint-chip:active{transform:scale(.97)}

/* Sunroof addon (last step only) */
.tint-addon-wrap{
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed #e5e5e5;
}
.tint-addon-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  border:1.5px solid #e5e5e5;
  background:#fff;
  cursor:pointer;
  direction:rtl;
  transition:all .2s;
}
.tint-addon-card:has(input:checked){border-color:#000;background:#fafafa}
.tint-addon-card input{display:none}
.tint-addon-check{
  width:22px;
  height:22px;
  border-radius:6px;
  border:1.5px solid #ccc;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .2s;
}
.tint-addon-check svg{width:0;height:0;transition:all .2s}
.tint-addon-card:has(input:checked) .tint-addon-check{background:#000;border-color:#000}
.tint-addon-card:has(input:checked) .tint-addon-check svg{width:14px;height:14px}
.tint-addon-info{flex:1;display:flex;flex-direction:column;gap:3px;text-align:right;min-width:0}
.tint-addon-name{font-size:.8rem;font-weight:700;color:#000;line-height:1.1}
.tint-addon-desc{font-size:.62rem;font-weight:400;color:#888;line-height:1.2}

/* Actions */
.tint-actions{padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 14px);flex-shrink:0;background:#fff;border-top:1px solid #f5f5f5}
.tint-next-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;border-radius:50px;background:#000;color:#fff;font-size:.92rem;font-weight:700;transition:all .2s;cursor:pointer;border:none;font-family:inherit}
.tint-next-btn.disabled{background:#e0e0e0;color:#999;pointer-events:none}
.tint-next-btn:active{transform:scale(.98)}