/* 2Wheels.ME Market V2 — calm, premium, mobile-first release surface. */

:root{
  --v2-dock-height:70px;
  --v2-page-width:760px;
  --v2-card-radius:20px;
}

html[data-experience="v2-reboot"] body{
  letter-spacing:0;font-size:15px;
}
html[lang="ar"][data-experience="v2-reboot"] body,
html[lang="ar"][data-experience="v2-reboot"] button,
html[lang="ar"][data-experience="v2-reboot"] input,
html[lang="ar"][data-experience="v2-reboot"] select,
html[lang="ar"][data-experience="v2-reboot"] textarea{font-family:'Alexandria',system-ui,-apple-system,sans-serif!important}
html[lang="en"][data-experience="v2-reboot"] body,
html[lang="en"][data-experience="v2-reboot"] button,
html[lang="en"][data-experience="v2-reboot"] input,
html[lang="en"][data-experience="v2-reboot"] select,
html[lang="en"][data-experience="v2-reboot"] textarea{font-family:'Inter',system-ui,-apple-system,sans-serif!important}
html[data-experience="v2-reboot"]{
  --fs-xs:12px;--fs-sm:13.5px;--fs-base:15px;--fs-md:16.5px;
  --fs-lg:19px;--fs-xl:23px;--fs-2xl:28px;--fs-3xl:34px;
}

html[data-experience="v2-reboot"] .phone{
  min-height:100dvh;
  background:var(--bg);
}

/* Header: one clear brand rail with controls that never collide on small iPhones. */
html[data-experience="v2-reboot"] .topbar{
  min-height:calc(74px + env(safe-area-inset-top))!important;
  padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 86%,transparent)!important;
  background:color-mix(in srgb,var(--bg) 90%,transparent)!important;
  box-shadow:0 8px 28px color-mix(in srgb,#000 9%,transparent)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important;
}
html[data-experience="v2-reboot"] .topbar-inner{
  width:100%;display:flex!important;align-items:center;justify-content:space-between;
  gap:clamp(8px,2.4vw,16px)!important;direction:rtl;
}
html[data-experience="v2-reboot"] .topbar-identity{
  flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:9px;direction:rtl;
}
html[data-experience="v2-reboot"] .topbar-identity .coin.logo-mark{
  width:40px;height:40px;min-width:40px;flex-basis:40px;border-radius:13px;
  box-shadow:0 7px 18px color-mix(in srgb,var(--brand-fill) 18%,transparent);
}
html[data-experience="v2-reboot"] .brand-main-line strong{
  font-size:clamp(17px,5.1vw,21px);letter-spacing:.68px;
}
html[data-experience="v2-reboot"] .brand-domain{font-size:clamp(10px,3vw,12px)}
html[data-experience="v2-reboot"] .topnav{display:none!important}
html[data-experience="v2-reboot"] .topbar-actions{
  flex:0 1 210px;min-width:0;max-width:220px;display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(1px,1vw,5px)!important;direction:rtl;
}
html[data-experience="v2-reboot"] .topbar-actions .iconbtn{
  width:35px;height:38px;min-width:35px;flex:0 0 35px;border:0;border-radius:11px;
  background:transparent;color:var(--text);
}
html[data-experience="v2-reboot"] .topbar-actions .iconbtn:active{background:var(--surface-2)}
html[data-experience="v2-reboot"] #langBtn{font-size:10px!important;font-weight:850}
html[data-experience="v2-reboot"] #countryBtn{font-size:16px!important}

/* Page rhythm and readable controls. */
html[data-experience="v2-reboot"] .scroll{
  padding-top:18px!important;
  padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
}
html[data-experience="v2-reboot"] .screen{max-width:var(--v2-page-width);margin-inline:auto}
html[data-experience="v2-reboot"] .h1{font-size:clamp(26px,7vw,34px)!important;line-height:1.25}
html[data-experience="v2-reboot"] .sub{font-size:12.5px!important;line-height:1.75}
html[data-experience="v2-reboot"] .field>label{
  margin-bottom:8px!important;color:var(--text)!important;font-size:13px!important;font-weight:780!important;line-height:1.55;
}
html[data-experience="v2-reboot"] input,
html[data-experience="v2-reboot"] select,
html[data-experience="v2-reboot"] textarea{font-size:16px!important}
html[data-experience="v2-reboot"] .lead,
html[data-experience="v2-reboot"] .trade-hint,
html[data-experience="v2-reboot"] .listing-responsibility small{font-size:12px!important;line-height:1.75!important}

