/* =========================================================
   WildRoute - Booking Checkout (book-front.css)
   Location: assets/css/css-front/book-front.css

   The conversion page. Every state is handled:
   - empty / filled / focused / error / disabled / loading
   - hover-capable and touch-only devices
   - tablets, phones, tiny phones, landscape, print
   - reduced motion, high contrast, forced colours

   Design language matches index-front.css, safaris-front.css
   and product-front.css. All classes are prefixed "bk-".

   Contents
   01  Tokens
   02  Base
   03  Utilities
   04  Typography
   05  Buttons
   06  Breadcrumb
   07  Head card
   08  Steps
   09  Body grid
   10  Alert
   11  Form shell
   12  Field & inputs
   13  Stepper
   14  Submit block
   15  Summary
   16  Trust rows
   17  Loading / disabled states
   18  Focus & error states
   19  Responsive — tablet
   20  Responsive — phones
   21  Responsive — tiny phones
   22  Landscape phones
   23  Touch-only devices
   24  iOS Safari specifics
   25  Print
   26  Motion & contrast
   ========================================================= */

/* =========================================================
   01. TOKENS
   ========================================================= */
:root {
  --bk-bg:          #f7f7f9;
  --bk-card:        #ffffff;
  --bk-ink:         #14161a;
  --bk-ink-2:       #565a63;
  --bk-ink-3:       #8b8f98;
  --bk-ink-4:       #b6b9c1;
  --bk-line:        #ececef;
  --bk-line-2:      #e2e3e8;
  --bk-soft:        #f4f5f8;
  --bk-soft-2:      #ececf0;

  --bk-accent:      #d94460;
  --bk-accent-dark: #b8324b;
  --bk-accent-soft: #fdeef1;
  --bk-accent-ring: rgba(217, 68, 96, .18);

  --bk-success:      #1a9e5c;
  --bk-success-soft: #eaf7f1;
  --bk-danger:       #d14b5f;
  --bk-danger-soft:  #fdeef1;

  --bk-r-xs: 8px;
  --bk-r-sm: 12px;
  --bk-r-md: 16px;
  --bk-r-lg: 22px;
  --bk-r-xl: 28px;
  --bk-r-pill: 999px;

  --bk-shadow-xs: 0 1px 2px rgba(20, 22, 26, .04);
  --bk-shadow-sm: 0 2px 6px -2px rgba(20, 22, 26, .06);
  --bk-shadow:    0 6px 18px -10px rgba(20, 22, 26, .14);
  --bk-shadow-lg: 0 24px 50px -28px rgba(20, 22, 26, .28);

  --bk-gap:      clamp(14px, 2vw, 22px);
  --bk-pad-x:    clamp(16px, 2.4vw, 30px);
  --bk-section:  clamp(18px, 2.2vw, 26px);

  --bk-ease: cubic-bezier(.4, 0, .2, 1);
  --bk-fast: .16s;
  --bk-med:  .24s;
}

/* =========================================================
   02. BASE
   ========================================================= */
body.page-book {
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }

.bk {
  padding-block: clamp(12px, 1.6vw, 20px) clamp(40px, 6vw, 80px);
  overflow-x: clip;
}

.bk-wrap {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bk-gap);
}

.bk a { color: inherit; text-decoration: none; }
.bk img { display: block; max-width: 100%; height: auto; }
.bk h1, .bk h2, .bk h3, .bk p { margin: 0; }
.bk ol, .bk ul { margin: 0; padding: 0; list-style: none; }
.bk dl, .bk dt, .bk dd { margin: 0; }
.bk fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bk legend { padding: 0; }
.bk button { font: inherit; cursor: pointer; }

.bk :focus { outline: none; }
.bk :focus-visible {
  outline: 3px solid var(--bk-ink);
  outline-offset: 3px;
  border-radius: 12px;
}
.bk input:focus-visible,
.bk textarea:focus-visible,
.bk .bk-stepper:focus-within { outline: none; }

/* Selection */
.bk ::selection { background: var(--bk-accent); color: #fff; }

/* =========================================================
   03. UTILITIES
   ========================================================= */
.bk-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bk-muted { color: var(--bk-ink-3); }

.bk-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   04. TYPOGRAPHY
   ========================================================= */
.bk-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bk-accent);
}

.bk-title {
  margin-top: 10px;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.bk-lede {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--bk-ink-2);
  font-size: clamp(.93rem, 1.1vw, 1.02rem);
  line-height: 1.6;
}

/* =========================================================
   05. BUTTONS
   ========================================================= */
