/* ============================================================
 * Sitewide vehicle-memory "priority slot" chip + shared change
 * modal. See includes/Frontend/VehicleChip.php for what renders
 * this and why — this is the ONE chip component, styled for its
 * two contexts (dark topbar strip / white mobile header row).
 * ============================================================ */

.ssk-vchip { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ssk-vchip .ssk-icon { flex-shrink: 0; }
.ssk-vchip__plate {
  background: #f5c518; border: 1.5px solid #111; border-radius: 4px;
  padding: 1px 6px; font-family: var(--ssk-font-heading, 'Barlow Condensed', sans-serif);
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #000; flex-shrink: 0;
}
.ssk-vchip__name {
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.ssk-vchip__change {
  background: transparent; border: none; text-decoration: underline; cursor: pointer;
  font-family: inherit; font-weight: 700; flex-shrink: 0; padding: 4px 2px;
  min-height: 44px; display: inline-flex; align-items: center; /* WCAG 2.5.8 target size, matches .ssk-vswitch__trigger elsewhere in this codebase */
}

/* Desktop/tablet — topbar (dark strip, 38px tall) */
.ssk-vchip--desktop { color: rgba(255,255,255,.85); }
.ssk-vchip--desktop .ssk-icon { color: var(--ssk-red, #d6001c); }
.ssk-vchip--desktop .ssk-vchip__name { color: #fff; }
.ssk-vchip--desktop .ssk-vchip__change { color: rgba(255,255,255,.6); font-size: 11px; }
.ssk-vchip--desktop .ssk-vchip__change:hover { color: #fff; }

/* Mobile — full-width inside the drawer's vehicle summary card. */
.ssk-vchip--mobile {
  width: 100%; min-height: 44px; box-sizing: border-box; color: #fff;
}
.ssk-vchip--mobile .ssk-icon { color: var(--ssk-red-lt, #ff1a35); }
.ssk-vchip--mobile .ssk-vchip__name { color: #fff; max-width: none; flex: 1; }
.ssk-vchip--mobile .ssk-vchip__change {
  min-height: 36px; margin-left: auto; padding: 0 10px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; color: #fff; font-size: 12px; text-decoration: none;
}
.ssk-vchip--mobile .ssk-vchip__change:hover { background: rgba(255,255,255,.12); }

/* ---------- Shared "change vehicle" modal ---------- */
.ssk-vchip-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ssk-vchip-modal__backdrop { position: absolute; inset: 0; background: rgba(13,14,16,.72); backdrop-filter: blur(2px); }
.ssk-vchip-modal__panel {
  position: relative; z-index: 1; background: #fff; color: var(--ssk-ink, #16181d);
  border-radius: var(--ssk-radius, 12px); padding: 28px 24px; max-width: 380px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.ssk-vchip-modal__panel h3 { font-family: var(--ssk-font-heading, 'Barlow Condensed', sans-serif); font-size: 22px; margin: 0 0 14px; }
.ssk-vchip-modal__row { display: flex; gap: 8px; flex-wrap: wrap; }
.ssk-vchip-modal__row input {
  flex: 1 1 160px; min-width: 0; min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid var(--ssk-line, #e3e7ee); background: var(--ssk-mist, #f0f4f8);
  color: var(--ssk-ink, #16181d); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 15px;
}
.ssk-vchip-modal__row input::placeholder { color: #9aa3b0; text-transform: none; letter-spacing: normal; font-weight: 500; }
.ssk-vchip-modal__row input:focus { outline: 2px solid var(--ssk-red, #d6001c); outline-offset: 1px; }
.ssk-vchip-modal__find {
  min-height: 48px; padding: 0 18px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--ssk-red, #d6001c); color: #fff; font-weight: 700; font-size: 14px;
}
.ssk-vchip-modal__find:hover { background: var(--ssk-red-dk, #a80016); }
.ssk-vchip-modal__find:disabled { opacity: .6; cursor: default; }
.ssk-vchip-modal__error { color: #c81e3a; font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
.ssk-vchip-modal__x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--ssk-mist, #f0f4f8); cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--ssk-steel, #5a6473); display: flex; align-items: center; justify-content: center; /* WCAG 2.5.8 target size */
}
.ssk-vchip-modal__x:hover { background: var(--ssk-line, #e3e7ee); }
.ssk-vchip-modal__signin {
  display: flex; align-items: center; gap: 6px; margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--ssk-line, #e3e7ee); font-size: 12.5px; color: var(--ssk-steel, #5a6473);
}
.ssk-vchip-modal__signin a { color: var(--ssk-red, #d6001c); font-weight: 700; text-decoration: underline; }