/*
Theme Name: White Mountains Auto
Author: White Mountains
Version: 2.0 Clean (deduped)
Text Domain: wma
*/

*{box-sizing:border-box}
body{margin:0}

/* ===== Marketing Font ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&family=Rubik:wght@400;600;800&display=swap');

:root{
  --wma-font-marketing-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wma-font-marketing-en: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Apply font by direction/lang (safe) */
html[lang^="ar"], body[dir="rtl"]{ font-family: var(--wma-font-marketing-ar); }
html[lang^="en"], body[dir="ltr"]{ font-family: var(--wma-font-marketing-en); }

/* =====================================================
   WMA PEACE SECTION (CLEAN GLASS MODERN)
===================================================== */
.wma-peace{
  position:relative;
  margin:30px auto;
  padding:28px 22px;
  max-width:1180px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 25px 70px rgba(0,0,0,.12);
  overflow:hidden;
}

.wma-peace__wrap{
  padding:18px;
  border-radius:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.wma-peace__head{text-align:center;margin-bottom:18px}

.wma-peace__title{
  font-size:clamp(26px,3.2vw,42px);
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(10,25,55,.92);
}

.wma-peace__line{
  width:90px;
  height:4px;
  margin:12px auto;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(12,120,255,0),rgba(12,120,255,.75),rgba(12,120,255,0));
}

.wma-peace__sub{
  max-width:720px;
  margin:0 auto;
  font-size:14px;
  line-height:1.7;
  color:rgba(30,55,90,.75);
}

/* Cards */
.wma-peace__marquee{ margin-top:20px; overflow:hidden; }
.wma-peace__track{ display:flex; gap:14px; }

.wma-peace__card{
  min-width:210px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.40);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wma-peace__card:hover{
  transform:translateY(-4px);
  border-color:rgba(12,120,255,.45);
  box-shadow:0 22px 40px rgba(0,0,0,.16);
}

.wma-peace__icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#00c6ff,#1e90ff);
  color:#fff;
  margin-bottom:10px;
}
.wma-peace__label{ font-size:15px; font-weight:800; }

