/*
Theme Name: Celltrade.ae
Theme URI: https://celltrade.ae
Author: Celltrade.ae
Author URI: https://celltrade.ae
Description: Trade-in / sell-your-device theme for celltrade.ae — replicates the ItsWorthMore.com layout, color system, and component structure (dark green + lime green palette, hero, category grid, 3-step process, trust grid, testimonials carousel, FAQ accordion, closing CTA banner).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: celltrade
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --xc-dark: #0D0D0D;         /* near-black — header/footer/CTA bg */
  --xc-dark-2: #1A1A1A;       /* slightly lighter black for cards on dark */
  --xc-lime: #CD2D1D;         /* e& red — primary accent / buttons on dark */
  --xc-lime-2: #E69289;       /* softer red tint for star ratings bg */
  --xc-gray: #58595B;         /* brand gray accent */
  --xc-bg: #F2F2F2;           /* light gray page background */
  --xc-bg-2: #F7F7F7;
  --xc-white: #FFFFFF;
  --xc-text: #0D0D0D;         /* body copy on light bg reuses near-black */
  --xc-text-muted: #58595B;
  --xc-text-on-dark: #FFFFFF;
  --xc-text-on-dark-muted: #C9C9C9;
  --xc-border: #DDDDDD;
  --xc-radius-sm: 8px;
  --xc-radius-md: 14px;
  --xc-radius-lg: 20px;
  --xc-radius-pill: 999px;
  --xc-shadow: 0 2px 10px rgba(22,53,44,0.08);
  --xc-container: 1140px;
  --xc-font-display: 'Poppins', 'Segoe UI', sans-serif;
  --xc-font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--xc-font-body);
  color: var(--xc-text);
  background: var(--xc-bg);
  font-size:16px;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--xc-font-display);
  color: var(--xc-dark);
  font-weight:700;
  line-height:1.12;
  margin:0 0 16px;
}
.xc-container{
  max-width: var(--xc-container);
  margin:0 auto;
  padding:0 24px;
}
.xc-section{ padding:72px 0; }
.xc-section--dark{ background: var(--xc-dark); color: var(--xc-text-on-dark); }
.xc-section--dark h1, .xc-section--dark h2, .xc-section--dark h3{ color:#fff; }
.xc-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:13px;
  font-weight:700;
  color: var(--xc-text-muted);
}
.xc-section--dark .xc-eyebrow{ color: var(--xc-text-on-dark-muted); }
.xc-center{ text-align:center; }
.xc-lede{ color: var(--xc-text-muted); font-size:18px; max-width:640px; margin:0 auto 32px; }
.xc-section--dark .xc-lede{ color: var(--xc-text-on-dark-muted); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.xc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 28px;
  border-radius: var(--xc-radius-sm);
  font-weight:700;
  font-size:16px;
  border:none;
  position:relative;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.xc-btn:hover{ transform: translateY(-1px); opacity:.92; }
.xc-btn--primary{
  background: var(--xc-lime); color: var(--xc-white);
  box-shadow: 0 5px 0 #8f1c11, 0 10px 16px rgba(0,0,0,.25);
  z-index:2;
}
.xc-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 0 #8f1c11, 0 12px 18px rgba(0,0,0,.28); }
.xc-btn--primary:active{ transform: translateY(3px); box-shadow: 0 2px 0 #8f1c11, 0 4px 8px rgba(0,0,0,.2); }
.xc-btn--accent{ background: var(--xc-lime); color: var(--xc-white); }
.xc-btn--outline{ background: transparent; color: var(--xc-white); border:1px solid rgba(255,255,255,.35); }
.xc-btn--block{ width:100%; }

/* ==========================================================================
   TOP PROMO BAR
   ========================================================================== */
.xc-promo-bar{
  background: var(--xc-lime);
  color: var(--xc-white);
  text-align:center;
  font-weight:700;
  font-size:15px;
  padding:12px 16px;
}
.xc-promo-bar span, .xc-promo-bar a{ text-decoration:underline; margin-left:6px; color:inherit; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.xc-header{
  background: var(--xc-bg);
  border-bottom:1px solid var(--xc-border);
  position: sticky;
  top:0;
  z-index:50;
}
.xc-header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  max-width: var(--xc-container);
  margin:0 auto;
}
.xc-logo, .xc-search--header, .xc-lang-switch, .xc-nav-toggle{
  box-sizing:border-box;
}
.xc-logo{
  font-family: var(--xc-font-display);
  font-weight:700;
  font-size:24px;
  color: var(--xc-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  gap:0;
  line-height:1.1;
}
.xc-logo--icon-only .xc-logo__bigx{ margin-right:0; }
.xc-logo__arrow{
  color: var(--xc-lime);
  font-weight:800;
  font-size:20px;
  -webkit-text-stroke: .5px var(--xc-dark);
  margin-right:0;
}
.xc-logo__bigx{
  font-size:34px;
  line-height:38px;
  color: var(--xc-dark);
  font-weight:800;
  margin-right:2px;
}
.xc-logo__stack{ display:flex; flex-direction:column; align-items:flex-start; }
.xc-logo__brand{ line-height:1; }
.xc-logo__slogan{
  font-family: var(--xc-font-body);
  font-weight:600;
  font-size:8px;
  letter-spacing:.01em;
  text-transform:uppercase;
  color: var(--xc-text-muted);
  margin-top:2px;
  white-space:nowrap;
}
.xc-logo .chev{ color: var(--xc-lime); font-weight:700; -webkit-text-stroke: .5px var(--xc-dark); }
.xc-logo--custom{ display:flex; align-items:center; justify-content:center; height:38px; }
.xc-logo--custom img{ max-height:34px; width:auto; display:block; }
.xc-search--header{
  width:100%; max-width:none !important;
  min-width:0;
  margin:0 !important;
  border-radius:20px !important;
  height:38px;
  display:flex; align-items:center;
}
.xc-search--header input{
  box-sizing:border-box; height:100%;
  padding:0 4px !important; font-size:16px !important; line-height:38px !important;
}
.xc-search--header button{ width:26px !important; height:26px !important; flex-shrink:0; }
.xc-search--header button svg{ width:15px !important; height:15px !important; display:block; }
.xc-header__icons{ display:flex; align-items:center; gap:14px; height:38px; }
.xc-header__icons a, .xc-header__icons button{
  background:none; border:none; color: var(--xc-dark); padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  height:38px; box-sizing:border-box;
}
.xc-lang-switch{ font-weight:700; font-size:14px; color: var(--xc-lime) !important; white-space:nowrap; line-height:1; }
.xc-header-help{ color: var(--xc-lime) !important; }
.xc-header-help svg{ width:22px; height:22px; }
.xc-nav-toggle{ font-size:28px; line-height:1; }
.xc-cart-badge{
  position:relative;
  background: var(--xc-dark);
  color:#fff;
  border-radius:6px;
  width:34px; height:30px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.xc-flag{ font-size:20px; }
.xc-nav-drawer{
  position:fixed; inset:0; background: var(--xc-bg);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index:100;
  overflow-y:auto;
}
.xc-nav-drawer.is-open{ transform: translateX(0); }
.xc-nav-drawer__list a{
  display:block;
  padding:22px 24px;
  border-bottom:1px solid var(--xc-border);
  font-size:20px;
  color: var(--xc-dark);
}
.xc-nav-drawer__close{ font-size:28px; background:none; border:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.xc-hero{ padding:36px 0 4px; text-align:center; }
.xc-search--hero{ margin:0 auto 20px; max-width:520px; }
.xc-hero h1{ font-size:36px; max-width:780px; margin:0 auto 14px; }
.xc-highlight{
  background: var(--xc-lime);
  color: var(--xc-white);
  padding:2px 12px;
  border-radius:8px;
  display:inline-block;
  line-height:1.3;
}
.xc-hero p{ color: var(--xc-text-muted); font-size:16px; max-width:520px; margin:0 auto 20px; }
.xc-featured{ padding:0; margin-top:16px; margin-bottom:0; }
.xc-featured.xc-container{ padding-left:24px; padding-right:24px; }
.xc-featured__split{
  display:flex; align-items:center; justify-content:center;
  gap:12px; max-width:900px; margin:0 auto;
}
.xc-featured__categories{
  flex:1; display:flex; flex-direction:column; gap:10px;
  max-width:150px;
  margin-top:-28px; margin-left:14px;
}
.xc-featured__cat-link{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--xc-border); border-radius:var(--xc-radius-sm);
  padding:10px 12px; font-weight:600; font-size:13px; color:var(--xc-dark);
  box-shadow: var(--xc-shadow);
}
.xc-featured__cat-link .icon{ display:flex; width:18px; height:18px; color: var(--xc-lime); flex-shrink:0; }
.xc-featured__cat-link .icon svg{ width:100%; height:100%; }
.xc-featured__cat-link--more{
  background: var(--xc-lime); color: var(--xc-white); border:none;
  justify-content:center;
}
.xc-featured__image{
  flex:1.4;
  width:min(310px, 66vw); height:min(310px, 66vw);
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  margin:0 auto;
  position:relative;
  z-index:3;
}
.xc-featured__image img{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  margin:0 auto;
  transform: rotate(var(--xc-rotate, 0deg));
  transition: transform .2s ease;
}
@media (max-width: 520px){
  .xc-featured__categories{ max-width:120px; }
  .xc-featured__cat-link{ font-size:12px; padding:8px 8px; gap:6px; }
}

/* ==========================================================================
   SELLING MADE SIMPLE — search + category grid
   ========================================================================== */
.xc-search{
  max-width:720px; margin:32px auto 0;
  background:#fff; border-radius:12px;
  border:1px solid var(--xc-border);
  display:flex; align-items:center; flex-direction:row-reverse;
  padding:2px 16px 2px 10px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.xc-search.xc-search--hero{ margin:0 auto 20px; max-width:520px; }
.xc-search:focus-within{
  border-color: var(--xc-lime);
  box-shadow:0 0 0 3px rgba(205,45,29,.1);
}
.xc-search input{
  flex:1; min-width:0; border:none; outline:none; font-size:16px; padding:14px 6px;
  background:transparent; color: var(--xc-text);
}
.xc-search input::placeholder{ color: #A6A6A6; }
.xc-search button{
  background:none; color: var(--xc-lime); border:none;
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.xc-search button svg{ width:20px; height:20px; }
.xc-quicklinks{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:28px 0 40px;
}
.xc-quicklinks .xc-eyebrow{ flex-basis:100%; text-align:center; margin-bottom:4px; }
.xc-quicklinks a{
  border:1px solid var(--xc-border); border-radius:999px;
  padding:8px 16px; font-weight:600; font-size:13px; background:#fff;
}
.xc-cat-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  background:#fff; border-radius:var(--xc-radius-lg); overflow:hidden;
  box-shadow: var(--xc-shadow);
}
.xc-cat-grid a{
  padding:44px 20px; text-align:center;
  border-right:1px solid var(--xc-border); border-bottom:1px solid var(--xc-border);
  font-weight:700; font-size:18px;
}
.xc-cat-grid a:nth-child(2n){ border-right:none; }
.xc-cat-grid .icon{ font-size:36px; display:block; margin:0 auto 18px; color: var(--xc-dark); }

/* ==========================================================================
   HOW IT WORKS — 3-step
   ========================================================================== */
.xc-steps__track{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:24px 0 40px; max-width:560px; margin-left:auto; margin-right:auto;
}
.xc-steps__track .num{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:20px; color:#fff; border:1px solid rgba(255,255,255,.3);
}
.xc-steps__track .num.active{ background: var(--xc-lime); color: var(--xc-dark); border:none; }
.xc-steps__track .line{ flex:1; height:1px; background:rgba(255,255,255,.25); }
.xc-step-card{
  background: var(--xc-dark-2); border-radius: var(--xc-radius-lg);
  padding:28px; max-width:560px; margin:0 auto;
}
.xc-step-card__media{
  background: var(--xc-bg-2); border-radius: var(--xc-radius-md);
  padding:32px; margin-bottom:24px;
}
.xc-step-card h3{ color:#fff; font-size:24px; }
.xc-step-card p{ color: var(--xc-text-on-dark-muted); margin:0; }

/* ==========================================================================
   BRAND CARDS — "Sell by category"
   ========================================================================== */
.xc-brand-grid{
  display:flex; flex-direction:column; gap:20px;
}
.xc-brand-card{
  background:#fff; border-radius: var(--xc-radius-lg);
  box-shadow: var(--xc-shadow);
  padding:20px 20px 18px;
  display:flex; flex-direction:column;
  align-items:flex-start;
}
.xc-brand-card__logo{ margin-bottom:16px; }
.xc-brand-card__logo svg{ width:34px; height:34px; color: var(--xc-dark); }
.xc-brand-card__logo img{ max-height:34px; width:auto; display:block; }
.xc-brand-card__img{
  width:100%; display:flex; align-items:center; justify-content:center;
  min-height:120px; margin-bottom:16px;
}
.xc-brand-card__img img{ max-height:140px; width:auto; margin:0 auto; }
.xc-brand-card__title{
  font-size:16px; font-weight:600; color: var(--xc-dark);
  font-family: var(--xc-font-body);
}
@media (max-width: 640px){
  .xc-brand-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   TRUST GRID ("Why people choose us")
   ========================================================================== */
.xc-trust-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  background: var(--xc-bg-2); border-radius: var(--xc-radius-lg); overflow:hidden;
}
.xc-trust-grid .cell{
  padding:40px 24px; text-align:center;
  border-right:1px solid var(--xc-border); border-bottom:1px solid var(--xc-border);
}
.xc-trust-grid .cell:nth-child(2n){ border-right:none; }
.xc-trust-grid .cell .stat{ font-size:40px; font-weight:800; color: var(--xc-dark); font-family:var(--xc-font-display); }
.xc-trust-grid .cell h4{ margin:14px 0 6px; font-size:19px; }
.xc-trust-grid .cell p{ color: var(--xc-text-muted); font-size:14px; margin:0; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.xc-testimonial{
  background: var(--xc-dark-2); border-radius: var(--xc-radius-lg);
  padding:36px; max-width:640px; margin:0 auto;
}
.xc-testimonial .stars{ color:var(--xc-lime); font-size:18px; margin-bottom:16px; }
.xc-testimonial p{ font-size:19px; color:#fff; }
.xc-testimonial__author{ display:flex; align-items:center; gap:12px; margin-top:28px; }
.xc-testimonial__author .avatar{
  width:44px;height:44px;border-radius:50%; background: var(--xc-lime);
  display:flex;align-items:center;justify-content:center; font-weight:700; color:var(--xc-dark);
}
.xc-carousel-nav{ display:flex; gap:14px; justify-content:center; margin-bottom:28px; }
.xc-carousel-nav button{
  width:44px;height:44px;border-radius:50%; background: var(--xc-dark-2); color:#fff; border:none; font-size:18px;
}
.xc-dots{ display:flex; gap:8px; justify-content:center; margin-top:24px; }
.xc-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); }
.xc-dots span.active{ width:22px; border-radius:6px; background: var(--xc-lime); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.xc-faq{ max-width:760px; margin:0 auto; }
.xc-faq details{
  background: var(--xc-bg-2); border-radius: var(--xc-radius-md);
  padding:20px 24px; margin-bottom:14px;
}
.xc-faq summary{
  cursor:pointer; font-weight:700; font-size:17px;
  display:flex; justify-content:space-between; align-items:center;
  list-style:none;
}
.xc-faq summary::-webkit-details-marker{ display:none; }
.xc-faq summary::after{ content:"⌄"; font-size:20px; }
.xc-faq details[open] summary::after{ content:"⌃"; }
.xc-faq details p{ color: var(--xc-text-muted); margin:14px 0 0; }

/* ==========================================================================
   CLOSING CTA BANNER
   ========================================================================== */
.xc-cta{ text-align:center; }
.xc-cta h2{ color:#fff; font-size:36px; max-width:680px; margin:0 auto 32px; }
.xc-cta__buttons{ display:flex; flex-direction:column; gap:14px; max-width:420px; margin:0 auto 32px; }
.xc-cta__avatars{ display:flex; justify-content:center; margin-bottom:16px; }
.xc-cta__avatars .avatar{
  width:48px;height:48px;border-radius:50%; border:3px solid var(--xc-dark);
  margin-left:-12px; background:#ccc; background-size:cover;
}
.xc-cta__avatars .avatar:first-child{ margin-left:0; }
.xc-cta .satisfied{ color:#fff; font-weight:700; margin-bottom:10px; }
.xc-cta .stars{ color:var(--xc-lime); font-size:20px; }

/* ==========================================================================
   MARQUEE STRIP
   ========================================================================== */
.xc-marquee{
  background: var(--xc-lime); color: var(--xc-white);
  padding:16px 0; overflow:hidden; white-space:nowrap; font-weight:700;
  position:relative; z-index:5;
}
.xc-marquee__track{ display:inline-flex; gap:48px; animation: xc-scroll 22s linear infinite; }
@keyframes xc-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.xc-footer{ padding:64px 0 32px; }
.xc-footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  margin-bottom:48px;
}
.xc-footer h4{ color:#fff; font-size:16px; margin-bottom:18px; }
.xc-footer a{ display:block; color: var(--xc-text-on-dark-muted); margin-bottom:14px; }
.xc-footer .contact-row{ margin-bottom:10px; }
.xc-footer .contact-row .label{ color: var(--xc-lime); font-weight:700; font-size:13px; margin-right:8px; }
.xc-newsletter h3{ color:#fff; font-size:26px; }
.xc-newsletter p{ color: var(--xc-text-on-dark-muted); margin-bottom:22px; }
.xc-newsletter form{ display:flex; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:12px; }
.xc-newsletter input{ flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:16px; }
.xc-newsletter button{ background:none; border:none; color: var(--xc-lime); font-weight:700; }
.xc-footer__bottom{
  border-top:1px solid rgba(255,255,255,.15); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.xc-social{ display:flex; gap:12px; }
.xc-social a{
  width:38px;height:38px;border-radius:50%; background: var(--xc-dark-2);
  display:flex;align-items:center;justify-content:center; color:#fff;
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.xc-to-top{
  position:fixed; right:24px; bottom:24px;
  width:52px; height:52px; border-radius:50%;
  background: var(--xc-dark); color: var(--xc-white);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; border:none; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:40;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.xc-to-top.is-visible{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 720px){
  .xc-hero h1{ font-size:32px; }
  .xc-footer__top{ grid-template-columns:1fr; gap:32px; }
  .xc-trust-grid, .xc-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .xc-section{ padding:48px 0; }
}

/* ==========================================================================
   SELL FLOW — Brand > Model > Variant > Price
   ========================================================================== */
.xc-flow{ padding-bottom:48px; }
.xc-flow h1{ font-size:26px; margin-bottom:4px; }
.xc-flow__subhead{ font-size:19px; margin:28px 0 16px; }
.xc-flow__crumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:14px; color: var(--xc-text-muted); margin-bottom:24px;
}
.xc-flow__crumbs span[data-step]{ color: var(--xc-text-muted); }
.xc-flow__crumbs span[data-step].is-active{ color: var(--xc-lime); font-weight:700; }
.xc-flow__crumbs .sep{ color: var(--xc-border); }
.xc-flow__step{ display:none; }
.xc-flow__step.is-active{ display:block; }
.xc-flow__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.xc-flow__card{
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-md);
  padding:24px 16px; font-weight:700; font-size:16px; color: var(--xc-dark);
  text-align:center; cursor:pointer; transition: border-color .15s ease, transform .15s ease;
}
.xc-flow__card:hover{ border-color: var(--xc-lime); transform: translateY(-2px); }
.xc-flow__card--brand{ min-height:64px; display:flex; align-items:center; justify-content:center; }
.xc-flow__card--model{ min-height:80px; }
.xc-flow__card--variant{ font-size:17px; }
.xc-flow__back{
  background:none; border:none; color: var(--xc-lime); font-weight:700;
  margin-top:24px; padding:0; cursor:pointer; font-size:15px;
}
.xc-flow__variant-card{
  background:#fff; border-radius: var(--xc-radius-lg); box-shadow: var(--xc-shadow);
  padding:24px; text-align:center;
}
.xc-flow__variant-title{ font-weight:700; margin-bottom:8px; }

.xc-price-block{
  background:#fff; border-radius: var(--xc-radius-lg); box-shadow: var(--xc-shadow);
  padding:18px 20px; text-align:center; max-width:420px; margin:0 auto;
}
.xc-price-block__label{ font-style:italic; font-size:14px; color: var(--xc-text-muted); margin:0 0 4px; }
.xc-price-block__amount{ font-size:28px; font-weight:800; color: var(--xc-lime); margin:0 0 4px; font-family: var(--xc-font-display); }
.xc-price-block__amount span{ font-size:32px; }
.xc-price-block__meta{ color: var(--xc-text-muted); font-size:12px; margin:0 0 8px; }
.xc-price-block__disclaimer{ color: var(--xc-text-muted); font-size:11px; line-height:1.5; margin:0 0 16px; font-style:italic; }
.xc-price-block--estimate .xc-price-block__amount{ color: var(--xc-dark); }

/* Condition tabs (Excellent / Good / Average / Poor) */
.xc-flow__condition-tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin-bottom:12px;
}
.xc-flow__condition-tab{
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-sm);
  padding:9px 2px; font-weight:700; font-size:12px; color: var(--xc-text-muted);
  cursor:pointer; transition: all .15s ease;
}
.xc-flow__condition-tab.is-active{
  background: var(--xc-lime); border-color: var(--xc-lime); color:#fff;
}
@media (max-width:420px){
  .xc-flow__condition-tabs{ grid-template-columns:repeat(2,1fr); }
}

/* Device search dropdown (site-wide, on every .xc-search box) */
.xc-search-dropdown{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--xc-border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden; z-index:60;
  max-height:280px; overflow-y:auto;
}
.xc-search-dropdown.is-open{ display:block; }
.xc-search-dropdown__item{
  display:block; padding:12px 16px; font-size:14px; font-weight:600;
  color: var(--xc-dark); border-bottom:1px solid var(--xc-border);
}
.xc-search-dropdown__item:last-child{ border-bottom:none; }
.xc-search-dropdown__item:hover{ background: var(--xc-bg-2); color: var(--xc-lime); }

/* ==========================================================================
   BOTTOM MOBILE NAV — Sell / Search / Login / More
   ========================================================================== */
.xc-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:#fff; border-top:1px solid var(--xc-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.xc-bottom-nav__item{
  background:none; border:none; flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px 8px; font-size:12px; font-weight:600; color: var(--xc-dark);
}
.xc-bottom-nav__item .icon{ width:22px; height:22px; display:flex; }
.xc-bottom-nav__item .icon svg{ width:100%; height:100%; }
.xc-bottom-nav__item.is-active{ color: var(--xc-lime); }
.xc-bottom-nav__item.is-active .icon{ color: var(--xc-lime); }
@media (max-width:820px){
  .xc-bottom-nav{ display:flex; }
  body{ padding-bottom:64px; }
  .xc-to-top{ bottom:76px; }
}

/* Trust card (Free Home Pickup / Instant Cash, combined) */
.xc-trust-cards{
  padding:0 24px 28px;
  margin-top:-14px;
  position:relative; z-index:4;
}
.xc-trust-card{
  background: var(--xc-lime); border:none; border-radius: var(--xc-radius-md);
  box-shadow: var(--xc-shadow);
  padding:18px 12px;
  display:flex; align-items:center; justify-content:center;
  max-width:900px; margin:0 auto;
}
.xc-trust-card__item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  transition: opacity .4s ease;
}
.xc-trust-card__item.is-fading{ opacity:0; }
.xc-trust-card__divider{ width:1px; align-self:stretch; background: rgba(255,255,255,.35); margin:0 12px; }
.xc-trust-card .icon{ width:32px; height:32px; color: var(--xc-white); display:flex; }
.xc-trust-card .icon svg{ width:100%; height:100%; }
.xc-trust-card__text{ display:flex; flex-direction:column; align-items:center; }
.xc-trust-card__title{ font-weight:700; font-size:14px; color: var(--xc-white); }
.xc-trust-card__sub{ font-size:11px; color: rgba(255,255,255,.8); margin-top:2px; }
.xc-trust-card__item--desktop-only,
.xc-trust-card__divider--desktop-only{ display:none; }

/* Condition criteria checklist (what qualifies as each grade) */
.xc-flow__criteria-card{
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-lg);
  padding:14px 16px; margin-bottom:12px;
}
.xc-flow__criteria-title{ font-size:16px; font-weight:800; margin:0 0 2px; }
.xc-flow__criteria-subhead{ font-weight:700; font-size:12px; color: var(--xc-dark); margin:0 0 8px; }
.xc-flow__criteria-list{ list-style:none; margin:0; padding:0; }
.xc-flow__criteria-list li{
  display:flex; align-items:flex-start; gap:8px;
  padding:5px 0; font-size:12px; line-height:1.35; color: var(--xc-text-muted);
  border-bottom:1px solid var(--xc-bg-2);
}
.xc-flow__criteria-list li:last-child{ border-bottom:none; }
.xc-flow__criteria-arrow{ color:#1CA652; font-weight:700; flex-shrink:0; }

/* Box condition step (Sealed / Open Box) */
.xc-flow__summary{
  display:flex; align-items:center; gap:20px;
  margin:0 auto 20px; max-width:420px;
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-lg);
  box-shadow: var(--xc-shadow); padding:16px;
}
.xc-flow__device-image{
  display:flex; align-items:center; justify-content:center;
  height:140px; width:140px; flex-shrink:0;
}
.xc-flow__summary-divider{ width:1px; align-self:stretch; background: var(--xc-border); }
.xc-flow__device-image img{ max-height:88%; max-width:88%; object-fit:contain; }
.xc-flow__device-icon{ width:64px; height:64px; color: var(--xc-lime); display:flex; }
.xc-flow__device-icon svg{ width:100%; height:100%; }
.xc-flow__summary-details{ flex:1; display:flex; flex-direction:column; gap:8px; }
.xc-flow__summary-row{ display:flex; flex-direction:column; }
.xc-flow__summary-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--xc-text-muted); }
.xc-flow__summary-value{ font-size:15px; font-weight:800; color: var(--xc-dark); }
.xc-flow__eyebrow{
  text-align:center; color: var(--xc-lime); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:12px; margin:0 0 8px;
}
.xc-flow__box-title{ text-align:center; font-size:24px; margin:0 0 8px; }
.xc-flow__box-sub{ text-align:center; color: var(--xc-text-muted); font-size:14px; margin:0 0 24px; }
.xc-flow__box-pills{ display:flex; gap:12px; margin-bottom:20px; }
.xc-flow__box-pill{
  flex:1; background: var(--xc-bg-2); border:2px solid transparent; border-radius:999px;
  padding:16px 12px; font-weight:700; font-size:14px; color: var(--xc-dark);
  text-transform:uppercase; letter-spacing:.02em; cursor:pointer; transition: all .15s ease;
}
.xc-flow__box-pill.is-active{
  background:#fff; border-color: var(--xc-lime); color: var(--xc-lime);
}
#xc-flow-box-continue:disabled{ opacity:.45; }

/* Server-rendered SEO content block (also mirrored client-side) */
.xc-flow__seo-content{ margin-top:40px; padding-top:32px; border-top:1px solid var(--xc-border); }
.xc-flow__seo-content h2{ font-size:24px; margin:0 0 12px; }
.xc-flow__seo-content h3{ font-size:18px; margin:28px 0 12px; }
.xc-flow__benefits-list{ list-style:none; margin:0 0 8px; padding:0; }
.xc-flow__benefits-list li{
  position:relative; padding:8px 0 8px 26px; font-size:14px; color: var(--xc-text-muted); line-height:1.5;
}
.xc-flow__benefits-list li::before{
  content:"✓"; position:absolute; left:0; top:8px; color: var(--xc-lime); font-weight:800;
}
.xc-flow__faq-list{ display:flex; flex-direction:column; gap:8px; }
.xc-flow__faq-item{
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-sm);
  padding:14px 16px;
}
.xc-flow__faq-item summary{
  font-weight:700; font-size:14px; color: var(--xc-dark); cursor:pointer; list-style:none;
}
.xc-flow__faq-item summary::-webkit-details-marker{ display:none; }
.xc-flow__faq-item summary::after{ content:"+"; float:right; color: var(--xc-lime); font-weight:800; }
.xc-flow__faq-item[open] summary::after{ content:"–"; }
.xc-flow__faq-item p{ margin:10px 0 0; font-size:13px; color: var(--xc-text-muted); line-height:1.55; }
.xc-flow__seo-content p{ color: var(--xc-text-muted); line-height:1.6; margin:0 0 16px; }
.xc-flow__seo-content strong{ color: var(--xc-dark); }
.xc-flow__storage-card{
  background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-md);
  box-shadow: var(--xc-shadow); padding:16px; text-align:center; max-width:260px; margin:0 0 20px;
}
.xc-flow__storage-card .label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--xc-text-muted); margin-bottom:4px; }
.xc-flow__storage-card .value{ display:block; font-weight:800; font-size:18px; color: var(--xc-dark); }
.xc-flow__seo-trust{ font-size:14px; }

/* "Choose by Series" step — card grid, same style as Brand/Model */
.xc-flow__card--series{ min-height:64px; display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   DESKTOP HERO LAYOUT — categories / hero text / phone image side by side
   (mobile stays exactly as before — this only applies above 900px)
   ========================================================================== */
@media (min-width: 900px){
  .xc-hero-featured-desktop{
    display:flex;
    align-items:flex-end;
    gap:32px;
    max-width:1240px;
    margin:0 auto;
    padding:48px 24px 4px;
  }
  .xc-hero-featured-desktop .xc-hero{
    flex:1;
    text-align:center;
    padding:0; margin:0; max-width:none;
    align-self:flex-start;
    padding-top:32px;
    order:2;
  }
  .xc-hero-featured-desktop .xc-hero h1{ font-size:64px; line-height:1.12; max-width:none; }
  .xc-hero-featured-desktop .xc-hero p{ font-size:22px; max-width:560px; margin-left:auto; margin-right:auto; }
  .xc-hero-featured-desktop .xc-featured{
    display:contents; /* unwrap the <section> so its children can be positioned directly as flex items */
  }
  .xc-hero-featured-desktop .xc-featured__split{
    display:contents; /* unwrap the inner row too, for the same reason */
  }
  .xc-hero-featured-desktop .xc-featured__categories{
    max-width:none;
    margin-top:0;
    flex: 0 0 auto;
    align-self:center;
    order:1;
  }
  .xc-hero-featured-desktop .xc-featured__image{
    width:420px; height:auto; aspect-ratio:0.8/1;
    max-width:420px;
    margin:0 0 -28px;
    flex: 0 0 auto;
    order:3;
  }
}

/* ==========================================================================
   DESKTOP: wider trust bar with extra items, and a proper grid for
   "Sell by category" instead of full-width stacked cards
   ========================================================================== */
@media (min-width: 900px){
  .xc-trust-cards.xc-container{
    max-width:1320px;
    padding-left:24px;
    padding-right:24px;
    margin-top:45px;
  }
  .xc-trust-card{
    max-width:none;
    padding:22px 32px;
  }
  .xc-trust-card__item--desktop-only,
  .xc-trust-card__divider--desktop-only{ display:flex; }
  .xc-trust-card__divider--desktop-only{ display:block; }
  .xc-trust-card__title{ font-size:15px; }
  .xc-trust-card__sub{ font-size:12px; }

  .xc-brand-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 245px));
    justify-content:flex-start;
    gap:16px;
  }
  .xc-brand-card{ padding:24px 20px 20px; }
}



