/* ==========================================================================
   THE BANSARA ROYALE  —  booking.css
   --------------------------------------------------------------------------
   The three-step booking engine. This stylesheet is intentionally
   self-contained so that it can be enqueued on its own by the WordPress
   plugin (Bansara Booking) without pulling in page-level layout rules.

   Step 1  Stay      — dates, guests, rooms
   Step 2  Room      — room type + rate plan (EP / CP)
   Step 3  Guest     — guest details, coupon, payment method, confirmation

   Table of contents
   -----------------
   1.  Shell + layout
   2.  Step indicator
   3.  Panel transitions
   4.  Step 1 — stay details
   5.  Step 2 — room + rate plan selection
   6.  Step 3 — guest details
   7.  Summary sidebar
   8.  Footer navigation
   9.  Confirmation screen
   10. Booking modal wrapper
   ========================================================================== */


/* ==========================================================================
   1. SHELL + LAYOUT
   ========================================================================== */

.booking {
    /* Local palette so the widget renders identically on light or dark
       sections. Values mirror the site tokens but are declared here to keep
       the component portable. */
    --bk-fg:        var(--c-ink);
    --bk-muted:     var(--c-ink-muted);
    --bk-surface:   #FFFFFF;
    --bk-panel:     var(--c-ivory);
    --bk-rule:      rgba(23, 18, 14, 0.12);
    --bk-accent:    var(--c-copper);

    position: relative;
    color: var(--bk-fg);
    background-color: var(--bk-surface);
    border: 1px solid var(--bk-rule);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Two-column layout: form on the left, live summary on the right. */
.booking__body {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
    .booking__body {
        grid-template-columns: 1fr 360px;
    }
}

.booking__main {
    padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
    min-height: 420px;
}

.booking__aside {
    padding: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
    background-color: var(--bk-panel);
    border-top: 1px solid var(--bk-rule);
}

@media (min-width: 1000px) {
    .booking__aside {
        border-top: 0;
        border-left: 1px solid var(--bk-rule);
    }
}


/* ==========================================================================
   2. STEP INDICATOR
   --------------------------------------------------------------------------
   Three numbered nodes joined by a rail. The filled portion of the rail is
   driven by a --progress custom property that booking.js updates (0 / 50 /
   100), so the fill animates smoothly rather than jumping per step.
   ========================================================================== */

.bk-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
    background-color: var(--c-navy);
    color: var(--c-on-dark);
}

/* The rail sits behind the nodes, spanning node 1 centre to node 3 centre. */
.bk-steps__rail {
    position: absolute;
    top: calc(clamp(1.25rem, 1rem + 1vw, 1.75rem) + 19px);
    left: calc(clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem) + 16.66%);
    right: calc(clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem) + 16.66%);
    height: 1px;
    background-color: rgba(244, 239, 231, 0.22);
}

.bk-steps__rail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--c-copper), var(--c-copper-300));
    transform: scaleX(calc(var(--progress, 0) / 100));
    transform-origin: left center;
    transition: transform 620ms var(--ease-out);
}

.bk-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
    background: none;
    cursor: default;
}

/* Completed steps become clickable so guests can go back and edit. */
.bk-step.is-done {
    cursor: pointer;
}

.bk-step__node {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(244, 239, 231, 0.3);
    border-radius: 50%;
    background-color: var(--c-navy);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: rgba(244, 239, 231, 0.6);
    transition:
        background-color 420ms var(--ease-out),
        border-color     420ms var(--ease-out),
        color            420ms var(--ease-out),
        transform        420ms var(--ease-spring);
}

.bk-step__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 239, 231, 0.5);
    transition: color 420ms var(--ease-out);
}

/* --- Active step ---------------------------------------------------------- */
.bk-step.is-active .bk-step__node {
    background-color: var(--c-copper);
    border-color: var(--c-copper);
    color: #FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(213, 121, 56, 0.18);
}

.bk-step.is-active .bk-step__label {
    color: var(--c-copper-300);
}

/* --- Completed step ------------------------------------------------------- */
.bk-step.is-done .bk-step__node {
    background-color: transparent;
    border-color: var(--c-copper);
    color: var(--c-copper);
}

.bk-step.is-done .bk-step__label {
    color: rgba(244, 239, 231, 0.85);
}

/* Swap the numeral for a tick on completed steps. */
.bk-step__num  { display: block; }
.bk-step__tick { display: none; }

