/* ===========================================================================
   mohamedalsaud.com — tenant theme
   ---------------------------------------------------------------------------
   The stock app ships three competing palettes: gold (#a57937), navy (#002B5B /
   #2d5a9a) with gold headings (#FFD700), and Tailwind blues for buttons and
   info panels. This replaces all three with one system built on the client's
   own brand red (#b40000, sampled from their logo) over near-black and warm
   neutrals.

   Rules of the system, so it stays coherent as pages change:
     ink       structure  — section bars, nav, headings
     red       action     — primary buttons, prices, links, current state
     red tint  selection  — chips, active filters, highlights (never solid)
     neutral   data       — spec cards, tables, counts (must not shout)
     green     reserved   — WhatsApp and success only; never decorative
   =========================================================================== */

:root{
  /* System stack, matching dumsan.com. Arabic faces kept so Arabic shapes. */
  --tenant-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","Segoe UI",
                "Helvetica Neue",system-ui,"Noto Sans Arabic",Arial,sans-serif;

  --ink:#141414;           /* structure: bars, nav pill, headings           */
  --ink-2:#262626;         /* raised dark surface                           */
  --ink-line:#000000;

  --brand:#b40000;         /* action                                        */
  --brand-dark:#8a0000;    /* hover / pressed                               */
  --brand-light:#d42020;
  --brand-tint:rgba(180,0,0,.07);
  --brand-tint-2:rgba(180,0,0,.13);
  --brand-line:rgba(180,0,0,.30);

  /* Neutrals biased very slightly warm so they sit with the red rather than
     reading as cold grey next to it. */
  --surface:#ffffff;
  --surface-2:#f7f5f5;
  --line:#e8e4e4;
  --muted:#6f6866;

  --xanox-accent:#b40000;      --xanox-accent-dark:#8a0000; --xanox-accent-light:#d42020;
  --xanox-primary:#141414;     --xanox-primary-dark:#000000; --xanox-primary-light:#3a3a3a;
}

body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-family:var(--tenant-sans)!important}

/* --- 1. Structure: section header bars ---------------------------------- */
/* Navy bar + gold heading becomes near-black + white with a red edge. The
   accent does the branding so the type stays maximally legible. */
