/* ═══════════════════════════════════════════
   EMCO FIRE SYSTEMS — CONFIGURATOR CSS
   File: style.css
   Verge3D: body background = transparent
═══════════════════════════════════════════ */

 #preloader-wrapper {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background: black; 
      display: flex;   
      align-items: center;
      justify-content: center;
      z-index: 1000;
 }

  #percentage {
         color: white;
 }


  .main-container {
          width: 100%;
          padding: 0px 20px;
          display: flex;
          align-items: center;
          justify-content: center;  
          flex-direction: column;
  }
 
 .main-container img {
          width: 380px;
          max-width: 70vw;
          max-height: 380px;
          height: auto;
 }

 h2#wait {
          color: rgb(105, 105, 105);
          margin-top: 20px;
          font-size: 24px;
          letter-spacing: 2px;
 }


/* ─── TOKENS ─── */
:root {
  --fire:    #E84C1E;
  --fire-dark: #c73e12;
  --ember:   #F5A623;
  --night:   #0A0C10;
  --panel:   #10141C;
  --card:    #161B27;
  --border:  rgba(255,255,255,0.07);
  --muted:   #4A5568;
  --text:    #979a9e;
  --sub:     #cedae6;
  --green:   #22C55E;
  --w:       350px;
  --radius:  10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0px; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #060810;
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* CONFIGURATOR — Left (HTML before, flex natural order) */
#configurator {
  width: var(--w);
  min-width: var(--w);
  max-width: var(--w);
  height: 95vh;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  z-index: 50;
  pointer-events: all;
}

/* 3D FRAME — Right (HTML after, flex:1 remaining space) */
#frame {
  flex: 1;
  min-width: 0;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #060810;
  z-index: 1;
}

#my_iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* fire-line top accent */
#configurator::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fire), var(--ember), var(--fire));
  background-size: 200% 100%;
  animation: fireSlide 3s linear infinite;
  z-index: 10;
}
@keyframes fireSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─── HEADER ─── */
.hdr {
  padding: 28px 28px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(232,76,30,0.08) 0%, transparent 100%);
}
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.hdr-logo svg { flex-shrink: 0; }
.hdr-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--fire);
}
.hdr-sub {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 500;
}

/* ─── PROGRESS BAR ─── */
.progress-track {
  display: flex;
  gap: 4px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--night);
}
.progress-step {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.4s;
}
.progress-step.done   { background: var(--fire); }
.progress-step.active { background: var(--ember); }

/* ─── SCROLL BODY ─── */
.cfg-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 16px;
}

/* ─── SECTIONS ─── */
.section {
  display: none;
  animation: fadeUp 0.35s ease both;
}
.section.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fire);
  font-weight: 600;
  margin-bottom: 6px;
  font-family: 'DM Mono', monospace;
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--sub);
}
.section-desc {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.6;
  margin-bottom: 22px;
}

/* ─── SIZE CARDS ─── */
.size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.size-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.size-card:hover {
  border-color: rgba(232,76,30,0.4);
  transform: translateY(-2px);
}
.size-card.selected {
  border-color: var(--fire);
  background: rgba(232,76,30,0.08);
}
.size-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 11px;
  color: var(--fire);
  font-weight: 700;
}
.size-range {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text);
}
.size-unit {
  font-size: 10px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}