.bk-step.is-done .bk-step__num  { display: none; }
.bk-step.is-done .bk-step__tick { display: block; }

@media (max-width: 520px) {
    .bk-step__label { font-size: 0.62rem; letter-spacing: 0.08em; }
}


/* ==========================================================================
   3. PANEL TRANSITIONS
   --------------------------------------------------------------------------
   Only one panel is in the flow at a time. booking.js sets .is-leaving on
   the outgoing panel, waits for the transition, then swaps in the next one
   with .is-entering -> (next frame) .is-active.
   ========================================================================== */

.bk-panel {
    display: none;
}

.bk-panel.is-active,
.bk-panel.is-entering,
.bk-panel.is-leaving {
    display: block;
}

.bk-panel {
    opacity: 0;
    transform: translate3d(var(--bk-shift, 28px), 0, 0);
    transition:
        opacity   380ms var(--ease-out),
        transform 480ms var(--ease-out);
}

.bk-panel.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.bk-panel.is-leaving {
    opacity: 0;
    transform: translate3d(calc(var(--bk-shift, 28px) * -1), 0, 0);
}

/* Children of an entering panel cascade in with a small stagger. */
.bk-panel__stagger > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 420ms var(--ease-out),
                transform 520ms var(--ease-out);
}

.bk-panel.is-active .bk-panel__stagger > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.bk-panel.is-active .bk-panel__stagger > *:nth-child(1) { transition-delay: 60ms; }
.bk-panel.is-active .bk-panel__stagger > *:nth-child(2) { transition-delay: 120ms; }
.bk-panel.is-active .bk-panel__stagger > *:nth-child(3) { transition-delay: 180ms; }
.bk-panel.is-active .bk-panel__stagger > *:nth-child(4) { transition-delay: 240ms; }
.bk-panel.is-active .bk-panel__stagger > *:nth-child(5) { transition-delay: 300ms; }
.bk-panel.is-active .bk-panel__stagger > *:nth-child(6) { transition-delay: 360ms; }

.bk-panel__head {
    margin-bottom: var(--sp-5);
}

.bk-panel__title {
    font-size: var(--fs-h4);
    margin-bottom: 0.35rem;
}

.bk-panel__sub {
    font-size: var(--fs-sm);
    color: var(--bk-muted);
}


/* ==========================================================================
   4. STEP 1 — STAY DETAILS
   ========================================================================== */

.bk-stay-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Nights read-out that appears between the two date fields. */
.bk-nights {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: var(--sp-3);
    margin-block: var(--sp-2);
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bk-accent);
    background-color: color-mix(in srgb, var(--c-copper) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--c-copper) 35%, transparent);
    border-radius: var(--r-sm);
}

/* Guest occupancy panel. */
.bk-occupancy {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--bk-rule);
    border-radius: var(--r-sm);
    background-color: var(--bk-panel);
}

.bk-occupancy__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-4);
}

.bk-occupancy__row + .bk-occupancy__row {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--bk-rule);
}

.bk-occupancy__name {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    letter-spacing: 0.04em;
}

.bk-occupancy__hint {
    font-size: var(--fs-xs);
    color: var(--bk-muted);
}

.bk-occupancy__row .stepper {
    min-width: 140px;
}

/* Small informational note with an icon. */
.bk-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--bk-muted);
    background-color: var(--bk-panel);
    border-left: 2px solid var(--bk-accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.bk-note .ico {
    margin-top: 0.2em;
    color: var(--bk-accent);
}


/* ==========================================================================
   5. STEP 2 — ROOM + RATE PLAN SELECTION
   ========================================================================== */

.bk-rooms {
    display: grid;
    gap: var(--sp-4);
}

.bk-room {
    display: grid;
    gap: 0;
    border: 1px solid var(--bk-rule);
    border-radius: var(--r-md);
    overflow: hidden;
    background-color: var(--bk-surface);
    transition:
        border-color var(--t-base) var(--ease-out),
        box-shadow   var(--t-base) var(--ease-out);
}

@media (min-width: 640px) {
    .bk-room {
        grid-template-columns: 210px 1fr;
    }
}

.bk-room.is-selected {
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-copper) 22%, transparent);
}

/* Sold-out / unavailable state. */
.bk-room.is-unavailable {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.6);
}

.bk-room__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--c-navy-800);
}