/* Mobile Snap */
@media (hover:none), (pointer:coarse){
  .wma-peace__marquee{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .wma-peace__card{ scroll-snap-align:start; }
}

/* =====================================================
   HERO MOBILE ROUND (SAFE + iOS clip)
===================================================== */
@media (max-width:920px){
  main > section.wmx-hero.wmx-hero--fullbleed{
    border-radius:28px !important;
    overflow:hidden !important;
    clip-path: inset(0 round 28px) !important;
  }
  main > section.wmx-hero.wmx-hero--fullbleed::before,
  main > section.wmx-hero.wmx-hero--fullbleed::after,
  main > section.wmx-hero.wmx-hero--fullbleed .wmx-hero-bg,
  main > section.wmx-hero.wmx-hero--fullbleed .wmx-hero-grid,
  main > section.wmx-hero.wmx-hero--fullbleed .wmx-hero-overlay,
  main > section.wmx-hero.wmx-hero--fullbleed .wmx-hero-dots{
    border-radius: inherit !important;
  }
}
@media (max-width:420px){
  main > section.wmx-hero.wmx-hero--fullbleed{
    border-radius:22px !important;
    clip-path: inset(0 round 22px) !important;
  }
}

/* =====================================================
   SERVICE (HOME) — MOBILE FINAL (DEDUPED)
   - Step bar inside card, wraps nicely
   - Per-step titles (1/2/3)
   - Plate box shrink + no overflow
   - Move section up slightly
   - Hide 🔧 bubble/tool
===================================================== */
@media (max-width:900px){

  /* spacing: title higher & separated */
  .wmx-serviceHeading{
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    padding-top: 6px !important;
  }
  .wmx-serviceHeading__title{
    transform: translateY(-10px) !important;
  }

  /* move section up a bit for balance */
  .wmx-service{
    margin-top: -14px !important;
    padding-top: 10px !important;
    background: transparent !important;
    position: relative;
    z-index: 1;
  }

  .wmx-service__wizardInner{
    position: relative;
    z-index: 5;
    padding:26px 20px !important;
    border-radius:28px !important;
    background:rgba(15,35,60,.55) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
    box-shadow:0 30px 60px rgba(0,0,0,.35) !important;

    /* IMPORTANT: unify size + prevent anything escaping */
    overflow: hidden !important;
    margin-top: -10px !important;
  }

  /* Remove bottom progress */
  .wmx-service__steps,
  .wmx-service__progress{
    display:none !important;
  }

  /* TOP step bar (dynamic / wraps, no overflow) */
  .wmx-service__hud{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:8px !important;
    margin:0 0 18px 0 !important;
    border-radius:18px !important;
    box-sizing:border-box !important;

    background: linear-gradient(135deg,#183d5f,#1f5f8f);
    overflow:hidden !important;
  }

  .wmx-service__stepPill{
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width:0 !important;
    padding:10px 8px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-align:center !important;
    color:#fff !important;
    background:rgba(255,255,255,.15) !important;

    white-space: normal !important; /* allow wrap */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .wmx-service__stepPill.is-active{
    background:linear-gradient(135deg,#00c6ff,#1e90ff) !important;
    box-shadow:0 8px 20px rgba(0,150,255,.45) !important;
  }

  @media (max-width:380px){
    .wmx-service__stepPill{
      font-size:11.5px !important;
      padding:9px 7px !important;
    }
  }

  /* Per-step titles */
  .wmx-service__panel::before{ content:"" !important; }

  .wmx-service__panel[data-step="1"]::before,
  .wmx-service__panel[data-step="2"]::before,
  .wmx-service__panel[data-step="3"]::before{
    display:block !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:10px 0 14px auto !important; /* right */
    padding:7px 12px !important;
    border-radius:999px !important;
    font-weight:900 !important;
    font-size:13px !important;

    color:#0b4f7a !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(255,255,255,.45) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
  }

  .wmx-service__panel[data-step="1"]::before{ content:"اختر الخدمة المطلوبة" !important; }
  .wmx-service__panel[data-step="2"]::before{ content:"ادخل بيانات السيارة" !important; }
  .wmx-service__panel[data-step="3"]::before{ content:"ادخل بيانات التواصل" !important; }

  /* RTL chip layout */
  body[dir="rtl"] .wmx-service__chip{
    flex-direction:row-reverse !important;
    text-align:right !important;
  }
  body[dir="rtl"] .wmx-service__chipIcon{
    margin-right:10px !important;
    margin-left:0 !important;
  }

  /* Plate box shrink / no overflow */
  .wmx-plate{
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:10px 10px !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .wmx-plate input,
  .wmx-plate button,
  .wmx-plate [class*="box"],
  .wmx-plate [class*="cell"]{
    height:44px !important;
    min-width:44px !important;
    border-radius:14px !important;
  }

  .wmx-plate input[type="text"],
  .wmx-plate input[type="number"]{
    max-width:110px !important;
  }

  .wmx-plate__hint{
    font-size:12px !important;
    line-height:1.4 !important;
    opacity:.85 !important;
    text-align:center !important;
  }

  /* Hide 🔧 bubble/tool (broad but scoped to wizardInner) */
  .wmx-service__wizardInner .wmx-service__tool,
  .wmx-service__wizardInner .wmx-service__toolBtn,
  .wmx-service__wizardInner .wmx-service__toolIcon,
  .wmx-service__wizardInner .wmx-service__toolWrap,
  .wmx-service__wizardInner .wmx-service__floatingTool,
  .wmx-service__wizardInner [aria-label*="tool"],
  .wmx-service__wizardInner [aria-label*="أداة"],
  .wmx-service__wizardInner [class*="tool"],
  .wmx-service__wizardInner [class*="wrench"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  html,body{ overflow-x:hidden !important; }
}

/* =====================================================
   FOOTER — show only on homepage
===================================================== */
body:not(.home) footer,
body:not(.home) .wmx-neo-footer{
  display:none !important;
}

/* =========================================================
   WMX Vehicles (Home) — Mobile "Neo List" v1
   هدف التصميم:
   - فصل النصوص بالكامل عن الصورة (بدون تداخل/طبقات على الصورة)
   - شكل App-like قوي: صورة مصغرة + معلومات + أزرار كاملة
   - RTL جاهز
========================================================= */

@media (max-width: 900px){

  /* Section spacing */
  .wmx-section--vehicles{
    padding: 14px 12px 10px !important;
  }
  .wmx-section--vehicles > h2{
    margin: 10px 0 6px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
  }
  .wmx-section--vehicles > .lead{
    margin: 0 0 14px !important;
    opacity: .78;
  }

  /* Grid → stacked list */
  .wmx-grid-vehicles{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Card */
  .wmx-veh{
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.58) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.10) !important;
    overflow: hidden !important;
  }

  /* Thumbnail image (no text overlay) */
  .wmx-veh-img{
    flex: 0 0 124px !important;
    width: 124px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 20px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    overflow: hidden !important;
    outline: 1px solid rgba(255,255,255,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 26px rgba(0,0,0,.10);
  }
  .wmx-veh-img::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(80px 80px at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 35%);
    opacity: .9;
    pointer-events:none;
  }

  /* Body */
  .wmx-veh-body{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 2px 2px !important;
  }

  .wmx-veh-title{
    margin: 2px 0 0 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    color: rgba(10,25,55,.92) !important;
  }

  /* Pills / meta */
  .wmx-veh-meta{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .wmx-veh-pill{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: rgba(20,40,70,.85) !important;
    white-space: nowrap !important;
  }

  /* Price chip (separate from image) */
  .wmx-veh-price{
    align-self: flex-start !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(120px 80px at 20% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
      linear-gradient(135deg, rgba(0,198,255,.18), rgba(30,144,255,.20)) !important;
    border: 1px solid rgba(12,120,255,.18) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
    color: rgba(10,25,55,.92) !important;
  }
  .wmx-veh-price strong{
    display:block;
    font-size: 18px !important;
    letter-spacing: .2px;
    line-height: 1.1;
  }
  .wmx-veh-price span,
  .wmx-veh-price small{
    opacity: .78;
    font-weight: 800;
    font-size: 12px;
  }

  /* Actions */
  .wmx-veh-actions{
    display: flex !important;
    gap: 10px !important;
    margin-top: auto !important;
  }
  .wmx-veh-actions a{
    flex: 1 1 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .wmx-veh-actions a:first-child{
    background: linear-gradient(135deg,#00c6ff,#1e90ff) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(0,150,255,.30);
  }
  .wmx-veh-actions a:last-child{
    background: rgba(255,255,255,.78) !important;
    color: rgba(10,25,55,.92) !important;
    border-color: rgba(0,0,0,.08) !important;
  }

  /* RTL layout */
  body[dir="rtl"] .wmx-veh{
    flex-direction: row-reverse !important;
  }
  body[dir="rtl"] .wmx-veh-body{
    text-align: right !important;
  }
}

/* Motion: subtle entrance (optional, safe) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .wmx-veh{
    opacity: 0;
    transform: translateY(12px);
    animation: wmxVehIn .55s ease forwards;
  }
  .wmx-veh:nth-child(2){ animation-delay: .06s; }
  .wmx-veh:nth-child(3){ animation-delay: .12s; }
  .wmx-veh:nth-child(4){ animation-delay: .18s; }
  @keyframes wmxVehIn{
    to{ opacity: 1; transform: translateY(0); }
  }
}