.bk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--bk-r-pill);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--bk-fast) var(--bk-ease),
    background var(--bk-fast) ease,
    border-color var(--bk-fast) ease,
    color var(--bk-fast) ease,
    box-shadow var(--bk-fast) ease;
}
.bk-btn:active { transform: scale(.98); }
.bk-btn .bk-ico { width: 16px; height: 16px; }

.bk-btn-dark {
  background: var(--bk-ink);
  color: #fff;
}
.bk-btn-dark:hover { background: #23252b; }

.bk-btn-light {
  background: #fff;
  color: var(--bk-ink);
  border-color: var(--bk-line-2);
}
.bk-btn-light:hover { border-color: var(--bk-ink-3); }

.bk-btn-accent {
  background: var(--bk-accent);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(217, 68, 96, .5);
}
.bk-btn-accent:hover {
  background: var(--bk-accent-dark);
  box-shadow: 0 8px 22px -8px rgba(217, 68, 96, .55);
}

.bk-btn-lg {
  height: 54px;
  padding: 0 28px;
  font-size: .95rem;
  font-weight: 700;
}

.bk-btn-block { width: 100%; }

/* Disabled / loading */
.bk-btn:disabled,
.bk-btn.is-loading {
  cursor: not-allowed;
  opacity: .82;
  pointer-events: none;
}
.bk-btn.is-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  animation: bk-spin .7s linear infinite;
  margin-left: 4px;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* =========================================================
   06. BREADCRUMB
   ========================================================= */
.bk-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--bk-ink-3);
}
.bk-crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: #c4c6cc;
}
.bk-crumbs a {
  transition: color var(--bk-fast) ease;
}
.bk-crumbs a:hover { color: var(--bk-ink); }
.bk-crumbs [aria-current] {
  color: var(--bk-ink);
  font-weight: 600;
}

/* =========================================================
   07. HEAD CARD
   ========================================================= */
.bk-head {
  position: relative;
  padding: clamp(22px, 3.2vw, 38px);
  background: var(--bk-card);
  border-radius: var(--bk-r-xl);
  box-shadow: var(--bk-shadow-xs);
  overflow: hidden;
}
.bk-head::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bk-accent-soft), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.bk-head-text {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

/* =========================================================
   08. STEPS
   ========================================================= */
.bk-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bk-line);
}

.bk-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--bk-r-pill);
  background: var(--bk-soft);
  color: var(--bk-ink-3);
  font-size: .8rem;
  font-weight: 600;
  transition: background var(--bk-fast) ease, color var(--bk-fast) ease;
}
.bk-step.is-active {
  background: var(--bk-ink);
  color: #fff;
}

.bk-step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--bk-ink);
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bk-step.is-active .bk-step-num {
  background: var(--bk-accent);
  color: #fff;
}

/* =========================================================
   09. BODY GRID
   ========================================================= */
.bk-body { display: block; }

.bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--bk-gap);
  align-items: start;
}

.bk-form-col,
.bk-summary-col { min-width: 0; }

/* =========================================================
   10. ALERT
   ========================================================= */
.bk-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: var(--bk-gap);
  background: var(--bk-danger-soft);
  border-radius: var(--bk-r-lg);
  color: var(--bk-danger);
  font-size: .88rem;
  line-height: 1.5;
  animation: bk-alert-in .25s var(--bk-ease) both;
}
.bk-alert-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.bk-alert-icon .bk-ico { width: 18px; height: 18px; }
.bk-alert-text { flex: 1; font-weight: 500; }

@keyframes bk-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   11. FORM SHELL
   ========================================================= */
.bk-form {
  display: flex;
  flex-direction: column;
  gap: var(--bk-section);
  padding: var(--bk-pad-x);
  background: var(--bk-card);
  border-radius: var(--bk-r-xl);
  box-shadow: var(--bk-shadow-xs);
}

.bk-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bk-section + .bk-section {
  padding-top: var(--bk-section);
  border-top: 1px solid var(--bk-line);
}

.bk-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--bk-ink);
}

.bk-section-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bk-ink);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  flex-shrink: 0;
}

.bk-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bk-field--full { grid-column: 1 / -1; }

/* =========================================================
   12. FIELD & INPUTS
   ========================================================= */
.bk-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--bk-ink-2);
}
.bk-req {
  color: var(--bk-accent);
  font-weight: 700;
}

