/* Booking status badges + summary rows + show page (customer + admin) */

.booking-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.booking-status-blue   { background: #dbeafe; color: #1e40af; }
.booking-status-cyan   { background: #cffafe; color: #155e75; }
.booking-status-purple { background: #ede9fe; color: #5b21b6; }
.booking-status-yellow { background: #fef3c7; color: #92400e; }
.booking-status-green  { background: #d1fae5; color: #065f46; }
.booking-status-red    { background: #fee2e2; color: #991b1b; }
.booking-status-gray   { background: #e5e7eb; color: #374151; }

.booking-summary-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 0.9fr 1.6fr 0.9fr 0.9fr 180px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    background: #fff;
}

.booking-summary-dos { align-self: stretch; }
.booking-summary-dos .booking-summary-label { margin-bottom: 6px; }
.booking-summary-dos .dos-cell { font-size: 12px; }

.booking-summary-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

.booking-summary-col { min-width: 0; }
.booking-summary-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.booking-summary-value {
    font-size: 14px;
    color: #1a1a2e;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.booking-summary-id .booking-summary-value { color: var(--bg-main,#061D5B); font-family: monospace; }

.booking-summary-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.booking-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.booking-action-view {
    background: #f0f0f0;
    color: var(--bg-main,#061D5B);
}
.booking-action-view:hover { background: #e5e5e5; }
.booking-action-edit {
    background: var(--bg-main,#061D5B);
    color: #fff;
}
.booking-action-edit:hover { opacity: 0.92; }
.booking-action-confirm {
    background: #065f46;
    color: #fff;
}
.booking-action-confirm:hover { opacity: 0.92; }
.booking-action-assign {
    background: #5b21b6;
    color: #fff;
}
.booking-action-assign:hover { opacity: 0.92; }
.booking-action-delete {
    background: #b91c1c;
    color: #fff;
    border: none;
    cursor: pointer;
    font: inherit;
}
.booking-action-delete:hover { opacity: 0.92; }
/* Inline-form wrapper so the Delete button sits next to the View / Assign
   anchors without breaking onto a new line. The form is a layout shell
   for the CSRF + DELETE method spoof — no other styling needed. */
.planned-moves-delete-form { display: inline; }

.booking-show-wrap {
    max-width: 1400px;
    margin: 30px auto 60px;
}
.booking-show-page,
.booking-assign-page {
    color: #1f2937;
}
.booking-show-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.booking-show-topbar h1 {
    margin: 6px 0 4px;
    font-size: 24px;
    color: var(--bg-main,#061D5B);
}
.booking-show-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}
.booking-show-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.booking-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.booking-back-link:hover {
    color: var(--bg-main,#061D5B);
}
.booking-show-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    align-items: start;
}
.booking-show-main { min-width: 0; }
.booking-show-side { min-width: 0; }
.booking-summary-card { margin-bottom: 22px; }

.detail-sub {
    display: block;
    color: #9ca3af;
    font-size: 12px;
    margin-top: 2px;
}
.booking-history-by {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}
.booking-history-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.booking-history-stage {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.assignment-row {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.assignment-row:last-child { border-bottom: 0; }
.assignment-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}
.assignment-primary-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 10px;
    vertical-align: middle;
}
.assignment-truck {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.assignment-by {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.admin-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 1024px) {
    .booking-show-grid { grid-template-columns: 1fr; }
    .admin-form-row { grid-template-columns: 1fr; }
}

.booking-show-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.booking-show-header h1 {
    margin: 0 0 6px 0;
    font-size: 24px;
    color: var(--bg-main,#061D5B);
}
.booking-show-header p { margin: 0; color: #666; font-size: 13px; }
.booking-show-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.booking-show-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.booking-show-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

/* Two-column row pairing Status History with the Payment card on desktop.
   The cards already carry their own .booking-show-card margin-bottom, which
   the grid gap supersedes — so we zero the inner margin inside the row.
   When only one card is present, it spans both columns. */
.booking-show-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.booking-show-row > .booking-show-card {
    margin-bottom: 0;
    /* Defensive: grid items inherit `width: auto`, which on phones lets a
       card with narrow intrinsic content (a short Payment heading + a
       single Due-now row) shrink-to-fit instead of filling its 1fr column.
       Force every direct child of the row to span the full grid track,
       and reset min-width so long children (URLs, addresses) shrink
       rather than blow the track open. */
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}
@media (min-width: 992px) {
    .booking-show-row {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .booking-show-row > .booking-show-card:only-child {
        grid-column: 1 / -1;
    }
    /* Equal-height pair: both cards stretch to the taller column. The history
       card lets its inner list scroll vertically so the row's height is
       driven by the Payment card (typically the taller one), not by an
       arbitrarily long status timeline. */
    .booking-show-row > .booking-show-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .booking-show-row .booking-history-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 6px;
    }
}
.booking-show-card h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Payment-card mobile/desktop swap.
   On phones the Payment card is rendered first (above Row 1) so the
   customer's bill is the first thing they see. The same content is also
   rendered in Row 2 next to the Slots card for the desktop layout; CSS
   below hides whichever copy doesn't belong at the current breakpoint. */
@media (min-width: 992px) {
    .booking-show-payment-mobile { display: none; }
}
@media (max-width: 991.98px) {
    .booking-show-payment-desktop { display: none; }
}

.booking-history-list {
    list-style: none;
    padding: 0 10px 0 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c7d2fe transparent;
}
.booking-history-list::-webkit-scrollbar {
    width: 6px;
}
.booking-history-list::-webkit-scrollbar-track {
    background: transparent;
}
.booking-history-list::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 999px;
}
.booking-history-list::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}
.booking-history-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.booking-history-item:last-child { border-bottom: 0; }
.booking-history-time {
    color: #888;
    min-width: 130px;
    font-size: 12px;
}

.booking-empty {
    padding: 30px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.booking-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.booking-alert-success { background: #d1fae5; color: #065f46; }
.booking-alert-error   { background: #fee2e2; color: #991b1b; }

/* Payment hand-off on the customer show page */
.payment-prompt {
    margin: 0 0 12px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}
.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.payment-option {
    cursor: pointer;
    user-select: none;
}
.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-option-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.payment-option:hover .payment-option-body {
    border-color: #c7d2fe;
    background: #eef2ff;
}
.payment-option input[type="radio"]:checked + .payment-option-body {
    border-color: var(--bg-main,#061D5B);
    background: var(--bg-main,#061D5B);
    color: #ffffff;
}
.payment-option-body i {
    font-size: 18px;
}
.payment-error {
    color: #b91c1c;
    font-size: 13px;
    margin: 10px 0 0;
}
.payment-recorded {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #d1fae5;
    border-radius: 10px;
    color: #065f46;
}
.payment-recorded i {
    font-size: 22px;
}
.payment-recorded-label {
    font-size: 15px;
    font-weight: 700;
}
.payment-recorded-time {
    font-size: 12px;
    opacity: 0.85;
}

/* ========================================================================
   RESPONSIVE — Booking pages
   ======================================================================== */

@media (max-width: 1024px) {
    /* Flatten the two-column grid into a flex column so we can re-order
       cards across both columns. The wrapping <div>s lose their boxes
       (display: contents) so all cards become direct children of the
       grid container — letting the live-tracking map (.detail-card,
       always the first thing the customer should see while a mover is
       en route) jump above the cards from the left column. */
    .booking-show-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    .booking-show-grid > div {
        display: contents;
    }
    .booking-show-grid .detail-card {
        order: -1;
    }
    .booking-show-grid .booking-show-card {
        order: 0;
    }
    .booking-show-wrap { margin: 20px auto 40px; padding: 0 16px; }
    .admin-form-row { grid-template-columns: 1fr; }
}

/* Belt-and-suspenders for the booking detail page on mobile: clip any
   stray wide child (the live-tracking map iframe, long URLs in the
   payments rows, etc.) so the customer can't scroll the page sideways.
   Children that legitimately need horizontal scroll already declare it
   on themselves (e.g. .estimate-cost on small screens). */
.booking-show-wrap,
.booking-show-card,
.booking-show-main,
.booking-show-side,
.booking-show-grid {
    max-width: 100%;
    box-sizing: border-box;
}

/* The grid's direct children are unclassed <div>s in the blade, so they
   inherit the default `min-width: auto` and refuse to shrink below
   their content's intrinsic width — which is exactly what was letting
   long addresses, the embedded live map, or unwrapping payment rows
   push the grid track (and the whole page) wider than the viewport.
   Forcing the children to a 0 min-width lets them honour the parent's
   `1fr` track and stops the sideways scroll. */
.booking-show-grid > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .booking-show-wrap {
        overflow-x: clip;          /* modern browsers */
        overflow-x: hidden;        /* fallback */
        max-width: 100vw;
    }
    .booking-show-card,
    .booking-show-grid > *,
    .booking-show-grid > * > * {
        max-width: 100%;
        min-width: 0;
    }
    /* Long, unbreakable strings (addresses, URLs, file names) wrap
       instead of pushing the card wider than the viewport. */
    .booking-show-card,
    .booking-show-card p,
    .booking-show-card td,
    .booking-show-card li,
    .booking-show-card a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Documents / status-history tables that still set their own widths
       fall back to a horizontally-scrollable wrapper inside the card. */
    .booking-show-card table {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .booking-summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 14px;
    }
    .booking-summary-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    /* Booking show page */
    .booking-show-topbar { flex-direction: column; }
    .booking-show-topbar-right { width: 100%; }
    .booking-show-header { flex-direction: column; }
    .booking-show-actions { width: 100%; }
    .booking-show-actions .booking-action-btn { flex: 1; justify-content: center; }
    .booking-show-card { padding: 14px; }

    /* History table on phones: collapsed to one card per row by the
       custom.css rule with data-th-driven labels. The earlier
       horizontal-scroll fallback was pushing the new Date of Service
       column off-screen, so the override has been removed. */

    /* Payment options */
    .payment-options { grid-template-columns: 1fr; }

    /* Confirm modal — full-bleed on mobile (no side gap). The dialog is a
       flex column at the visual viewport height, so head + actions stay
       flex:0 0 auto at the top/bottom and the body (flex:1) scrolls between
       them. The actions row sits at the natural bottom of the dialog in
       normal flow — NOT position:fixed to the viewport — so it can never
       float over the form's last field. -webkit-fill-available / 100dvh
       fallbacks keep the bottom row above the iOS browser chrome. */
    .confirm-modal-dialog {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 100vh;
        max-height: 100vh;
        height: -webkit-fill-available;
        max-height: -webkit-fill-available;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .confirm-modal-head { padding: 14px 16px; }
    .confirm-modal-body {
        padding: 16px;
    }
    .confirm-modal-actions {
        flex-direction: column;
        /* iOS: lift the action buttons clear of Safari's bottom toolbar /
           home indicator. The dialog is sized with 100dvh (visible viewport)
           so the footer sits at the visible bottom, but a non-zero bottom
           padding is still needed because env(safe-area-inset-bottom) is 0 on
           many Safari states — without it the Submit button hugs (and gets
           clipped by) the bottom bar. The 22px base + safe-area inset keeps it
           comfortably above the chrome. */
        padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 18px));
        background: #fafbfd;
        border-top: 1px solid #eef0f4;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    }
    .confirm-modal-actions .booking-action-btn { width: 100%; justify-content: center; }
    .confirm-modal-combined .confirm-modal-dialog { max-width: 100%; }

    /* Confirm slots grid — switch to a 2-column CSS grid on phones so
       every slot button gets the same width regardless of label length,
       and bump the padding so they're easier to tap. (Was flex-basis
       calc(50% - 6px) which made the row reflow when the chip
       wrapped.) */
    .confirm-slots {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .confirm-slot-btn {
        width: 100%;
        padding: 18px 12px;        /* taller tap target */
        font-size: 14px;
        text-align: center;
    }

    /* Dashboard profile */
    .dashboard-profile-form { max-width: 100%; }
    .dashboard-profile-save { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .booking-summary-row { grid-template-columns: 1fr; }
    .booking-summary-actions .booking-action-btn { width: 100%; justify-content: center; text-align: center; }
    .booking-summary-label { font-size: 10px; }
    .booking-summary-value { font-size: 13px; }

    /* Phone (≤480px): one slot per row so the times never wrap and
       the tap target spans the full modal width. Tighter modal-body
       padding + spacing too so the customer scrolls less to reach the
       card form. */
    .confirm-slots {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .confirm-slot-btn {
        padding: 16px 14px;
        font-size: 15px;
    }
    .confirm-modal-body { padding: 12px; }
    .confirm-slots-wrap { margin-top: 12px; }

    /* Booking detail cards on phones: every card is forced to 100% width
       with 0 horizontal margin so Slot, Live Tracking, Payment, Assigned
       Team, Documents and every other booking-show-card sit at the same
       edge as the Service Details card up top. The wrapper itself has
       4 px gutter (.dashboard-main / .admin-content) so cards sit close
       to but not flush with the device edge. */
    .booking-show-card {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 12px;
        box-sizing: border-box;
    }
    /* Phone-only safety net: the .booking-show-row grid container itself
       has to be flush with the page so its grid-1fr child column equals
       the wrapper's content width. Without these the row inherits the
       intrinsic-content sizing from a higher ancestor and ends up a few
       pixels narrower than a standalone .booking-show-card sibling,
       which is what the customer was seeing for the Payment + Slots
       row vs Moving Service above it. */
    .booking-show-row {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
    .booking-show-row > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .booking-show-grid { gap: 12px; }
    .booking-tabs-panel,
    .booking-tabs { width: 100%; max-width: 100%; }
}

/* Customer dashboard profile form */
.dashboard-profile-form { max-width: 520px; }
.dashboard-profile-row { margin-bottom: 18px; }
.dashboard-profile-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.dashboard-profile-row input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}
.dashboard-profile-row input:disabled { background: #f5f5f5; color: #999; }
.dashboard-profile-error {
    display: block;
    color: #b91c1c;
    font-size: 12px;
    margin-top: 4px;
}
.dashboard-profile-actions { margin-top: 22px; }
.dashboard-profile-save {
    background: var(--bg-main,#061D5B);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.dashboard-profile-save:hover { opacity: 0.92; }

/* Dashboard quotation history action icons.
   Uses a unique class (.qt-action) to avoid the cascade collision with
   `.action-btn` which is defined in both custom.css and reservation.css. */
.qt-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qt-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.qt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    background: #f3f4f6;
    color: var(--bg-main,#061D5B);
    font-size: 14px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
.qt-action i,
.qt-action i.fas,
.qt-action i.fa-solid {
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.qt-action:hover {
    background: var(--bg-main,#061D5B);
    color: #ffffff;
    border-color: var(--bg-main,#061D5B);
}
.qt-action-confirm {
    background: #065f46;
    color: #ffffff;
    border-color: #065f46;
}
.qt-action-confirm:hover {
    background: #047857;
    border-color: #047857;
}

/* Customer confirm-booking modal.
   The show page only loads booking.css + frontend assets; these rules keep
   the modal self-contained so we don't have to pull in quotation-wizard.css. */
.booking-locked-msg {
    color: #666;
    font-size: 13px;
    margin: 0;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.confirm-modal[hidden] {
    display: none;
}
/* Defensive: a global `header { position: fixed }` rule from styles.css
   would otherwise pin any <header> element inside the modal to the top
   of the viewport. Force everything inside the modal to behave normally. */
.confirm-modal header {
    position: static;
    top: auto;
    width: auto;
    z-index: auto;
    background: transparent;
}
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 29, 91, 0.45);
}
.confirm-modal-dialog {
    position: relative;
    width: calc(100% - 32px);
    max-width: 540px;
    max-height: 86vh;
    margin: 5vh auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.confirm-modal-dialog > .confirm-modal-head,
.confirm-modal-dialog > .confirm-modal-actions {
    flex: 0 0 auto;
}
.confirm-modal-dialog > .confirm-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* B#4 — explicit overflow-x: hidden. Browsers implicitly upgrade
       overflow-x to "auto" when overflow-y is "auto", which let any wide
       child (long address label, slot chip row, etc.) trigger a stray
       horizontal scrollbar inside the modal. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.confirm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: #f8faff;
    border-bottom: 1px solid #e0e6f5;
}
.confirm-modal-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    line-height: 1.2;
}
.confirm-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}
.confirm-modal-close:hover {
    color: var(--bg-main,#061D5B);
}
.confirm-modal-body {
    padding: 20px;
}
.confirm-field label,
.confirm-slots-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}
.confirm-field input[type="date"] {
    width: 100%;
    /* iOS Safari ignores `width: 100%` on <input type="date"> because the
       native control has a fixed intrinsic width derived from placeholder
       glyphs + the calendar icon, which overflows the modal on small
       phones. -webkit-appearance: none drops the native chrome so the
       width settles to the container; min-width: 0 prevents flex parents
       from forcing the intrinsic minimum; max-width: 100% pins it inside
       the modal. */
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    /* Restore the calendar glyph that -webkit-appearance: none strips. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061D5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 36px;
}
/* The default iOS placeholder dimmed-grey indicator is still readable
   with the stripped chrome; restore the calendar-picker click affordance
   on browsers that hide the indicator after appearance:none. */
.confirm-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 36px;
    height: 100%;
    cursor: pointer;
}
.confirm-field {
    position: relative;
}
.confirm-upload-field {
    margin-top: 14px;
}
.confirm-field input[type="file"] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    background: #fff;
}
.confirm-field input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: var(--brand-navy2,#1E3A8A);
    border-radius: 6px;
    padding: 7px 11px;
    font-weight: 600;
    cursor: pointer;
}
.confirm-field input[type="file"]:hover {
    border-color: #b8c2d3;
}
.confirm-field input[type="file"]:focus {
    outline: none;
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.12);
}
.confirm-cash-option {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    margin-top: 14px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
}
.confirm-cash-option input[type="checkbox"] {
    grid-row: 1 / span 2;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--bg-main,#061D5B);
    cursor: pointer;
}
.confirm-cash-option span {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.confirm-cash-option small {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Advance-payment block shown at the bottom of the confirm modal — lists the
   line items the customer is settling now, the running total, a clarifying
   note, and a required Cash / Card radio choice. */
.confirm-advance-block {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
.confirm-advance-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.confirm-advance-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.confirm-advance-total {
    font-size: 20px;
    color: var(--bg-main,#061D5B);
}
.confirm-advance-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    color: #334155;
}
.confirm-advance-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.confirm-advance-list li:last-child {
    border-bottom: 0;
}
.confirm-advance-note {
    margin: 4px 0 12px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.confirm-method-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    gap: 10px;
}
.confirm-method-legend {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    width: 100%;
    padding: 0;
}
.confirm-method-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    transition: border-color 0.15s, background 0.15s;
}
.confirm-method-option:has(input:checked) {
    border-color: var(--bg-main,#061D5B);
    background: #eef2ff;
    color: var(--bg-main,#061D5B);
}
.confirm-method-option input[type="radio"] {
    accent-color: var(--bg-main,#061D5B);
}
.confirm-method-option i {
    color: var(--bg-main,#061D5B);
}

/* Slot preference (Flexible / Fixed) — variant of confirm-method-fieldset.
   Adds wrapping + full-width help paragraph + stacked icon/label cards. */
.confirm-flexibility-fieldset {
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}
.confirm-flexibility-fieldset .confirm-method-legend {
    margin-bottom: 4px;
}
.confirm-flexibility-fieldset > .confirm-advance-note {
    flex-basis: 100%;
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.confirm-flexibility-fieldset .confirm-method-option {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    text-align: center;
    background: #ffffff;
}
.confirm-flexibility-fieldset .confirm-method-option i {
    font-size: 20px;
    margin-bottom: 2px;
}
.confirm-flexibility-fieldset .confirm-method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.confirm-flexibility-fieldset .confirm-method-option:hover {
    border-color: #94a3b8;
}
.confirm-flexibility-fieldset .confirm-method-option:has(input:checked) {
    border-color: var(--bg-main,#061D5B);
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgba(6, 29, 91, 0.12);
}

.confirm-field input[type="date"]:focus {
    outline: none;
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.12);
}

/* B#6 — optional customer comment textarea on the confirm modal. */
.confirm-field-textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}
.confirm-field-textarea:focus {
    outline: none;
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.12);
}

.confirm-field-checkbox {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f5f7ff;
    border: 1px solid #dbe2ff;
    border-radius: 10px;
}
.confirm-field-checkbox label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--bg-main,#061D5B) !important;
    cursor: pointer;
}
.confirm-field-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bg-main,#061D5B);
    cursor: pointer;
    flex-shrink: 0;
}
.confirm-field-help {
    margin: 6px 0 0 28px;
    font-size: 12px;
    color: #6b7280;
}
.confirm-slots-wrap {
    margin-top: 16px;
}
.confirm-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
}
.confirm-slots-empty,
.confirm-slots-none {
    color: #6b7280;
    font-size: 13px;
    margin: 4px 0 0;
}
.confirm-slot-btn {
    padding: 15px 14px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #1f2937;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.confirm-slot-btn-time {
    line-height: 1.2;
}
/* Rule A — "Truck nearby · X km" chip under a follow-on slot. Renders
   as a small accent pill so the customer can spot at a glance which
   slots were sourced from a nearby truck rather than the standard
   interval grid. */
.confirm-slot-btn-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #166534;
    background: #dcfce7;
    border-radius: 999px;
    line-height: 1.4;
}
.confirm-slot-btn-follow-on {
    border-color: #86efac;
}
.confirm-slot-btn-follow-on.selected .confirm-slot-btn-chip {
    color: #f0fdf4;
    background: rgba(255, 255, 255, 0.18);
}
.confirm-slot-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.confirm-slot-btn.selected {
    background: var(--bg-main,#061D5B);
    color: #ffffff;
    border-color: var(--bg-main,#061D5B);
}
.confirm-slot-btn-c0 {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.confirm-slot-btn-c0:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}
.confirm-slot-btn-c0.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.confirm-slot-btn-c1 {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}
.confirm-slot-btn-c1:hover {
    background: #ffedd5;
    border-color: #fb923c;
}
.confirm-slot-btn-c1.selected {
    background: #f97316;
    border-color: #f97316;
    color: #ffffff;
}
.confirm-slot-btn-c2 {
    background: #ecfdf5;
    border-color: #86efac;
    color: #047857;
}
.confirm-slot-btn-c2:hover {
    background: #d1fae5;
    border-color: #4ade80;
}
.confirm-slot-btn-c2.selected {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}
.confirm-slot-btn-c3 {
    background: #faf5ff;
    border-color: #d8b4fe;
    color: #6b21a8;
}
.confirm-slot-btn-c3:hover {
    background: #f3e8ff;
    border-color: #c084fc;
}
.confirm-slot-btn-c3.selected {
    background: #9333ea;
    border-color: #9333ea;
    color: #ffffff;
}
.confirm-slot-btn-c4 {
    background: #fdf2f8;
    border-color: #f9a8d4;
    color: #9d174d;
}
.confirm-slot-btn-c4:hover {
    background: #fce7f3;
    border-color: #f472b6;
}
.confirm-slot-btn-c4.selected {
    background: #db2777;
    border-color: #db2777;
    color: #ffffff;
}
.confirm-slot-btn-c5 {
    background: #f0fdfa;
    border-color: #5eead4;
    color: #115e59;
}
.confirm-slot-btn-c5:hover {
    background: #ccfbf1;
    border-color: #2dd4bf;
}
.confirm-slot-btn-c5.selected {
    background: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
}
.confirm-modal-error {
    color: #b91c1c;
    font-size: 13px;
    margin: 12px 0 0;
}
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #eef0f4;
    background: #fafbfd;
}
.booking-action-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Combined (dual-leg) confirm modal — two stacked sections for packaging
   + moving/storage. The moving section is dimmed until packaging has a
   confirmed slot, then unlocks via the `.unlocked` class. */
.confirm-modal-combined .confirm-modal-dialog {
    max-width: 640px;
}
.confirm-leg {
    padding: 22px 0;
    border-bottom: 1px dashed #d6deff;
}
.confirm-leg:first-of-type {
    padding-top: 6px;
}
.confirm-leg:last-of-type {
    border-bottom: 0;
    padding-bottom: 6px;
}
.confirm-leg-head {
    margin-bottom: 18px;
}
.confirm-leg-step {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #eef2ff;
    color: var(--bg-secondary,#3155E7);
}
.confirm-leg-head h4 {
    margin: 8px 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--bg-main,#061D5B);
}
.confirm-leg-head p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}
/* Moving leg in the combined modal stays interactive when packaging has
   not been picked yet — the customer can still enter a moving date in any
   order. The dim hint just signals that packaging needs a date too; the
   `min` attribute on the moving date input enforces moving > packaging at
   validation time. */
.confirm-leg-gated {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.confirm-leg-gated.unlocked {
    opacity: 1;
}

/* ========== Reservation card-details capture ========== */
.reservation-card-fields {
    margin: 14px 0 0;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reservation-card-legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reservation-card-grid,
.reservation-card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.reservation-card-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.reservation-card-field label {
    letter-spacing: 0.01em;
}
.reservation-card-field--full {
    grid-column: 1 / -1;
}
/* extra right padding on the card-number input so typed digits clear the
   accepted-card brand marks pinned to the right edge */
/* Reserve room on the right of the card-number field for the brand marks.
   Scoped with .reservation-card-fields so it beats the same-specificity
   `padding` shorthand below (which would otherwise reset padding-right and
   let the typed number slide under the Visa/MC/Amex icons). */
.reservation-card-fields .reservation-card-field--full .reservation-card-input input {
    padding-right: 100px;
}
/* Input + leading icon wrapper */
.reservation-card-input {
    position: relative;
    display: flex;
    align-items: center;
}
.reservation-card-input-icon {
    position: absolute;
    left: 13px;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.15s;
}
/* Scoped under .reservation-card-fields to beat the global
   `input[type="text"] { padding: 12px 14px }` rule in responsive-utilities.css
   (loaded after booking.css, same specificity) that was resetting the
   left-padding and clipping text under the leading icon. */
.reservation-card-fields .reservation-card-input input {
    width: 100%;
    padding: 12px 13px 12px 42px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    background: #ffffff;
    letter-spacing: 0.03em;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.reservation-card-input input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
    letter-spacing: 0.04em;
}
.reservation-card-input input:focus {
    outline: none;
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.12);
}
.reservation-card-input:focus-within .reservation-card-input-icon {
    color: var(--bg-main,#061D5B);
}
/* Stripe Elements mount points replace the old plain <input> — same box
   chrome, but the focus/invalid states come from Stripe's own injected
   classes on the mount div (StripeElement--focus/--invalid) instead of a
   native :focus pseudo-class. */
.reservation-card-fields .reservation-card-stripe-mount {
    width: 100%;
    padding: 12px 13px 12px 42px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.reservation-card-fields .reservation-card-field--full .reservation-card-stripe-mount {
    padding-right: 100px;
}
.reservation-card-stripe-mount.StripeElement--focus {
    border-color: var(--bg-main,#061D5B);
    box-shadow: 0 0 0 3px rgba(6, 29, 91, 0.12);
}
.reservation-card-stripe-mount.StripeElement--invalid {
    border-color: #dc2626;
}
/* Accepted-card brand marks, right-aligned inside the card-number field */
.reservation-card-brands {
    position: absolute;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}
.reservation-card-brands .fa-cc-visa { color: #1a1f71; }
.reservation-card-brands .fa-cc-mastercard { color: #eb001b; }
.reservation-card-brands .fa-cc-amex { color: #2e77bc; }
.reservation-card-error {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
/* The explicit display:flex above beats the UA [hidden]{display:none}; keep the
   empty error (and its ::before icon) hidden until JS populates + un-hides it. */
.reservation-card-error[hidden] { display: none; }
.reservation-card-error::before {
    content: "\f06a"; /* fa exclamation-circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1.4;
}
.reservation-card-note {
    margin: 0;
    font-size: 11.5px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.reservation-card-note i {
    color: #10b981;
    font-size: 12px;
}
/* Hosted-payment redirect variant: replaces the card-input grid with a short
   "you'll be redirected to pay" notice (see reservation-card-fields.blade.php). */
.reservation-card-redirect {
    margin-top: 10px;
}
.reservation-card-redirect-note {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}
.reservation-card-redirect-note i {
    color: var(--bg-main,#061D5B);
    margin-top: 2px;
}

/* ----------------------------------------------------------------------- */
/* Payment card (customer booking detail page)                            */
/* Renders the booking_payments ledger as a structured panel: top summary */
/* (paid / pending / total), then groups by status with each row showing  */
/* a status-coloured icon, kind + period, due date, and amount.           */
/* ----------------------------------------------------------------------- */

.payments-card .payments-empty {
    padding: 20px 12px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

/* Summary block */
.payments-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 16px;
}
.payments-summary-stat { text-align: center; min-width: 0; }
.payments-summary-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.payments-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payments-summary-value.is-paid    { color: #065f46; }
.payments-summary-value.is-pending { color: #b45309; }

/* Group section */
.payments-group { margin-bottom: 16px; }
.payments-group:last-child { margin-bottom: 0; }
.payments-group-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}
.payments-group-heading i {
    font-size: 11px;
    color: #9ca3af;
}

/* Rows list */
.payments-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Long installment lists (e.g. a year+ of monthly storage fees) get capped
   and scroll inside the card instead of stretching the whole page. ~4 rows
   tall; the padding-right keeps the scrollbar off the row content. */
.payments-rows-scroll {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 6px;
}

/* Single payment row */
.payments-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    border-left-width: 3px;
    transition: box-shadow 0.15s ease;
}
.payments-row:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.04); }

.payments-row-paid     { border-left-color: #10b981; }
.payments-row-pending  { border-left-color: #f59e0b; }
.payments-row-overdue  { border-left-color: #ef4444; }
.payments-row-upcoming { border-left-color: #cbd5e1; }
.payments-row-waived   { border-left-color: #9ca3af; background: #fafafa; }

/* Avatar/icon on the left */
.payments-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.payments-row-paid     .payments-row-icon { background: #d1fae5; color: #065f46; }
.payments-row-pending  .payments-row-icon { background: #fef3c7; color: #92400e; }
.payments-row-overdue  .payments-row-icon { background: #fee2e2; color: #991b1b; }
.payments-row-upcoming .payments-row-icon { background: #f1f5f9; color: #475569; }
.payments-row-waived   .payments-row-icon { background: #e5e7eb; color: #6b7280; }

/* Body: title + meta lines */
.payments-row-body { min-width: 0; }
.payments-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.payments-row-meta {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.payments-row-meta i {
    width: 11px;
    text-align: center;
    color: #9ca3af;
    font-size: 10px;
}

/* Amount on the right */
.payments-row-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    align-self: center;
}
.payments-row-amount-muted { color: #9ca3af; font-weight: 600; }

/* Pay-now action: full row beneath the row body */
.payments-row-action {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.payments-method-options {
    display: flex;
    gap: 6px;
}
.payments-method-option { flex: 1; min-width: 0; }
.payments-method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payments-method-option-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.payments-method-option-body:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}
.payments-method-option input:checked + .payments-method-option-body {
    border-color: var(--bg-main,#061D5B);
    background: #eff6ff;
    color: var(--bg-main,#061D5B);
    font-weight: 600;
}
.payments-method-option-body i { font-size: 12px; }

/* Two-step cash flow — when the customer has marked the row paid but the
   mover hasn't accepted yet, this inline note replaces the Pay button. */
.payments-awaiting-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.payments-awaiting-confirm i { font-size: 14px; }

/* Read-only badge shown when the customer's payment_preference is already
   set at reservation — replaces the Cash/Card chooser so they don't pick
   twice. Mirrors the visual weight of a selected radio option. */
.payments-method-chosen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--bg-main,#061D5B);
    border-radius: 6px;
    background: #eff6ff;
    color: var(--bg-main,#061D5B);
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
}
.payments-method-chosen i { font-size: 12px; }

.payments-pay-btn {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-main,#061D5B);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease;
}
.payments-pay-btn:hover { background: var(--brand-blue,#0A2A7A); }
.payments-pay-btn:active { transform: translateY(1px); }
.payments-pay-btn i { font-size: 11px; }

/* ----------------------------------------------------------------------- */
/* Due-now callout — the "amount due" group is the primary action on the    */
/* booking page, so it gets a tinted container, a prominent amount, and a   */
/* weightier pay button to draw the eye over the settled-history card.      */
/* ----------------------------------------------------------------------- */
.payments-group-due {
    padding: 16px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 70%);
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.04);
}
.payments-group-due .payments-group-heading {
    color: #92400e;
    margin-bottom: 12px;
    justify-content: space-between;
}
.payments-group-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.payments-group-due .payments-group-heading-label i { color: #f59e0b; }

/* Saved payment method shown as a chip beside the DUE NOW heading. */
.payments-due-method {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--bg-main,#061D5B);
    border-radius: 999px;
    background: #eff6ff;
    color: var(--bg-main,#061D5B);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.payments-due-method i { font-size: 11px; color: var(--bg-main,#061D5B); }

/* The due row sits flush inside the callout (no nested card chrome) so the
   container reads as one cohesive panel. */
.payments-group-due .payments-row {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    column-gap: 12px;
}
.payments-group-due .payments-row:hover { box-shadow: none; }

.payments-group-due .payments-row-icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.payments-group-due .payments-row-title {
    font-size: 14px;
}

/* The amount is the hero of this card — larger and darker than a list row. */
.payments-group-due .payments-row-amount {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Action area lifts to sit flush under the row body, no top divider (the row
   already has its own bottom border inside the callout). */
.payments-group-due .payments-row-action {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #fde68a;
}

.payments-group-due .payments-pay-btn {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(6, 29, 91, 0.25);
}
.payments-group-due .payments-pay-btn:hover {
    box-shadow: 0 4px 10px rgba(6, 29, 91, 0.32);
}

@media (max-width: 480px) {
    .payments-group-due { padding: 12px; }
    .payments-group-due .payments-row-amount { font-size: 18px; }
}

/* Compact at narrow widths (right-rail < 360px) */
@media (max-width: 480px) {
    .payments-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .payments-summary-value { font-size: 14px; }
    .payments-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
    .payments-row-icon { width: 30px; height: 30px; font-size: 12px; }
}

/* ----------------------------------------------------------------------- */
/* Slots card (customer booking detail page)                              */
/* Three-row stacked layout: initial / customer-confirmed / admin-assigned */
/* per booking leg (moving, storage, packaging). Each row carries an icon  */
/* avatar so the timeline reads top-to-bottom even on a narrow side rail.  */
/* ----------------------------------------------------------------------- */

.slots-card-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.slots-card-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    border-top-width: 3px;
    border-left-width: 1px;
    min-width: 0;
}
.slots-card-row-initial     { border-top-color: #94a3b8; }
.slots-card-row-confirmed   { border-top-color: #3b82f6; }
.slots-card-row-assigned    { border-top-color: #10b981; }
.slots-card-row-actual      { border-top-color: #065f46; }
/* Mission has started but hasn't ended yet — accent orange + the
   spinner icon below to convey "live, in flight". */
.slots-card-row-in-progress { border-top-color: #f59e0b; }
.slots-card-row-empty       { border-top-color: #e5e7eb; background: #fafafa; }

.slots-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.slots-card-row-initial     .slots-card-icon { background: #f1f5f9; color: #475569; }
.slots-card-row-confirmed   .slots-card-icon { background: #dbeafe; color: #1e40af; }
.slots-card-row-assigned    .slots-card-icon { background: #d1fae5; color: #065f46; }
.slots-card-row-actual      .slots-card-icon { background: #d1fae5; color: #065f46; }
.slots-card-row-in-progress .slots-card-icon { background: #fef3c7; color: #b45309; }
.slots-card-row-empty       .slots-card-icon { background: #f3f4f6; color: #9ca3af; }

/* Live "in progress" badge sits next to the Actual slot label —
   a small amber pulsing dot signalling a live state. */
.slots-card-meta-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #b45309;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.slots-card-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
    animation: slots-card-pulse 1.6s ease-out infinite;
}
@keyframes slots-card-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.slots-card-body { min-width: 0; }

.slots-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.slots-card-meta {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: none;
    letter-spacing: 0;
}

.slots-card-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slots-card-value-empty {
    color: #9ca3af;
    font-weight: 500;
    font-size: 12px;
    white-space: normal;
}
.slots-card-time {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.4;
}

/* Below 720px each card already gets cramped, so we collapse the 3-up
   slot grid onto a single column. The same breakpoint is used by the
   booking-show-grid (right rail drops below) so the slots card always
   has the full content width when this kicks in. */
@media (max-width: 720px) {
    .slots-card-rows { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .slots-card-row { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px; }
    .slots-card-icon { width: 28px; height: 28px; font-size: 11px; }
    .slots-card-value { font-size: 13px; }
}

/* Date of Service cell — three-line stack (initial / confirmed / assigned)
   shared by admin planned-moves table and the customer booking summary row. */
.dos-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.35;
}
.dos-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.dos-time {
    color: #4b5563;
    font-weight: 500;
    white-space: nowrap;
}
.dos-time::before {
    content: '·';
    color: #9ca3af;
    margin-right: 6px;
}
.dos-line-pending .dos-time { color: #9ca3af; }
.dos-tag {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    min-width: 70px;
    text-align: center;
}
.dos-tag-initial   { color: #4b5563; background: #f3f4f6; border-color: #e5e7eb; }
.dos-tag-confirmed { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.dos-tag-assigned  { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.dos-tag-actual    { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.dos-value {
    flex: 1 1 auto;
    min-width: 0;
    color: #111827;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dos-value-pending {
    color: #9ca3af;
    font-weight: 400;
    font-style: italic;
}
.dos-line-pending .dos-tag {
    opacity: .7;
}

@media (max-width: 480px) {
    .dos-tag { min-width: 60px; font-size: 9.5px; padding: 1px 6px; }
    .dos-cell { font-size: 11.5px; }
}

/* Single-column main pane after the right sidebar was rolled into the tab
   panels. Override the earlier 2fr 1fr `.booking-show-grid` rule. */
.booking-show-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.booking-show-grid.is-single .booking-show-main { min-width: 0; }

/* Action strip above the cards on single-service bookings — same
   right-aligned chip strip the combined layout puts next to the tab nav. */
.booking-show-actions-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.booking-show-actions-bar .booking-show-actions { gap: 8px; flex-wrap: wrap; }

/* Combined-services tabs (Packaging | Moving/Storage) on the customer
   booking detail page. Single-service bookings don't render the wrapper. */
.booking-tabs { margin-bottom: 4px; }

/* Wrapper that hosts the tab nav on the left and action chips on the right
   in a single underlined row. Falls back to stacked on narrow viewports. */
.booking-tabs-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 2px;
    margin-bottom: 16px;
}
.booking-tabs-bar .booking-tabs-nav {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.booking-tabs-bar .booking-tabs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}
.booking-tabs-bar .booking-tabs-actions .booking-show-actions { gap: 8px; flex-wrap: wrap; margin: 0; }
@media (max-width: 768px) {
    .booking-tabs-bar { flex-direction: column; align-items: stretch; }
    .booking-tabs-bar .booking-tabs-actions { justify-content: flex-start; padding-bottom: 0; padding-top: 4px; }
}

.booking-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 2px;
    /* overflow-x: auto; */
    -webkit-overflow-scrolling: touch;
}
.booking-tabs-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: #6b7280;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.booking-tabs-tab:hover { color: var(--bg-main,#061D5B); }
.booking-tabs-tab.is-active {
    color: var(--bg-main,#061D5B);
    border-bottom-color: var(--bg-secondary,#3155E7);
}
.booking-tabs-tab i { font-size: 14px; }
.booking-tabs-panel { display: none; }
.booking-tabs-panel.is-active { display: block; }

@media (max-width: 480px) {
    .booking-tabs-tab { padding: 9px 14px; font-size: 13px; }
    .booking-tabs-tab span { display: inline; }
}

/* Heavy items card on the customer booking detail page. Replaces the
   plain `<table class="estimate-meta">` which collapsed to messy uppercase
   stacks on phones — the new list lays each item out as one row with
   name + weight chip + qty badge, then drops to a 2-col grid below 480 px
   so long item names get the full row width. */
.heavy-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.heavy-items-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.heavy-items-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}
.heavy-items-weight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.heavy-items-weight i { font-size: 11px; color: #b45309; }
.heavy-items-qty {
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    font-size: 14px;
    white-space: nowrap;
}

/* Customer-side full Items card — every item the customer added in the
   wizard (heavy + non-heavy) as a scannable row with quantity badge.
   Mirrors .heavy-items-list spacing but lets the list scroll vertically
   inside its card so a long inventory doesn't blow out the row height
   when paired with Status History. */
.customer-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
}
.customer-items-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.customer-items-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.customer-items-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.customer-items-badge i { font-size: 10px; color: #b45309; }
.customer-items-qty {
    font-weight: 700;
    color: var(--bg-main,#061D5B);
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .heavy-items-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 10px 12px;
    }
    .heavy-items-name { grid-column: 1 / -1; }
    .heavy-items-weight { font-size: 11.5px; padding: 3px 9px; }
}

/* ── Customer dashboard: Documents page ── */

/* Desktop: table */
.doc-table-wrap {
    background: #fff; border: 1px solid #e8edf3; border-radius: 14px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table thead th {
    text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #64748b; padding: 14px 18px;
    background: #f8fafc; border-bottom: 1px solid #eef2f7;
}
.doc-table tbody td { padding: 14px 18px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #334155; vertical-align: middle; }
.doc-table tbody tr:last-child td { border-bottom: none; }
.doc-table tbody tr:hover { background: #f8fafc; }
.doc-table-action-col { text-align: right; white-space: nowrap; }

/* Shared cell bits */
.doc-name { display: inline-flex; align-items: center; gap: 10px; }
.doc-name-icon { font-size: 18px; }
.doc-name-icon.is-generated { color: #dc2626; }
.doc-name-icon.is-upload { color: #0ea5e9; }
.doc-name-text { font-weight: 600; word-break: break-word; }
.doc-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 2px 7px; margin-left: 6px;
}
.doc-booking-link { color: var(--bg-main,#061D5B); font-weight: 700; text-decoration: none; }
.doc-booking-link:hover { text-decoration: underline; }
.doc-booking-svc { color: #94a3b8; font-size: 12px; margin-left: 6px; }
.doc-download {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    color: #fff; background: var(--bg-main,#061D5B); border-radius: 8px; padding: 7px 14px;
    text-decoration: none; transition: background .15s;
}
.doc-download:hover { background: var(--brand-blue,#0A2A7A); }

/* Mobile: card list (hidden on desktop) */
.doc-cards { display: none; }
.doc-card-m {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #e8edf3; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.doc-card-m-icon {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.doc-card-m-icon.is-generated { background: #fef2f2; color: #dc2626; }
.doc-card-m-icon.is-upload { background: #e0f2fe; color: #0ea5e9; }
.doc-card-m-body { flex: 1 1 auto; min-width: 0; }
.doc-card-m-title { font-weight: 600; font-size: 14px; color: #0f172a; word-break: break-word; }
.doc-card-m-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.doc-card-m-meta a { color: var(--bg-main,#061D5B); font-weight: 700; text-decoration: none; }
.doc-card-m-meta i { color: #94a3b8; margin-right: 3px; }
.doc-card-m-download {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-main,#061D5B); color: #fff; text-decoration: none; transition: background .15s;
}
.doc-card-m-download:hover { background: var(--brand-blue,#0A2A7A); }

@media (max-width: 768px) {
    .doc-table-wrap { display: none; }
    .doc-cards { display: block; }
}

/* Empty state */
.doc-empty {
    text-align: center; color: #94a3b8; padding: 56px 16px;
    background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px;
}
.doc-empty i { font-size: 40px; margin-bottom: 14px; display: block; color: #cbd5e1; }
.doc-empty p { margin: 0; }

/* Pagination (self-contained — frontend layout has no admin pagination CSS) */
.doc-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 24px; }
.doc-pagination .doc-page {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; color: var(--bg-main,#061D5B);
    text-decoration: none; transition: background .15s, border-color .15s;
}
.doc-pagination .doc-page:hover { background: #f8fafc; border-color: #cbd5e1; }
.doc-pagination .doc-page.is-disabled { color: #cbd5e1; pointer-events: none; background: #f8fafc; }
.doc-pagination .doc-page-info { font-size: 14px; font-weight: 600; color: #475569; min-width: 56px; text-align: center; }