.size-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--sub);
}
.size-card.selected .size-tag {
  background: rgba(232,76,30,0.15);
  color: var(--ember);
}
.custom-note {
  text-align: center;
  font-size: 12px;
  color: #98a8c2e3;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.custom-note a { color: var(--fire); text-decoration: none; }
.custom-note a:hover { text-decoration: underline; }

/* ─── 3D to UI Hover Over Effect ─── */
.button-hover-active {
    border-color: #e84d1edf !important;
    background: rgba(117, 22, 28, 0) !important;
    box-shadow: 0 0 15px rgba(255, 187, 0, 0.3);
    transition: all 0.3s ease;
}



/* ─── ROOF / OPTION TILES ─── */
.tile-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 20px;
  width: 100%;
}
.tile {
  flex: 1 1 0;
  min-width: 0;
  background: #121825;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 8px 4px 7px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.tile:hover { border-color: rgba(232,76,30,0.55); transform: translateY(-1px); }
.tile.selected,
.tile.active { border-color: var(--fire); background: rgba(232,76,30,0.08); }
.tile-icon { font-size: 16px; line-height: 1; margin-bottom: 4px; }
.tile-name {
  font-size: 12px;
  font-weight: 700;
  color: #f1f4fa;
  line-height: 1.1;
  white-space: nowrap;
}
.tile-sub  {
  font-size: 9px;
  color: #b7c3d7;
  margin-top: 3px;
  line-height: 1.1;
  white-space: nowrap;
}
.tier-row {
  margin-bottom: 0;
}
.tier-guidance {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--fire);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.tier-guidance.active {
  opacity: 1;
}
.tier-card {
  padding: 14px 10px 12px;
}
.tier-card .tile-icon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--fire);
  margin-bottom: 4px;
}
.tier-card .tier-points {
  list-style: none;
  text-align: left;
  margin: 2px 0 0;
  padding: 0;
}
.tier-card .tier-points li {
  position: relative;
  padding-left: 20px;
  font-size: 11px;
  line-height: 1.45;
  color: #eef3ff;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.tier-card .tier-points li + li {
  margin-top: 10px;
}
.tier-card .tier-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fire);
  box-shadow: var(--fire-dark);
  transform: translateY(-50%);
  animation: tierDotPulse 3s ease-in-out infinite;
}
@keyframes tierDotPulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(243, 83, 30, 0.46);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 5px 2px rgba(245, 82, 28, 0.843);
  }
}

/* ─── YES / NO ─── */
.yn-row { display: flex; gap: 10px; margin-bottom: 20px; }
.yn-btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-user-select: none;
  user-select: none;
}
.yn-btn:hover { border-color: rgba(232,76,30,0.4); }
.yn-btn.yes.selected { border-color: var(--green); background: rgba(34,197,94,0.08); color: var(--green); }
.yn-btn.no.selected  { border-color: var(--muted); background: rgba(74,85,104,0.12); color: var(--sub); }

/* Gutter yes/no selected style should be identical */
#guttersRow .yn-btn.selected {
  border-color: var(--fire);
  background: rgba(232,76,30,0.08);
  color: var(--fire);
}

/* Pool yes/no selected style should be identical */
#poolRow .yn-btn.selected {
  border-color: var(--fire);
  background: rgba(232,76,30,0.08);
  color: var(--fire);
}

/* Camera yes/no selected style should be identical */
#cameraRow .yn-btn.selected {
  border-color: var(--fire);
  background: rgba(232,76,30,0.08);
  color: var(--fire);
}

/* ─── ADD-ONS LIST ─── */
.addon-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.addon-item {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-user-select: none;
  user-select: none;
}
.addon-item:hover { border-color: rgba(232,76,30,0.3); }
.addon-item.selected { border-color: var(--fire); background: rgba(232,76,30,0.06); }
.addon-icon { font-size: 24px; flex-shrink: 0; }
.addon-info { flex: 1; }
.addon-name { font-weight: 600; font-size: 14px; }
.addon-desc { font-size: 11px; color: var(--sub); margin-top: 2px; line-height: 1.4; }
.addon-price {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ember);
  flex-shrink: 0;
}
.addon-check {
  width: 20px; height: 20px;
  border: 2px solid var(--muted);
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: #fff;
}
.addon-item.selected .addon-check {
  border-color: var(--fire);
  background: var(--fire);
}
.addon-item.selected .addon-check::after { content: '✓'; }

/* ─── TIER BADGE ─── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,76,30,0.12);
  border: 1px solid rgba(232,76,30,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ember);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.tier-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fire);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.5; transform:scale(0.8); }
}

/* ─── PRICE DISPLAY ─── */
.price-bar {
  padding: 18px 28px;
  background: var(--night);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-label { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; }
.price-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--text);
  transition: color 0.3s;
}
.price-amount.bump { animation: priceBump 0.4s ease; }
@keyframes priceBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); color: var(--ember); }
  100% { transform: scale(1); }
}
.price-tier {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--sub);
  margin-top: 2px;
}