.bk-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--bk-r-md);
  background: var(--bk-soft);
  font: inherit;
  font-size: .95rem;
  color: var(--bk-ink);
  -webkit-appearance: none;
  appearance: none;
  transition:
    background var(--bk-fast) ease,
    border-color var(--bk-fast) ease,
    box-shadow var(--bk-fast) ease;
}
.bk-input::placeholder { color: var(--bk-ink-4); font-weight: 400; }
.bk-input:hover:not(:focus) {
  background: var(--bk-soft-2);
  border-color: var(--bk-line-2);
}
.bk-input:focus {
  background: #fff;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 4px var(--bk-accent-ring);
}

/* Error state */
.bk-input[aria-invalid="true"] {
  background: #fff;
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 4px rgba(209, 75, 95, .14);
}

/* Textarea */
.bk-textarea {
  height: auto;
  min-height: 108px;
  padding: 12px 16px;
  line-height: 1.55;
  resize: vertical;
}

/* Date input normalisation */
.bk-input[type="date"] {
  min-height: 48px;
  padding-right: 12px;
}
.bk-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--bk-fast) ease;
}
.bk-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.bk-hint {
  display: block;
  font-size: .76rem;
  color: var(--bk-ink-3);
  line-height: 1.4;
}

/* =========================================================
   13. STEPPER
   ========================================================= */
.bk-stepper {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--bk-r-md);
  background: var(--bk-soft);
  transition:
    background var(--bk-fast) ease,
    border-color var(--bk-fast) ease,
    box-shadow var(--bk-fast) ease;
}
.bk-stepper:hover { background: var(--bk-soft-2); }
.bk-stepper:focus-within {
  background: #fff;
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 4px var(--bk-accent-ring);
}

.bk-stepper-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: var(--bk-ink);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
  transition:
    background var(--bk-fast) ease,
    color var(--bk-fast) ease,
    transform var(--bk-fast) var(--bk-ease),
    box-shadow var(--bk-fast) ease;
}
.bk-stepper-btn:hover {
  background: var(--bk-ink);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(20, 22, 26, .25);
}
.bk-stepper-btn:active { transform: scale(.92); }
.bk-stepper-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: #fff;
  color: var(--bk-ink-4);
  box-shadow: none;
}

.bk-stepper-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  text-align: center;
  color: var(--bk-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.bk-stepper-input::-webkit-outer-spin-button,
.bk-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================================
   14. SUBMIT BLOCK
   ========================================================= */
.bk-submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--bk-section);
  border-top: 1px solid var(--bk-line);
}

.bk-submit-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--bk-ink-3);
}
.bk-submit-note .bk-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--bk-success);
}

/* =========================================================
   15. SUMMARY
   ========================================================= */
.bk-summary-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 100px;
}

.bk-summary {
  overflow: hidden;
  background: var(--bk-card);
  border-radius: var(--bk-r-xl);
  box-shadow: var(--bk-shadow-xs);
}

.bk-summary-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bk-soft);
}
.bk-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-summary-media-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #c4c6cc;
  background: linear-gradient(160deg, #f3f3f6, #e8e8ec);
}
.bk-summary-media-fallback .bk-ico {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

.bk-summary-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.bk-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 11px;
  border-radius: var(--bk-r-pill);
  background: var(--bk-soft);
  font-size: .72rem;
  font-weight: 700;
  color: var(--bk-ink-2);
}

.bk-summary-title {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.bk-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bk-line);
}
.bk-summary-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--bk-ink-2);
  min-width: 0;
}
.bk-summary-meta .bk-ico {
  width: 14px;
  height: 14px;
  color: var(--bk-ink-3);
}

.bk-summary-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bk-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .86rem;
}
.bk-summary-row dt {
  color: var(--bk-ink-3);
  font-weight: 500;
  flex-shrink: 0;
}
.bk-summary-row dd {
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.bk-summary-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--bk-r-md);
  background: var(--bk-soft);
  transition: background var(--bk-fast) ease;
}
.bk-summary-total.is-updating {
  background: var(--bk-accent-soft);
}
.bk-summary-total-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bk-ink-3);
}
.bk-summary-total-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.bk-summary-total-note {
  font-size: .74rem;
  color: var(--bk-ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* =========================================================
   16. TRUST ROWS
   ========================================================= */
.bk-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--bk-card);
  border-radius: var(--bk-r-lg);
  box-shadow: var(--bk-shadow-xs);
}

.bk-trust-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bk-trust-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bk-soft);
  color: var(--bk-ink);
}
.bk-trust-icon .bk-ico { width: 15px; height: 15px; }

.bk-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bk-trust-text strong {
  font-size: .85rem;
  font-weight: 700;
  color: var(--bk-ink);
}
.bk-trust-text span {
  font-size: .77rem;
  color: var(--bk-ink-3);
  line-height: 1.45;
}