/* Home: less decoration, stronger hierarchy. */
html[data-experience="v2-reboot"] .v2-search-wrap,
html[data-experience="v2-reboot"] .v2-intents,
html[data-experience="v2-reboot"] .v3-trust-strip,
html[data-experience="v2-reboot"] .v2-ad,
html[data-experience="v2-reboot"] .v2-latest,
html[data-experience="v2-reboot"] .v2-sell-card,
html[data-experience="v2-reboot"] .v2-assistant,
html[data-experience="v2-reboot"] .v2-services{
  scroll-margin-top:calc(84px + env(safe-area-inset-top));
}
html[data-experience="v2-reboot"] .v2-intents{
  padding:7px!important;border-radius:18px!important;background:var(--surface)!important;
}
html[data-experience="v2-reboot"] .v2-intent{min-height:68px!important;border-radius:14px!important}
html[data-experience="v2-reboot"] .v2-intent span{font-size:11px!important}
html[data-experience="v2-reboot"] .v3-trust-strip{gap:8px}
html[data-experience="v2-reboot"] .v3-trust-strip>div{
  min-height:82px;padding:12px 9px;border-radius:16px;background:var(--surface);
}
html[data-experience="v2-reboot"] .v3-trust-strip strong{font-size:10.5px!important}
html[data-experience="v2-reboot"] .v3-trust-strip small{font-size:8.5px!important;line-height:1.5}

/* Marketplace filters: one deliberate panel instead of scattered pills. */
html[data-experience="v2-reboot"] .market-filter-deck{
  margin:14px 0;padding:15px;border-radius:var(--v2-card-radius);
  background:var(--surface);box-shadow:0 10px 26px color-mix(in srgb,#000 8%,transparent);
}
html[data-experience="v2-reboot"] .market-filter-deck-head>span{font-size:14px}
html[data-experience="v2-reboot"] .market-filter-deck-head>small{font-size:9.5px}
html[data-experience="v2-reboot"] .market-filter-deck-head{
  width:100%;min-height:42px;margin:0;padding:0;border:0;background:transparent;color:inherit;
  font-family:inherit;text-align:start;cursor:pointer;
}
html[data-experience="v2-reboot"] .market-filter-deck-head:focus-visible{outline:2px solid var(--brand-fill);outline-offset:5px;border-radius:8px}
html[data-experience="v2-reboot"] .market-filter-deck-action{display:flex;align-items:center;gap:7px;color:var(--muted)}
html[data-experience="v2-reboot"] .market-filter-deck-action svg{width:18px;height:18px;transition:transform .24s ease}
html[data-experience="v2-reboot"] .market-filter-deck:not(.is-collapsed) .market-filter-deck-action svg{transform:rotate(180deg)}
html[data-experience="v2-reboot"] .market-filter-deck-body{padding-top:12px}
html[data-experience="v2-reboot"] .market-filter-deck-body[hidden]{display:none!important}
html[data-experience="v2-reboot"] .market-filter-caption{font-size:10.5px}
html[data-experience="v2-reboot"] .market-filter-deck #catChips .chip,
html[data-experience="v2-reboot"] .market-filter-deck #sortChips .chip{
  min-height:44px!important;border-radius:13px!important;font-size:10.5px!important;
}
html[data-experience="v2-reboot"] .market-filter-deck .market-filter-toggle{
  min-height:44px!important;height:44px!important;border-radius:13px!important;font-size:10.5px!important;
}

/* Seasonal launch banner — generated background plus real, accessible copy. */
html[data-experience="v2-reboot"] .v2-season-banner{
  order:4!important;
  min-height:128px!important;height:clamp(128px,34vw,158px)!important;border-radius:20px!important;
  background:#090a0d url('assets/banners/season-ready-v2.jpg') center/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
  animation:v2-season-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
html[data-experience="v2-reboot"] .v2-latest{order:5!important}
html[data-experience="v2-reboot"] .v2-season-banner::after{
  background:linear-gradient(90deg,rgba(4,5,7,.9),rgba(4,5,7,.5) 55%,rgba(4,5,7,.08))!important;
}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-hit{background:transparent!important}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-hit::before{display:none!important}
html[dir="rtl"][data-experience="v2-reboot"] .v2-season-banner::after{
  background:linear-gradient(270deg,rgba(4,5,7,.9),rgba(4,5,7,.5) 55%,rgba(4,5,7,.08))!important;
}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-label{
  font-size:8px!important;letter-spacing:1.15px;color:rgba(255,255,255,.7);
  text-shadow:0 1px 5px rgba(0,0,0,.78);
}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-copy{bottom:18px;max-width:62%}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-copy strong{
  font-size:19px!important;line-height:1.35!important;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 14px rgba(255,255,255,.13);
}
html[data-experience="v2-reboot"] .v2-ad-subline{
  display:block;margin-top:4px;color:#ff4053;font-size:13px;font-weight:800;
  text-shadow:0 2px 7px rgba(0,0,0,.9),0 0 12px rgba(224,0,36,.38);
}
html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-cta{
  min-width:94px;height:38px;font-size:9px;border-color:rgba(255,255,255,.28);color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.75);box-shadow:0 5px 16px rgba(0,0,0,.2),inset 0 0 12px rgba(255,255,255,.04);
}