/* ─── NAV BUTTONS ─── */
.nav-row {
  display: flex;
  gap: 10px;
  padding: 16px 28px 24px;
  background: var(--night);
}
.btn-back, .btn-next {
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 13px 20px;
  border: none;
  transition: all 0.2s;
}
.btn-back {
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--sub);
  flex-shrink: 0;
}
.btn-back:hover { color: var(--text); border-color: var(--muted); }
.btn-next {
  flex: 1;
  background: var(--fire);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.5px;
}
.btn-next:hover { background: #c73e12; transform: translateY(-1px); }
.btn-next:disabled { background: var(--muted); cursor: not-allowed; transform: none; pointer-events: none; }

/* ─── SUMMARY ─── */
.summary-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sum-key { color: var(--sub); }
.sum-val { font-weight: 600; color: var(--text); }
.sum-val.highlight { color: var(--ember); font-family: 'DM Mono', monospace; }
.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(232,76,30,0.08);
  border: 1.5px solid var(--fire);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.sum-total-label { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; }
.sum-total-price { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 2px; color: var(--fire); }

/* ─── SIMULATE BUTTON ─── */
.btn-simulate {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #8B1200, var(--fire));
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.btn-simulate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-simulate:hover::before { transform: translateX(100%); }
.btn-simulate:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,76,30,0.4); }

/* ─── DOWNLOAD QUOTA BUTTON ─── */
.btn-download {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #0A3D2E, #0E6B4A);
  border: 1.5px solid #1aad76;
  border-radius: var(--radius);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.btn-download::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-download:hover::before { transform: translateX(100%); }
.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,173,118,0.35);
  border-color: #22c55e;
}
.btn-download:disabled {
  background: var(--muted);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-dl-icon {
  font-size: 20px;
  font-family: sans-serif;
}

/* PDF generating spinner */
.btn-download.generating {
  background: linear-gradient(135deg, #0A3D2E, #0d5c3e);
  cursor: wait;
}
.btn-download.generating::after {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-order {
  width: 100%;
  padding: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.btn-order:hover { border-color: var(--fire); color: var(--fire); }

/* ─── SIMULATE OVERLAY ─── */
#sim-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,0.85);
  z-index: 100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#sim-overlay.active { display: flex; }
.sim-status {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
  color: var(--fire);
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 10px rgba(232,76,30,0.5); }
  to   { text-shadow: 0 0 30px rgba(232,76,30,0.9), 0 0 60px rgba(232,76,30,0.4); }
}
.sim-sub {
  font-size: 14px;
  color: var(--sub);
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.sim-bar { width: 300px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.sim-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fire), var(--ember));
  border-radius: 2px;
  width: 0;
}
.sim-close {
  padding: 12px 28px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  font-size: 14px;
  transition: all 0.2s;
}
.sim-close:hover { border-color: var(--green); color: var(--green); }

/* ─── V3D DEBUG LOG ─── */
#v3d-events {
  position: fixed;
  bottom: 16px; right: 16px;
  width: 260px;
  background: rgba(10,12,16,0.9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--sub);
  max-height: 120px;
  overflow-y: auto;
  display: none;
  z-index: 200;
}
.ev-line { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ev-line span { color: var(--fire); }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fire); border-radius: 2px; }

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */

/* ── TABLET LANDSCAPE (768px – 1024px) ── */
@media (max-width: 1024px) {
  :root { --w: 320px; }

  .section-title { font-size: 22px; }
  .size-range    { font-size: 17px; }
  .price-amount  { font-size: 26px; }
}