[class*="bg-[#002B5B]"],[class*="bg-[#002b5b]"]{
  background-color:var(--ink)!important;
  border-left:4px solid var(--brand)!important;
}
[class*="text-[#FFD700]"],[class*="text-[#ffd700]"]{color:#fff!important;letter-spacing:.01em}

/* --- 2. Action: primary buttons ----------------------------------------- */
/* :not(:has(img)) matters — these utilities are also used on image tiles
   (e.g. the selected gallery thumbnail), where a solid fill hides the photo. */
[class*="bg-[#a57937]"]:not([class*="hover:bg-[#a57937]"]),[class*="bg-[#A57937]"]:not([class*="hover:bg-[#A57937]"]),
[class*="bg-[#d4af37]"]:not([class*="hover:bg-[#d4af37]"]),[class*="bg-[#c9a962]"]:not([class*="hover:bg-[#c9a962]"]),
.bg-blue-600,.bg-blue-700,.bg-blue-500{
  background-color:var(--brand)!important;color:#fff!important}
/* Translucent overlays: Tailwind expresses these as a colour class PLUS
   bg-opacity-*, where the alpha lives in --tw-bg-opacity. Setting a solid
   colour above would drop the alpha and paint an opaque block over the photo
   (this is what turned the selected gallery thumbnail into a red square), so
   anything carrying bg-opacity keeps its transparency. */
[class*="bg-opacity-"].bg-blue-500,[class*="bg-opacity-"].bg-blue-600,
[class*="bg-opacity-"].bg-blue-700,[class*="bg-opacity-"][class*="bg-[#a57937]"]:not([class*="hover:bg-[#a57937]"]){
  background-color:rgba(180,0,0,.18)!important}
/* Selection border on image tiles reads red, matching the wash. */
.border-blue-400,.border-blue-500,.border-blue-600{border-color:var(--brand)!important}
.ring-blue-400,.ring-blue-500,.ring-blue-600{--tw-ring-color:var(--brand)!important}
[class*="hover:bg-[#8f662d]"]:hover,.hover\:bg-blue-700:hover,.hover\:bg-blue-800:hover{
  background-color:var(--brand-dark)!important}

/* --- 3. Action: text, prices, links -------------------------------------- */
/*  is essential. Tailwind puts the state in the class
   name (hover:text-x, group-hover:text-x), and a [class*=] selector matches
   those too — which would paint a hover-only colour permanently. That is what
   turned every card title red: its real class is text-gray-900 with
   group-hover:text-[#2d5a9a], so the title must stay ink until hovered. */
.vehicle-price,.text-yellow-600,
[class*="text-[#a57937]"]:not([class*="hover:text-[#a57937]"]),
[class*="text-[#A57937]"]:not([class*="hover:text-[#A57937]"]),
[class*="text-[#c9a962]"]:not([class*="hover:text-[#c9a962]"]),
[class*="text-[#d4af37]"]:not([class*="hover:text-[#d4af37]"]),
[class*="text-[#ca8a04]"]:not([class*="hover:text-[#ca8a04]"]),
[class*="text-[#2d5a9a]"]:not([class*="hover:text-[#2d5a9a]"]),
.text-blue-600,.text-blue-700,.text-blue-500{color:var(--brand)!important}

/* Hover states, applied only when actually hovered. */
[class*="hover:text-[#8f662d]"]:hover,
[class*="hover:text-[#a57937]"]:hover,
.group:hover [class*="group-hover:text-[#a57937]"],
.group:hover [class*="group-hover:text-[#2d5a9a]"]{color:var(--brand)!important}

/* --- 4. Selection: chips, active filters, dense controls ----------------- */
/* Solid red on every small control was overwhelming. Selected state is now a
   tint with red type and a hairline, which reads clearly without shouting. */
[class*="bg-[#a57937]"][class*="text-xs"],
[class*="bg-[#a57937]"][class*="rounded-xl"][class*="text-xs"]{
  background-color:var(--brand-tint)!important;
  color:var(--brand)!important;
  border:1px solid var(--brand-line)!important;
  box-shadow:none!important;
}
[class*="bg-[#a57937]/10"]{background-color:var(--brand-tint)!important}
[class*="hover:bg-[#a57937]/5"]:hover{background-color:var(--brand-tint)!important}

/* --- 5. Data: info panels must stay quiet -------------------------------- */
/* The blue-tinted spec panels competed with the accent. Neutral surfaces keep
   the numbers readable and let the red mean "action" everywhere. */
.bg-blue-50,.bg-blue-100,.bg-indigo-50,.bg-sky-50{background-color:var(--surface-2)!important}
.bg-blue-200{background-color:var(--line)!important}
.border-blue-100,.border-blue-200,.border-blue-300{border-color:var(--line)!important}
.text-blue-800,.text-blue-900{color:var(--ink)!important}

/* --- 6. Focus, rings, borders -------------------------------------------- */
[class*="ring-[#a57937]"]:focus,[class*="focus:ring-[#a57937]"]:focus,
.focus\:ring-blue-500:focus,.focus\:ring-blue-600:focus{--tw-ring-color:var(--brand-line)!important}
[class*="shadow-[#a57937]"]{--tw-shadow-color:var(--brand-tint-2)!important}
[class*="focus:border-[#a57937]"]:focus,.focus\:border-blue-500:focus{border-color:var(--brand)!important}
[class*="border-t-[#a57937]"]{border-top-color:var(--brand)!important}
[class*="border-[#a57937]"],[class*="border-[#c9a962]"]{border-color:var(--brand-line)!important}
[class*="hover:border-[#a57937]"]:hover{border-color:var(--brand-line)!important}
[class*="bg-[#a57937]"]::-webkit-slider-thumb{background-color:var(--brand)!important}
[class*="bg-[#a57937]"]::-moz-range-thumb{background-color:var(--brand)!important}

/* --- 7. Backgrounds that carried a gold wash ----------------------------- */
.bg-xanox-dynamic-light{
  background-color:#faf9f9!important;
  background-image:radial-gradient(ellipse 60% 50% at 100% 0,rgba(180,0,0,.06) 0,rgba(0,0,0,0) 60%),
                   linear-gradient(180deg,#fbfafa,#f2efef)!important}
.bg-xanox-dynamic{
  background-image:radial-gradient(ellipse 60% 50% at 100% 0,rgba(180,0,0,.09) 0,rgba(0,0,0,0) 60%),
                   linear-gradient(180deg,#fbfafa,#f2efef)!important}
.bg-xanox-dynamic:before,.bg-xanox-dynamic:after{background:var(--brand-tint)!important}

/* --- 8. Layout fixes carried over ---------------------------------------- */
/* Hero and Featured Showroom are both z-20; the later one wins and covers the
   open search dropdown. Lift the hero (sticky navbar stays z-50). */
section[class*="z-20"][class*="overflow-visible"]{z-index:40!important}
/* Compact dropdown rows so more options fit on short laptop screens. */
[class*="top-[calc(100%+10px)]"] button{padding-top:.4rem!important;padding-bottom:.4rem!important}

/* --- 9. Logo sizing ------------------------------------------------------ */
/* The Al Saud mark is near-square (1.31:1), so it is height-limited and reads
   small at the stock sizes tuned for a wide wordmark. Raised across all three
   breakpoints, with a width cap so it can never overrun the header. */
nav a img[alt="Logo"]{height:76px!important;max-width:min(52vw,260px)!important}
@media(min-width:640px){nav a img[alt="Logo"]{height:96px!important}}
@media(min-width:768px){nav a img[alt="Logo"]{height:120px!important}}

/* --- 10. Swipe gestures ---------------------------------------------------
   Horizontal swipes drive the photo gallery. Without this, the browser also
   reads them as back/forward history navigation and a right-swipe walks the
   user off the site entirely. overscroll-behavior-x keeps the gesture inside
   the page; vertical scrolling and pinch-zoom are unaffected. */
html,body{overscroll-behavior-x:contain}

/* Promote the gallery photo to its own compositing layer while it animates.
   Android Chrome otherwise repaints the full-size image each frame, which is
   what made the swipe look choppy there but smooth on iOS. */
nav ~ * img[src*="encar"],[class*="aspect-"] > img{backface-visibility:hidden}