/* ABIDI MOTORS — UX / Design Stage 3
 * Additive polish layer. Intentionally avoids !important.
 * Keeps the established visual system while improving hierarchy,
 * interaction feedback, motion, focus states and mobile ergonomics.
 */
:root{
  --am-ux-ease:cubic-bezier(.22,.61,.36,1);
  --am-ux-fast:180ms;
  --am-ux-med:320ms;
  --am-ux-shadow:0 18px 50px rgba(0,0,0,.24);
  --am-ux-gold-glow:rgba(201,162,39,.20);
}

html{scroll-behavior:smooth;scroll-padding-top:92px;}
body{overscroll-behavior-x:none;}

/* Keyboard accessibility without changing the normal visual language. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--gold,#C9A227);
  outline-offset:3px;
}

/* Header polish */
.am-header{transition:box-shadow var(--am-ux-med) var(--am-ux-ease),background-color var(--am-ux-med) var(--am-ux-ease),border-color var(--am-ux-med) var(--am-ux-ease);}
html.am-ux-scrolled .am-header{box-shadow:0 10px 32px rgba(0,0,0,.20);}
.am-menu a,.am-action,.am-mobile-nav summary{transition:color var(--am-ux-fast) ease,background-color var(--am-ux-fast) ease,border-color var(--am-ux-fast) ease,transform var(--am-ux-fast) ease;}
.am-menu a:active,.am-action:active,.am-mobile-nav summary:active{transform:translateY(1px);}

/* Hero: clearer depth without changing its existing composition. */
.am-home-hero-copy,.am-home-hero-card,.am-home-hero-benefits{backface-visibility:hidden;}
.am-home-hero-card{transition:transform var(--am-ux-med) var(--am-ux-ease),box-shadow var(--am-ux-med) var(--am-ux-ease),border-color var(--am-ux-med) ease;}
.am-home-hero-card:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(0,0,0,.30),0 0 0 1px var(--am-ux-gold-glow);}
.am-home-cta{transition:transform var(--am-ux-fast) var(--am-ux-ease),box-shadow var(--am-ux-fast) ease,filter var(--am-ux-fast) ease;}
.am-home-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.24);}
.am-home-cta:active{transform:translateY(0);}
.am-home-cta-icon{transition:transform var(--am-ux-fast) var(--am-ux-ease);}
.am-home-cta:hover .am-home-cta-icon{transform:translateX(-4px);}

/* Inventory / import cards: tactile depth while preserving existing colors. */
.am-card,.am-ci-card,.am-ko-card,.am-u3-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:box-shadow var(--am-ux-med) var(--am-ux-ease),filter var(--am-ux-med) var(--am-ux-ease),border-color var(--am-ux-med) ease;
}
.am-card:hover,.am-ci-card:hover,.am-ko-card:hover,.am-u3-card:hover{
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.16));
}
.am-card .am-media,.am-ci-image-wrap,.am-ko-image-wrap,.am-u3-image-wrap{overflow:hidden;}
.am-card .am-media img,.am-ci-image,.am-ko-image,.am-u3-image{transition:transform 520ms var(--am-ux-ease),filter 520ms var(--am-ux-ease);}
.am-card:hover .am-media img,.am-ci-card:hover .am-ci-image,.am-ko-card:hover .am-ko-image,.am-u3-card:hover .am-u3-image{filter:saturate(1.04) contrast(1.02);}

/* Pricing hierarchy */
.am-price,.am-ci-price,.am-ko-price,.am-u3-price,.am-detail-price,.am-direct-price{font-variant-numeric:tabular-nums;}
.am-price,.am-ci-price,.am-ko-price,.am-u3-price{letter-spacing:.1px;}
.am-ci-price strong,.am-ko-price strong,.am-u3-price strong{display:inline-block;}
.am-detail-price{position:relative;}
.am-detail-price strong{display:inline-block;text-shadow:0 4px 18px rgba(0,0,0,.20);}