/* ── TABLET PORTRAIT (600px – 768px) ── */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    overflow-y: hidden;
    min-height: 100vh;
    height: 100vh;
  }

  #frame {
    order: 1;
    width: 100vw;
    height: 60vh;
    min-height: 320px;
  }

  #configurator {
    order: 2;
    display: flex;
    flex-direction: column;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: auto;
    max-height: 40vh;
    min-height: 34vh;
    border-right: none;
    border-bottom: none;
    border-top: 2px solid var(--border);
  }

  .main-container img {
    max-width: 160px;
    height: auto;
  }

  .cfg-body { 
    padding: 12px 14px 0px; 
    flex: 1 1 auto; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .hdr      { padding: 10px 14px 6px; }
  .progress-track { padding: 6px 14px; }
  .nav-row  { padding: 8px 14px 10px; }
  .price-bar{ padding: 6px 14px; }

  .section-label { font-size: 9px; margin-bottom: 4px; }
  .section-title { font-size: 20px; margin-bottom: 6px; }
  .section-desc  { font-size: 11px; margin-bottom: 12px; line-height: 1.3; }
  .price-amount  { font-size: 24px; }
  .hdr-brand     { font-size: 18px; }

  .size-grid { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
   .size-card  { padding: 10px 10px; border-radius: 10px; }
   .size-range { font-size: 14px; }
   .size-unit  { font-size: 8px; }
   .size-tag   { font-size: 8px; margin-top: 6px; }

   .custom-note { font-size: 11px; padding: 8px; margin-top: 6px; }

   .tile-row { gap: 5px; }
   .tile       { padding: 8px 6px; border-radius: 10px; }
   .tile-icon  { font-size: 13px; }
   .tile-name  { font-size: 10px; }
   .tile-sub   { font-size: 8px; }
   .tier-card  { padding: 10px 8px; border-radius: 10px; }
   .tier-guidance { font-size: 16px; }
   .tier-card .tile-icon { font-size: 16px; margin-bottom: 3px; }
   .tier-card .tier-points li {
     font-size: 10px;
     line-height: 1.3;
     padding-left: 16px;
   }
   .tier-card .tier-points li + li { margin-top: 6px; }
   .tier-card .tier-points li::before { width: 6px; height: 6px; }

   .yn-row     { flex-direction: column; gap: 8px; }
   .yn-btn     { padding: 12px 14px; font-size: 13px; border-radius: 10px; min-height: 52px; }

   .addon-item { padding: 10px 12px; gap: 10px; border-radius: 10px; min-height: 64px; }
   .addon-icon { font-size: 18px; }
   .addon-name { font-size: 12px; }
   .addon-desc { font-size: 9px; }

   .btn-next, .btn-back, .btn-download, .btn-order { padding: 11px 14px; font-size: 13px; border-radius: 8px; }

  .sum-row    { padding: 6px 10px; font-size: 11px; }
  .sum-total  { padding: 8px 10px; margin-bottom: 10px; }
  .sum-total-label { font-size: 12px; }
  .sum-total-price { font-size: 18px; }

  .section { display: none; }
  .section.active { display: flex; flex-direction: column; }
  #step-0 { flex: 1 1 auto; }
}

/* ── MOBILE (max 600px) ── */
@media (max-width: 600px) {
  html, body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
  body {
    flex-direction: column;
    min-height: 100vh;
  }

  #frame {
    order: 1;
    width: 100vw;
    height: 60vh;
    min-height: 320px;
  }

  #configurator {
    order: 2;
    display: flex;
    flex-direction: column;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: auto;
    max-height: 42vh;
    min-height: 34vh;
    border-right: none;
    border-bottom: none;
    border-top: 2px solid var(--border);
  }

  .main-container img {
    width: 300px;
    max-width: 90vw;
    max-height: 300px;
    height: auto;
  }

  .cfg-body  { 
    padding: 10px 12px 0px; 
    flex: 1 1 auto; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .hdr       { padding: 10px 12px 6px; }
  .progress-track { padding: 6px 12px; }
  .nav-row   { padding: 6px 12px 8px; gap: 8px; }
  .price-bar { padding: 6px 12px; }

  .hdr-brand     { font-size: 16px; }
  .hdr-sub       { font-size: 9px; }
  .price-label,
  .price-tier    { font-size: 8px; }
  .price-amount  { font-size: 22px; }
  .section-label { font-size: 8px; margin-bottom: 3px; }
  .section-title { font-size: 18px; margin-bottom: 4px; }
  .section-desc  { font-size: 10px; margin-bottom: 10px; line-height: 1.3; }

  .size-grid { grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 5px; }
  .size-card  { padding: 10px 10px; border-radius: 8px; }
  .size-range { font-size: 13px; }
  .size-unit  { font-size: 8px; }
  .size-tag   { font-size: 8px; margin-top: 4px; }

  .custom-note { font-size: 10px; padding: 6px; margin-top: 4px; }

  .tile-row { gap: 5px; }
  .tile       { padding: 8px 6px; border-radius: 8px; }
  .tile-icon  { font-size: 12px; }
  .tile-name  { font-size: 9px; }
  .tile-sub   { font-size: 7px; }
  .tier-card  { padding: 9px 8px; border-radius: 8px; }
  .tier-guidance { font-size: 15px; }
  .tier-card .tile-icon { font-size: 14px; margin-bottom: 3px; }
  .tier-card .tier-points li {
    font-size: 9px;
    line-height: 1.3;
    padding-left: 15px;
  }
  .tier-card .tier-points li + li { margin-top: 4px; }
  .tier-card .tier-points li::before { width: 5px; height: 5px; }

  .yn-row     { flex-direction: column; gap: 6px; }
  .yn-btn     { padding: 11px 14px; font-size: 12px; border-radius: 9px; min-height: 50px; }

  .addon-item { padding: 10px 11px; gap: 8px; border-radius: 9px; min-height: 62px; }
  .addon-icon { font-size: 16px; }
  .addon-name { font-size: 11px; }
  .addon-desc { font-size: 9px; }
  .addon-price { font-size: 11px; }

  .btn-next, .btn-back, .btn-download, .btn-order { padding: 10px 14px; font-size: 12px; border-radius: 9px; }
  .btn-simulate, .btn-download { padding: 10px; font-size: 12px; }

  .sum-row    { padding: 6px 9px; font-size: 10px; }
  .sum-total  { padding: 8px 10px; margin-bottom: 8px; }
  .sum-total-label { font-size: 12px; }
  .sum-total-price { font-size: 18px; }

  .sim-status { font-size: 28px; }
  .sim-bar    { width: 200px; }

  .section { display: none; }
  .section.active { display: flex; flex-direction: column; }
  #step-0 { flex: 1 1 auto; }
}