@media (min-width: 640px) {
    .bk-room__media { aspect-ratio: auto; height: 100%; min-height: 210px; }
}

.bk-room__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.bk-room:hover .bk-room__media img {
    transform: scale(1.05);
}

.bk-room__body {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    align-content: start;
}

.bk-room__title {
    font-size: var(--fs-h5);
}

.bk-room__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bk-room__specs li {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.bk-room__specs .ico {
    color: var(--bk-accent);
}

/* --- Rate plan options ----------------------------------------------------- */

.bk-rates {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

/* The whole block is a label wrapping a hidden radio input, so clicking
   anywhere in the row selects the plan and keyboard focus still works. */
.bk-rate {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--bk-rule);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition:
        border-color     var(--t-base) var(--ease-out),
        background-color var(--t-base) var(--ease-out);
}

.bk-rate:hover {
    border-color: color-mix(in srgb, var(--c-copper) 50%, transparent);
    background-color: color-mix(in srgb, var(--c-copper) 4%, transparent);
}

.bk-rate input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio dot. */
.bk-rate__dot {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1px solid color-mix(in srgb, var(--bk-fg) 32%, transparent);
    border-radius: 50%;
    transition: border-color var(--t-fast) var(--ease-out);
}

.bk-rate__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--bk-accent);
    transform: scale(0);
    transition: transform 260ms var(--ease-spring);
}

.bk-rate input:checked ~ .bk-rate__dot {
    border-color: var(--bk-accent);
}

.bk-rate input:checked ~ .bk-rate__dot::after {
    transform: scale(1);
}

.bk-rate:has(input:checked) {
    border-color: var(--bk-accent);
    background-color: color-mix(in srgb, var(--c-copper) 6%, transparent);
}

/* Focus ring driven by the hidden input. */
.bk-rate:has(input:focus-visible) {
    outline: 2px solid var(--c-copper);
    outline-offset: 2px;
}

.bk-rate__info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.bk-rate__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    letter-spacing: 0.03em;
}

.bk-rate__inc {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--bk-muted);
}

.bk-rate__price {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    text-align: right;
}

.bk-rate__was {
    font-size: var(--fs-xs);
    color: var(--bk-muted);
    text-decoration: line-through;
}

.bk-rate__now {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    color: var(--bk-fg);
    white-space: nowrap;
}

.bk-rate__per {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

@media (max-width: 560px) {

    .bk-rate {
        grid-template-columns: auto 1fr;
    }

    .bk-rate__price {
        grid-column: 2;
        justify-items: start;
        text-align: left;
        padding-top: var(--sp-2);
        border-top: 1px dashed var(--bk-rule);
        width: 100%;
    }
}

/* Link that expands the full room policy / facility detail. */
.bk-room__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bk-accent);
    transition: gap var(--t-base) var(--ease-out);
}

.bk-room__more:hover {
    gap: 0.85em;
}

.bk-room__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 460ms var(--ease-out);
}

.bk-room__details-inner {
    padding-top: var(--sp-3);
    margin-top: var(--sp-3);
    border-top: 1px solid var(--bk-rule);
}


/* ==========================================================================
   6. STEP 3 — GUEST DETAILS
   ========================================================================== */

.bk-coupon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-2);
    align-items: end;
}

.bk-coupon__msg {
    grid-column: 1 / -1;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
}

.bk-coupon__msg.is-ok  { color: var(--c-success); }
.bk-coupon__msg.is-bad { color: var(--c-danger); }

/* Payment method chooser. */
.bk-pay {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.bk-pay__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--bk-rule);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out);
}

.bk-pay__opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bk-pay__opt:has(input:checked) {
    border-color: var(--bk-accent);
    background-color: color-mix(in srgb, var(--c-copper) 6%, transparent);
}

.bk-pay__opt:has(input:focus-visible) {
    outline: 2px solid var(--c-copper);
    outline-offset: 2px;
}

.bk-pay__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    color: var(--bk-accent);
    border: 1px solid color-mix(in srgb, var(--c-copper) 35%, transparent);
    border-radius: 50%;
}

.bk-pay__name {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    letter-spacing: 0.03em;
}

.bk-pay__hint {
    font-size: var(--fs-xs);
    color: var(--bk-muted);
}


/* ==========================================================================
   7. SUMMARY SIDEBAR
   ========================================================================== */

.bk-summary {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    display: grid;
    gap: var(--sp-4);
}

.bk-summary__title {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--bk-rule);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--bk-accent);
}

