/* Bousla responsive refinements (2026-11-03). Loaded after the main stylesheet; remove the two <link>/<script>
   lines in index.html to switch it all off. Phone = 767.98px and below (Tailwind md starts at 768px). */

/* 2. Hero slider: no centre/corner progress counter and pause pill, on every screen size. */
.hero-slider-controls { display: none !important; }

/* 6. Search bars scroll away with the page instead of staying pinned under the header (every screen size). */
div.sticky.top-16.z-30 { position: static !important; top: auto !important; }

@media (max-width: 767.98px) {

  /* 1. Signed in: the notification bell becomes a user icon (the click is routed to "My account" by the script). */
  .header button.notification svg { display: none !important; }
  .header button.notification { width: 40px; }
  .header button.notification::after { display: none !important; } /* the unread dot belongs to the bell */
  .header button.notification::before {
    content: ""; display: block; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* 3. Cars page hero search: two fields per row, tighter panel. */
  [class*="bg-primary/55"] > div[class*="grid-cols-1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  [class*="bg-primary/55"] > div[class*="grid-cols-1"] select { height: 40px; padding-inline: 10px; font-size: 13px; }
  [class*="bg-primary/55"] { padding: 10px; }

  /* 3. Cars results: search box, Filters and Sort on one row. */
  div.sticky.top-16.z-30 div.flex-wrap:has(> input[aria-label="Model"]) { flex-wrap: nowrap; gap: 8px; }
  div.sticky.top-16.z-30 input[aria-label="Model"] { min-width: 0; flex: 1 1 0; }
  div.sticky.top-16.z-30 select[aria-label="Sort"] { flex: 0 0 auto; width: 118px; padding-inline: 8px; font-size: 13px; }
  div.sticky.top-16.z-30 > div { padding-block: 10px; }

  /* 4. Cars page brands: four per row, round white logos, no grey box behind them. */
  div.grid:has(> button.group img[src^="/brands/"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  div.grid:has(> button.group img[src^="/brands/"]) > button.group { gap: 6px; }
  div.grid:has(> button.group img[src^="/brands/"]) > button.group > span:first-child {
    width: 60px; height: 60px; margin-inline: auto; border-radius: 50%; background: #fff;
    border: 1px solid var(--color-border, #e7e2d8); box-shadow: 0 1px 3px rgb(16 24 40 / .08);
  }
  div.grid:has(> button.group img[src^="/brands/"]) > button.group > span:first-child > span[style*="border-radius: 50%"] { border-color: transparent !important; }
  div.grid:has(> button.group img[src^="/brands/"]) > button.group > span:last-child { font-size: 12px; }

  /* 5. Cars page: Featured / Used / New cards, two per screen. */
  div.overflow-x-auto.snap-x { gap: 10px; scroll-padding-inline: 16px; }
  div.overflow-x-auto.snap-x > article.group { width: calc((100% - 10px) / 2); }
  div.overflow-x-auto.snap-x > article.group > button { height: 7rem; }
  div.overflow-x-auto.snap-x > article.group > button > span[class*="top-3"] { top: 6px; inset-inline-start: 6px; gap: 4px; }
  div.overflow-x-auto.snap-x > article.group > button > span[class*="top-3"] > span { padding: 2px 6px; font-size: 10px; }
  div.overflow-x-auto.snap-x > article.group > button > span[class*="bottom-3"][class*="start-3"] { display: none; }
  div.overflow-x-auto.snap-x > article.group > button > span[class*="bottom-3"][class*="end-3"] { bottom: 6px; inset-inline-end: 8px; font-size: 13px; }
  div.overflow-x-auto.snap-x > article.group > div { padding: 10px; gap: 6px; }
  div.overflow-x-auto.snap-x > article.group > div h3 { font-size: 13px; }
  div.overflow-x-auto.snap-x > article.group > div p,
  div.overflow-x-auto.snap-x > article.group > div button { font-size: 11px; }
  div.overflow-x-auto.snap-x > article.group > div > span[style*="border-radius: 50%"] { display: none; }

  /* 5. Dealership cards (Cars page and Dealerships page): two per row, avatar over the photo, name below. */
  div.grid.grid-cols-1:has(> button.rounded-2xl > div.h-24) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  div.grid.grid-cols-1 > button.rounded-2xl > div.h-24 { height: 4.25rem; }
  div.grid.grid-cols-1 > button.rounded-2xl > div.h-24 + div { flex-direction: column; gap: 6px; padding: 0 10px 12px; }
  div.grid.grid-cols-1 > button.rounded-2xl > div.h-24 + div > div:first-child { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
  div.grid.grid-cols-1 > button.rounded-2xl > div.h-24 + div > div:last-child { flex: 0 0 auto; width: 100%; }
  div.grid.grid-cols-1 > button.rounded-2xl > div.h-24 + div p.text-sm { font-size: 13px; }
}

/* 7. Phone top bar (600px and below, where the site hides its text buttons): a login icon when signed out, and a
   language icon. Signed in, the user icon above is shown instead of the login icon. */
@media (max-width: 600px) {
  .header .language-button,
  .header .login-button {
    display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; min-width: 40px; min-height: 40px; height: 40px; padding: 0; gap: 0;
    border: 1px solid var(--v5-color-border, #e7e2d8); border-radius: 12px;
    background: var(--v5-color-surface, #fff); color: var(--v5-color-navy, #101b53);
  }
  .header .language-button > svg { display: block !important; width: 20px; height: 20px; }
  .header .language-button > span { display: none; }
  .header .login-button { font-size: 0; line-height: 0; }
  .header .login-button::before {
    content: ""; display: block; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  :root[dir="rtl"] .header .login-button::before { transform: scaleX(-1); }
  .header .header-actions { gap: 8px; }
}
@media (max-width: 360px) {
  .header .city-trigger { padding: 0 9px; font-size: 12px; }
  .header .header-actions { gap: 6px; }
}

/* 8. /search on phones (the site already shows two columns from 640px): two service cards per row, tighter cards. */
@media (max-width: 639.98px) {
  div.grid.grid-cols-1:has(> div.group.cursor-pointer) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer { border-radius: 14px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:first-child { height: 6.5rem; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:first-child > div.absolute.translate-y-1\/2 { inset-inline-start: 10px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:first-child > div.absolute.translate-y-1\/2 > div { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child { padding: 1.75rem 10px 10px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:first-child { flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:first-child > h3 { flex: 1 1 100%; min-width: 0; font-size: 13px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:first-child > span { font-size: 10px; padding: 1px 5px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child p { font-size: 11px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:nth-of-type(2) { margin-top: 6px; gap: 4px; flex-wrap: wrap; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:nth-of-type(2) svg { width: 11px; height: 11px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:nth-of-type(2) > span { font-size: 12px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:nth-of-type(3) { margin-top: 4px; font-size: 11px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:last-child { margin-top: 10px; padding-top: 10px; flex-wrap: wrap; gap: 6px; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:last-child > button:first-child { flex: 1 1 100%; white-space: nowrap; }
  div.grid.grid-cols-1 > div.group.cursor-pointer > div:last-child > div:last-child > button:not(:first-child) { flex: 1 1 0; min-width: 0; }
}

/* 9. Home page cards on phones: car and business cards two per screen, with the car card's image, text and price
   sized for a 174px-wide card and equal heights in a row. */
@media (max-width: 600px) {
  .v5 .cards-grid:not(.article-grid) { gap: 10px; }
  .v5 .cards-grid:not(.article-grid) > .card { flex: 0 0 calc((100% - 10px) / 2); width: auto; }
  .v5 .car-card .card-image { aspect-ratio: 4 / 2.9; }
  .v5 .car-card { display: flex; flex-direction: column; }
  .v5 .car-card .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 10px 10px 9px; }
  .v5 .car-card .car-year { font-size: 10px; }
  .v5 .car-card .card-link { font-size: 12.5px; min-height: 38px; margin-top: 2px; line-height: 1.5; }
  .v5 .car-card .price { font-size: 16px; margin-top: 5px; }
  .v5 .car-card .price small { font-size: 9px; }
  .v5 .car-card .car-specs { justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; padding-bottom: 8px; font-size: 10px; }
  .v5 .car-card .car-specs svg { width: 13px; height: 13px; }
  .v5 .car-card .card-bottom { margin-top: auto; padding-top: 8px; }
  .v5 .business-card .card-link { font-size: 12.5px; }
  .v5 .business-card .card-body { padding-inline: 10px; }
}

/* 10. Home articles on phones: one horizontal row like the other sections (and like the desktop row), image on top. */
@media (max-width: 600px) {
  .v5 .article-grid { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline-end: -16px; padding-inline-end: 16px; padding-bottom: 8px; }
  .v5 .article-grid::-webkit-scrollbar { display: none; }
  .v5 .article-card { flex: 0 0 calc((100% - 10px) / 2); width: auto; flex-direction: column; min-height: 0; scroll-snap-align: start; }
  .v5 .article-card .card-image { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; }
  .v5 .article-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px; }
  .v5 .article-card .card-link { min-height: 2.9em; margin-top: 0; font-size: 12.5px; line-height: 1.45; }
  .v5 .article-card .article-meta { margin-top: auto; padding-top: 8px; font-size: 10px; }
}

/* 11. Home hero: the search bar and the category tiles sit BELOW the image instead of covering it (every screen size). */
.v5 .hero-with-image { margin-bottom: 0; }
.v5 .hero-controls {
  position: relative !important; inset: auto !important; width: min(1120px, 100% - 48px) !important; margin: 18px auto 0;
  padding-bottom: 6px;
}
.v5 .hero-controls .category-wrap { position: relative !important; inset: auto !important; top: auto !important; width: 100% !important; margin: 0; padding-inline: 0; }
@media (max-width: 700px) {
  .v5 .hero-with-image { margin: 12px var(--v5-mobile-gutter, 16px) 0; }
  .v5 .hero-controls { width: auto !important; margin: 12px 0 0; }
  .v5 .hero-controls .category-wrap { width: calc(100% + 16px) !important; margin-top: 12px; padding-inline-end: 16px; overflow-x: auto; }
}

/* 12. Bottom bar: Home | Dealerships | Cars (the coloured centre button, search a car) | Services | Account.
   The old "Sell a car" button keeps its coloured centre look and is labelled Cars; the old Cars button is
   labelled Dealerships. Labels and links are set by responsive-20261103-6.js. */
/* the coloured Cars button stays in the centre: a larger, round button raised above the bar */
.v5 .bottom-nav .add-listing > span { width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; }
.v5 .bottom-nav .add-listing svg { width: 27px; height: 27px; }
.v5 .bottom-nav > button:nth-child(2) > span > svg,
.v5 .bottom-nav > button:nth-child(5) > span > svg { display: none; }
.v5 .bottom-nav > button:nth-child(2) > span::before,
.v5 .bottom-nav > button:nth-child(5) > span::before { content: ""; display: block; width: 22px; height: 22px; background: currentColor; }
.v5 .bottom-nav > button:nth-child(2) > span::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v5 .bottom-nav > button:nth-child(5) > span::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the native Cars button now stands for Dealerships: it is highlighted on the dealerships pages, not on the cars pages */
.v5 .bottom-nav > button:nth-child(2).current { color: var(--v5-color-muted); font-weight: 500; }
.v5 .bottom-nav > button:nth-child(2).current > span { background: none; }
.v5 .bottom-nav > button:nth-child(2)[data-on="1"] { color: var(--v5-color-blue); font-weight: 700; }
.v5 .bottom-nav > button:nth-child(2)[data-on="1"] > span { background: #edf2ff; }

/* 14. Dark mode switch (injected by the script): header button on wide screens, footer button everywhere. */
.header .theme-toggle { display: none; }
@media (min-width: 961px) {
  .header .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--v5-color-border, #e7e2d8); border-radius: 999px; background: var(--v5-color-surface, #fff); color: var(--v5-color-navy, #101b53); cursor: pointer; }
  .header .theme-toggle:hover { color: var(--v5-color-purple, #7b35f5); border-color: var(--v5-color-purple, #7b35f5); }
}
.footer-preferences { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-preferences .theme-toggle { display: inline-flex; align-items: center; gap: 8px; }
.footer-preferences .theme-toggle .theme-label { font: inherit; }

/* 15. Dark mode: my own rules above, in dark colours. */
.dark .header .language-button, .dark .header .login-button, .dark .header .notification, .dark .header .theme-toggle {
  color: var(--v5-color-ink); background: var(--v5-color-surface); border-color: var(--v5-color-border);
}
.dark .v5 .bottom-nav > button:nth-child(2)[data-on="1"] > span { background: var(--v5-color-elevated); }
.dark .v5 .logo .brand-logo, .dark .v5 .footer-brand-link img { content: url("/images/bousla-logo-dark.png"); }

/* 16. Home: service categories as one small row of chips with a More button (filled by the script from /api/v1/categories). */
.svc-cats { width: min(1120px, 100% - 48px); margin: 14px auto 0; }
@media (max-width: 700px) { .svc-cats { width: auto; margin: 12px var(--v5-mobile-gutter, 16px) 0; } }
.svc-row { display: flex; align-items: flex-start; gap: 8px; }
.svc-list { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.svc-list::-webkit-scrollbar { display: none; }
.svc-row[data-open="1"] .svc-list { flex-wrap: wrap; overflow: visible; }
.svc-chip, .svc-more {
  flex: 0 0 auto; height: 28px; padding: 0 11px; border: 1px solid var(--v5-color-border, #e7e2d8); border-radius: 999px;
  background: var(--v5-color-surface, #fff); color: var(--v5-color-navy, #101b53); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
}
.svc-chip:hover { color: var(--v5-color-purple, #7b35f5); border-color: var(--v5-color-purple, #7b35f5); }
.svc-more { margin-top: 2px; color: var(--v5-color-purple, #7b35f5); }
.svc-row[data-fits="1"] .svc-more { display: none; }
.dark .svc-chip, .dark .svc-more { background: var(--v5-color-surface); border-color: var(--v5-color-border); color: var(--v5-color-ink); }
.dark .svc-more { color: var(--v5-color-purple); }

/* 17. Home category tiles: one icon system. Duotone line icons (inserted by the script) in soft brand-coloured badges. */
.v5 .hero-controls .category {
  --ic: #7b35f5; --ic-1: #f6f1ff; --ic-2: #e8dcff; --ic-ring: rgba(123, 53, 245, .20); --ic-glow: rgba(123, 53, 245, .30);
}
.v5 .hero-controls .category[data-cat="dealers"]  { --ic: #cf12ae; --ic-1: #fff1fb; --ic-2: #ffdcf4; --ic-ring: rgba(207, 18, 174, .20); --ic-glow: rgba(207, 18, 174, .28); }
.v5 .hero-controls .category[data-cat="cars"]     { --ic: #1f63ea; --ic-1: #f0f5ff; --ic-2: #dbe8ff; --ic-ring: rgba(31, 99, 234, .20);  --ic-glow: rgba(31, 99, 234, .28); }
.v5 .hero-controls .category[data-cat="qa"]       { --ic: #ea6a0c; --ic-1: #fff6ee; --ic-2: #ffe5cf; --ic-ring: rgba(234, 106, 12, .22);  --ic-glow: rgba(234, 106, 12, .28); }
.dark .v5 .hero-controls .category                { --ic: #b794ff; --ic-1: rgba(167, 60, 236, .20); --ic-2: rgba(123, 53, 245, .10); --ic-ring: rgba(183, 148, 255, .28); --ic-glow: rgba(123, 53, 245, .45); }
.dark .v5 .hero-controls .category[data-cat="dealers"] { --ic: #ff86dc; --ic-1: rgba(220, 22, 193, .20); --ic-2: rgba(220, 22, 193, .09); --ic-ring: rgba(255, 134, 220, .28); --ic-glow: rgba(220, 22, 193, .42); }
.dark .v5 .hero-controls .category[data-cat="cars"]    { --ic: #86b3ff; --ic-1: rgba(42, 107, 255, .22); --ic-2: rgba(42, 107, 255, .10); --ic-ring: rgba(134, 179, 255, .28); --ic-glow: rgba(42, 107, 255, .42); }
.dark .v5 .hero-controls .category[data-cat="qa"]      { --ic: #ffab70; --ic-1: rgba(255, 138, 36, .20); --ic-2: rgba(255, 138, 36, .09); --ic-ring: rgba(255, 171, 112, .28); --ic-glow: rgba(255, 138, 36, .40); }

.v5 .hero-controls .category .category-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 15px;
  background: linear-gradient(145deg, var(--ic-1), var(--ic-2));
  box-shadow: inset 0 0 0 1px var(--ic-ring), 0 6px 14px -8px var(--ic-glow);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
}
.v5 .hero-controls .category .category-icon > svg { display: none; }
.v5 .hero-controls .category .ci { display: flex; }
.v5 .hero-controls .category .ci svg { display: block; width: 26px; height: 26px; fill: none; stroke: var(--ic); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.v5 .hero-controls .category .ci .soft { fill: var(--ic); fill-opacity: .20; stroke: none; }
.v5 .hero-controls .category:hover .category-icon { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 0 0 1px var(--ic-ring), 0 10px 18px -8px var(--ic-glow); }
.v5 .hero-controls .category:active .category-icon { transform: scale(.96); }
.v5 .hero-controls .category > span:last-child { font-weight: 650; letter-spacing: -.005em; line-height: 1.25; text-align: center; white-space: normal; }

/* phones: four equal tiles that always fit the row */
@media (max-width: 700px) {
  .v5 .hero-controls .category-wrap { width: 100% !important; padding-inline: 0 !important; overflow: visible !important; }
  .v5 .hero-controls .categories { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: auto; padding: 0; scroll-snap-type: none; }
  .v5 .hero-controls .category, .v5 .hero-controls .category:last-child {
    min-width: 0; flex: none; gap: 9px; padding: 13px 4px 11px; border-radius: 18px; font-size: 11.5px;
    box-shadow: 0 1px 2px rgba(16, 27, 83, .04), 0 8px 20px -12px rgba(16, 27, 83, .18);
  }
  .v5 .hero-controls .category .category-icon { width: 46px; height: 46px; }
}
@media (max-width: 360px) {
  .v5 .hero-controls .categories { gap: 6px; }
  .v5 .hero-controls .category, .v5 .hero-controls .category:last-child { font-size: 10.5px; padding-inline: 2px; }
  .v5 .hero-controls .category .category-icon { width: 42px; height: 42px; border-radius: 14px; }
  .v5 .hero-controls .category .ci svg { width: 24px; height: 24px; }
}
/* desktop: roomier tiles with readable labels */
@media (min-width: 701px) {
  .v5 .hero-controls .categories { height: auto; padding: 18px 8px; }
  .v5 .hero-controls .category { gap: 11px; padding: 6px 8px; font-size: 13px; }
  .v5 .hero-controls .category .category-icon { width: 54px; height: 54px; border-radius: 17px; }
  .v5 .hero-controls .category .ci svg { width: 30px; height: 30px; }
}

/* 18. /articles on phones (two columns from 640px already): two article cards per row, compact. */
@media (max-width: 639.98px) {
  div.grid:has(> article.group > div[class*="aspect-"] + div) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  div.grid > article.group > div[class*="aspect-"] { aspect-ratio: 4 / 3; }
  div.grid > article.group > div[class*="aspect-"] + div { padding: 12px; }
  div.grid > article.group > div[class*="aspect-"] + div > p.text-xs { font-size: 11px; }
  div.grid > article.group > div[class*="aspect-"] + div > h2 { margin-top: 6px; font-size: 14.5px; line-height: 1.35; }
  div.grid > article.group > div[class*="aspect-"] + div > p.text-sm { margin-top: 6px; font-size: 12px; line-height: 1.5; -webkit-line-clamp: 2; line-clamp: 2; }
  div.grid > article.group > div[class*="aspect-"] + div > span.mt-auto { padding-top: 10px; font-size: 12px; }
}

/* 19. Home filter sheet on phones (the Car filters button): the site's own rule pushed the bottom sheet below the screen
   (`top: calc(100% + 8px)` beat `inset: auto 0 0`). It opens from the bottom edge again, and scrolls if the screen is short. */
@media (max-width: 700px) {
  .v5 .hero-controls .filter-panel { top: auto !important; bottom: 0 !important; z-index: 80; max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; }
}

/* 20. Home: tall ad in the side column, under the "Your business" card (placement homepage_sidebar, 300x600). */
.hp-tall-ad { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hp-tall-ad-label { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--v5-color-muted, #6b7280); }
.hp-tall-ad-slot { aspect-ratio: 1 / 2; border-radius: 12px; overflow: hidden; border: 1px solid var(--v5-color-border, #e8ecf3); background: var(--v5-color-surface, #fff); }
.hp-tall-ad-slot.is-fading { animation: hp-tall-ad-in .7s ease-out; }
@keyframes hp-tall-ad-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hp-tall-ad-slot.is-fading { animation: none; } }
.hp-tall-ad-link, .hp-tall-ad-link img { display: block; width: 100%; height: 100%; }
.hp-tall-ad-link img { object-fit: cover; }
.hp-tall-ad-slot.is-empty { border: 1.5px dashed #d9c8ff; background: linear-gradient(180deg, #fcfaff, #f5efff); }
.hp-tall-ad-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 18px; text-align: center; }
.hp-tall-ad-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; color: #7b35f5; background: linear-gradient(145deg, #f6f1ff, #e8dcff); box-shadow: inset 0 0 0 1px rgba(123, 53, 245, .2); }
.hp-tall-ad-empty strong { font-size: 18px; line-height: 1.3; color: var(--v5-color-navy, #101b53); }
.hp-tall-ad-sub { font-size: 12px; line-height: 1.7; color: var(--v5-color-muted, #6b7280); }
.hp-tall-ad-cta { margin-top: 6px; padding: 9px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 650; color: #fff; background: var(--v5-brand-gradient, linear-gradient(105deg, #dc16c1, #a73cec 53%, #ff8a24)); cursor: pointer; }
.hp-tall-ad-cta:hover { filter: brightness(1.06); }
.dark .hp-tall-ad-slot { background: var(--v5-color-surface); border-color: var(--v5-color-border); }
.dark .hp-tall-ad-slot.is-empty { border-color: rgba(183, 148, 255, .35); background: linear-gradient(180deg, var(--v5-color-elevated), var(--v5-color-surface)); }
.dark .hp-tall-ad-badge { color: #cdb4ff; background: linear-gradient(145deg, rgba(167, 60, 236, .22), rgba(123, 53, 245, .10)); box-shadow: inset 0 0 0 1px rgba(183, 148, 255, .28); }
.dark .hp-tall-ad-empty strong { color: var(--v5-color-ink); }

/* 21. Phone menu (Account button): a coloured Log in / Register or My account button at the top of the list. */
.v5 .desktop-nav .menu-account-cta { display: none; }
.v5 .desktop-nav.open .menu-account-cta {
  display: flex; grid-column: 1 / -1; order: -1; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; margin-bottom: 4px;
  border: 0; border-radius: 14px; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; cursor: pointer;
  background: var(--v5-brand-gradient, linear-gradient(105deg, #dc16c1, #a73cec 53%, #ff8a24)); box-shadow: 0 10px 22px -12px rgba(167, 60, 236, .75);
}
.v5 .desktop-nav.open .menu-account-cta:active { transform: scale(.985); }
.v5 .desktop-nav.open .menu-account-cta svg { flex: 0 0 auto; }

/* 22. Top bar: the language switch is an icon on phones and small tablets (up to 960px), not the word "عربي"/"English". */
@media (max-width: 960px) {
  .header .language-button {
    display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0;
    border: 1px solid var(--v5-color-border, #e7e2d8); border-radius: 12px; background: var(--v5-color-surface, #fff); color: var(--v5-color-navy, #101b53);
  }
  .header .language-button > svg { display: block !important; width: 20px; height: 20px; }
  .header .language-button > span { display: none; }
}

/* 23. Footer: language and appearance as two matching pills, side by side, never stretched. */
.v5 .footer-preferences { display: flex !important; flex-wrap: wrap; align-items: center; align-content: flex-start; align-self: start; gap: 10px; }
.v5 .footer-preferences .footer-language, .v5 .footer-preferences .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; min-height: 44px; margin: 0; padding: 0 18px 0 14px;
  border: 1px solid var(--v5-color-border, #e8ecf3); border-radius: 999px; background: var(--v5-color-surface, #fff); color: var(--v5-color-navy, #101b53);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .18s, box-shadow .18s, color .18s;
}
.v5 .footer-preferences .footer-language > svg, .v5 .footer-preferences .theme-toggle > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v5-color-purple, #7b35f5); }
.v5 .footer-preferences .footer-language > span:not(.theme-label) { display: none; }
.v5 .footer-preferences .footer-language:hover, .v5 .footer-preferences .theme-toggle:hover { border-color: var(--v5-color-purple, #7b35f5); box-shadow: 0 6px 16px -10px rgba(123, 53, 245, .6); }
.v5 .footer-preferences .theme-toggle .theme-label { color: inherit; margin: 0; }
@media (min-width: 961px) { .v5 .footer-preferences .footer-language, .v5 .footer-preferences .theme-toggle { padding: 0 14px 0 12px; gap: 8px; font-size: 12.5px; } .v5 .footer-preferences { gap: 8px; } }
.dark .v5 .footer-preferences .footer-language, .dark .v5 .footer-preferences .theme-toggle { background: var(--v5-color-elevated); border-color: var(--v5-color-border); color: var(--v5-color-ink); }

/* 24. Home, laptop and desktop (961px and up): the search bar and the four category tiles share ONE card, side by side. */
@media (min-width: 961px) {
  .v5 .hero-controls {
    display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 0 18px; width: min(1120px, 100% - 48px) !important;
    padding: 14px 18px; border: 1px solid var(--v5-color-border, #e8ecf3); border-radius: 22px; background: var(--v5-color-surface, #fff);
    box-shadow: 0 18px 44px -26px rgba(16, 27, 83, .38);
  }
  .v5 .hero-controls .hero-search { padding: 0; background: none; }
  .v5 .hero-controls .search-bar { height: 62px; border-color: transparent; background: var(--v5-color-canvas, #f6f7fb); box-shadow: none; border-radius: 16px; }
  .v5 .hero-controls .search-bar:focus-within { border-color: var(--v5-color-purple, #7b35f5); background: var(--v5-color-surface, #fff); }
  .v5 .hero-controls .search-bar input { font-size: 13.5px; }
  .v5 .hero-controls .search-location { padding-inline: 12px; font-size: 12px; }
  .v5 .hero-controls .search-submit { min-width: 108px; padding-inline: 16px; font-size: 12.5px; }
  .v5 .hero-controls .category-wrap { padding: 0 0 0 18px; border-inline-start: 1px solid var(--v5-color-border, #e8ecf3); }
  [dir=rtl] .v5 .hero-controls .category-wrap { padding: 0 18px 0 0; }
  .v5 .hero-controls .categories { height: auto; padding: 0; border: 0; background: none; box-shadow: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .v5 .hero-controls .category { border: 0; border-radius: 14px; gap: 8px; padding: 8px 4px; font-size: 12.5px; }
  .v5 .hero-controls .category .category-icon { width: 46px; height: 46px; border-radius: 15px; }
  .v5 .hero-controls .category .ci svg { width: 26px; height: 26px; }
  .v5 .hero-controls .category:hover { background: var(--v5-color-canvas, #f6f7fb); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .v5 .hero-controls { padding: 12px 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v5 .hero-controls .category { font-size: 11.5px; }
  .v5 .hero-controls .category .category-icon { width: 42px; height: 42px; }
}

/* 25. Register on phones: the account-type page and the sign-up forms (English and Arabic; logical properties only). */
@media (max-width: 639.98px) {
  /* account types */
  div.w-full.max-w-xl.fade-up > div.mb-8 { margin-bottom: 18px; }
  div.w-full.max-w-xl.fade-up > div.mb-8 h1 { font-size: 26px; line-height: 1.2; margin-bottom: 6px; }
  div.w-full.max-w-xl.fade-up > div.mb-8 p { font-size: 14px; line-height: 1.6; }
  div.w-full.max-w-xl.fade-up > div.grid.gap-4 { gap: 12px; margin-bottom: 18px; }
  div.w-full.max-w-xl.fade-up > div.grid > button.group {
    padding: 16px; border-width: 1.5px; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 27, 83, .04), 0 14px 26px -20px rgba(16, 27, 83, .28);
  }
  button.group > div.flex.items-start { gap: 14px; }
  button.group > div.flex.items-start > div.w-16 { width: 48px; height: 48px; border-radius: 14px; }
  button.group > div.flex.items-start > div.w-16 svg { width: 24px; height: 24px; }
  button.group > div.flex.items-start > div.shrink-0.w-8 { display: none; }
  button.group h3 { font-size: 17px; line-height: 1.25; }
  button.group div.flex.items-center.gap-2.mb-1 { flex-wrap: wrap; row-gap: 6px; margin-bottom: 4px; }
  button.group div.flex.items-center.gap-2.mb-1 > span.rounded-full { font-size: 10.5px; padding: 2px 8px; }
  button.group p.text-sm.mb-4 { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
  button.group div.grid.grid-cols-2.gap-1\.5 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  button.group div.grid.grid-cols-2 > div { align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; }
  button.group div.grid.grid-cols-2 > div > span.text-accent {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; font-size: 9px; font-weight: 700;
    background: color-mix(in srgb, currentColor 14%, transparent); font-size: 0;
  }
  button.group div.grid.grid-cols-2 > div > span.text-accent::before {
    content: ""; width: 9px; height: 9px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  button.group > div.mt-5.pt-4 { margin-top: 14px; padding-top: 0; border-top: 0; }
  button.group > div.mt-5.pt-4 > span {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 16px; border-radius: 14px;
    border: 1px solid var(--color-border, #e7e2d8); background: var(--color-secondary, #f3efe7); font-size: 14px; font-weight: 650;
  }
  div.w-full.max-w-xl.fade-up > div.grid > button.group[class*="border-accent/40"] > div.mt-5.pt-4 > span {
    border-color: transparent; color: #fff; background: var(--v5-brand-gradient, linear-gradient(105deg, #dc16c1, #a73cec 53%, #ff8a24)); box-shadow: 0 12px 22px -14px rgba(167, 60, 236, .8);
  }
  div.w-full.max-w-xl.fade-up > div.grid > button.group[class*="border-accent/40"] > div.mt-5.pt-4 > span svg { color: #fff; }

  /* sign-up forms (customer form is a <form>; the service-centre and dealership forms are not) */
  div.w-full.max-w-md.fade-up { max-width: 100%; }
  div.w-full.max-w-md.fade-up > h1 { font-size: 26px; line-height: 1.2; }
  div.w-full.max-w-md.fade-up > p.text-muted-foreground { font-size: 14px; margin-bottom: 18px; }
  div.w-full.max-w-md.fade-up > div.bg-card.rounded-2xl { padding: 18px 16px; border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 27, 83, .04), 0 14px 26px -20px rgba(16, 27, 83, .22); }
  div.w-full.max-w-md.fade-up .space-y-4 > * + * { margin-top: 18px; }
  div.w-full.max-w-md.fade-up > div.bg-card label { font-size: 13.5px; font-weight: 600; }
  div.w-full.max-w-md.fade-up > div.bg-card input, div.w-full.max-w-md.fade-up > div.bg-card select, div.w-full.max-w-md.fade-up > div.bg-card textarea {
    min-height: 48px; border-radius: 14px; padding-inline: 14px; font-size: 16px;
  }
  div.w-full.max-w-md.fade-up > div.bg-card textarea { padding-block: 12px; }
  div.w-full.max-w-md.fade-up > div.bg-card select { width: 100%; min-width: 0; flex: 1 1 0; }
  div.w-full.max-w-md.fade-up > div.bg-card input.pe-10 { padding-inline-end: 46px; }
  div.w-full.max-w-md.fade-up > div.bg-card button.w-full { min-height: 50px; border-radius: 14px; font-size: 15px; font-weight: 650; }
}

/* 26. Arabic uses the Tajawal font everywhere (the new header, home, menus and footer were set in IBM Plex Sans Arabic).
   Tajawal is already loaded by the site stylesheet (weights 300, 400, 500, 700, 800). Latin letters inside Arabic text
   come from Tajawal too. Arabic is never letter-spaced: the tight tracking used for Latin headings breaks the joins. */
[dir=rtl] .v5, [dir=rtl] .v5 .hero-arabic, [dir=rtl] .v5 :is(button, input, select, textarea, h1, h2, h3, h4, p, label) {
  font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif;
}
[dir=rtl] .v5 :where(*) { letter-spacing: normal !important; }
[dir=rtl] :where(h1, h2, h3, h4, p, span, button, a, label, input, select, textarea, div) { letter-spacing: normal; }
/* the page and heading font stacks (DM Sans / Fraunces first, Tajawal as fallback) put Tajawal first in Arabic */
[dir=rtl] { --font-sans: "Tajawal", sans-serif; --font-serif: "Tajawal", serif; }

/* 27. Home brand strip: real brand cards. White round logo badges, larger on desktop, with hover and focus states. */
.v5 .brands-section { gap: 18px; }
.v5 .brands-section .brand-list { gap: 8px; }
.v5 .brand-list .manufacturer, .v5 .brand-list .brand-all {
  display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 6px 9px;
  border: 1px solid transparent; border-radius: 16px; background: none; color: var(--v5-color-navy, #101b53); font: inherit; cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, background .2s;
}
.v5 .brand-list .manufacturer > span:last-child, .v5 .brand-list .brand-all-label { font-size: 12px; font-weight: 650; line-height: 1.25; text-align: center; letter-spacing: normal; }
.v5 .brand-list .brand-symbol {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid var(--v5-color-border, #e8ecf3); box-shadow: 0 6px 16px -10px rgba(16, 27, 83, .35);
}
.v5 .brand-list .brand-symbol .v5-brand-image { width: 62%; height: 62%; object-fit: contain; }
.v5 .brand-list .manufacturer:hover, .v5 .brand-list .brand-all:hover { background: var(--v5-color-surface, #fff); border-color: var(--v5-color-border, #e8ecf3); transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(16, 27, 83, .45); }
.v5 .brand-list .manufacturer:hover .brand-symbol { border-color: var(--v5-color-purple, #7b35f5); }
.v5 .brand-list .manufacturer:focus-visible, .v5 .brand-list .brand-all:focus-visible { outline: 2px solid var(--v5-color-purple, #7b35f5); outline-offset: 2px; }
.v5 .brand-all-circle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--v5-brand-gradient, linear-gradient(105deg, #dc16c1, #a73cec 53%, #ff8a24)); box-shadow: 0 10px 20px -12px rgba(167, 60, 236, .8); }
.v5 .brand-all-label { color: var(--v5-color-purple, #7b35f5); }
[dir=rtl] .v5 .brand-all-circle svg { transform: scaleX(-1); }
.dark .v5 .brand-list .brand-symbol { background: #fff; border-color: transparent; }
.dark .v5 .brand-list .manufacturer, .dark .v5 .brand-list .brand-all { color: var(--v5-color-ink); }
.dark .v5 .brand-list .manufacturer:hover, .dark .v5 .brand-list .brand-all:hover { background: var(--v5-color-elevated); border-color: var(--v5-color-border); }
@media (max-width: 960px) {
  .v5 .brands-section { padding: 16px; }
  .v5 .brands-section .brand-list { gap: 6px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .v5 .brands-section .brand-list::-webkit-scrollbar { display: none; }
  .v5 .brand-list .manufacturer, .v5 .brand-list .brand-all { flex: 0 0 76px; }
}
@media (min-width: 961px) {
  .v5 .brands-section { gap: 20px; padding: 22px 22px 22px 28px; border-radius: 22px; }
  .v5 .brands-section .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .v5 .brands-section h3 { font-size: 20px; line-height: 1.25; margin-top: 8px; white-space: normal; }
  .v5 .brands-section > div:first-child { flex: 0 0 150px; min-width: 0; }
  .v5 .brands-section .brand-list { flex: 1 1 0; min-width: 0; }
  .v5 .brands-section .brand-list { gap: 10px; }
  .v5 .brand-list .manufacturer, .v5 .brand-list .brand-all { gap: 12px; padding: 14px 8px 12px; border-radius: 20px; }
  .v5 .brand-list .brand-symbol, .v5 .brand-list .brand-all-circle { width: 68px; height: 68px; }
  .v5 .brand-list .brand-symbol .v5-brand-image { width: 58%; height: 58%; }
  .v5 .brand-list .manufacturer > span:last-child, .v5 .brand-list .brand-all-label { font-size: 13.5px; }
}