/* === v4.1.1 Mobile Specific Tweaks === */

/* Stack color choices (step 2) and stiffness (step 4) vertically on narrow screens */
@media (max-width: 480px) {
  .step[data-step="2"] .radio,
  .step[data-step="4"] .radio {
    display: block !important;
    margin: 8px 0 !important;
    width: 100% !important;
  }
  .step[data-step="2"] .custom-color {
    display: block !important;
  }
  .step[data-step="2"] .custom-color input[type="text"] {
    width: 100%;
    margin-top: 6px;
  }

  /* Bigger WhatsApp send button */
  #submitBtn.btn.whatsapp {
    font-size: 1.05rem;
    padding: 14px 18px;
  }
  #submitBtn.btn.whatsapp .wa-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Make the WhatsApp button nicely big on all screens */
#submitBtn.btn.whatsapp {
  min-height: 48px;
  border-radius: 999px;
}

/* === Global font & mobile tweaks (v4.1) === */
:root { --font-ui: 'Alef', Arial, Helvetica, sans-serif; }
html, body { font-family: var(--font-ui); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
* { font-family: inherit; box-sizing: border-box; }

/* Buttons & model chooser inherit Alef */
.mode-chooser, .mode-option, .btn, label, input, textarea, select {
  font-family: inherit;
}

/* Back to models buttons pinned to the RIGHT */
#backToGallery.back-floating,
#backToExistingFab.fab {
  left: auto !important;
  right: 12px !important;
}

/* Ensure "back-floating" looks good on mobile */
.back-floating {
  position: fixed;
  bottom: 16px;
  padding: 10px 14px;
  line-height: 1.2;
  border-radius: 999px;
  z-index: 1000;
}

/* Make steps nav more touch-friendly */
.footer-nav {
  gap: 8px;
}
.footer-nav .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Inputs: bigger touch targets on mobile */
input, textarea, select {
  min-height: 44px;
}

/* Grids stack on small screens */
@media (max-width: 480px) {
  .grid { display: grid; grid-template-columns: 1fr !important; gap: 12px; }
  .price-box .row span:last-child { font-weight: 700; }
  .hero .overlay h1 { font-size: 1.25rem; }
  .hero .overlay p  { font-size: 0.95rem; }
  .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mode-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mode-option { padding: 10px; }
  .card { padding: 12px; }
}

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#fff1f2,#f0f9ff,#ecfdf5);font-family: 'Alef', Arial, Helvetica, sans-serif;margin:0 auto;padding:24px}
.site-header{text-align:center;margin-bottom:16px}
.site-header h1{margin:0;font-size:40px}
.site-header p{margin:8px 0 0;font-size:18px}

.hero{position:relative;width:100%;max-height:420px;overflow:hidden;border-radius:18px;margin-bottom:16px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hero img{width:100%;height:auto;display:block}
.hero .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;text-align:center;padding:0 12px}
.hero .overlay h1{font-size:32px;margin:0}
.hero .overlay p{font-size:18px;margin:6px 0 0 0}
@media(max-width:640px){.hero .overlay h1{font-size:24px}.hero .overlay p{font-size:14px}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0;margin:16px 0}
.steps li{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:8px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer}
.steps li.active{background:#d1fae5;border-color:#6ee7b7}

.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.08)}

