/* Cars24-inspired theme for this copy of the portfolio: Cars24 blue (#4736fe), white cards on a
   soft lavender page, navy text, the Geist sans throughout, and a solid blue top bar like
   cars24.com. Overrides the site's own colour variables (html[...] beats the original
   [data-theme=...]). This copy is light mode only (forced in index.html). */

html[data-theme] {
  --c24-blue: #4736fe;
  --c24-blue-deep: #3523e0;
  --c24-lavender: #f6f5ff;
  --c24-navy: #0f172b;
  --font-display: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --radius-card: 1rem;
}

html[data-theme=product] {
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f6f5ff;
  --color-muted: #f6f5ff;
  --color-on-muted: #3a3f5c;
  --color-primary: #4736fe;
  --color-primary-hover: #3523e0;
  --color-on-primary: #ffffff;
  --color-primary-subtle: #eeecff;
  --color-primary-text: #4736fe;
  --color-primary-border: #c9c3ff;
  --color-text-default: #0f172b;
  --color-text-muted: #4a5068;
  --color-text-faint: #8a8fa8;
  --color-border-default: #e7e6f3;
  --color-border-emphasis: #d6d3f0;
  --color-border-strong: #bfbbe6;
  --color-focus-ring: #4736fe;
}

header button[aria-label="Switch to Light theme"],
header button[aria-label="Switch to Dark theme"] { display: none !important; }

/* Hero name in Geist, bold and tight like Cars24's headings (main uses a serif here). */
main h1 { font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; }
main h2, main h3 { letter-spacing: -0.015em; }

/* Ticker strip: the deep-blue band that sits above the header on cars24.com. */
.construction-banner { background: var(--c24-blue-deep); color: #fff; border-color: transparent; }

/* Top bar: solid Cars24 blue with white links. */
header.sticky > div.bg-surface { background: var(--c24-blue); }
header.sticky > div.h-px { background: transparent; }
header.sticky > div.bg-text-default { background: #fff; }
header.sticky nav a { color: rgb(255 255 255 / 0.78); }
header.sticky nav a:hover, header.sticky nav a.is-active { color: #fff; background: rgb(255 255 255 / 0.14); }
header.sticky > div.grid a.group\/logo span,
header.sticky > div.grid button,
header.sticky > div.grid a[href^="mailto"] { color: #fff; }
/* "G — S" becomes a white rounded-square badge, echoing the app-icon style of the Cars24 mark. */
header.sticky > div.grid a.group\/logo span {
  background: #fff; color: var(--c24-blue); border-radius: 8px; padding: 4px 9px; font-weight: 700;
}
header.sticky .gs-current { color: #fff; border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.12); }
header.sticky .gs-current svg { color: #fff; }
/* The phone menu sheet stays white, with blue for the active section. */
#mobile-nav-sheet .gs-mnav.is-active { color: var(--c24-blue); background: var(--c24-lavender); }

/* Buttons: Cars24 uses 8px-rounded solid blue primaries and lavender secondaries. */
.btn-flat-primary, a[data-ph-cta="hero"] { border-radius: 8px; font-weight: 600; }

/* Hero card (cars24-card.js): hides the globe + photo and shows a car-listing-style card. */
div.aspect-square.max-w-\[960px\] > :not(.gs-c24-wrap) { visibility: hidden; }
div.aspect-square.max-w-\[960px\] { clip-path: none !important; }
.gs-c24-wrap {
  position: absolute; inset: 8% 4%; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) { .gs-c24-wrap { inset: 10% 6%; } }

.gs-c24-card {
  position: relative; z-index: 1; width: min(100%, 380px);
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 50px -22px rgb(31 20 140 / 0.45), 0 0 0 1px #ecebf6;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gs-c24-card:hover { transform: translateY(-4px); }
.gs-c24-photo {
  position: relative; height: 260px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #dcd8ff 0%, #f1efff 55%, #f8f7ff 100%);
}
.gs-c24-photo img { position: absolute; left: 50%; bottom: -10px; height: 116%; translate: -50% 0; object-fit: contain; }
.gs-c24-tag {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  background: #fff; color: var(--c24-navy); font-size: 11px; font-weight: 600;
  padding: 6px 14px 5px 12px; border-top-right-radius: 14px;
}
.gs-c24-tag b { color: var(--c24-blue); }
.gs-c24-check {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  background: #e8f8ef; color: #0d7a3e; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
}
.gs-c24-body { padding: 12px 16px 14px; }
.gs-c24-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--c24-navy); letter-spacing: -0.01em; }
.gs-c24-title small { font-size: 11px; font-weight: 500; color: #7a7f99; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.gs-c24-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.gs-c24-chips span { background: #f3f3f7; color: #3a3f5c; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 6px; }
.gs-c24-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gs-c24-price .lbl { display: block; font-size: 11px; color: #7a7f99; }
.gs-c24-price .emi { font-size: 12px; font-weight: 600; color: var(--c24-navy); border-bottom: 1px dashed #b9bcd0; }
.gs-c24-price .big { font-size: 22px; font-weight: 700; color: var(--c24-navy); letter-spacing: -0.02em; text-align: right; }
.gs-c24-price .big s { font-size: 13px; font-weight: 500; color: #9a9db3; margin-right: 6px; }
.gs-c24-foot { background: #f6f5ff; color: #4a5068; font-size: 11px; padding: 9px 16px; }

/* Floating service tiles around the card, like the "Manage your vehicle" tiles. */
.gs-c24-tile {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--c24-navy); font-size: 12px; font-weight: 600;
  padding: 8px 12px 8px 8px; border-radius: 12px;
  box-shadow: 0 10px 24px -12px rgb(31 20 140 / 0.4), 0 0 0 1px #ecebf6;
  animation: gs-c24-float 5s ease-in-out infinite;
}
.gs-c24-tile i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--c24-lavender); font-style: normal; font-size: 14px;
}
/* Tiles hang off the card's edges over the photo's empty sides, clear of the text below. */
.gs-c24-tile.t1 { left: -44px; top: 7%; }
.gs-c24-tile.t2 { right: -58px; top: 24%; animation-delay: -1.2s; }
.gs-c24-tile.t3 { left: -66px; top: 38%; animation-delay: -2.4s; }
.gs-c24-tile.t4 { right: -40px; top: 52%; animation-delay: -3.6s; }
@keyframes gs-c24-float { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .gs-c24-tile { animation: none; } }
@media (max-width: 767px) {
  .gs-c24-wrap { inset: 3% 0; }
  .gs-c24-stage { width: min(100%, 320px); }
  .gs-c24-photo { height: 150px; }
  .gs-c24-body { padding: 10px 14px 12px; }
  .gs-c24-chips { margin: 8px 0 10px; }
  .gs-c24-price .big { font-size: 20px; }
  .gs-c24-tile { font-size: 11px; padding: 6px 10px 6px 6px; }
  .gs-c24-tile i { width: 22px; height: 22px; font-size: 12px; }
  .gs-c24-tile.t1 { left: -14px; top: 6%; }
  .gs-c24-tile.t2 { right: -14px; top: 30%; }
  .gs-c24-tile.t3, .gs-c24-tile.t4 { display: none; }
}
.gs-c24-stage { position: relative; width: min(100%, 380px); }
.gs-c24-stage .gs-c24-card { width: 100%; }