/* CTA buttons: consistent press feedback. */
.am-btn,.am-ci-order,.am-ko-order,.am-u3-order,.am-ci-details,.am-ko-details,.am-u3-details,.am-detail-order,.am-detail-submit,.am-direct-submit,.am-inline-submit,.am-footer-cta-btn,.am-footer-map-btn{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--am-ux-fast) var(--am-ux-ease),box-shadow var(--am-ux-fast) ease,filter var(--am-ux-fast) ease,background-color var(--am-ux-fast) ease,border-color var(--am-ux-fast) ease;
}
.am-btn:active,.am-ci-order:active,.am-ko-order:active,.am-u3-order:active,.am-ci-details:active,.am-ko-details:active,.am-u3-details:active,.am-detail-order:active,.am-detail-submit:active,.am-direct-submit:active,.am-inline-submit:active,.am-footer-cta-btn:active,.am-footer-map-btn:active{transform:translateY(1px) scale(.99);}

/* Import-page sections */
.am-ci-brand-section,.am-ko-brand-section,.am-u3-brand-section{transition:box-shadow var(--am-ux-med) ease,border-color var(--am-ux-med) ease;}
.am-ci-brand-section:hover,.am-ko-brand-section:hover,.am-u3-brand-section:hover{box-shadow:0 16px 40px rgba(0,0,0,.10);}
.am-ci-brand-logo,.am-ko-brand-logo,.am-u3-brand-logo{transition:transform var(--am-ux-med) var(--am-ux-ease),box-shadow var(--am-ux-med) ease;}
.am-ci-brand-section:hover .am-ci-brand-logo,.am-ko-brand-section:hover .am-ko-brand-logo,.am-u3-brand-section:hover .am-u3-brand-logo{transform:translateZ(0) scale(1.04);}

/* Footer cards */
.am-footer-card{transition:transform var(--am-ux-med) var(--am-ux-ease),box-shadow var(--am-ux-med) ease,border-color var(--am-ux-med) ease;}
.am-footer-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(0,0,0,.18);}
.am-footer-links a{transition:color var(--am-ux-fast) ease,transform var(--am-ux-fast) var(--am-ux-ease);}
.am-footer-links a:hover{transform:translateX(-3px);}

/* Lightweight reveal: JS only adds the class after the page is ready. */
html.am-ux-ready .am-ux-reveal{opacity:0;transform:translateY(14px);transition:opacity 520ms var(--am-ux-ease),transform 520ms var(--am-ux-ease);}
html.am-ux-ready .am-ux-reveal.is-visible{opacity:1;transform:none;}

/* Desktop-only pointer depth. Individual rotate properties compose with the
 * existing transform rules and therefore do not fight the established layout. */
@media (min-width:901px) and (pointer:fine){
  .am-card,.am-ci-card,.am-ko-card,.am-u3-card{rotate:var(--am-ux-rotate,0deg);}
}

@media (max-width:760px){
  html{scroll-padding-top:76px;}
  .am-home-hero-card:hover,.am-footer-card:hover{transform:none;box-shadow:none;}
  .am-card:hover,.am-ci-card:hover,.am-ko-card:hover,.am-u3-card:hover{filter:none;}
  .am-home-cta:hover{transform:none;box-shadow:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms;animation-iteration-count:1;transition-duration:.001ms;}
  html.am-ux-ready .am-ux-reveal{opacity:1;transform:none;}
}

/* Footer gold-accent treatment — matched to the supplied reference */
.am-footer-v427 .am-footer-card{border-color:rgba(201,162,39,.58);}
.am-footer-v427 .am-footer-card:hover{border-color:var(--gold);}
.am-footer-v427 .am-footer-card-icon{border-color:rgba(201,162,39,.72);}
.am-footer-v427 .am-footer-contact-line{border-color:rgba(201,162,39,.82);}
.am-footer-v427 .am-footer-contact-line strong{color:var(--gold);}
.am-footer-v427 .am-footer-badges span{border-color:rgba(201,162,39,.72);color:var(--gold);}
.am-footer-v427 .am-footer-links a:hover{border-color:rgba(201,162,39,.55);}
.am-footer-v427 .am-footer-cta{border-color:rgba(201,162,39,.45);}

/* MOBILE VISUAL PARITY — keep the same visual language on touch screens.
 * Mobile removes pointer-hover motion only; it must not remove the site's
 * established colors, depth, borders or static shadows.
 */
