/* ==========================================================================
   darya-booking.css — the ten-step reservation wizard (client feedback r1).
   Page-specific rules only; the components (.stepper .card .choice .kv
   .pricelist .terms-check .modal .btn …) come from darya-ref.css, loaded
   before this file. Logical properties throughout so fa/ar (rtl) and en
   (ltr) share one sheet.
   ========================================================================== */
.bk { --bk-max: 760px; }
.bk .wrap { padding-block-start: 8px; }
.bk h1 { font-size: 1.6rem; margin: 0 0 18px; }
.bk h2 { font-size: 1.15rem; margin: 0 0 12px; }
.bk .section { padding-block: 28px 56px; }
.bk .section-head h1 { margin: 0; }
.bk .field .req { color: var(--danger, #B3261E); }
.bk .bk-edit-badge { margin: -12px 0 16px; }

/* ten steps: a scrolling strip on the phone (reference), two tidy rows of five
   on a wide screen — no connector bars, no wrapping mid-row */
@media (min-width: 900px) {
    .bk .stepper { overflow: visible; padding-bottom: 0; }
    .bk .stepper ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-width: 0; }
    .bk .stepper li { display: block; min-width: 0; }
    .bk .stepper .bar { display: none; }
    .bk .stepper .node { width: 100%; justify-content: flex-start; white-space: normal; line-height: 1.2; }
    .bk .stepper .num { flex: none; }
}

/* forms: darya-ref.css styles bare inputs; keep the theme from restyling them */
.bk input[type="text"], .bk input[type="email"], .bk input[type="tel"], .bk input[type="number"],
.bk select, .bk textarea {
    width: 100%; min-height: var(--tap, 44px); border: 1px solid var(--line-strong, #C9D1DD); border-radius: var(--radius-sm, 10px);
    padding: 10px 12px; background: #fff; font: inherit; color: var(--ink, #14213D);
}
.bk input:focus, .bk select:focus, .bk textarea:focus { outline: 2px solid var(--brand, #0C1C3D); outline-offset: 1px; }
.bk .dt > .bk-jdate { border-start-end-radius: 0; border-end-end-radius: 0; }
.bk .dt > select { border-start-start-radius: 0; border-end-start-radius: 0; }
.bk .datepair { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.bk .tickline { margin-top: 16px; }
.bk #return-branch-field { margin-top: 16px; }
.bk .field + .tickline, .bk .tickline + .field { margin-top: 16px; }
.bk .bk-grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.bk .bk-grid-2 .field + .field { margin-top: 0; }
.bk .bk-btn-row { margin-top: 20px; justify-content: space-between; }
.bk .bk-btn-row .btn { min-width: 140px; }
.bk .btn { min-height: var(--tap, 44px); }
.bk .btn-sm { min-height: 40px; }

/* phone with the fixed +98 box (client feedback p-6) */
.bk .bk-phone { display: grid; grid-template-columns: 96px 1fr; }
.bk .bk-phone-prefix { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong, #C9D1DD); border-inline-end: 0; border-radius: var(--radius-sm, 10px) 0 0 var(--radius-sm, 10px); background: var(--bg-alt, #F4F6F9); font-weight: 700; white-space: nowrap; }
.bk .bk-phone input { border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0; }

/* Jalali picker (ported from the reference) */
.bk .field { position: relative; }
.bk .jdp { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; z-index: 30; background: #fff; border: 1px solid var(--line-strong, #C9D1DD); border-radius: var(--radius, 14px); box-shadow: var(--shadow-lg, 0 12px 30px rgba(12,28,61,.18)); padding: 12px; width: 300px; max-width: calc(100vw - 40px); }
.bk .jdp[hidden] { display: none; }
.bk .jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk .jdp-nav { width: 36px; height: 36px; border: 1px solid var(--line, #E3E7EE); border-radius: 8px; background: #fff; cursor: pointer; font-size: 1.1rem; }
.bk .jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk .jdp-wd { text-align: center; font-size: .72rem; color: var(--muted, #5F6880); padding: 4px 0; }
.bk .jdp-day { position: relative; min-height: 38px; border: 0; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.bk .jdp-day .g { position: absolute; inset-block-end: 1px; inset-inline-end: 3px; font-size: .55rem; color: var(--muted, #5F6880); direction: ltr; }
.bk .jdp-day:hover { background: var(--bg-alt, #F4F6F9); }
.bk .jdp-day.sel { background: var(--brand, #0C1C3D); color: #fff; }
.bk .jdp-day.sel .g { color: #C6D4E0; }
.bk .jdp-day.friday { color: var(--danger, #B3261E); }
.bk .jdp-day:disabled { color: #B7C0CE; cursor: not-allowed; background: transparent; }

/* car grid */
.bk .bk-car-grid .car-card.is-selected { border-color: var(--brand, #0C1C3D); box-shadow: 0 0 0 2px var(--brand, #0C1C3D) inset; }
.bk .car-card .stats { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted, #5F6880); font-size: .85rem; }
.bk .car-card .stat { display: inline-flex; gap: 4px; align-items: baseline; }
.bk .car-card .stat .v { font-weight: 700; color: var(--ink, #14213D); }
.bk .car-card .price-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.bk .car-card .price { font-weight: 800; font-size: 1.15rem; }
.bk .car-card .per { color: var(--muted, #5F6880); font-size: .85rem; }
.bk .car-card .price-was { color: var(--muted, #5F6880); text-decoration: line-through; font-size: .85rem; }
.bk .car-card .offer-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 1; background: var(--accent, #8A6420); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 700; }
.bk .car-card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* choices */
.bk .choice.is-disabled { opacity: .55; cursor: not-allowed; }
.bk .choice-title > span:last-child { color: var(--brand, #0C1C3D); }
.bk .bk-excess { display: block; margin-top: 4px; font-weight: 600; color: var(--ink-soft, #33415C); }
.bk .bk-live { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm, 10px); background: var(--brand-tint, #EEF2F9); border: 1px solid #C4D2EA; }
.bk .bk-live-k { color: var(--muted, #5F6880); font-size: .9rem; }
.bk .bk-live-v { font-size: 1.15rem; color: var(--brand, #0C1C3D); }
.bk .bk-live.is-busy .bk-live-v { opacity: .5; }

/* documents */
.bk .bk-doc + .bk-doc { margin-top: 18px; }
.bk .bk-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk .bk-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bk .bk-file-btn { cursor: pointer; margin: 0; }
.bk .bk-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bk .field .cheque-note { margin-top: 8px; }
/* the app's arc (DaryaSpinner, .darya-spin in darya-audit-fixes.css): the documents wait line,
   and the live box while it is asked again */
.bk .bk-waiting::before,
.bk .bk-live.is-busy .bk-live-k::after {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-inline: 0 8px; vertical-align: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 16%, currentColor);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
    animation: darya-turn 1.1s linear infinite;
}
.bk .bk-live.is-busy .bk-live-k::after { margin-inline: 8px 0; color: var(--gold, #BA8E4A); }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* proforma / documents */
.bk .bk-inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.bk .bk-doc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bk .bk-doc-brand { display: flex; gap: 12px; align-items: center; }
.bk .bk-doc-logo { height: 44px; width: auto; }
.bk .bk-doc-meta { text-align: end; font-size: .9rem; display: grid; gap: 2px; }
.bk .bk-doc-parties { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 18px 0; }
.bk .bk-doc-party { border: 1px solid var(--line, #E3E7EE); border-radius: var(--radius-sm, 10px); padding: 14px; }
.bk .bk-doc-party h3 { font-size: 1rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.bk .bk-doc-party .kv { grid-template-columns: max-content 1fr; font-size: .9rem; }
.bk .bk-doc-table th { text-align: start; color: var(--muted, #5F6880); font-size: .82rem; }
.bk .pricelist tr.deposit td { color: var(--ink-soft, #33415C); border-top: 1px dashed var(--line-strong, #C9D1DD); }
.bk .pricelist td:first-child .muted { display: block; font-size: .8rem; font-weight: 400; }
.bk .bk-voucher-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.bk .bk-voucher-cell { border: 1px solid var(--line, #E3E7EE); border-radius: var(--radius-sm, 10px); padding: 10px 12px; }
.bk .bk-voucher-cell .k { display: block; color: var(--muted, #5F6880); font-size: .8rem; margin-bottom: 4px; }
.bk .bk-voucher-cell .v { font-weight: 700; }
.bk .bk-voucher-code { font-size: 1.05rem; }
.bk .bk-rules { padding-inline-start: 20px; margin: 0; display: grid; gap: 6px; font-size: .92rem; }
.bk .kv dd { word-break: break-word; }

/* payment methods (payment plugin markup inside the reference card) */
.bk .bk-methods .list_payment_method { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bk .bk-methods .payment-method-item { border: 1px solid var(--line-strong, #C9D1DD); border-radius: var(--radius, 14px); padding: 14px 16px; }
.bk .bk-methods .payment-method-item input[type="radio"] { width: 22px; height: 22px; accent-color: var(--brand, #0C1C3D); vertical-align: middle; margin-inline-end: 8px; }
.bk .bk-methods .payment-method-item label { display: inline; font-weight: 700; cursor: pointer; }
.bk .bk-methods .payment-method-item:has(input:checked) { border-color: var(--brand, #0C1C3D); background: var(--brand-tint, #EEF2F9); }

/* print: the proforma, invoice and voucher */
@media print {
    body * { visibility: hidden; }
    .bk-print-area, .bk-print-area * { visibility: visible; }
    .bk-print-area { position: absolute; inset: 0; width: 100%; box-shadow: none; border: 0; padding: 0; }
    .bk-print-area + .bk-print-area { position: relative; page-break-before: always; }
    .bk-no-print, .stepper, header, footer, .btn { display: none !important; }
}

@media (max-width: 640px) {
    .bk .datepair, .bk .bk-grid-2, .bk .bk-doc-parties, .bk .bk-voucher-grid { grid-template-columns: 1fr; }
    .bk .bk-btn-row .btn { flex: 1; min-width: 0; white-space: normal; line-height: 1.3; }
    .bk .bk-doc-meta { text-align: start; }
    .bk h1 { font-size: 1.35rem; }
    .bk .card { padding: 16px; }
    .bk .choice-title { flex-direction: column; gap: 4px; }
    .bk .bk-phone { grid-template-columns: 84px 1fr; }
}

/* r2 · cancelled reservation: dated banner + diagonal stamp on the invoice/voucher */
.bk .bk-doc { position: relative; }
.bk .bk-cancelled-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: var(--danger-tint, #FBECEB); color: var(--danger, #B3261E); border: 1px solid #E4B8B5; border-radius: var(--radius-sm, 10px); padding: 10px 14px; margin-bottom: 14px; font-size: .92rem; }
.bk .bk-cancelled-banner strong { font-size: 1rem; }
.bk .bk-cancelled-date { font-weight: 700; }
.bk .bk-cancelled-stamp { position: absolute; inset-inline-end: 24px; top: 70px; transform: rotate(-14deg); border: 4px solid var(--danger, #B3261E); color: var(--danger, #B3261E); border-radius: 10px; padding: 4px 18px; font-size: 1.6rem; font-weight: 900; letter-spacing: .05em; opacity: .55; pointer-events: none; }
[dir="ltr"] .bk .bk-cancelled-stamp { transform: rotate(14deg); }
.bk .bk-doc.is-cancelled .bk-voucher-grid, .bk .bk-doc.is-cancelled .bk-doc-table { opacity: .8; }
.bk .pricelist tr.payable-now td { border-top: 2px solid var(--brand, #0C1C3D); }
.bk .pricelist tr.deposit td { color: var(--muted, #5F6880); }
.bk .bk-home-btn { order: -1; }
@media print { .bk .bk-cancelled-stamp { opacity: .7; } }

/* r2 PRICING · step 6 services with icons (A61) + the before-VAT live note (W19) */
.bk .bk-service { align-items: flex-start; }
.bk .bk-service-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint, #EEF2F9); border: 1px solid #C4D2EA; display: inline-flex; align-items: center; justify-content: center; margin-inline-end: 12px; }
.bk .bk-service-icon img { width: 24px; height: 24px; object-fit: contain; }
.bk .bk-service .choice-title { align-items: flex-start; }
.bk .bk-service-name { min-width: 0; overflow-wrap: anywhere; }
.bk .bk-service-price { white-space: nowrap; }
.bk .bk-service-unit { color: var(--muted, #5F6880); font-size: .8rem; font-weight: 400; }
.bk .bk-live-note { margin: 8px 2px 0; font-size: .82rem; color: var(--muted, #5F6880); }
.bk .pricelist tr.net td { font-weight: 700; border-top: 1px solid var(--line-strong, #C9D1DD); }
.bk .pricelist tr.tax td { color: var(--ink-soft, #33415C); }
.bk .pricelist-note { margin: 6px 2px 0; font-size: .8rem; color: var(--muted, #5F6880); }
.bk-doc .bk-voucher-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--brand-tint, #EEF2F9); }
.bk-doc .bk-voucher-amounts .cell { display: flex; flex-direction: column; gap: 2px; }
.bk-doc .bk-voucher-amounts .k { font-size: .8rem; color: var(--muted, #5F6880); }
.bk-doc .bk-voucher-amounts .v { font-weight: 700; }
.bk-doc .bk-voucher-amounts .cell.total .v { color: var(--brand, #0C1C3D); font-size: 1.05rem; }


/* ==========================================================================
   r2 WIZARD · W15 pinned car, blocked days · W17 guarantee gate · W18 upload
   slots · W21 map picker · W22 tracking code · W23 proforma · W39 pay at location
   ========================================================================== */
.bk .bk-pinned-car { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 16px; }
.bk .bk-pinned-thumb { flex: 0 0 96px; width: 96px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--bg-alt, #F4F6F9); }
.bk .bk-pinned-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bk .bk-pinned-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bk .bk-pinned-body strong { font-size: 1.05rem; }
.bk .bk-pinned-price .price { font-weight: 800; }
.bk .bk-pinned-price .per { color: var(--muted, #5F6880); font-size: .85rem; margin-inline-start: 4px; }
.bk .jdp-day.booked, .jdp-floating .jdp-day.booked { background: #EEF0F4; color: #B7C0CE; text-decoration: line-through; cursor: not-allowed; }
.bk .bk-booked-legend { display: flex; align-items: center; gap: 8px; }
.bk .bk-booked-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #EEF0F4; border: 1px solid #C9D1DD; }
.bk .bk-choice-error { margin-top: 8px; }
.bk .bk-shahkar-note { color: var(--brand, #0C1C3D); }

/* documents: the shared upload slot */
.bk .bk-doc-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-slot { position: relative; display: grid; gap: 8px; }
.doc-slot h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem; margin: 0; }
.doc-slot .doc-preview { min-height: 150px; border: 1px dashed var(--line-strong, #C9D1DD); border-radius: var(--radius-sm, 10px); display: flex; align-items: center; justify-content: center; color: var(--muted, #5F6880); overflow: hidden; background: var(--bg-alt, #F4F6F9); }
.doc-slot .doc-preview.has-file { border-style: solid; padding: 0; }
.doc-slot .doc-preview a { display: block; width: 100%; height: 100%; }
.doc-slot .doc-preview img { width: 100%; height: 150px; object-fit: cover; display: block; }
.doc-slot .doc-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; color: var(--brand, #0C1C3D); font-weight: 700; }
.doc-slot .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-slot .doc-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.doc-slot .doc-pick { cursor: pointer; margin: 0; }
.doc-slot .doc-progress { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; accent-color: var(--brand, #0C1C3D); }
.doc-slot .doc-error { color: var(--danger, #B3261E); font-weight: 600; }
.doc-slot.is-busy .doc-preview { opacity: .6; }
.doc-slot.is-busy .doc-actions .btn { pointer-events: none; opacity: .6; }
.doc-slot .doc-name { min-height: 1.2em; }

/* map picker */
.bk .bk-map-block { margin-top: 12px; }
.bk .bk-map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.bk .bk-map-title { font-weight: 700; }
.bk .bk-map { height: 320px; border-radius: var(--radius, 14px); border: 1px solid var(--line-strong, #C9D1DD); overflow: hidden; background: #E9EEF5; z-index: 0; }
.bk .bk-map-block.is-invalid .bk-map { outline: 2px solid var(--danger, #B3261E); }
.bk .bk-map-coords { margin-top: 8px; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.bk .bk-map-coords.has-pin { color: var(--brand, #0C1C3D); font-weight: 700; }
.bk .bk-map-block.is-offline .bk-map::after { content: "—"; display: block; padding: 20px; text-align: center; color: var(--muted, #5F6880); }
.bk .leaflet-container { font: inherit; }
[dir="rtl"] .bk .leaflet-control-container .leaflet-top.leaflet-left { left: auto; right: 0; }
[dir="rtl"] .bk .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control { margin-left: 0; margin-right: 10px; }

/* tracking code */
.bk .bk-tracking { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; margin: 12px 0; border-radius: var(--radius-sm, 10px); background: var(--brand-tint, #EEF2F9); border: 1px solid #C4D2EA; }
.bk .bk-tracking-k { color: var(--muted, #5F6880); }
.bk .bk-tracking-v { font-size: 1.25rem; letter-spacing: .04em; color: var(--brand, #0C1C3D); }
.bk .bk-tracking-hint { flex-basis: 100%; }
.bk .bk-copy { display: inline-flex; align-items: center; gap: 6px; }
.bk .bk-copy.is-copied { border-color: #1E7A46; color: #1E7A46; }

/* proforma as a document */
.bk .bk-proforma-doc .bk-voucher-grid .bk-cell-wide { grid-column: 1 / -1; }
.bk .bk-inline-link { font-size: .82rem; margin-inline-start: 8px; text-decoration: underline; color: var(--brand, #0C1C3D); }
.bk .bk-deposit-box { margin-top: 14px; padding: 12px 14px; border: 1px solid #E4D3B6; background: #FBF6EC; border-radius: var(--radius-sm, 10px); }
.bk .bk-deposit-title { display: block; margin-bottom: 6px; color: #7E5A1D; }
.bk .bk-deposit-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: .92rem; }

/* pay at location */
.bk .bk-location-note { margin-top: 12px; }

@media (max-width: 900px) { .bk .bk-doc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .bk .bk-doc-grid { grid-template-columns: 1fr; }
    .bk .bk-pinned-car { flex-wrap: wrap; }
    .bk .bk-pinned-car .btn { flex-basis: 100%; }
    .bk .bk-map { height: 260px; }
    .bk .bk-tracking-v { font-size: 1.1rem; }
}

/* r2 · W25 — «رزروهای من»: the pay strip under an approved, unpaid reservation */
.acct .bk-item.has-pay .bk-card { border-end-start-radius: 0; border-end-end-radius: 0; margin-bottom: 0; }
.acct .bk-pay-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border: 1px solid #C4D2EA; border-top: 0; border-radius: 0 0 var(--radius, 14px) var(--radius, 14px); background: var(--brand-tint, #EEF2F9); }
.acct .bk-pay-strip .btn { min-width: 140px; }
.acct .bk-pay-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct .bk-pay-row { display: block; margin-top: 6px; }

/* discount codes v2 · the «کد عضویت / کد تخفیف شخصی» box on the deposit step */
.bk .bk-mcode { margin-top: 18px; padding: 16px; border: 1px solid var(--line-strong, #D9DEE8); border-radius: var(--radius, 14px); background: var(--bg-alt, #F7F8FB); }
.bk .bk-mcode-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bk .bk-mcode-head svg { flex: none; color: var(--gold-ink, #7E5A1D); }
.bk .bk-mcode-head h2 { margin: 0; font-size: 1rem; }
.bk .bk-mcode-hint { margin: 0 0 12px; font-size: .88rem; color: var(--muted, #5F6880); line-height: 1.8; }
.bk .bk-mcode .bk-inline-form .field { flex: 1 1 220px; margin: 0; }
.bk .bk-mcode input { text-transform: uppercase; letter-spacing: .06em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.bk .bk-mcode input::placeholder { text-transform: none; letter-spacing: 0; font-family: inherit; }
.bk .bk-mcode-msg { margin: 10px 0 0; font-size: .9rem; line-height: 1.8; }
.bk .bk-mcode-msg.is-ok { color: var(--ok, #1F7A4D); font-weight: 600; }
.bk .bk-mcode-msg.is-err { color: var(--danger, #B3261E); font-weight: 600; }
.bk .bk-mcode-msg.is-busy { color: var(--muted, #5F6880); }
.bk .bk-mcode-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm, 10px); background: var(--ok-tint, #E7F4EC); border: 1px solid #B6DCC8; color: var(--ok, #1F7A4D); font-size: .92rem; }
.bk .bk-mcode-applied code { font-weight: 700; letter-spacing: .06em; direction: ltr; unicode-bidi: isolate; }
.bk .bk-mcode-applied .link-btn { background: none; border: 0; padding: 0; color: var(--danger, #B3261E); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; }
.bk .bk-mcode-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: .88rem; color: var(--muted, #5F6880); }
.bk .bk-mcode-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--gold, #C9A24D); background: var(--gold-tint, #F7F0E1); color: var(--gold-ink, #7E5A1D); font: inherit; font-weight: 700; cursor: pointer; min-height: 34px; transition: background .15s ease, color .15s ease; }
.bk .bk-mcode-chip code { direction: ltr; unicode-bidi: isolate; letter-spacing: .06em; }
.bk .bk-mcode-chip:hover, .bk .bk-mcode-chip:focus-visible { background: var(--gold, #C9A24D); color: #fff; outline: none; }
.bk .bk-mcode-chip:focus-visible { box-shadow: 0 0 0 3px var(--gold-tint, #F7F0E1); }
.bk .pricelist .bk-discount-src { display: block; font-size: .82rem; font-weight: 400; }
@media (max-width: 640px) {
    .bk .bk-mcode .bk-inline-form .btn { flex-basis: 100%; }
}

/* ---------- r3 PROFILE · W16: the guarantee cheque is a fixed block, not a choice ---------- */
.bk .bk-cheque-fixed { border: 1px solid var(--line, #E3E7F0); border-inline-start: 4px solid var(--gold, #C9A24B); border-radius: 14px; background: var(--surface-2, #F7F8FB); padding: 16px 18px; margin: 0 0 20px; }
.bk .bk-cheque-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.bk .bk-cheque-head h2 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; min-width: 0; }
.bk .bk-cheque-ico { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: #fff; color: var(--navy, #14224A); border: 1px solid var(--line, #E3E7F0); flex: 0 0 auto; }
.bk .bk-cheque-desc { margin: 0 0 12px; color: var(--muted, #5F6880); font-size: .92rem; line-height: 1.9; }
.bk .bk-cheque-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--line, #E3E7F0); }
.bk .bk-cheque-amount span { color: var(--muted, #5F6880); font-size: .9rem; }
.bk .bk-cheque-amount strong { font-size: 1.05rem; }
.bk .bk-cash-title { margin: 0 0 6px; font-size: 1.05rem; }
.bk .bk-tier-rent { display: block; margin-top: 2px; font-weight: 600; color: var(--navy, #14224A); }
.bk .bk-tax-exempt { font-size: .88rem; }

/* ---------- r3 PROFILE · W17: the terms modal (read to the end, then accept) ---------- */
.bk-terms-modal .bk-terms-body { overflow-y: auto; max-height: min(60vh, 560px); line-height: 2; outline: none; }
.bk-terms-modal .bk-terms-body:focus-visible { box-shadow: inset 0 0 0 2px var(--gold, #C9A24B); }
.bk-terms-foot { display: flex; flex-direction: column; gap: 10px; }
.bk-terms-progress { margin: 0; }
.bk-terms-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bk-terms-actions .btn { flex: 1 1 200px; }
.bk .terms-check a { text-decoration: underline; }

/* ---------- r3 PROFILE · W22: renter details must equal the profile ---------- */
.bk .bk-renter-mismatch ul { margin: 6px 0 12px; padding-inline-start: 20px; }
.bk .bk-renter-mismatch li { margin: 2px 0; }
.bk .bk-renter-mismatch .btn { margin-top: 2px; }
.bk input.is-invalid { border-color: var(--danger, #B42318); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.bk .field-error { color: var(--danger, #B42318); font-size: .85rem; font-weight: 600; margin: 6px 0 0; }
.bk .bk-shahkar-ok { color: #1B7F4B; font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
.bk select.is-invalid { border-color: var(--danger, #B42318); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

/* ==========================================================================
   Client feedback r4 · W10 — the kilometre packages as the application draws
   them: the label and the rate on one line, the rule under it, a «− value +»
   stepper that moves in tens, and the computed charge below. Logical
   properties throughout, so fa/ar (RTL) and en (LTR) read the same.
   ========================================================================== */
.km-card {
  border: 1px solid var(--line, #E3E8EF);
  border-radius: var(--radius, 14px);
  background: var(--bg-alt, #F7F9FC);
  padding: 14px 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.km-card.is-on { border-color: var(--brand, #0C1C3D); background: #fff; }
.km-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.km-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink, #14213D); min-width: 0; }
.km-title svg { flex: none; color: var(--brand, #0C1C3D); }
.km-rate { font-size: .86rem; color: var(--muted, #5B6B84); white-space: nowrap; }
.km-hint { margin: 0; font-size: .86rem; line-height: 1.8; color: var(--muted, #5B6B84); }

.km-row { display: flex; align-items: center; gap: 10px; }
.km-btn {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-strong, #C9D2E0); background: #fff; color: var(--brand, #0C1C3D);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.km-btn:hover:not(:disabled) { background: var(--brand, #0C1C3D); border-color: var(--brand, #0C1C3D); color: #fff; }
.km-btn:disabled { opacity: .4; cursor: not-allowed; }
.km-field { flex: 1 1 auto; position: relative; display: flex; align-items: center; min-width: 0; }
.km-field .km-input {
  width: 100%; text-align: center !important; font-weight: 700; font-size: 1.05rem;
  padding-inline: 46px 46px !important; direction: ltr;
  font-variant-numeric: tabular-nums;
}
/* r5 · W2 — the figure is set with the two buttons, never typed. It must not
   look disabled (it is a live value) but it must not invite a text cursor. */
.km-field .km-input.is-stepped {
  cursor: default;
  caret-color: transparent;
  user-select: none;
}
.km-field .km-input.is-stepped:focus-visible {
  outline: 2px solid var(--gold, #BA8E4A);
  outline-offset: 2px;
}

.km-unit {
  position: absolute; inset-inline-end: 12px; pointer-events: none;
  font-size: .82rem; color: var(--muted, #5B6B84);
}
.km-step-note { margin: 0; font-size: .78rem; color: var(--muted, #5B6B84); }
.km-charge { margin: 0; font-size: .88rem; font-weight: 600; color: var(--gold-ink, #7E5A1D); }
.km-card:not(.is-on) .km-charge { color: var(--muted, #5B6B84); font-weight: 500; }

/* the stepper is the widest thing in the card on a phone: the buttons keep
   their tap target and the field takes what is left */
@media (max-width: 420px) {
  .km-btn { width: 40px; height: 40px; }
  .km-field .km-input { padding-inline: 34px 34px !important; font-size: 1rem; }
  .km-unit { inset-inline-end: 8px; font-size: .74rem; }
}

/* ==========================================================================
   Client feedback r4 · W6 — every required document in one view. A checklist
   names the whole set before the slots, and the slots themselves sit on an
   even 2×2 grid (there are four of them) with equal heights, so the last one
   no longer dangles on a row of its own.
   ========================================================================== */
.bk .doc-checklist {
  border: 1px solid var(--line, #E3E8EF);
  border-radius: var(--radius, 14px);
  background: var(--bg-alt, #F7F9FC);
  padding: 12px 16px;
  margin: 0 0 16px;
}
.bk .doc-checklist-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px; font-weight: 700; color: var(--ink, #14213D);
}
.bk .doc-checklist-head strong { font-weight: 600; font-size: .86rem; color: var(--muted, #5B6B84); }
.bk .doc-checklist-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px;
}
.bk .doc-checklist-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; }
.bk .doc-checklist-list li > a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bk .doc-checklist-list li > a:hover { text-decoration: underline; }
.bk .doc-check-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong, #C9D1DD); background: #fff; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.bk .doc-checklist-list li.is-done .doc-check-mark {
  border-color: var(--success, #1B7F4B); background: var(--success, #1B7F4B); color: #fff;
}
.bk .doc-check-state { margin-inline-start: auto; font-size: .78rem; color: var(--muted, #5B6B84); white-space: nowrap; }
.bk .doc-checklist-list li.is-done .doc-check-state { color: var(--success, #1B7F4B); font-weight: 600; }

/* four slots read best as two even rows of two; equal heights, so the buttons
   of two neighbouring cards line up */
@media (min-width: 901px) {
  .bk .bk-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .bk .bk-doc-grid > .doc-slot { align-content: start; height: 100%; }
}
@media (max-width: 560px) {
  .bk .doc-checklist-list { grid-template-columns: minmax(0, 1fr); }
}

/* r5 · W8 — the composition of the two totals in the change summary.
   Three columns (line, before, after); the rows that actually moved carry a
   dot so the eye finds them without reading every figure.
   r9 · W5 — closed by default behind a <details> toggle, and the columns fixed:
   every header and figure on the same (start) edge, the number one left-to-right
   run so the ones digits line up down the column, the dot after the figure so it
   never pushes the number. */
.rules-breakdown,
.rules-amounts.rules-breakdown { margin-top: 18px; padding: 0; overflow: hidden; }

.rules-breakdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radius-sm, 10px);
}
.rules-breakdown-toggle::-webkit-details-marker { display: none; }
.rules-breakdown-toggle::marker { content: ''; }
.rules-breakdown-toggle .rules-amounts-head { margin: 0; }
.rules-breakdown-toggle:hover .rules-breakdown-action { text-decoration: underline; text-underline-offset: 3px; }
.rules-breakdown-toggle:focus-visible { outline: 2px solid var(--brand-gold, #BA8E4A); outline-offset: 2px; }

.rules-breakdown-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: .86rem;
  font-weight: 600;
  color: var(--brand, #0C1C3D);
}
.rules-breakdown-chevron { transition: transform .2s ease; }
.rules-breakdown[open] .rules-breakdown-chevron { transform: rotate(180deg); }
.rules-breakdown .rules-breakdown-hide,
.rules-breakdown[open] .rules-breakdown-show { display: none; }
.rules-breakdown[open] .rules-breakdown-hide { display: inline; }
.rules-breakdown[open] .rules-breakdown-toggle { border-end-start-radius: 0; border-end-end-radius: 0; }

.rules-breakdown-body { padding: 0 14px 10px; }
.rules-breakdown[open] .rules-breakdown-body { animation: rules-breakdown-in .2s ease-out; }
@keyframes rules-breakdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.rules-breakdown-table { table-layout: fixed; width: 100%; background: #fff; border-radius: 8px; }
.rules-breakdown-c-line { width: 38%; }
.rules-breakdown-c-old, .rules-breakdown-c-new { width: 31%; }

.rules-breakdown .rules-breakdown-table th {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted, #5B6B84);
  text-align: start;
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--line, #D9DEE8);
  white-space: normal;
  vertical-align: bottom;
}

.rules-breakdown .rules-breakdown-table td { padding: 10px 8px; vertical-align: middle; }
.rules-breakdown .rules-breakdown-table td:not(:first-child),
.rules-breakdown .rules-breakdown-table th:not(:first-child) { text-align: start; white-space: normal; font-variant-numeric: tabular-nums; }
.rules-breakdown .rules-breakdown-table td:not(:first-child) { color: var(--ink, #0C1C3D); }
.rules-breakdown .rules-breakdown-table td:nth-child(2) { color: var(--ink-soft, #33465C); }
.rules-diff-table .rules-num { white-space: nowrap; unicode-bidi: isolate; }
/* the page's HTML minifier drops the space between the number and its currency */
.rules-diff-table .rules-num + .rules-unit { margin-inline-start: .3em; }
.rules-breakdown-table .rules-unit { font-size: .85em; color: var(--muted, #5F6880); white-space: nowrap; }

.rules-breakdown-table tr.is-changed td { background: rgba(186, 142, 74, .07); font-weight: 600; }
.rules-breakdown-table tr.is-changed td:first-child { box-shadow: inset -3px 0 0 var(--brand-gold, #BA8E4A); }
[dir="ltr"] .rules-breakdown-table tr.is-changed td:first-child { box-shadow: inset 3px 0 0 var(--brand-gold, #BA8E4A); }
.rules-breakdown-table tr.total td { font-weight: 700; border-top: 1px solid var(--line-strong, #C9D1DD); }
.rules-breakdown-table tr.discount td:not(:first-child) { color: var(--ok, #14603F); }

.rules-breakdown-flag {
  margin-inline-start: 6px;
  color: var(--gold, #BA8E4A);
  font-size: .7em;
  vertical-align: middle;
}
.rules-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .rules-breakdown-toggle { padding: 12px; flex-wrap: wrap; row-gap: 4px; }
  .rules-breakdown-body { padding: 0 8px 8px; }
  .rules-breakdown-c-line { width: 34%; }
  .rules-breakdown-c-old, .rules-breakdown-c-new { width: 33%; }
  .rules-breakdown .rules-breakdown-table th, .rules-breakdown .rules-breakdown-table td { padding-inline: 4px; font-size: .84rem; }
  .rules-breakdown-table .rules-unit, .rules-breakdown-table .rules-num + .rules-unit { display: block; margin-inline-start: 0; font-size: .78em; }
  /* the row's tint and gold edge already mark it; the dot would take a line of its own here */
  .rules-breakdown-flag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rules-breakdown-chevron { transition: none; }
  .rules-breakdown[open] .rules-breakdown-body { animation: none; }
}

/* r6 · W4 — «My location» feedback under the map hint */
.bk .bk-map-locate-msg { margin: -2px 0 8px; font-weight: 600; }
.bk .bk-map-locate-msg.is-error { color: var(--danger, #B3261E); }

/* r6 · W2 — the billed days under the live amount's label */
.bk .bk-live-days { display: block; margin-top: 2px; font-size: .82rem; font-weight: 700; color: var(--brand, #0C1C3D); }

/* r8 · PRICEUI (C5) — the confirmation after payment, like the app: car, number, amount paid, four actions */
.bk .bk-success { display: grid; gap: 16px; padding: 18px; }
.bk .bk-success-car { display: flex; align-items: center; gap: 14px; }
.bk .bk-success-thumb { flex: 0 0 auto; width: 132px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--brand-tint, #EEF2F9); }
.bk .bk-success-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk .bk-success-meta { display: grid; gap: 4px; min-width: 0; }
.bk .bk-success-name { font-size: 1.05rem; }
.bk .bk-success-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bk .bk-success-figures > div { padding: 12px 14px; border-radius: var(--radius-sm, 10px); background: var(--brand-tint, #EEF2F9); border: 1px solid #C4D2EA; }
.bk .bk-success-figures dt { color: var(--muted, #5F6880); font-size: .85rem; margin-bottom: 4px; }
.bk .bk-success-figures dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.1rem; }
.bk .bk-success-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk .bk-success-actions .btn { justify-content: center; text-align: center; }
.bk .bk-amounts-toman { margin: 0 0 8px; }
.bk .bk-proforma-note { margin: 10px 0; }
@media (max-width: 560px) {
    .bk .bk-success-figures, .bk .bk-success-actions { grid-template-columns: 1fr; }
    .bk .bk-success-thumb { width: 104px; }
}
/* r8 · PRICEUI (R1) — the pinned car's live rental on the dates step */
.bk .bk-pinned-rental { display: block; font-weight: 600; color: var(--brand, #0C1C3D); margin-top: 2px; }
.bk .bk-pinned-band, .bk .bk-pinned-rule { display: block; line-height: 1.6; }
.bk .bk-pinned-price .price-was { margin-inline-start: 8px; }
.darya-book .book-rental { margin: 4px 0 10px; font-weight: 600; color: var(--brand, #0C1C3D); }
.tier-note.tier-rule { color: var(--brand, #0C1C3D); }

/* ------------------------------------------------------------------------
   r8 · HOURS (R6/R7) — the places on the dates step, drawn as the app draws
   them: one card, one radio row per answer (title, one line of explanation,
   the price at the end — green «رایگان», gold for a fee), and only the chosen
   answer opens its panel (branch list / map + address).
   ------------------------------------------------------------------------ */
.bk .bk-place-title { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin: 26px 0 10px; color: var(--ink, #0E1726); }
.bk .bk-place-title:first-of-type { margin-top: 6px; }
.bk .bk-place-title svg { color: var(--brand, #0C1C3D); flex: none; }
.bk .bk-radios { border: 1px solid var(--line-strong, #C9D1DD); border-radius: var(--radius, 14px); background: var(--surface, #fff); padding: 4px 14px; margin-top: 12px; }
.bk .bk-radio { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; cursor: pointer; min-height: 44px; }
.bk .bk-radio + .bk-radio, .bk .bk-radio-panel + .bk-radio, .bk .bk-radio + .bk-radio-panel[hidden] + .bk-radio { border-top: 1px solid var(--line, #E2E7F0); }
.bk .bk-radio input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand, #0C1C3D); flex: none; }
.bk .bk-radio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk .bk-radio-title { font-weight: 700; font-size: .96rem; }
.bk .bk-radio input:not(:checked) ~ .bk-radio-body .bk-radio-title { font-weight: 600; }
.bk .bk-radio-desc { color: var(--muted, #5F6880); font-size: .86rem; line-height: 1.6; overflow-wrap: anywhere; }
.bk .bk-radio-fee { flex: none; max-width: 42%; text-align: end; font-weight: 700; font-size: .9rem; color: var(--gold-ink, #7E5A1D); white-space: nowrap; }
.bk .bk-radio-fee.is-free { color: var(--ok, #14603F); }
.bk .bk-radio-fee:empty { display: none; }
.bk .bk-radio.is-disabled { opacity: .55; cursor: not-allowed; }
.bk .bk-radio-panel { background: var(--bg-alt, #F5F7FB); border-radius: 12px; padding: 12px 14px 14px; margin: 0 0 12px; }
.bk .bk-radio-panel > .field:first-child, .bk .bk-radio-panel > .notice:first-child { margin-top: 0; }
.bk .bk-radio-panel .notice { margin: 0 0 10px; }
.bk .bk-radio-panel .bk-map-block { margin-top: 4px; }
.bk .bk-hours-hint { margin-top: 6px; }
@media (max-width: 560px) {
    .bk .bk-radios { padding: 2px 12px; }
    .bk .bk-radio-fee { max-width: 38%; font-size: .85rem; }
}
/* r8 · C5 — the two downloads first, then home and my reservations (whatever order the shared button styles imply) */
.bk .bk-success-actions [data-bk-doc="invoice"] { order: 1; }
.bk .bk-success-actions [data-bk-doc="voucher"] { order: 2; }
.bk .bk-success-actions .bk-home-btn { order: 3; }
.bk .bk-success-actions a:last-child { order: 4; }