/* BK's Automotive Expertise: dark theme for the booking, login, account, estimate, pay and autopay pages.
   Loaded after assets/site.css and css/site.css. Retunes the shared tokens and the form pieces to the BK look. */
:root {
  --ink: #f0f3f6;
  --ink-2: #c9cdd3;
  --muted: #959ba2;
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .08);
  --paper: #060708;
  --white: #14171b;
  --stone: #0c0e11;
  --sand: #1b1f24;
  --accent: #e23b46;
  --accent-ink: #ffffff;
  --accent-soft: rgba(192, 31, 44, .16);
  --ok: #57c27a; --ok-soft: rgba(87, 194, 122, .14);
  --warn: #f0b44c; --warn-soft: rgba(240, 180, 76, .14);
  --info: #6ea8ff; --info-soft: rgba(110, 168, 255, .14);
  --danger: #ff6b74; --danger-soft: rgba(255, 107, 116, .14);
  --leaf: #c01f2c; --lime: #e23b46; --deep: #0c0e11; --sky: #8a9097; --sun: #d8d0c3;
  --serif: "Oswald", "Barlow", sans-serif;
  --sans: "Barlow", system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 60px rgba(0, 0, 0, .6);
}
body.site { background: var(--paper); color: var(--steel, #c9cdd3); }

/* Header: assets/site.css also styles ".nav"; keep the BK header's own look. */
.site-head .nav { position: static; top: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; height: auto; }
.site-head { background: rgba(6, 7, 8, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line-2); }
@media (max-width: 760px) {
  .site-head .nav { position: fixed; top: var(--head-h); background: rgba(6, 7, 8, .97); border-bottom: 1px solid var(--line); }
}

/* Buttons on these pages use the BK cut-corner style. */
.site .btn { border-radius: 0; font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.site .btn.primary, .site .btn.accent { background: linear-gradient(180deg, #e23b46, #c01f2c 55%, #8a1318); color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(192, 31, 44, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.site .btn.primary:hover, .site .btn.accent:hover { background: linear-gradient(180deg, #ea4a55, #c82331 55%, #8a1318); box-shadow: 0 12px 26px -8px rgba(192, 31, 44, .9); }
.site .btn.ghost { background: rgba(255, 255, 255, .03); color: var(--ink); border: 1px solid rgba(255, 255, 255, .22); }
.site .btn.ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.site .btn.light { background: #f0f3f6; color: #0c0e11; }
.site .btn.danger { background: #8a1318; }

/* Page hero: a darkened shop photo with the BK red glow. */
.inq-hero { padding: calc(var(--head-h, 84px) + 54px) 0 130px; color: #fff; isolation: isolate;
  background:
    linear-gradient(0deg, #060708 0%, rgba(6, 7, 8, .72) 45%, rgba(6, 7, 8, .82) 100%),
    radial-gradient(70% 70% at 80% 100%, rgba(192, 31, 44, .28), transparent 70%),
    url("/img/bg-shop.webp") center 60% / cover no-repeat; }
.inq-hero::before, .inq-hero::after { display: none !important; }
.inq-hero h1 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(2.4rem, 5.6vw, 4.2rem); color: #f0f3f6; }
.inq-hero h1 em { font-style: normal; background: linear-gradient(180deg, #fbfdff 0%, #cfd4da 22%, #9aa0a7 48%, #e9edf1 52%, #aeb4bb 78%, #7d838b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.inq-hero p { color: #d4d8dd; }
.inq-hero .perks span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); border-radius: 0; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.inq-hero .perks span:first-child { background: #c01f2c; color: #fff; }

/* Cards and forms */
.form, .site-wow .form { background: linear-gradient(180deg, rgba(20, 23, 27, .98), rgba(12, 14, 17, .98)); border: 1px solid var(--line); border-top: 3px solid #c01f2c; border-radius: 0;
  box-shadow: var(--shadow-lg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.form h2, .form .form-title { font-family: "Anton", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; color: #f0f3f6; letter-spacing: .01em; }
.form h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #f0f3f6; }
.f label, .f .lbl, .form label { color: var(--ink-2); }
.f input, .f select, .f textarea, .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea {
  background: #0a0c0e; color: #f0f3f6; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; }
.form input:focus, .form textarea:focus, .form select:focus, .site-wow .form input:focus, .site-wow .form textarea:focus, .site-wow .form select:focus {
  border-color: #c01f2c; box-shadow: 0 0 0 3px rgba(192, 31, 44, .22); outline: 0; }
.seg span, .chip span { border-radius: 0 !important; background: #0a0c0e; border-color: rgba(255, 255, 255, .16); color: var(--ink-2); }
.site-wow .seg input:checked + span, .seg input:checked + span { background: #c01f2c; border-color: #c01f2c; color: #fff; box-shadow: none; }
.site-wow .chip input:checked + span, .chip input:checked + span { background: #c01f2c; border-color: transparent; color: #fff; }
.side, .inq .side { color: var(--ink-2); }
.side h3, .inq aside h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #d8d0c3; }
.side .contact a, .inq aside a { color: #e23b46; font-weight: 600; }
.muted { color: var(--muted) !important; }
a { color: inherit; }
.form a:not(.btn) { color: #ff8a92; }
table { color: var(--ink-2); }
th { color: #d8d0c3; }
td, th { border-color: var(--line-2) !important; }

/* Booking widget (assets/booking.js) and customer pages (assets/customer.js) */
.booking { --brand: #c01f2c; --brand-ink: #fff; }
.booking button { border: 1px solid rgba(255, 255, 255, .18); background: #0a0c0e; color: var(--ink-2); border-radius: 0; font-family: "Oswald", sans-serif; letter-spacing: .06em; }
.booking button:hover { border-color: #c01f2c; color: #fff; }
.booking button[aria-pressed=true], .booking button.btn { background: linear-gradient(180deg, #e23b46, #c01f2c 55%, #8a1318); border-color: transparent; color: #fff; }
.booking .bk-day { color: #d8d0c3; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.booking input:not([type=checkbox]), .booking textarea { background: #0a0c0e; color: #f0f3f6; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; }
.booking .bk-msg, .bk-msg { color: #ff8a92; }
.cardx { background: linear-gradient(180deg, #14171b, #0c0e11); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.cardx h2 { font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #f0f3f6; font-size: 1.15rem; }
.cardx .tag { background: rgba(87, 194, 122, .16); color: #8fd19e; border-radius: 0; }
.cardx .tag.due { background: rgba(240, 180, 76, .16); color: #f0b44c; }
.paysum { color: #f0f3f6; font-family: "Oswald", sans-serif; }
.form-error { background: rgba(255, 107, 116, .12); color: #ff8a92; border-radius: 0; }

/* Footer spacing on short pages */
.site .inq { padding-bottom: 90px; }
.bk-row3{display:grid;grid-template-columns:90px 1fr 1fr;gap:10px}@media(max-width:480px){.bk-row3{grid-template-columns:80px 1fr}.bk-row3 label:last-child{grid-column:1/-1}}

/* Inspection report (/inspection) */
.ins-note { background: var(--sand); border-left: 3px solid var(--accent); padding: 12px 16px; margin: 0 0 18px; }
.ins-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.ins-sum span { flex: 1 1 90px; text-align: center; padding: 12px 8px; border: 1px solid var(--line); background: var(--stone); font-size: .9rem; color: var(--muted); }
.ins-sum b { display: block; font: 600 1.9rem/1 var(--serif); color: var(--ink); margin-bottom: 4px; }
.ins-sum .now b { color: var(--danger); } .ins-sum .soon b { color: var(--warn); } .ins-sum .ok b { color: var(--ok); }
.ins-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px; margin-bottom: 12px; background: var(--stone); border: 1px solid var(--line); border-left: 4px solid var(--warn); }
.ins-item.now { border-left-color: var(--danger); }
.ins-item:not(:has(.ins-ph)) { grid-template-columns: 1fr; }
.ins-ph { padding: 0; border: 0; background: none; cursor: zoom-in; }
.ins-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ins-tag { font: 600 .72rem var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.ins-item.now .ins-tag { color: var(--danger); }
.ins-body h3 { margin: 4px 0 6px; font: 600 1.2rem var(--serif); color: var(--ink); letter-spacing: .02em; }
.ins-body p { margin: 0 0 10px; }
.ins-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ins-act b { font: 600 1.25rem var(--serif); color: var(--ink); }
.ins-act .bk-check { margin: 0; }
.ins-ok { color: var(--ok); font-weight: 700; }
.ins-good { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--line); background: var(--stone); }
.ins-good summary { cursor: pointer; color: var(--ok); font-weight: 700; }
.ins-good ul { margin: 10px 0 0; padding-left: 18px; columns: 2 220px; }
.ins-form, .ins-done { margin-top: 22px; padding: 18px; border: 1px solid var(--line); background: var(--sand); }
.ins-total b { font: 600 1.5rem var(--serif); color: var(--ink); }
.ins-done h2 { margin: 0 0 6px; font: 600 1.6rem var(--serif); color: var(--ink); }
.ins-lb { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .9); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.ins-lb img { max-width: 100%; max-height: 90vh; }
.ins-lb button { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 2.2rem; cursor: pointer; }
@media (max-width: 560px) { .ins-item { grid-template-columns: 1fr; } }

/* Repair status (/my-project) */
.ro-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; margin: 0 0 20px; counter-reset: s; }
.ro-steps li { counter-increment: s; text-align: center; font-size: .82rem; color: var(--muted); padding-top: 34px; position: relative; border-top: 3px solid var(--line); }
.ro-steps li::before { content: counter(s); position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--stone); border: 2px solid var(--line); display: grid; place-items: center; font: 600 .8rem var(--serif); color: var(--muted); }
.ro-steps li.done { border-top-color: var(--accent); color: var(--ink-2); }
.ro-steps li.done::before { background: var(--accent); border-color: var(--accent); color: #fff; content: "\2713"; }
.ro-steps li.on { border-top-color: var(--accent); color: var(--ink); font-weight: 700; }
.ro-steps li.on::before { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.ro-next, .ro-alert { padding: 12px 16px; background: var(--sand); border-left: 3px solid var(--accent); }
.ro-alert a { color: var(--ink); }
.ro-ccc { display: grid; gap: 10px; margin: 18px 0; }
.ro-ccc div { padding: 12px 16px; background: var(--stone); border: 1px solid var(--line); }
.ro-ccc span { font: 600 .72rem var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ro-ccc p { margin: 4px 0 0; }
.ro-h { font: 600 1.3rem var(--serif); color: var(--ink); margin: 26px 0 10px; letter-spacing: .02em; }
.ro-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ro-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ro-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ro-money div { padding: 12px; background: var(--stone); border: 1px solid var(--line); text-align: center; }
.ro-money span { display: block; font-size: .8rem; color: var(--muted); }
.ro-money b { font: 600 1.35rem var(--serif); color: var(--ink); }
.ro-war { margin-top: 10px; }
@media (max-width: 480px) { .ro-steps li { font-size: .7rem; } }
/* css/site.css uses --ink as a dark background; this sheet reuses --ink for text, so pin the dark pieces. */
.site-foot { background: linear-gradient(180deg, #060708, #030304); }
.strip { background: linear-gradient(180deg, #0c0e11, #060708); }
.ins-form input[name=n] { display: block; width: 100%; max-width: 420px; min-height: 46px; padding: 10px 14px; margin-top: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font: inherit; }