/* Fresh marketplace rail: latest safety gear, ATV and accessories only. */
html[data-experience="v2-reboot"] .v2-fresh-mix{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
}
html[data-experience="v2-reboot"] .v2-fresh-mix[hidden]{display:none!important}
html[data-experience="v2-reboot"] .v2-fresh-mix-head{
  min-height:34px;margin-bottom:11px;display:grid;grid-template-columns:4px minmax(0,1fr) auto;align-items:center;gap:9px;
}
html[data-experience="v2-reboot"] .v2-fresh-mix-mark{
  width:4px;height:24px;border-radius:999px;background:var(--brand-fill);box-shadow:0 0 16px color-mix(in srgb,var(--brand-fill) 36%,transparent);
}
html[data-experience="v2-reboot"] .v2-fresh-mix-head h3{margin:0;font-size:18px;line-height:1.35;letter-spacing:-.25px}
html[data-experience="v2-reboot"] .v2-fresh-mix-head small{color:var(--muted);font-size:10px;font-weight:700}
html[data-experience="v2-reboot"] .v2-fresh-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(44%,168px);gap:10px;
  margin-inline:calc(-1 * var(--s4));padding:0 var(--s4) 7px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-padding-inline:var(--s4);scroll-snap-type:x mandatory;scrollbar-width:none;
}
html[data-experience="v2-reboot"] .v2-fresh-rail::-webkit-scrollbar{display:none}
html[data-experience="v2-reboot"] .v2-fresh-card{
  min-width:0;padding:0;overflow:hidden;scroll-snap-align:start;border:1px solid var(--border);border-radius:17px;
  background:var(--surface);color:var(--text);text-align:start;box-shadow:0 7px 18px color-mix(in srgb,#000 10%,transparent);
}
html[data-experience="v2-reboot"] .v2-fresh-card:active{transform:scale(.975)}
html[data-experience="v2-reboot"] .v2-fresh-image{
  position:relative;display:grid;height:118px;place-items:center;overflow:hidden;background:var(--surface-2);
  color:color-mix(in srgb,var(--brand-text) 48%,transparent);font-size:25px;font-weight:950;letter-spacing:-1px;
}
html[data-experience="v2-reboot"] .v2-fresh-image::before{content:"2W"}
html[data-experience="v2-reboot"] .v2-fresh-image img{
  position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.03);
}
html[data-experience="v2-reboot"] .v2-fresh-new{
  position:absolute;z-index:2;top:8px;inset-inline-start:8px;padding:5px 8px;border-radius:999px;
  background:var(--brand-fill);color:#fff;font-size:9px;font-weight:850;line-height:1;box-shadow:0 5px 13px rgba(0,0,0,.18);
}
html[data-experience="v2-reboot"] .v2-fresh-copy{display:block;padding:10px 11px 12px}
html[data-experience="v2-reboot"] .v2-fresh-copy small{display:block;margin-bottom:4px;color:var(--brand-text);font-size:9.5px;font-weight:800}
html[data-experience="v2-reboot"] .v2-fresh-copy strong{
  display:block;min-height:38px;overflow:hidden;font-size:12.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
@keyframes v2-season-drift{
  from{background-position:48% 50%}
  to{background-position:52% 50%}
}
@media(max-width:360px){
  html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-copy strong{font-size:17px!important}
  html[data-experience="v2-reboot"] .v2-season-banner .v2-ad-copy{max-width:58%}
  html[data-experience="v2-reboot"] .v2-fresh-rail{grid-auto-columns:min(48%,154px)}
  html[data-experience="v2-reboot"] .v2-fresh-image{height:108px}
}

/* Add-listing flow: clear sections and an unambiguous three-way contact choice. */
html[data-experience="v2-reboot"] #s-sell{max-width:680px;padding-bottom:24px}
html[data-experience="v2-reboot"] #s-sell .sell-section-title{
  margin:24px 0 12px;padding:0 2px 10px;border-bottom:1px solid var(--border);
}
html[data-experience="v2-reboot"] #s-sell .sell-section-title span{
  width:29px;height:29px;border-radius:10px;font-size:10px;
}
html[data-experience="v2-reboot"] #s-sell .sell-section-title strong{font-size:15px}
html[data-experience="v2-reboot"] #s-sell .field{
  padding:13px!important;border-radius:16px!important;background:var(--surface)!important;
}
html[data-experience="v2-reboot"] #s-sell .seg,
html[data-experience="v2-reboot"] #s-sell .tier{gap:8px!important}
html[data-experience="v2-reboot"] #s-sell .seg .o{
  min-height:48px;padding:10px 8px;border-radius:13px;font-size:11px!important;line-height:1.45;
}
html[data-experience="v2-reboot"] #s-sell #fContact{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
}
html[data-experience="v2-reboot"] #s-sell #fContact .o{
  width:100%;min-width:0;white-space:normal;
}
html[data-experience="v2-reboot"] #s-sell .trade-hint{
  margin:8px 0 12px;padding:11px 13px;border-radius:13px;font-size:10.5px;line-height:1.65;
}
html[data-experience="v2-reboot"] #s-sell .photo-uploader{min-height:150px!important;border-radius:17px!important}
html[data-experience="v2-reboot"] #s-sell .submit{min-height:54px;border-radius:15px;font-size:14px}