/* ── SMALL MOBILE (max 380px) ── */
@media (max-width: 380px) {
  .size-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .tile-row  { gap: 5px; }
  .hdr-brand { font-size: 16px; letter-spacing: 2px; }
  .yn-row    { flex-direction: column; }
}

/* ── LANDSCAPE ORIENTATION (Mobile, Tablet, Landscape) ── */
@media (max-height: 800px) and (orientation: landscape) {
  #configurator {
    max-height: 100vh;
    min-height: auto;
  }

  .cfg-body {
    flex: 1 1 auto !important;
    padding: 4px 10px 0px !important;
    min-height: 0;
  }

  .hdr {
    padding: 4px 10px 2px !important;
    opacity: 0.98;
  }

  .hdr-logo {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .hdr-logo svg {
    width: 18px !important;
    height: 18px !important;
  }

  .hdr-brand {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  .hdr-sub {
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
  }

  .progress-track {
    padding: 2px 10px !important;
    gap: 2px !important;
    opacity: 0.95;
    display: none !important;
  }

  .progress-step {
    height: 2px !important;
  }

  .price-bar {
    padding: 4px 10px !important;
    opacity: 0.98;
    gap: 8px !important;
  }

  .price-label {
    font-size: 7px !important;
  }

  .price-tier {
    font-size: 7px !important;
    margin-top: 0 !important;
  }

  .price-amount {
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }

  .nav-row {
    padding: 4px 10px 6px !important;
    gap: 4px !important;
    opacity: 0.98;
  }

  .btn-next,
  .btn-back,
  .btn-download,
  .btn-order {
    padding: 5px 8px !important;
    font-size: 9px !important;
    border-radius: 6px !important;
  }

  .btn-back {
    flex-shrink: 1 !important;
  }

  .section-label {
    font-size: 6px !important;
    margin-bottom: 2px !important;
  }

  .section-title {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .section-desc {
    font-size: 8px !important;
    margin-bottom: 6px !important;
  }

  .yn-btn {
    padding: 8px 10px !important;
    font-size: 10px !important;
    min-height: 34px !important;
  }

  .addon-item {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-height: 44px !important;
  }

  .addon-icon {
    font-size: 14px !important;
  }

  .addon-name {
    font-size: 9px !important;
  }

  .addon-desc {
    font-size: 7px !important;
  }

  .addon-price {
    font-size: 9px !important;
  }

  .tile {
    padding: 4px 2px !important;
  }

  .tile-icon {
    font-size: 10px !important;
  }

  .tile-name {
    font-size: 8px !important;
  }

  .tile-sub {
    font-size: 6px !important;
  }
}

/* ── COMMON ANDROID DEVICES & TABLETS (ALL ORIENTATIONS) ── */
/* Covers: Samsung Galaxy, Realme, Redmi, Vivo, and other Android phones */

/* Galaxy S21, S22, Redmi Note, Realme (360-430px wide) */
@media (max-width: 430px) and (max-height: 900px) {
  .hdr { padding: 8px 10px 4px !important; }
  .progress-track { padding: 4px 10px !important; }
  .price-bar { padding: 4px 10px !important; }
  .nav-row { padding: 4px 10px 6px !important; }
}

/* Larger Android phones (430px-600px) */
@media (min-width: 431px) and (max-width: 600px) and (max-height: 1000px) {
  .hdr { padding: 8px 12px 5px !important; }
  .progress-track { padding: 5px 12px !important; }
  .price-bar { padding: 5px 12px !important; }
  .nav-row { padding: 6px 12px 8px !important; }
}

/* Very small phones (< 360px) */
@media (max-width: 360px) {
  .hdr { padding: 6px 10px 3px !important; }
  .hdr-logo { gap: 4px !important; }
  .hdr-brand { font-size: 14px !important; }
  .hdr-sub { font-size: 7px !important; }
  .progress-track { padding: 3px 10px !important; }
  .price-bar { padding: 3px 10px !important; }
  .nav-row { padding: 3px 10px 5px !important; }
  .price-label, .price-tier { font-size: 7px !important; }
  .price-amount { font-size: 18px !important; }
}

/* Tablets in portrait (600px-768px) */
@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
  .hdr { padding: 10px 14px 6px !important; }
  .progress-track { padding: 6px 14px !important; }
  .price-bar { padding: 6px 14px !important; }
  .nav-row { padding: 6px 14px 8px !important; }
  .hdr-brand { font-size: 16px !important; }
  .price-amount { font-size: 20px !important; }
}

/* Tablets & larger phones in landscape (600px+ width, small height) */
@media (min-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  .hdr { padding: 4px 12px 2px !important; }
  .hdr-brand { font-size: 12px !important; }
  .hdr-sub { font-size: 8px !important; }
  .progress-track { display: none !important; }
  .price-bar { padding: 3px 12px !important; }
  .nav-row { padding: 3px 12px 4px !important; }
  .price-label, .price-tier { font-size: 7px !important; }
  .price-amount { font-size: 12px !important; }
  .btn-next, .btn-back { padding: 4px 8px !important; font-size: 9px !important; }
  .cfg-body { padding: 4px 10px 0px !important; }
}

/* iPad & Large tablets (max-height < 900px in landscape) */
@media (min-width: 600px) and (max-height: 900px) and (orientation: landscape) {
  .hdr { padding: 4px 10px 2px !important; }
  .progress-track { display: none !important; }
  .price-bar { padding: 3px 10px !important; }
  .nav-row { padding: 4px 10px 5px !important; }
}



/* --- Final T&C Modal Styles --- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Mobile fix: allow scrolling inside overlay */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Show modal as flex to center content — matches both JS-set 'flex' and 'block' */
.modal-overlay.active,
.modal-overlay[style*="block"],
.modal-overlay[style*="flex"],
#termsModal[style*="block"],
#termsModal[style*="flex"],
#customOrderModal[style*="block"],
#customOrderModal[style*="flex"] {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 12px;
}