/* =========================================================
   17. LOADING / DISABLED STATES
   ========================================================= */
.bk-form.is-submitting {
  pointer-events: none;
  opacity: .9;
}

/* =========================================================
   18. FOCUS & ERROR STATES
   (already declared in section 12 — kept separate for clarity)
   ========================================================= */
.bk-field.is-invalid .bk-label { color: var(--bk-danger); }
.bk-field.is-invalid .bk-input,
.bk-field.is-invalid .bk-stepper {
  background: #fff;
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 4px rgba(209, 75, 95, .14);
}

.bk-error-text {
  font-size: .76rem;
  color: var(--bk-danger);
  font-weight: 500;
  line-height: 1.4;
}

/* =========================================================
   19. RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 1100px) {
  .bk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
}

@media (max-width: 1024px) {
  .bk-grid { grid-template-columns: 1fr; }
  .bk-summary-col {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Summary as a horizontal card */
  .bk-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-column: 1 / -1;
  }
  .bk-summary-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 200px;
  }
  .bk-summary-body { padding: 22px 24px; }
}

@media (max-width: 900px) {
  .bk-summary { grid-template-columns: 190px 1fr; }
  .bk-summary-media { min-height: 180px; }
}

/* =========================================================
   20. RESPONSIVE — PHONES
   ========================================================= */
@media (max-width: 768px) {
  .bk-wrap { width: calc(100% - 24px); }
  .bk { padding-block: 12px 44px; }

  /* Head */
  .bk-head { padding: 22px; border-radius: var(--bk-r-lg); }
  .bk-title { font-size: 1.75rem; }
  .bk-lede { font-size: .94rem; }

  /* Steps: keep text but tighter */
  .bk-steps { gap: 6px; margin-top: 18px; padding-top: 18px; }
  .bk-step { padding: 5px 10px 5px 5px; font-size: .76rem; }
  .bk-step-num { width: 22px; height: 22px; font-size: .7rem; }

  /* Form */
  .bk-form { border-radius: var(--bk-r-lg); padding: 20px; }
  .bk-fields { grid-template-columns: 1fr; gap: 12px; }

  .bk-section { gap: 14px; }
  .bk-section + .bk-section { padding-top: 18px; }
  .bk-section-title { font-size: .95rem; gap: 8px; }
  .bk-section-num { width: 24px; height: 24px; font-size: .72rem; }

  .bk-input,
  .bk-stepper {
    height: 48px;
    border-radius: var(--bk-r-sm);
    font-size: .92rem;
  }
  .bk-textarea { min-height: 100px; padding: 12px 15px; }
  .bk-stepper-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; }

  .bk-btn-lg { height: 52px; padding: 0 22px; font-size: .93rem; }
  .bk-submit-note { font-size: .8rem; }

  /* Summary stacks */
  .bk-summary-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .bk-summary {
    display: block;
    border-radius: var(--bk-r-lg);
  }
  .bk-summary-media {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  .bk-summary-body { padding: 18px; gap: 10px; }
  .bk-summary-title { font-size: 1rem; }
  .bk-summary-total-value { font-size: 1.25rem; }

  .bk-trust {
    border-radius: var(--bk-r-md);
    padding: 16px;
    gap: 8px;
  }
  .bk-trust-icon { width: 32px; height: 32px; }
  .bk-trust-icon .bk-ico { width: 15px; height: 15px; }
}

/* =========================================================
   21. RESPONSIVE — TINY PHONES
   ========================================================= */