/* Bottom dock: compact, predictable, and no oversized/protruding FAB. */
@media(max-width:767px){
  html[data-experience="v2-reboot"] .nav,
  html[data-theme="light"][data-experience="v2-reboot"] .nav,
  html[data-experience="v2-reboot"] #nav{
    position:fixed!important;z-index:50!important;left:50%!important;right:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:min(calc(100% - 20px),540px)!important;height:var(--v2-dock-height)!important;min-height:var(--v2-dock-height)!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    padding:6px!important;border:1px solid color-mix(in srgb,var(--line-strong) 82%,transparent)!important;border-radius:22px!important;
    background:color-mix(in srgb,var(--nav) 94%,transparent)!important;
    box-shadow:0 18px 48px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(24px) saturate(145%)!important;-webkit-backdrop-filter:blur(24px) saturate(145%)!important;
    transform:translateX(-50%)!important;overflow:hidden!important;
  }
  html[data-experience="v2-reboot"] #nav button,
  html[data-experience="v2-reboot"] #nav button:not([data-s="sell"]),
  html[data-experience="v2-reboot"] #nav button[data-s="sell"]{
    position:relative!important;width:auto!important;height:58px!important;min-height:58px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    padding:5px 2px!important;border:0!important;border-radius:16px!important;background:transparent!important;color:var(--mut)!important;
    overflow:hidden!important;isolation:auto!important;
  }
  html[data-experience="v2-reboot"] #nav button svg,
  html[data-experience="v2-reboot"] #nav button[data-s="sell"] svg,
  html[data-experience="v2-reboot"] #nav button[data-s="sell"].on svg{
    position:relative!important;z-index:1!important;width:22px!important;height:22px!important;margin:0!important;padding:0!important;
    color:currentColor!important;transform:none!important;filter:none!important;
  }
  html[data-experience="v2-reboot"] #nav button span[data-t],
  html[data-experience="v2-reboot"] #nav button[data-s="sell"] span[data-t]{
    position:static!important;color:inherit!important;font-size:9px!important;font-weight:760!important;line-height:1!important;
  }
  html[data-experience="v2-reboot"] #nav button::before,
  html[data-experience="v2-reboot"] #nav button.on::before,
  html[data-experience="v2-reboot"] #nav button[data-s="sell"]::before,
  html[data-experience="v2-reboot"] #nav button[data-s="sell"].on::before{display:none!important}
  html[data-experience="v2-reboot"] #nav button.on,
  html[data-experience="v2-reboot"] #nav #navChat.assistant-on{
    color:var(--brand-text)!important;background:var(--brand-soft)!important;
  }
  html[data-experience="v2-reboot"] #nav button[data-s="sell"]{
    margin:0 4px!important;background:linear-gradient(145deg,#ed3550,var(--brand-fill) 58%,#9c1026)!important;color:#fff!important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--brand-fill) 27%,transparent)!important;
  }
  html[data-experience="v2-reboot"] #nav button[data-s="sell"].on{filter:brightness(1.04)}
  html[data-experience="v2-reboot"] #nav button[data-s="sell"] span[data-t]{color:#fff!important}
}