.modal-content {
    position: relative;
    background-color: #161B27;
    margin: 2vh auto;
    padding: 15px 25px 15px 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 95%; 
    max-width: 850px;
    border-radius: 12px;
    color: white;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}


.close-modal {
    position: absolute;
    right: 20px; top: 10px;
    font-size: 30px; color: #666;
    cursor: pointer; line-height: 1;
}


.close-modal:hover { color: #E84C1E; }

.terms-scroll-box {
    height: 65vh;
    overflow-y: auto;
    background: #4d4d4d09;
    padding: 20px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 15px; 
    line-height: 1.5; 
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-order-scroll-box {
    max-height: 70vh;
    height: auto;
}

.custom-order-form {
    display: grid;
    gap: 12px;
}


.checkbox-container {
    display: flex; align-items: center; gap: 12px; margin-bottom: 25px; cursor: pointer;
}

.checkbox-container input { width: 20px; height: 20px; accent-color: #E84C1E; }

#confirmOrderBtn {
    width: auto;
    min-width: 200px;
    display: block;
    margin: 0 auto;
    background: #E84C1E;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    transition: 0.3s;
}

#confirmOrderBtn:disabled {
    background: #333;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Terms content styles */
.terms-content {
    padding: 30px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    text-align: left;
}

.terms-title {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 20px;
}

.terms-divider {
    border-top: 1px solid #ffffff;
    margin: 20px 0;
}

.terms-signature {
    margin-top: 30px;
}

.terms-content ul ul {
    list-style-type: circle;
    margin-left: 20px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}




#confirmOrderBtn {
    width: 42%; 
    background: #E84C1E; 
    color: white; 
    padding: 16px;
    border: none; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer;
    text-transform: uppercase; 
    letter-spacing: 1px; transition: 0.3s;
}

#confirmOrderBtn:disabled { background: #333; opacity: 0.5; cursor: not-allowed; }

/* --- Custom Order Modal Premium UI --- */
.custom-order-modal {
    display: none;
    /* align-items: flex-start + margin:auto on child = correct centered scroll */
    align-items: flex-start;
    justify-content: center;
    background: rgba(5, 8, 14, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px;
}

.custom-order-content {
    margin: auto; /* KEY: auto margin centers in scrollable flex overlay */
    width: min(780px, 94vw);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, rgba(20, 26, 38, 0.98), rgba(12, 16, 26, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    padding: 28px 28px 24px;
    font-family: 'Inter', 'Roboto', 'DM Sans', sans-serif;
}

.custom-order-title {
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #F7FAFF;
    font-size: 26px;
}

.custom-order-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: rgba(245, 248, 255, 0.75);
    font-size: 15px;
    line-height: 1.4;
}

.custom-order-note-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(245, 248, 255, 0.55);
    color: rgba(245, 248, 255, 0.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.custom-order-content .close-modal {
    color: #9AA7BC;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    line-height: 1;
    transition: all 0.2s ease;
}

.custom-order-content .close-modal:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.custom-order-scroll-box {
    max-height: unset;
    height: auto;
    background: transparent;
    border: 0;
    margin: 6px 0 14px;
    padding: 0;
    overflow: visible;
}

.custom-order-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.custom-order-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 14px;
}

.custom-order-row label {
    color: #CCD6E6;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.custom-order-row input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #F5F8FF;
    font-size: 14px;
    font-family: 'Inter', 'Roboto', 'DM Sans', sans-serif;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.custom-order-row input::placeholder {
    color: #8E9BB0;
}

.custom-order-row input:focus {
    border-color: rgba(232, 76, 30, 0.9);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(232, 76, 30, 0.2);
}

.custom-order-send-btn {
    display: block;
    width: auto;
    min-width: 220px;
    margin: 6px auto 0;
    padding: 13px 30px;
    border: 0;
    border-radius: 8px;
    background: #e84c1e;
    color: #FFFFFF;
    font-family: 'Inter', 'Roboto', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.custom-order-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(232, 76, 30, 0.2);
    filter: brightness(1.02);
}

.custom-order-send-btn:active {
    transform: translateY(0);
}

@media (max-width: 760px) {
    .custom-order-content {
        padding: 22px 16px 18px;
    }

    .custom-order-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .custom-order-send-btn {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   iPHONE 13 PRO MAX & SIMILAR LARGE PHONES (390-430px wide)
   iPhone 13 Pro Max: 428×926 pt
══════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── CONFIGURATOR PANEL ── */
  #configurator {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: auto;
    max-height: 44vh;
    min-height: 36vh;
  }

  #frame {
    width: 100vw;
    height: 56vh;
    min-height: 300px;
  }

  /* ── HEADER ── */
  .hdr {
    padding: 8px 16px 6px !important;
  }
  .hdr-brand { font-size: 17px !important; letter-spacing: 2px !important; }
  .hdr-sub   { font-size: 10px !important; }

  /* ── PROGRESS ── */
  .progress-track { padding: 5px 16px !important; }

  /* ── BODY ── */
  .cfg-body { padding: 10px 14px 0 !important; }

  /* ── STEP LABELS ── */
  .section-label { font-size: 9px !important; margin-bottom: 3px !important; }
  .section-title { font-size: 20px !important; margin-bottom: 5px !important; }
  .section-desc  { font-size: 11px !important; margin-bottom: 10px !important; line-height: 1.35 !important; }

  /* ── SIZE CARDS ── */
  .size-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-bottom: 6px !important; }
  .size-card  { padding: 11px 10px !important; border-radius: 10px !important; }
  .size-range { font-size: 15px !important; }
  .size-unit  { font-size: 9px !important; }
  .size-tag   { font-size: 9px !important; margin-top: 5px !important; }

  /* ── TILES ── */
  .tile-row { gap: 6px !important; }
  .tile       { padding: 9px 6px !important; }
  .tile-icon  { font-size: 14px !important; }
  .tile-name  { font-size: 11px !important; }
  .tile-sub   { font-size: 8px !important; }
  .tier-card  { padding: 10px 8px !important; }
  .tier-guidance { font-size: 16px !important; }
  .tier-card .tile-icon { font-size: 16px !important; }
  .tier-card .tier-points li { font-size: 10px !important; }

  /* ── YES/NO BUTTONS ── */
  .yn-row { flex-direction: column !important; gap: 7px !important; }
  .yn-btn  { padding: 13px 14px !important; font-size: 13px !important; min-height: 50px !important; }

  /* ── ADD-ONS ── */
  .addon-item  { padding: 10px 12px !important; gap: 10px !important; }
  .addon-icon  { font-size: 20px !important; }
  .addon-name  { font-size: 12px !important; }
  .addon-desc  { font-size: 9px !important; }
  .addon-price { font-size: 12px !important; }

  /* ── PRICE BAR ── */
  .price-bar    { padding: 6px 16px !important; }
  .price-label  { font-size: 9px !important; }
  .price-tier   { font-size: 9px !important; }
  .price-amount { font-size: 24px !important; }

  /* ── NAV BUTTONS ── */
  .nav-row { padding: 7px 14px 10px !important; gap: 8px !important; }
  .btn-next, .btn-back, .btn-download, .btn-order {
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-radius: 9px !important;
  }

  /* ── SUMMARY ── */
  .sum-row        { padding: 7px 10px !important; font-size: 11px !important; }
  .sum-total      { padding: 9px 12px !important; margin-bottom: 10px !important; }
  .sum-total-label { font-size: 13px !important; }
  .sum-total-price { font-size: 20px !important; }

  /* ══ TERMS MODAL (termsModal) ══ */
  #termsModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 16px !important;
    border-radius: 12px !important;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #termsModal .modal-title {
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
    padding-right: 36px;
    margin-bottom: 8px;
  }

  #termsModal .terms-scroll-box {
    height: auto !important;
    max-height: 48vh !important;
    flex: 1;
    padding: 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #termsModal .terms-content {
    padding: 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #termsModal .terms-title {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  #termsModal .terms-divider {
    margin: 12px 0 !important;
  }

  #termsModal .checkbox-container {
    margin: 10px 0 8px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  #termsModal #confirmOrderBtn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
  }

  /* ══ EMAIL / CUSTOM ORDER MODAL ══ */
  #customOrderModal {
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 16px 10px !important;
  }

  .custom-order-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 11px 12px !important;
    border-radius: 12px !important;
    /* flex column: form scrolls, button stays at bottom */
    display: flex !important;
    flex-direction: column !important;
    max-height: 88vh !important;
    overflow: hidden !important;
  }

  .custom-order-title {
    font-size: 14px !important;
    padding-right: 34px;
    margin-bottom: 3px !important;
    letter-spacing: 0.6px !important;
  }

  .custom-order-note {
    font-size: 11px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
  }

  .custom-order-content .close-modal {
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
    z-index: 10;
  }

  .custom-order-scroll-box {
    flex: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .custom-order-row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .custom-order-row label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
  }

  .custom-order-row input {
    min-height: 36px !important;
    font-size: 14px !important; /* min 14px prevents iOS zoom */
    padding: 7px 10px !important;
    border-radius: 6px !important;
  }

  .custom-order-form {
    gap: 7px !important;
  }

  .custom-order-send-btn {
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding: 10px !important;
    font-size: 12px !important;
    margin-top: 7px !important;
    border-radius: 7px !important;
    letter-spacing: 0.4px !important;
  }
}