textarea,input[type=text],input[type=number],input[type=email],input[type=tel]{width:100%;border:1px solid #e5e7eb;border-radius:14px;padding:10px;outline:none}
textarea:focus,input:focus{box-shadow:0 0 0 3px rgba(16,185,129,.25)}
input[type="file"]::file-selector-button{font-family: 'Alef', Arial, Helvetica, sans-serif;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:14px;padding:10px;margin:8px 0;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.radio.disabled{opacity:.6}
.custom-color{border:1px dashed #e5e7eb;border-radius:16px;padding:12px;margin-top:8px}
.input{margin-top:8px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.small{font-size:12px}
.tiny{font-size:11px}
.muted{color:#6b7280}
.center{text-align:center}
.mt{margin-top:12px}

.preview{max-height:220px;border:1px solid #e5e7eb;border-radius:14px;margin-top:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}

.price-box{background:#ffe4e6;border:1px solid #fecdd3;border-radius:16px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.price-box .row{display:flex;justify-content:space-between;margin:4px 0}
.price-box .total{font-weight:700;font-size:18px}

.notice{border-radius:16px;padding:12px;border:1px solid #e5e7eb}
.notice.amber{background:#fffbeb}
.notice.sky{background:#f0f9ff;margin-top:8px}

.footer-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.btn{border:none;border-radius:16px;padding:10px 18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);font-weight:600}
.btn.sky{background:#bae6fd}
.btn.green{background:#bbf7d0}
.btn.whatsapp{background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-family: 'Alef', Arial, Helvetica, sans-serif;cursor:not-allowed}

.note-red{color:#dc2626}

.mode-box{display:flex;gap:12px;margin-bottom:12px}
.models-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.models-grid{grid-template-columns:1fr}}
.model-card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);cursor:pointer}
.model-card.selected{outline:3px solid #bbf7d0}
.model-card img{display:block;width:100%;height:160px;object-fit:cover}
.model-card .info{padding:10px}
.model-card h4{margin:0 0 6px 0;font-size:16px}
.model-card p{margin:0;font-size:13px;color:#374151}

.thankyou{margin-top:12px;background:#ecfdf5;border:1px solid #d1fae5;padding:12px;border-radius:14px;font-weight:600}


/* Big chooser under hero */
.mode-chooser{display:flex;gap:12px;justify-content:center;margin:14px 0}
.mode-option{flex:1;max-width:420px;border:none;border-radius:18px;padding:16px 20px;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.10)}
.mode-option.active{background:#bbf7d0}
.mode-option.alt{background:#bae6fd}

/* Gallery grid */
.models-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media(max-width:700px){.models-grid{grid-template-columns:1fr}}
.model-card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.model-card img{display:block;width:100%;height:180px;object-fit:cover}
.model-card .info{padding:10px}
.model-card h4{margin:0 0 6px 0;font-size:16px}
.model-card p{margin:0;font-size:13px;color:#374151}


/* Big chooser + gallery */
.mode-chooser{display:flex;gap:12px;justify-content:center;margin:14px 0}
.mode-option{flex:1;max-width:420px;border:none;border-radius:18px;padding:16px 20px;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.10)}
.mode-option.active{background:#bbf7d0}
.mode-option.alt{background:#bae6fd}

.models-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media(max-width:700px){.models-grid{grid-template-columns:1fr}}
.model-card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.model-card img{display:block;width:100%;height:180px;object-fit:cover}
.model-card .info{padding:10px}
.model-card h4{margin:0 0 6px 0;font-size:16px}
.model-card p{margin:0;font-size:13px;color:#374151}


/* Wizard single-step behavior */
.step{display:none}
.step.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.steps li.active{background:#bbf7d0;border-color:#86efac;font-weight:700}

/* Hide next on last step handled by JS; ensure buttons spacing */
.footer-nav .btn{min-width:96px}


/* Validation styles */
.field-error{color:#dc2626;font-size:12px;margin-top:6px}
.invalid{outline:2px solid #fecaca; background:#fff1f2}


/* Smaller thumbnail preview for step 1 upload */
.preview{max-height:120px}


/* Floating back-to-existing button */
.fab{position:fixed;inset-inline-end:16px;inset-block-end:16px;padding:10px 14px;border:none;border-radius:999px;background:#bae6fd;color:#111;box-shadow:0 6px 16px rgba(0,0,0,.18);font-weight:700;cursor:pointer;z-index:50}
.fab:hover{filter:brightness(0.98)}


/* --- Big mode buttons: tactile styles --- */
.mode-option{
  appearance: button;
  border:2px solid #a7f3d0; /* soft green border */
  transition: transform .06s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.mode-option:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12) }
.mode-option:active{ transform: translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.12) }
.mode-option.active{
  background:#bbf7d0; /* green pastel */
  border-color:#34d399; /* emerald */
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
}

/* --- Selectable model cards --- */
.model-card{ position:relative; }
.model-card.selected{ outline:3px solid #34d399; box-shadow:0 0 0 4px rgba(52,211,153,.15) }
.model-card .checkmark{
  position:absolute; top:10px; left:10px; width:22px; height:22px; border-radius:50%;
  background:#10b981; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.2); display:none;
}
.model-card.selected .checkmark{ display:flex }

/* --- Floating back-to-gallery (green like models) --- */
.back-floating{
  position:fixed; inset-inline-start:16px; inset-block-end:16px;
  background:#bbf7d0; color:#064e3b; border:2px solid #34d399;
  padding:10px 14px; border-radius:16px; cursor:pointer; z-index:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.15); font-weight:700;
}
.back-floating:hover{ transform: translateY(-1px) }
.back-floating:active{ transform: translateY(0) }


/* --- UI refinement (v2.1) --- */
/* Neutral base look */
.mode-option{
  border-color:#e5e7eb; /* neutral */
}
/* Pressed/selected (Existing) stays green */
.mode-option.active{
  background:#bbf7d0;
  border-color:#34d399;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
}
/* "Create New" (blue) border */
.mode-option.alt{
  border-color:#93c5fd; /* light sky blue */
  background:#bae6fd;
}

/* Floating back button on RIGHT side (RTL-friendly) */
.back-floating{
  inset-inline-start: auto;
  inset-inline-end:16px;
}


/* --- Selected model: refined visual touch --- */
.model-card{
  transition: transform .12s ease, box-shadow .15s ease, outline-color .2s ease, background .2s ease;
}
.model-card:hover{ transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10) }
.model-card.selected{
  background:linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
  outline:3px solid #34d399;
  box-shadow:0 10px 24px rgba(52,211,153,.18);
  transform: translateY(-1px);
}
.model-card.selected h4{ color:#065f46 }
.model-card.selected p{ color:#065f46 }


/* v2.3.3 — clear circular price badge */
.model-card{ position:relative }
.price-badge{
  position:absolute; top:10px; left:10px;
  min-width:52px; height:52px; padding:0 10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #34d399 0%, #10b981 60%, #059669 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; box-shadow:0 8px 18px rgba(5,150,105,.35);
  border:2px solid rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.25);
  z-index: 2;
}
.price-badge.small{ min-width:40px; height:40px; font-size:13px }

.logo-3m-wrap{display:flex;justify-content:center;align-items:center;margin:8px 0;}
.logo-3m{width:clamp(220px,40vw,520px);height:auto;display:block;}
@media (max-width:640px){.logo-3m{width:clamp(200px,70vw,420px);}}


/* v5.9 hero overlay mobile: move text to lower third */
@media (max-width: 768px){
  .hero .overlay{
    justify-content: flex-end !important;
    padding-bottom: 12vh !important;
    padding-top: 2vh !important;
    text-align: center;
  }
}


/* v5.9.1 hero overlay mobile: push title to bottom */
@media (max-width: 768px){
  .hero .overlay{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:center !important;
    padding-bottom: 24vh !important;
    padding-top: 0 !important;
  }
  .hero .overlay *{
    margin-top: 0 !important;
  }
}
@media (max-width: 480px){
  .hero .overlay{ padding-bottom: 28vh !important; }
}


/* v5.9.2 hero overlay mobile: hard anchor to bottom */
@media (max-width: 768px){
  .hero{ position: relative !important; }
  .hero .overlay{
    position: absolute !important;
    left: 0; right: 0;
    bottom: 8vh !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 12px !important;
    transform: none !important;
    z-index: 3 !important;
    text-align: center !important;
  }
}


/* v5.9.3 hero overlay mobile: 40px lower + no gray background */
@media (max-width: 768px){
  .hero{ position: relative !important; }
  .hero .overlay{
    position: absolute !important;
    left: 0; right: 0;
    bottom: calc(8vh - 40px) !important; /* move further down by 40px */
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 12px !important;
    background: transparent !important; /* remove any background */
    text-align: center !important;
    z-index: 3 !important;
  }
  .hero .overlay *, .hero .overlay *:before, .hero .overlay *:after{
    background: transparent !important;
  }
}