@media (max-width:760px){
  .am-home-hero-card{
    box-shadow:0 18px 48px rgba(0,0,0,.24);
  }
  .am-card,.am-ci-card,.am-ko-card,.am-u3-card{
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.14));
  }
  .am-ci-brand-section,.am-ko-brand-section,.am-u3-brand-section{
    box-shadow:0 10px 28px rgba(0,0,0,.10);
  }
  .am-footer-card{
    box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  .am-home-cta{
    box-shadow:0 10px 24px rgba(0,0,0,.20);
  }
  .am-home-cta:active,.am-btn:active,.am-ci-order:active,.am-ko-order:active,.am-u3-order:active,
  .am-detail-order:active,.am-detail-submit:active,.am-direct-submit:active,.am-inline-submit:active,
  .am-footer-cta-btn:active,.am-footer-map-btn:active{
    transform:translateY(1px) scale(.99);
  }
}

/* Keep the gold footer accent identical on mobile. */
@media (max-width:760px){
  footer.am-footer .am-footer-card,
  footer.am-footer .am-footer-contact-card,
  footer.am-footer .am-footer-showroom-card,
  footer.am-footer .am-footer-brand-card{
    border-color:rgba(201,162,39,.68) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.18),0 0 0 1px rgba(201,162,39,.08) inset !important;
  }
  footer.am-footer .am-footer-card-icon{
    color:#E0B83F !important;
    border-color:rgba(201,162,39,.72) !important;
  }
  footer.am-footer .am-footer-contact-line{
    border-color:rgba(201,162,39,.78) !important;
    color:#E0B83F !important;
  }
  footer.am-footer .am-footer-badges span,
  footer.am-footer .am-footer-location-chip{
    border-color:rgba(201,162,39,.68) !important;
    color:#E0B83F !important;
  }
  footer.am-footer .am-footer-social .am-social-icon{
    border-color:rgba(201,162,39,.62) !important;
  }
}



/* MOBILE DARK PARITY — exact showroom palette, matching desktop surfaces. */
@media (max-width:760px){
  body,
  body.home,
  .site-main,
  main{background:var(--showroom-deep) !important;color:var(--white) !important;}

  body.home .am-section,
  body.home .am-cars-section,
  body.home .am-search-section,
  body.home .am-process-section,
  body.home .am-contact-section,
  body.home .am-benefits-section,
  body.home section#cars.am-section.am-cars-section,
  body.home .am-cars-section .container,
  body.home .am-search-form,
  body.home .am-inventory-filter{
    background-color:var(--showroom-base) !important;
    background-image:none !important;
    color:var(--white) !important;
  }

  .am-card,
  .am-ci-card,
  .am-ko-card,
  .am-u3-card,
  .woocommerce ul.products li.product{
    background:var(--showroom-mid) !important;
    background-color:var(--showroom-mid) !important;
    color:var(--white) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.34) !important;
  }

  .am-card .am-body,
  .am-ci-card .am-ci-body,
  .am-ko-card .am-ko-body,
  .am-u3-card .am-u3-body,
  .am-card-content,
  .am-product-summary,
  .am-product-info{
    color:var(--white) !important;
  }

  .am-import-page,
  .am-page,
  .am-page-content,
  .am-ci-page,
  .am-ko-page,
  .am-u3-page{
    background:linear-gradient(180deg,var(--showroom-deep) 0%,var(--showroom-input) 52%,#30383D 100%) !important;
    color:var(--white) !important;
  }

  .am-ci-brand-section,
  .am-ko-brand-section,
  .am-u3-brand-section,
  .am-import-note,
  .am-import-toolbar,
  .am-import-table-wrap{
    background:var(--showroom-mid) !important;
    color:var(--white) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
  }

  .am-footer-v427 .am-footer-grid-v427,
  footer.am-footer{
    background:var(--showroom-base) !important;
    background-color:var(--showroom-base) !important;
    color:var(--white) !important;
  }

  /* Keep the same dark contrast used by desktop form controls. */
  .am-search-field,
  .am-u3-tools .am-u3-input,
  .am-u3-tools .am-u3-select,
  .am-import-controls input,
  .am-import-controls select{
    background:var(--showroom-input) !important;
    color:var(--white) !important;
    border-color:rgba(255,255,255,.22) !important;
  }
}