/* ==========================================================================
   MEGA MENU (desktop only) — category bar under the header, each item
   opens a dropdown panel of brands on hover
   ========================================================================== */
.xc-mega-menu{ display:none; }

@media (min-width: 900px){
  .xc-mega-menu{
    display:block;
    width:100%;
    background: var(--xc-lime);
  }
  .xc-mega-menu__inner{
    max-width:1320px; margin:0 auto; padding:0 16px;
    display:flex; gap:4px;
  }
  .xc-mega-menu__item{ position:relative; }
  .xc-mega-menu__trigger{
    display:flex; align-items:center; gap:6px;
    padding:14px 12px; font-weight:700; font-size:13.5px;
    color: var(--xc-white); white-space:nowrap;
  }
  .xc-mega-menu__trigger .icon{ width:18px; height:18px; color: var(--xc-white); display:flex; }
  .xc-mega-menu__trigger .icon svg{ width:100%; height:100%; }
  .xc-mega-menu__item:hover .xc-mega-menu__trigger,
  .xc-mega-menu__item:focus-within .xc-mega-menu__trigger{ opacity:.85; }

  .xc-mega-menu__panel{
    display:none;
    position:absolute; top:100%; left:0;
    background:#fff; border:1px solid var(--xc-border); border-radius: var(--xc-radius-md);
    box-shadow: var(--xc-shadow);
    padding:10px; min-width:200px;
    flex-direction:column; gap:2px;
    z-index:50;
  }
  .xc-mega-menu__panel a{
    padding:10px 12px; border-radius:8px; font-size:14px; color: var(--xc-dark); font-weight:600;
  }
  .xc-mega-menu__panel a:hover{ background: var(--xc-bg-2); color: var(--xc-lime); }
  .xc-mega-menu__item:hover .xc-mega-menu__panel,
  .xc-mega-menu__item:focus-within .xc-mega-menu__panel{
    display:flex;
  }

  /* The vertical quick-link category buttons in the hero are now
     redundant with the mega menu above, on desktop only. With them
     gone, re-center the text against the whole container (rather
     than the remaining flex siblings, which would skew it) by taking
     the image out of the flex flow and centering the text block on
     its own. */
  .xc-hero-featured-desktop .xc-featured__categories{ display:none; }
  .xc-hero-featured-desktop{
    display:block;
    position:relative;
    min-height:460px;
    padding-top:0;
    margin-top:56px;
  }
  .xc-hero-featured-desktop .xc-hero{
    position:absolute;
    left:32px; right:452px; top:0; bottom:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center;
    max-width:none;
    margin:0; padding:0;
    flex:none; align-self:auto;
  }
  .xc-hero-featured-desktop .xc-featured__image{
    position:absolute;
    right:0; top:0;
  }
}

