/*
 * GTI Car Care — component surfaces
 * Backgrounds, colours and states for the select menu, the mobile navigation sheet and the
 * consent checkbox, matched to the light and dark sections of the site.
 */

/* Select menu ---------------------------------------------------------------- */
[data-slot=select-content] {
  background: #1b1b1b;
  color: #f2f1ec;
  border: 1px solid #3a3a36;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
}
[data-slot=select-content] [data-radix-select-viewport] { padding: 5px; }
[data-slot=select-item] {
  color: #d9d8d2;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
}
[data-slot=select-item][data-highlighted] { background: #2d2c27; color: #fff; }
[data-slot=select-item][data-state=checked] { color: #fff; }
[data-slot=select-item] [data-slot=select-item-indicator] svg { color: var(--gold); }
[data-slot=select-scroll-up-button],
[data-slot=select-scroll-down-button] { color: #9d9c96; cursor: default; }

[data-slot=select-content][data-theme=light] {
  background: #fff;
  color: #1c211a;
  border-color: #d9ddd2;
  box-shadow: 0 18px 44px rgba(28, 33, 26, .16), 0 2px 6px rgba(28, 33, 26, .08);
}
[data-slot=select-content][data-theme=light] [data-slot=select-item] { color: #3b4037; }
[data-slot=select-content][data-theme=light] [data-slot=select-item][data-highlighted] { background: #f1f2ec; color: #111; }
[data-slot=select-content][data-theme=light] [data-slot=select-item][data-state=checked] { color: #111; font-weight: 600; }
[data-slot=select-content][data-theme=light] [data-slot=select-item] [data-slot=select-item-indicator] svg { color: #111; }
[data-slot=select-content][data-theme=light] [data-slot=select-scroll-up-button],
[data-slot=select-content][data-theme=light] [data-slot=select-scroll-down-button] { color: #7c8277; }

.choice [data-slot=select-trigger] { cursor: pointer; }
.choice [data-slot=select-trigger] svg { transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.choice [data-slot=select-trigger][data-state=open] svg { transform: rotate(180deg); }

/* Mobile navigation sheet ------------------------------------------------------ */
[data-slot=sheet-overlay] { background: rgba(0, 0, 0, .55); }
.mobile-sheet {
  background: #0b0b0b;
  color: #f5f4f1;
  border-left: 1px solid #262626;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
  overflow-y: auto;
}
.mobile-sheet [data-slot=sheet-description] { color: #a3a39c; }
.mobile-sheet > a:not(.button) { color: #f2f1ec; }
.mobile-sheet > button[type=button] {
  color: #f5f4f1;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  top: 18px;
  right: 18px;
  opacity: .85;
}
.mobile-sheet > button[type=button]:hover { opacity: 1; border-color: #666; }
.mobile-sheet > button[type=button]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Consent checkbox --------------------------------------------------------------- */
.consent > button[role=checkbox] {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #8e9488;
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.consent > button[role=checkbox][data-state=checked] { background: var(--gold); border-color: var(--gold); color: #111; }
.consent > button[role=checkbox]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mobile-sheet > button[type=button]:focus:not(:focus-visible) { box-shadow: none; outline: none; }

/* Video placeholder when the file is missing ---------------------------------------- */
.video-unavailable {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #151515 center / cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-unavailable::before { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 9, .6); }
.video-unavailable span { position: relative; font-size: 14px; color: #f2f1ec; background: rgba(0, 0, 0, .55); border: 1px solid #3a3a3a; border-radius: 30px; padding: 9px 16px; }