@media (max-width: 600px) {
  .bk-head { padding: 18px; border-radius: 20px; }
  .bk-eyebrow { font-size: .68rem; }
  .bk-title { font-size: 1.55rem; margin-top: 8px; }
  .bk-lede { font-size: .88rem; margin-top: 10px; }

  /* Steps: circles only */
  .bk-steps { gap: 6px; margin-top: 16px; padding-top: 16px; }
  .bk-step { padding: 6px; gap: 0; }
  .bk-step-text { display: none; }
  .bk-step-num { width: 26px; height: 26px; font-size: .74rem; }

  .bk-form { padding: 16px; border-radius: 20px; }
  .bk-section + .bk-section { padding-top: 16px; }
  .bk-section-title { font-size: .92rem; gap: 8px; }
  .bk-section-num { width: 22px; height: 22px; font-size: .68rem; }

  .bk-label { font-size: .8rem; }
  .bk-input,
  .bk-stepper {
    height: 46px;
    border-radius: 11px;
    padding-inline: 14px;
    font-size: .9rem;
  }
  .bk-textarea { padding: 12px 14px; font-size: .9rem; }
  .bk-stepper { padding: 3px; }
  .bk-stepper-btn { width: 36px; height: 36px; border-radius: 9px; font-size: 1rem; }
  .bk-hint { font-size: .72rem; }

  .bk-btn-lg { height: 50px; font-size: .9rem; padding: 0 18px; }
  .bk-submit-note { font-size: .78rem; }

  .bk-summary { border-radius: 20px; }
  .bk-summary-body { padding: 16px; }
  .bk-summary-title { font-size: .96rem; }
  .bk-summary-row { font-size: .82rem; }
  .bk-summary-total { padding: 12px 14px; }
  .bk-summary-total-value { font-size: 1.15rem; }

  .bk-trust { border-radius: 16px; padding: 14px; }
  .bk-trust-text strong { font-size: .82rem; }
  .bk-trust-text span { font-size: .74rem; }

  .bk-alert { padding: 12px 14px; font-size: .82rem; border-radius: 16px; }
}

@media (max-width: 380px) {
  .bk-wrap { width: calc(100% - 16px); }
  .bk-title { font-size: 1.35rem; }
  .bk-lede { font-size: .84rem; }
  .bk-form { padding: 14px; border-radius: 18px; }
  .bk-input,
  .bk-stepper { height: 44px; font-size: .86rem; padding-inline: 12px; border-radius: 10px; }
  .bk-stepper-btn { width: 34px; height: 34px; font-size: .95rem; }
  .bk-btn { font-size: .86rem; }
  .bk-btn-lg { height: 48px; padding: 0 16px; font-size: .84rem; }
  .bk-summary-body { padding: 14px; }
  .bk-summary-title { font-size: .9rem; }
  .bk-summary-total-value { font-size: 1.08rem; }
}

/* =========================================================
   22. LANDSCAPE PHONES
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .bk-summary-col { position: static; display: flex; flex-direction: column; }
  .bk-summary { display: grid; grid-template-columns: 160px 1fr; }
  .bk-summary-media { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .bk { padding-bottom: 32px; }
}

/* =========================================================
   23. TOUCH-ONLY DEVICES
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  /* Bump tap targets */
  .bk-stepper-btn { min-width: 40px; min-height: 40px; }
  .bk-btn { min-height: 46px; }

  /* Suppress hover states that would otherwise stick */
  .bk-input:hover,
  .bk-stepper:hover {
    background: var(--bk-soft);
    border-color: transparent;
  }
  .bk-stepper-btn:hover {
    background: #fff;
    color: var(--bk-ink);
    box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
  }
  .bk-btn-accent:hover {
    background: var(--bk-accent);
    box-shadow: 0 4px 14px -6px rgba(217, 68, 96, .5);
  }
  .bk-btn-dark:hover { background: var(--bk-ink); }
  .bk-btn-light:hover { border-color: var(--bk-line-2); }
}

/* =========================================================
   24. iOS SAFARI SPECIFICS
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  .bk-input,
  .bk-stepper-input,
  .bk-textarea { font-size: 16px; }

  .bk-input[type="date"] {
    display: flex;
    align-items: center;
  }
  .bk-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
}

@media (max-width: 480px) {
  /* Prevent iOS input zoom */
  .bk-input,
  .bk-stepper-input,
  .bk-textarea { font-size: 16px; }
}

/* =========================================================
   25. PRINT
   ========================================================= */
@media print {
  body.page-book { background: #fff !important; }

  .bk-form,
  .bk-summary,
  .bk-trust,
  .bk-head,
  .bk-alert {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  .bk-btn,
  .bk-stepper-btn,
  .bk-crumbs,
  .bk-steps { display: none !important; }
}

/* =========================================================
   26. MOTION & CONTRAST
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .bk-btn.is-loading::after { animation: none; }
}

@media (prefers-contrast: high) {
  .bk-input,
  .bk-stepper,
  .bk-btn {
    border-width: 2px;
    border-style: solid;
    border-color: var(--bk-ink);
  }
  .bk-input:focus,
  .bk-stepper:focus-within,
  .bk-btn:focus-visible {
    border-color: var(--bk-ink);
    box-shadow: 0 0 0 3px var(--bk-ink);
  }
}

@media (forced-colors: active) {
  .bk-input,
  .bk-stepper,
  .bk-btn,
  .bk-summary,
  .bk-trust,
  .bk-form,
  .bk-head {
    border: 1px solid CanvasText;
  }
}