/* ==========================================================================
   DESKTOP HEADER EXTRAS — Sell Device button, Track, Login (mobile
   keeps the original compact header untouched)
   ========================================================================== */
.xc-desktop-only{ display:none; }
.xc-header__icons .xc-desktop-only{ display:none; }

.xc-header-sell-btn{
  border:1.5px solid var(--xc-dark); border-radius: var(--xc-radius-sm);
  padding:10px 18px; font-weight:700; font-size:14px; white-space:nowrap;
  color: var(--xc-dark);
}
.xc-header-sell-btn:hover{ border-color: var(--xc-lime); color: var(--xc-lime); }

.xc-header-track, .xc-header-login{
  align-items:center; gap:6px;
  font-weight:600; font-size:13px; color: var(--xc-dark); white-space:nowrap;
}
.xc-header-track .icon, .xc-header-login .icon{ width:18px; height:18px; color: var(--xc-lime); display:flex; }
.xc-header-track .icon svg, .xc-header-login .icon svg{ width:100%; height:100%; }

@media (min-width: 900px){
  .xc-desktop-only{ display:flex; }
  .xc-header__icons .xc-desktop-only{ display:flex; }
  .xc-header__inner{ max-width:1320px; gap:20px; }
  .xc-header__icons{ gap:20px; }
}

