/* SSK Customer Account Panel */
.ssk-account {
  --ac-red: #d6001c; --ac-ink: #16181d; --ac-steel: #5a6473; --ac-line: #e3e7ee; --ac-bg: #f6f7f9;
  --ac-green: #0d7f3f; --ac-amber: #c07000;
  max-width: 760px; margin: 0 auto; padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ac-ink); line-height: 1.5;
}
.ssk-account * { box-sizing: border-box; }

.ssk-account__header { margin-bottom: 20px; }
.ssk-account__header h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.ssk-account__header p  { color: var(--ac-steel); margin: 0; }

.ssk-account__auth-grid > * { min-width: 0; }
.ssk-account__auth-card input[type="text"],
.ssk-account__auth-card input[type="password"] {
  width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--ac-line); border-radius: 8px; font: inherit;
}
.ssk-account__auth-card input:focus { border-color: var(--ac-red); box-shadow: 0 0 0 3px rgba(214,0,28,.1); outline: none; }
.ssk-account__auth-card .login-remember label { display: flex; align-items: center; gap: 8px; }
.ssk-account__auth-card .login-remember input { width: 18px; height: 18px; }
.ssk-account__auth-card .login-submit input {
  min-height: 46px; padding: 10px 22px; border: 0; border-radius: 9px;
  background: var(--ac-red); color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.ssk-account__login-form { display: grid; gap: 15px; }
.ssk-account__login-form label > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 750; }
.ssk-account__login-form .ssk-account__remember { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.ssk-account__login-form .ssk-account__remember span { margin: 0; font-weight: 600; }
.ssk-account__login-form .ssk-account__remember input { width: 18px; height: 18px; }
.ssk-account__login-form button {
  justify-self: start; min-height: 46px; padding: 10px 24px; border: 0; border-radius: 9px;
  background: var(--ac-red); color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.ssk-account__auth-error {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid #fca5a5; border-left: 4px solid var(--ac-red);
  border-radius: 9px; background: #fff1f2; color: #8b1423; font-size: 13px; line-height: 1.5;
}
.ssk-account__provider-form {
  margin-top: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--ac-line);
  border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(22,24,29,.045);
}
.ssk-account__provider-form #add_payment_method #payment { background: transparent; }
.ssk-account__provider-form #add_payment_method #payment ul.payment_methods { padding: 0; border: 0; }
.ssk-account__provider-form #add_payment_method #payment div.payment_box { margin: 12px 0; border-radius: 10px; }
.ssk-account__provider-form #place_order {
  min-height: 48px; padding: 11px 22px; border: 0; border-radius: 9px;
  background: var(--ac-red); color: #fff; font: inherit; font-weight: 800;
}
.ssk-account__back { display: inline-block; color: var(--ac-steel); text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.ssk-account__back:hover { color: var(--ac-red); }

.ssk-account__new-btn {
  display: inline-block; background: var(--ac-red); color: #fff;
  text-decoration: none; padding: 10px 20px; border-radius: 8px;
  font-weight: 700; font-size: 14px; margin-bottom: 22px;
}
.ssk-account__new-btn:hover { background: #a80016; color: #fff; }

/* Booking cards */
.ssk-account__list { display: flex; flex-direction: column; gap: 10px; }
.ssk-account__booking {
  display: block; background: #fff; border: 1px solid var(--ac-line);
  border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--ac-ink);
  transition: border-color .15s, transform .15s;
}
.ssk-account__booking:hover { border-color: var(--ac-red); transform: translateY(-1px); }
.ssk-account__booking-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ssk-account__booking-head strong { font-size: 15px; }
.ssk-account__booking-vehicle { font-size: 14px; font-weight: 600; }
.ssk-account__booking-services { font-size: 12px; color: var(--ac-steel); margin-top: 2px; }
.ssk-account__booking-meta { font-size: 12px; color: var(--ac-steel); margin-top: 4px; }

/* Badges (re-used from admin) */
.ssk-badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.ssk-badge--green { background: #dcfce7; color: #166534; }
.ssk-badge--amber { background: #fef3c7; color: #92400e; }
.ssk-badge--red   { background: #fee2e2; color: #991b1b; }
.ssk-badge--grey  { background: #e2e8f0; color: #475569; }

/* Detail view */
.ssk-account__detail-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.ssk-account__detail-block {
  background: var(--ac-bg); border-radius: 10px; padding: 16px;
}
.ssk-account__detail-block h4 {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ac-steel); margin: 0 0 6px;
}
.ssk-account__detail-block p { margin: 0; font-size: 14px; font-weight: 600; }
.ssk-account__total { font-size: 24px; font-weight: 800; color: var(--ac-red); }

.ssk-account__services { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ssk-account__services li {
  background: #fff; border: 1px solid var(--ac-line); border-radius: 8px; padding: 12px 14px;
}
.ssk-account__services li strong { display: block; font-size: 14px; }
.ssk-account__services li span { display: block; font-size: 12px; color: var(--ac-steel); margin-top: 2px; }

.ssk-account__notice {
  background: #fef3c7; border-left: 4px solid var(--ac-amber);
  padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-top: 20px;
}

/* Guest / empty states */
.ssk-account--guest { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.ssk-account__guest-box {
  background: #fff; border: 1px solid var(--ac-line); border-radius: 16px;
  padding: 36px; max-width: 400px; width: 100%; text-align: center;
}
.ssk-account__guest-icon { font-size: 42px; margin-bottom: 10px; }
.ssk-account__guest-box h2 { font-size: 22px; margin: 0 0 8px; }
.ssk-account__guest-alt { font-size: 13px; color: var(--ac-steel); margin-top: 14px; }
.ssk-account__empty { text-align: center; padding: 40px 20px; }
.ssk-account__empty-icon { font-size: 48px; margin-bottom: 10px; }
.ssk-account__empty h3 { font-size: 20px; margin: 0 0 8px; }
.ssk-account__empty h1 { font-size: clamp(24px, 4vw, 30px); margin: 0 0 8px; }
.ssk-account__empty p { color: var(--ac-steel); margin: 0 0 18px; }

/* Buttons */
.ssk-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 10px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; font-family: inherit; }
.ssk-btn--primary { background: var(--ac-red); color: #fff; }
.ssk-btn--primary:hover { background: #a80016; color: #fff; }

@media (max-width: 580px) {
  .ssk-account__detail-grid { grid-template-columns: 1fr; }
}

/* ── Tabs (backlog #2 — Vehicles / Payment methods) ─────────────────── */
.ssk-account__tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--ac-line); margin-bottom: 20px; }
.ssk-account__tab {
  padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--ac-steel);
  text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
.ssk-account__tab:hover { color: var(--ac-ink); }
.ssk-account__tab.is-active { color: var(--ac-red); border-bottom-color: var(--ac-red); }

/* Account overview ----------------------------------------------------- */
.ssk-account--overview { max-width:1120px; }
.ssk-account__overview-hero {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:28px;
  margin-bottom:18px; padding:clamp(24px,4vw,42px); border-radius:20px; color:#fff;
  background:linear-gradient(125deg,#12151b 0%,#252b35 66%,#3b1018 100%); box-shadow:0 18px 45px rgba(16,20,27,.16);
}
.ssk-account__overview-hero::after { content:''; position:absolute; width:220px; height:220px; right:-70px; bottom:-130px; border:28px solid rgba(214,0,28,.25); border-radius:50%; }
.ssk-account__overview-hero > * { position:relative; z-index:1; }
.ssk-account__overview-hero h1 { max-width:680px; margin:6px 0 8px; font-size:clamp(28px,4.2vw,45px); line-height:1; letter-spacing:-.7px; }
.ssk-account__overview-hero p { max-width:660px; margin:0; color:rgba(255,255,255,.68); line-height:1.55; }
.ssk-account__eyebrow { color:#d6001c; font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.ssk-account__overview-hero .ssk-account__eyebrow { color:#ff7c8d; }
.ssk-account__hero-action { flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 19px; border-radius:11px; background:#d6001c; color:#fff; text-decoration:none; font-size:13px; font-weight:900; box-shadow:0 10px 24px rgba(214,0,28,.28); }
.ssk-account__hero-action:hover { color:#fff; background:#b90018; transform:translateY(-1px); }
.ssk-account__overview-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:0 0 16px; }
.ssk-account__overview-stats a { min-height:112px; padding:18px; border:1px solid var(--ac-line); border-radius:14px; background:#fff; color:var(--ac-ink); text-decoration:none; box-shadow:0 8px 24px rgba(22,24,29,.04); }
.ssk-account__overview-stats span,.ssk-account__overview-stats strong,.ssk-account__overview-stats small { display:block; }
.ssk-account__overview-stats span { color:var(--ac-steel); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
.ssk-account__overview-stats strong { margin:7px 0 3px; font-size:29px; line-height:1; }
.ssk-account__overview-stats small { color:#7e8795; font-size:11px; }
.ssk-account__overview-stats a:hover { border-color:var(--ac-red); transform:translateY(-1px); }
.ssk-account__next { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin:0 0 16px; padding:20px; border:1px solid #dce2e9; border-left:5px solid var(--ac-red); border-radius:14px; background:#f9fafb; }
.ssk-account__next-date { width:60px; height:65px; display:grid; place-items:center; align-content:center; border-radius:11px; color:#fff; background:#16181d; }
.ssk-account__next-date span { color:#ff8998; font-size:9px; font-weight:900; text-transform:uppercase; }
.ssk-account__next-date strong { font-size:25px; line-height:1; }
.ssk-account__next h2 { margin:4px 0 3px; font-size:19px; }
.ssk-account__next p { margin:0; color:var(--ac-steel); font-size:12.5px; }
.ssk-account__next-link,.ssk-account__text-link { color:var(--ac-red); text-decoration:none; font-size:12px; font-weight:900; }
.ssk-account__overview-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.ssk-account__overview-grid > section { padding:20px; border:1px solid var(--ac-line); border-radius:14px; background:#fff; }
.ssk-account__overview-grid h2 { margin:0 0 13px; font-size:17px; }
.ssk-account__overview-grid section:first-child > a { display:block; margin-top:8px; padding:13px 14px; border-radius:10px; background:#f5f7fa; color:var(--ac-ink); text-decoration:none; }
.ssk-account__overview-grid section:first-child strong,.ssk-account__overview-grid section:first-child span { display:block; }
.ssk-account__overview-grid section:first-child strong { font-size:13px; }
.ssk-account__overview-grid section:first-child span,.ssk-account__overview-grid p { margin-top:3px; color:var(--ac-steel); font-size:11.5px; line-height:1.5; }
.ssk-account__overview-vehicle { display:grid; gap:3px; margin-bottom:12px; }
.ssk-account__overview-vehicle > span { width:max-content; padding:4px 9px; border:1px solid #d9dde4; border-radius:5px; background:#f4f5f7; font-size:12px; font-weight:900; letter-spacing:.7px; }
.ssk-account__overview-vehicle strong { margin-top:5px; font-size:16px; }
.ssk-account__overview-vehicle small { color:var(--ac-steel); }

@media (max-width:700px) {
  .ssk-account__tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .ssk-account__tab { flex:0 0 auto; min-height:44px; display:flex; align-items:center; padding:8px 13px; }
  .ssk-account__overview-hero { display:block; border-radius:16px; }
  .ssk-account__hero-action { margin-top:18px; }
  .ssk-account__overview-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .ssk-account__overview-stats a { min-height:96px; padding:13px 10px; }
  .ssk-account__overview-stats strong { font-size:24px; }
  .ssk-account__overview-stats small { font-size:9.5px; }
  .ssk-account__next { grid-template-columns:auto minmax(0,1fr); gap:12px; padding:15px 13px; }
  .ssk-account__next-link { grid-column:1/-1; min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#fff; }
  .ssk-account__overview-grid { grid-template-columns:1fr; }
}

@media (max-width:420px) {
  .ssk-account__overview-stats { grid-template-columns:1fr 1fr; }
  .ssk-account__overview-stats a:last-child { grid-column:1/-1; min-height:82px; }
}

/* ── Saved vehicles ───────────────────────────────────────────────── */
.ssk-account__vehicle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.ssk-account__vehicle-card {
  background: #fff; border: 1.5px solid var(--ac-line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ssk-account__vehicle-card.is-default { border-color: var(--ac-green); }
.ssk-account__vehicle-card strong { font-size: 15px; }
.ssk-account__vehicle-card > span { font-size: 12px; color: var(--ac-steel); }
.ssk-account__vehicle-plate {
  display: inline-block; background: #f6f7f9; border: 1px solid var(--ac-line); border-radius: 6px;
  padding: 2px 8px; font-weight: 700; letter-spacing: .5px; width: fit-content; margin-top: 2px;
}
.ssk-account__vehicle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.ssk-account__vehicle-book { font-size: 12px; font-weight: 700; color: var(--ac-red); text-decoration: none; }
.ssk-account__vehicle-book:hover { text-decoration: underline; }
.ssk-account__vehicle-link-btn {
  background: none; border: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--ac-steel);
  cursor: pointer; font-family: inherit; text-decoration: underline;
}
.ssk-account__vehicle-link-btn:hover { color: var(--ac-ink); }
.ssk-account__vehicle-link-btn--danger { color: #c0392b; }
.ssk-account__vehicle-link-btn--danger:hover { color: #991b1b; }

.ssk-account__add-vehicle { margin-top: 12px; border: 1.5px dashed var(--ac-line); border-radius: 12px; padding: 14px 16px; }
.ssk-account__add-vehicle summary { font-weight: 700; font-size: 14px; cursor: pointer; }
.ssk-account__vehicle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ssk-account__vehicle-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ac-steel); }
.ssk-account__vehicle-form input, .ssk-account__vehicle-form select {
  border: 1.5px solid var(--ac-line); border-radius: 8px; padding: 9px 11px; font-size: 16px; font-family: inherit;
}
.ssk-account__vehicle-form button { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

/* ── Saved payment methods ───────────────────────────────────────── */
.ssk-account__pm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.ssk-account__pm-card {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--ac-line);
  border-radius: 12px; padding: 14px 16px;
}
.ssk-account__pm-card.is-default { border-color: var(--ac-green); }
.ssk-account__pm-card .ssk-icon { flex-shrink: 0; color: var(--ac-steel); }
.ssk-account__pm-info { flex: 1; display: flex; align-items: center; gap: 10px; }
.ssk-account__pm-info strong { font-size: 14px; }
.ssk-account__pm-actions { display: flex; gap: 12px; }

/* ── Topbar vehicle switcher (backlog #2) — floating widget, logged-in
   customers with saved vehicles only. Positioned so it doesn't fight
   with whatever the active theme renders in its own header. ────────── */
/* Bottom-LEFT stack. The theme renders two stacked position:fixed bars —
   .ssk-topbar (38px, z-index 1001) then the site header (78px, z-index 1000)—
   owning the top 116px of every page, and parks a WhatsApp FAB permanently in
   the bottom-right. So `top: 10px` sat directly on the topbar's own content,
   and the old <=580px rule moved this control to bottom-right, straight under
   that FAB. Bottom-left is the one corner nothing else claims: both floating
   controls now live there on every viewport, stacked, bell underneath. */
.ssk-vswitch {
  position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.ssk-vswitch__trigger {
  display: flex; align-items: center; gap: 6px; background: #16181d; color: #fff;
  border: none; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  min-height: 44px; /* WCAG 2.5.8 minimum target size */
}
.ssk-vswitch__trigger:hover { background: #24262c; }
.ssk-vswitch__menu {
  /* Opens upward now the trigger is bottom-anchored, and is capped so a long
     vehicle list scrolls rather than running off the top of the screen. */
  position: absolute; bottom: calc(100% + 8px); left: 0; background: #fff; border: 1px solid #e3e7ee;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); min-width: 220px; padding: 6px;
  max-height: min(60vh, 420px); overflow-y: auto;
}
.ssk-vswitch__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  background: none; border: none; border-radius: 8px; padding: 8px 10px; text-align: left;
  cursor: pointer; font-family: inherit;
}
.ssk-vswitch__item:hover { background: #f6f7f9; }
.ssk-vswitch__item strong { font-size: 13px; color: #16181d; }
.ssk-vswitch__item span { font-size: 11px; color: #5a6473; }
.ssk-vswitch__new {
  margin-top: 4px; border-top: 1px solid #e3e7ee; border-radius: 0;
}
.ssk-vswitch__new strong { color: #d6001c; font-weight: 700; }
.ssk-vswitch__new:hover { background: #fff5f6; }
.ssk-vswitch__manage {
  display: block; margin-top: 4px; padding: 8px 10px; font-size: 12px; font-weight: 700;
  color: #d6001c; text-decoration: none; border-top: 1px solid #e3e7ee;
}

@media (max-width: 580px) {
  .ssk-account__vehicle-grid { grid-template-columns: 1fr; }
  .ssk-account__vehicle-form { grid-template-columns: 1fr; }
  /* No repositioning left to do — this used to move the switcher to
     bottom-right, i.e. underneath the WhatsApp FAB. */
  .ssk-vswitch { left: 12px; }
}

/* ── Notification bell (Part A #2) — floating widget for logged-in
   customers, same fixed/pill pattern as the vehicle switcher above but
   anchored to the opposite corner so the two never collide. ────────── */
.ssk-notifbell {
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.ssk-notifbell__trigger {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; /* WCAG 2.5.8 minimum target size */
  background: #16181d; color: #fff;
  border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.ssk-notifbell__trigger:hover { background: #24262c; }
.ssk-notifbell__badge {
  position: absolute; top: -4px; right: -4px; background: #d6001c; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; border-radius: 999px;
  padding: 3px 5px; min-width: 16px; text-align: center; border: 2px solid #fff;
}
.ssk-notifbell__menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; background: #fff; border: 1px solid #e3e7ee;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); width: 300px; max-width: 88vw;
  padding: 0; overflow: hidden;
}
.ssk-notifbell__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #e3e7ee;
}
.ssk-notifbell__head strong { font-size: 13px; color: #16181d; }
.ssk-notifbell__markall {
  background: none; border: none; color: #d6001c; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; padding: 0;
}
.ssk-notifbell__list { max-height: 340px; overflow-y: auto; }
.ssk-notifbell__empty { padding: 18px 14px; font-size: 12px; color: #8a93a3; margin: 0; }
.ssk-notifbell__item { border-bottom: 1px solid #f0f2f5; }
.ssk-notifbell__item:last-child { border-bottom: none; }
.ssk-notifbell__item.is-unread { background: #fff8f8; }
.ssk-notifbell__item-link {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  text-decoration: none; color: inherit;
}
.ssk-notifbell__item-link:hover { background: #f6f7f9; }
.ssk-notifbell__item-link strong { font-size: 12.5px; color: #16181d; }
.ssk-notifbell__item-link span { font-size: 11.5px; color: #5a6473; }
.ssk-notifbell__item-link time { font-size: 10px; color: #8a93a3; margin-top: 2px; }

/* ── Guest state (Part A #3) — bell is visible to logged-out visitors too,
   but there's nothing to list, so the menu becomes a short note plus a
   login/register nudge instead of an empty notification list. ────────── */
.ssk-notifbell__guest { padding: 14px; }
.ssk-notifbell__guest-note { margin: 0 0 12px; font-size: 12.5px; color: #5a6473; line-height: 1.5; }
.ssk-notifbell__guest-actions { display: flex; gap: 8px; }
.ssk-notifbell__guest-login,
.ssk-notifbell__guest-register {
  flex: 1; text-align: center; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.ssk-notifbell__guest-login { background: #16181d; color: #fff; }
.ssk-notifbell__guest-login:hover { background: #24262c; }
.ssk-notifbell__guest-register { background: #f0f4f8; color: #16181d; border: 1px solid #e3e7ee; }
.ssk-notifbell__guest-register:hover { background: #e3e7ee; }
@media (max-width: 580px) {
  .ssk-notifbell { left: 12px; }
}

/* ── Docked in the site header (the normal placement) ──────────────────
   The theme exposes an ssk_header_actions slot inside .ssk-header__right;
   the bell renders there with this modifier. Everything above stays as the
   floating fallback for a theme that doesn't provide that slot. Position
   is reset to static-in-flow, and the panel drops DOWNWARD and right-aligns
   to the trigger, since it is now anchored at the top of the viewport. */
.ssk-notifbell--inline {
  position: relative;
  top:auto; right:auto; bottom:auto; left:auto;
  z-index: 1002; /* above the theme header (1000) and topbar (1001) */
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.ssk-notifbell--inline .ssk-notifbell__menu {
  top: calc(100% + 10px);
  bottom: auto;
  left: auto;
  right: 0;
}
@media (max-width: 580px) {
  /* Header is tight on phones — keep the target size but pull the gap in. */
  .ssk-notifbell--inline { margin-right: 0; }
  .ssk-notifbell--inline .ssk-notifbell__menu { right: -8px; }
}

/* ── Orders & invoices ─────────────────────────────────────────────────
   Reuses .ssk-account__list, .ssk-badge and .ssk-btn from above rather
   than inventing a parallel card language. Only the pieces the invoice
   itself needs are new. */
.ssk-account__order {
  background: #fff; border: 1px solid var(--ac-line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.ssk-account__order-meta { font-size: 13px; color: var(--ac-steel); margin-top: 4px; }
.ssk-account__order-meta a { color: var(--ac-red); font-weight: 600; text-decoration: none; }
.ssk-account__order-meta a:hover { text-decoration: underline; }
.ssk-account__order-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ssk-account__order-lines span {
  font-size: 12px; background: var(--ac-bg); border-radius: 999px; padding: 3px 10px; color: var(--ac-ink);
}
.ssk-account__order-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.ssk-account__order-paid { font-size: 12px; font-weight: 700; color: var(--ac-green); }

/* ── The invoice document ─────────────────────────────────────────── */
.ssk-invoice__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.ssk-invoice__print { min-height: 44px; }
.ssk-invoice {
  background: #fff; border: 1px solid var(--ac-line); border-radius: 14px;
  padding: clamp(20px, 4vw, 36px);
}
.ssk-invoice__head {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 2px solid var(--ac-ink); margin-bottom: 20px;
}
.ssk-invoice__head h1 {
  font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -0.02em;
}
.ssk-invoice__number { margin: 2px 0 0; color: var(--ac-steel); font-size: 14px; font-weight: 700; }
.ssk-invoice__brand { display: flex; flex-direction: column; gap: 1px; text-align: right; font-size: 12.5px; color: var(--ac-steel); }
.ssk-invoice__brand strong { color: var(--ac-ink); font-size: 14px; }
.ssk-invoice__parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px;
}
.ssk-invoice__parties h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ac-steel); margin: 0 0 6px; font-weight: 800;
}
.ssk-invoice__parties p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.ssk-invoice__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ssk-invoice__table th, .ssk-invoice__table td { padding: 10px 8px; text-align: left; }
.ssk-invoice__table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ac-steel); border-bottom: 1.5px solid var(--ac-line); font-weight: 800;
}
.ssk-invoice__table tbody td { border-bottom: 1px solid var(--ac-line); }
.ssk-invoice__table .num { text-align: right; white-space: nowrap; }
.ssk-invoice__table tfoot th, .ssk-invoice__table tfoot td { padding-top: 12px; }
.ssk-invoice__total th, .ssk-invoice__total td {
  font-size: 16px; font-weight: 800; color: var(--ac-ink); border-top: 2px solid var(--ac-ink);
}
.ssk-invoice__note { margin-top: 20px; padding: 12px 14px; background: var(--ac-bg); border-radius: 10px; }
.ssk-invoice__note h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ac-steel); }
.ssk-invoice__note p { margin: 0; font-size: 13px; }
.ssk-invoice__foot {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ac-line);
  font-size: 12px; color: var(--ac-steel); line-height: 1.7;
}
.ssk-invoice__foot p { margin: 0 0 4px; }

@media (max-width: 580px) {
  .ssk-invoice__head { flex-direction: column; }
  .ssk-invoice__brand { text-align: left; }
  .ssk-invoice__parties { grid-template-columns: 1fr; }
}

/* Printing an invoice should produce an invoice, not a web page. Hides the
   site chrome the theme renders around it plus our own floating controls,
   and drops the card styling so it prints as a clean sheet. */
@media print {
  .ssk-topbar, .ssk-header, .ssk-footer, footer, .ssk-notifbell, .ssk-vswitch,
  .ssk-invoice__toolbar, .ssk-account__tabs, .ssk-bk__v4bar,
  [class*="whatsapp"], [href*="wa.me"] { display: none !important; }
  .ssk-account, .ssk-account--invoice { max-width: none; padding: 0; margin: 0; }
  .ssk-invoice { border: none; border-radius: 0; padding: 0; }
  a[href]::after { content: ""; } /* no URL footnotes cluttering the sheet */
  body { background: #fff; }
}

/* ── Customer email preferences (ssk-prefs) ───────────────────────────────
   Mobile-first, 8px grid, brand tokens only. Checkbox cells are 48px so the
   tap target meets the accessibility floor without a bigger visual control. */
.ssk-prefs { margin-top: 16px; }

.ssk-prefs__grid {
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ssk-prefs__head,
.ssk-prefs__row {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  align-items: center;
  gap: 8px;
}

.ssk-prefs__head {
  padding: 12px 16px;
  background: #f6f7f9;
  border-bottom: 1px solid #e3e7ee;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5a6473;
}
.ssk-prefs__head span:not(:first-child) { text-align: center; }

.ssk-prefs__row { padding: 0 16px; border-bottom: 1px solid #e3e7ee; }
.ssk-prefs__row:last-child { border-bottom: 0; }

.ssk-prefs__label {
  font-size: 14px;
  color: #16181d;
  padding: 16px 0;
  line-height: 1.4;
}

/* The whole cell is the label, so the 48px target is real rather than the
   16px checkbox glyph. */
.ssk-prefs__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  cursor: pointer;
  margin: 0;
}
.ssk-prefs__cell input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #d6001c;
  cursor: pointer;
  margin: 0;
}
.ssk-prefs__cell:focus-within {
  outline: 2px solid #d6001c;
  outline-offset: -2px;
  border-radius: 8px;
}

.ssk-prefs__save { margin-top: 16px; }

.ssk-prefs__note {
  margin-top: 24px;
  padding: 16px;
  background: #f6f7f9;
  border-left: 3px solid #d6001c;
  border-radius: 0 8px 8px 0;
}
.ssk-prefs__note strong {
  display: block;
  font-size: 13px;
  color: #16181d;
  margin-bottom: 8px;
}
.ssk-prefs__note p {
  margin: 0;
  font-size: 13px;
  color: #5a6473;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .ssk-prefs__head,
  .ssk-prefs__row { grid-template-columns: 1fr 96px 96px; }
  .ssk-prefs__head,
  .ssk-prefs__row { padding-left: 24px; padding-right: 24px; }
}

/* Dashboard/auth shell ---------------------------------------------------
   Operational account screens keep the legal footer but not the multi-screen
   marketing directory. This makes the signed-in area feel like a focused app
   while the normal public pages retain the complete SEO/navigation footer. */
.ssk-dashboard-mode main,
.ssk-auth-mode main { background: #f6f7f9; min-height: 58vh; }
.ssk-dashboard-mode main { padding: clamp(24px, 4vw, 52px) 0; }
.ssk-account-page.ssk-auth-mode main { padding: 0; }
.ssk-dashboard-mode .ssk-account { max-width: 1040px; }
.ssk-dashboard-mode .ssk-footer-main,
.ssk-dashboard-mode .ssk-footer-locations,
.ssk-auth-mode .ssk-footer-main,
.ssk-auth-mode .ssk-footer-locations { display: none; }
.ssk-dashboard-mode .ssk-footer-bottom,
.ssk-auth-mode .ssk-footer-bottom { border-top: 3px solid var(--ac-red); }
.ssk-dashboard-mode .ssk-footer-bottom__inner,
.ssk-auth-mode .ssk-footer-bottom__inner { min-height: 82px; }
.ssk-dashboard-mode .ssk-vswitch { display: none; }

.ssk-account__header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 4px 0 18px; border-bottom: 1px solid var(--ac-line);
}
.ssk-account__header h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.ssk-account__header p { max-width: 650px; }
.ssk-account__tabs {
  gap: 8px; border: 0; margin: 0 0 24px; padding: 6px;
  background: #fff; border-radius: 14px; box-shadow: 0 1px 0 var(--ac-line);
}
.ssk-account__tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 12px; border-radius: 9px; border: 0; margin: 0;
  text-align: center; line-height: 1.25;
}
.ssk-account__tab:hover { background: var(--ac-bg); }
.ssk-account__tab.is-active { color: #fff; background: var(--ac-red); border: 0; }
.ssk-account__booking,
.ssk-account__order,
.ssk-account__vehicle-card,
.ssk-account__pm-card,
.ssk-prefs__grid { box-shadow: 0 8px 24px rgba(22,24,29,.045); }
.ssk-account__notice { margin: 0 0 18px; }
.ssk-account__pm-preference label { display: inline-flex; align-items: center; min-height: 40px; gap: 7px; }

@media (max-width: 700px) {
  .ssk-dashboard-mode main { padding: 18px 0 24px; }
  .ssk-account { padding: 0 12px; }
  .ssk-account__auth-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .ssk-account__auth-card { padding: 22px !important; }
  .ssk-account__header { display: block; padding-bottom: 14px; }
  .ssk-account__header h1 { font-size: 27px; }
  .ssk-account__header p { font-size: 13px; margin-top: 6px; }
  .ssk-account__tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px; padding: 5px; margin-bottom: 18px;
  }
  .ssk-account__tab { grid-column:auto; min-width:0; padding:8px 4px; font-size:11px; }
  .ssk-account__new-btn { display: flex; justify-content: center; min-height: 46px; align-items: center; }
  .ssk-account__booking { padding: 15px; }
  .ssk-account__booking-head { gap: 8px; }
  .ssk-account__booking-meta { line-height: 1.55; }
  .ssk-account__pm-preference label { display: flex; margin-right: 0 !important; }
  .ssk-account__pm-card { align-items: flex-start; flex-wrap: wrap; }
  .ssk-account__pm-actions { width: 100%; padding-left: 36px; }
  .ssk-prefs__head, .ssk-prefs__row { grid-template-columns: minmax(0, 1fr) 54px 54px; padding-left: 12px; padding-right: 12px; }
  .ssk-prefs__label { font-size: 12.5px; }
  .ssk-dashboard-mode .ssk-footer-bottom__inner,
  .ssk-auth-mode .ssk-footer-bottom__inner { padding-top: 20px; padding-bottom: 20px; gap: 16px; }
}

/* Email ownership verification on customer registration. */
.ssk-email-verification__email-row,.ssk-email-verification__code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:stretch}
.ssk-email-verification__email-row input,.ssk-email-verification__code-row input{min-width:0;width:100%;border:1.5px solid #e3e7ee;border-radius:8px;padding:12px 14px;font-size:14px;font-family:inherit}
.ssk-email-verification__send,.ssk-email-verification__confirm{min-height:46px;border:0;border-radius:9px;padding:0 15px;background:#16181d;color:#fff;font:700 13px/1.1 inherit;white-space:nowrap;cursor:pointer}
.ssk-email-verification__confirm{background:#d6001c}.ssk-email-verification__code-row{margin-top:9px}
.ssk-email-verification__code{letter-spacing:.28em;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.ssk-email-verification__status{margin:7px 0 0;font-size:12px;line-height:1.45;color:#5a6473}
.ssk-email-verification.is-sent .ssk-email-verification__status{color:#1d4ed8}.ssk-email-verification.is-error .ssk-email-verification__status{color:#b91c1c;font-weight:650}.ssk-email-verification.is-verified .ssk-email-verification__status{color:#087443;font-weight:700}
.ssk-email-verification.is-verified .ssk-email-verification__email-row{padding:3px;border:1px solid #9ee3c0;border-radius:12px;background:#effcf5}
[data-ssk-verification-submit]:disabled{opacity:.52;cursor:not-allowed!important}
@media(max-width:520px){.ssk-email-verification__email-row,.ssk-email-verification__code-row{grid-template-columns:minmax(0,1fr)}.ssk-email-verification__send,.ssk-email-verification__confirm{width:100%}}