/* ══════════════════════════════════════════════════════
   GENERAL MODAL FIX: any mobile ≤ 600px
   Ensures close button is always visible & clickable
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-overlay {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 8px !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  .close-modal {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 28px !important;
    color: #aaa !important;
    z-index: 20 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    cursor: pointer !important;
  }

  .terms-scroll-box {
    height: auto !important;
    max-height: 45vh !important;
    font-size: 12px !important;
    padding: 12px !important;
  }

  .modal-title {
    font-size: 18px !important;
    padding-right: 40px;
    margin-bottom: 8px !important;
  }

  #confirmOrderBtn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 14px !important;
  }

  .checkbox-container {
    margin-bottom: 10px !important;
    font-size: 13px !important;
  }

  .terms-content {
    padding: 10px !important;
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════
   FIREFOX PERFORMANCE FIXES
   Firefox struggles with backdrop-filter, animating background-position, and animating box-shadow.
══════════════════════════════════════════════════════ */
@-moz-document url-prefix() {
  /* Disable backdrop filters */
  .modal-overlay,
  #sim-overlay,
  .custom-order-modal {
    backdrop-filter: none !important;
    background-color: rgba(5, 8, 14, 0.98) !important;
  }

  /* Disable non-hardware-accelerated animations */
  #configurator::before {
    animation: none !important;
    background-position: 100% 50% !important;
  }
  
  .tier-card .tier-points li::before {
    animation: none !important;
  }
}