@media(max-width:390px){
  html[data-experience="v2-reboot"] .topbar{padding-inline:max(9px,env(safe-area-inset-left)) max(9px,env(safe-area-inset-right))!important}
  html[data-experience="v2-reboot"] .topbar-inner{gap:5px!important}
  html[data-experience="v2-reboot"] .topbar-identity{gap:6px}
  html[data-experience="v2-reboot"] .topbar-identity .coin.logo-mark{width:35px;height:35px;min-width:35px;flex-basis:35px;border-radius:11px}
  html[data-experience="v2-reboot"] .brand-main-line strong{font-size:16px;letter-spacing:.35px}
  html[data-experience="v2-reboot"] .brand-domain{font-size:9px}
  html[data-experience="v2-reboot"] .topbar-actions{flex-basis:auto;gap:0!important}
  html[data-experience="v2-reboot"] .topbar-actions .iconbtn{width:28px;height:34px;min-width:28px;flex-basis:28px}
  html[data-experience="v2-reboot"] #countryBtn{font-size:14px!important}
  html[data-experience="v2-reboot"] #langBtn{font-size:8.5px!important}
  html[data-experience="v2-reboot"] #s-sell #fContact{grid-template-columns:1fr}
  html[data-experience="v2-reboot"] #s-sell #fContact .o{min-height:44px}
}

@media(min-width:768px){
  html[data-experience="v2-reboot"] .topbar-inner{max-width:1180px;margin-inline:auto}
  html[data-experience="v2-reboot"] .topnav{display:flex!important}
  html[data-experience="v2-reboot"] .topbar-actions{max-width:none;flex-basis:auto}
}

@media(prefers-reduced-motion:reduce){
  html[data-experience="v2-reboot"] .nav,
  html[data-experience="v2-reboot"] .screen,
  html[data-experience="v2-reboot"] .v2-season-banner{animation:none!important;transition:none!important}
}

/* First launch: one required, durable language decision. */
html.v2-language-open,html.v2-language-open body{overflow:hidden!important}
.v2-language-choice{
  position:fixed;z-index:140;inset:0;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 18%,rgba(215,25,45,.2),transparent 34%),linear-gradient(160deg,#080b10,#111822 56%,#080b10);
  color:#fff;animation:v2-language-in .3s ease both;
}
.v2-language-choice.is-leaving{animation:v2-language-out .24s ease both;pointer-events:none}
.v2-language-card{width:min(100%,420px);padding:30px 22px 23px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(17,22,30,.9);box-shadow:0 26px 70px rgba(0,0,0,.45);text-align:center;backdrop-filter:blur(22px)}
.v2-language-card>img{width:76px;height:76px;border-radius:22px;display:block;margin:0 auto 15px;box-shadow:0 14px 30px rgba(215,25,45,.3)}
.v2-language-kicker{display:block;color:#ef4359;font:800 12px/1 'Inter',sans-serif;letter-spacing:1.7px}
.v2-language-card h1{margin:13px 0 10px;font:800 29px/1.45 'Alexandria',sans-serif;letter-spacing:-.6px}
.v2-language-card h1 em{font:800 25px/1.45 'Inter',sans-serif;font-style:normal}
.v2-language-card>p{margin:0 0 21px;color:#b9c1cb;font:500 12px/1.75 'Alexandria',sans-serif}
.v2-language-card>p span{font-family:'Inter',sans-serif}
.v2-language-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:rtl}
.v2-language-actions button{min-height:78px;padding:12px 8px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:#1b222c;color:#fff;cursor:pointer;transition:.18s}
.v2-language-actions button:first-child{border-color:rgba(239,67,89,.66);background:linear-gradient(145deg,#d7192d,#9d1022)}
.v2-language-actions button:active{transform:scale(.98)}
.v2-language-actions button:focus-visible{outline:3px solid rgba(239,67,89,.35);outline-offset:2px}
.v2-language-actions b,.v2-language-actions small{display:block}
.v2-language-actions b{font-size:16px}.v2-language-actions small{margin-top:5px;color:#cdd3da;font-size:10px;line-height:1.5}
@keyframes v2-language-in{from{opacity:0}to{opacity:1}}
@keyframes v2-language-out{from{opacity:1}to{opacity:0}}
@media(max-width:350px){.v2-language-card{padding:24px 15px 18px}.v2-language-actions{grid-template-columns:1fr}.v2-language-card h1{font-size:25px}.v2-language-card h1 em{font-size:22px}}