/* Thumbnail of the selected room. */
.bk-summary__room {
    display: grid;
    gap: var(--sp-3);
}

.bk-summary__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-sm);
    background-color: var(--c-navy-800);
}

.bk-summary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-summary__lines {
    display: grid;
    gap: var(--sp-2);
}

.bk-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
    align-items: baseline;
    font-size: var(--fs-sm);
}

.bk-line__label {
    color: var(--bk-muted);
}

.bk-line__value {
    text-align: right;
    color: var(--bk-fg);
}

.bk-line--discount .bk-line__value {
    color: var(--c-success);
}

.bk-line--muted {
    font-size: var(--fs-xs);
    color: var(--bk-muted);
}

.bk-summary__divider {
    height: 1px;
    background-color: var(--bk-rule);
}

/* Grand total row. */
.bk-total {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
    align-items: baseline;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--bk-rule);
}

.bk-total__label {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    letter-spacing: 0.05em;
}

.bk-total__value {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--bk-accent);
    white-space: nowrap;
}

/* Animates when the figure changes so the guest notices the update. */
.bk-total__value.is-bumped {
    animation: total-bump 520ms var(--ease-spring);
}

@keyframes total-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}

.bk-summary__empty {
    padding: var(--sp-5) 0;
    font-size: var(--fs-sm);
    color: var(--bk-muted);
    text-align: center;
}

/* Trust badges under the summary. */
.bk-trust {
    display: grid;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--bk-rule);
}

.bk-trust li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-xs);
    color: var(--bk-muted);
}

.bk-trust .ico {
    color: var(--c-success);
}


/* ==========================================================================
   8. FOOTER NAVIGATION
   ========================================================================== */

.bk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
    background-color: var(--bk-panel);
    border-top: 1px solid var(--bk-rule);
}

.bk-foot__hint {
    font-size: var(--fs-xs);
    color: var(--bk-muted);
}

.bk-foot__actions {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
}

@media (max-width: 520px) {

    .bk-foot__actions {
        width: 100%;
        margin-left: 0;
    }

    .bk-foot__actions .btn {
        flex: 1;
    }
}

/* Hides the Back button on step 1 without collapsing the layout. */
.bk-back[hidden] {
    display: none;
}


/* ==========================================================================
   9. CONFIRMATION SCREEN
   ========================================================================== */

.bk-done {
    display: grid;
    justify-items: center;
    gap: var(--sp-4);
    padding-block: var(--sp-7);
    text-align: center;
}

/* Animated tick: the circle draws itself, then the check strokes in. */
.bk-done__mark {
    width: 78px;
    height: 78px;
    color: var(--c-success);
}

.bk-done__mark circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: draw-circle 700ms var(--ease-out) forwards;
}

.bk-done__mark path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: draw-check 420ms var(--ease-out) 620ms forwards;
}

@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-check  { to { stroke-dashoffset: 0; } }

.bk-done__ref {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.65em 1.2em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-sm);
    letter-spacing: 0.12em;
    color: var(--bk-accent);
    background-color: color-mix(in srgb, var(--c-copper) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--c-copper) 40%, transparent);
    border-radius: var(--r-sm);
}

.bk-done__recap {
    width: min(420px, 100%);
    text-align: left;
    margin-top: var(--sp-3);
}


/* ==========================================================================
   10. BOOKING MODAL WRAPPER
   --------------------------------------------------------------------------
   The same booking widget is reused inside a modal triggered by every
   "Book Now" button across the site.
   ========================================================================== */

.bk-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    align-items: start;
    justify-items: center;
    padding: clamp(0.75rem, 2.5vw, 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(2, 20, 30, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out),
                visibility var(--t-base) linear;
}

.bk-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.bk-modal__dialog {
    position: relative;
    width: min(1100px, 100%);
    margin-block: auto;
    transform: translateY(24px) scale(0.985);
    transition: transform 520ms var(--ease-out);
}

.bk-modal.is-open .bk-modal__dialog {
    transform: translateY(0) scale(1);
}

.bk-modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    color: var(--c-on-dark);
    border-color: rgba(244, 239, 231, 0.25);
    background: rgba(3, 28, 42, 0.6);
}

@media (max-width: 600px) {
    .bk-modal__close {
        top: 8px;
        right: 8px;
        z-index: 5;
        background: rgba(3, 28, 42, 0.75);
    }
}