/* Rotating hero subtext (cycles between 3 messages via JS) */
.xc-hero-rotator{
  transition: opacity .4s ease;
}
.xc-hero-rotator.is-fading{ opacity:0; }

/* ==========================================================================
   QUOTE REQUEST MODAL
   ========================================================================== */
.xc-quote-modal{ display:none; }
.xc-quote-modal.is-open{ display:block; }
.xc-quote-modal__backdrop{
  position:fixed; inset:0; background:rgba(13,13,13,.55); z-index:200;
}
.xc-quote-modal__panel{
  position:fixed; z-index:201; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius: var(--xc-radius-lg); box-shadow: var(--xc-shadow);
  width:min(92vw, 440px); max-height:88vh; overflow-y:auto;
  padding:28px 24px 24px;
}
.xc-quote-modal__panel h2{ font-size:20px; margin:0 0 6px; }
.xc-quote-modal__summary{ color: var(--xc-text-muted); font-size:13px; margin:0 0 20px; }
.xc-quote-modal__close{
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:26px; line-height:1; color: var(--xc-text-muted); cursor:pointer;
}
#xc-quote-form label{ display:block; font-size:13px; font-weight:600; color: var(--xc-dark); margin-bottom:14px; }
#xc-quote-form input[type="text"], #xc-quote-form input[type="tel"],
#xc-quote-form textarea, #xc-quote-form select{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid var(--xc-border); border-radius: var(--xc-radius-sm);
  font-size:14px; font-family:inherit; box-sizing:border-box;
}
.xc-quote-form__pickup{ border:none; padding:0; margin:0 0 14px; }
.xc-quote-form__pickup legend{ font-size:13px; font-weight:600; color: var(--xc-dark); margin-bottom:8px; padding:0; }
.xc-quote-form__radio{
  display:flex; align-items:center; gap:8px; font-weight:500; margin-bottom:8px;
}
.xc-quote-form__radio input{ width:auto; margin:0; }
.xc-quote-form__error{ color: var(--xc-lime); font-size:13px; margin:0 0 12px; }
.xc-quote-modal__success{ text-align:center; padding:20px 0; }
.xc-quote-modal__success p{ margin:0 0 8px; color: var(--xc-text-muted); }