/* ==============================================
   booking.css
   All styles for BookingModal + all 9 step components.
   Depends on: tokens.css
   ============================================== */

/* ─────────────────────────────────────────────
   BACKDROP
───────────────────────────────────────────── */
.bm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 40, 50, 0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bmFadeIn 0.22s ease-out both;
    font-family: 'Kreon', Georgia, serif;
}

@keyframes bmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─────────────────────────────────────────────
   PANEL — fixed size, never grows or shrinks
───────────────────────────────────────────── */
.bm-panel {
    background: #ffffff;
    border-radius: 20px;

    /* Bigger default size */
    width: 76vw;
    max-width: 1080px;
    min-width: 580px;
    height: 78vh;
    min-height: 640px;
    max-height: 92vh;

    /* User-resizable — resize handle appears at bottom-right */
    resize: both;
    overflow: auto;

    display: flex;
    flex-direction: column;
    box-shadow:
            0 0 0 1px rgba(20, 143, 161, 0.08),
            0 24px 80px rgba(0, 0, 0, 0.22);
    animation: bmSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bmSlideUp {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ─────────────────────────────────────────────
   HEADER — fixed, never scrolls
───────────────────────────────────────────── */
.bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #ECF0F1;
    flex-shrink: 0;
}

.bm-header-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bm-logo {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.bm-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bm-title {
    font-family: 'Kreon', serif;
    font-size: 16px;
    font-weight: 700;
    color: #148FA1;
    line-height: 1;
}

.bm-step-label {
    font-family: 'Kreon', serif;
    font-size: 11px;
    color: #7F8C8D;
    font-weight: 400;
}

.bm-close {
    width: 32px; height: 32px;
    background: #F4F6F7;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2C3E50;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.bm-close:hover {
    background: #148FA1;
    color: #fff;
}

/* ─────────────────────────────────────────────
   PROGRESS — fixed, never scrolls
───────────────────────────────────────────── */
.bm-progress {
    padding: 10px 22px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid #ECF0F1;
}

.bm-progress-track {
    height: 3px;
    background: #ECF0F1;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.bm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #148FA1, #1BA8BD);
    border-radius: 2px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bm-step-dots {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.bm-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #ECF0F1;
    color: #7F8C8D;
    font-family: 'Kreon', serif;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    cursor: default;
}

.bm-dot.active {
    background: #148FA1;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(20, 143, 161, 0.18);
}

.bm-dot.done {
    background: linear-gradient(135deg, #148FA1, #1BA8BD);
    color: #fff;
}

/* ─────────────────────────────────────────────
   BODY — scrollable, fills remaining height
───────────────────────────────────────────── */
.bm-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 32px 24px;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #1BA8BD #F4F6F7;
}

.bm-body::-webkit-scrollbar       { width: 4px; }
.bm-body::-webkit-scrollbar-track { background: #F4F6F7; border-radius: 2px; }
.bm-body::-webkit-scrollbar-thumb { background: #1BA8BD; border-radius: 2px; }

/* Error banner */
.bm-error {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 10px;
    padding: 11px 14px;
    font-family: 'Kreon', serif;
    font-size: 13px;
    color: #c53030;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   STEP WRAPPER
───────────────────────────────────────────── */
.bs-step {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family: 'Kreon', Georgia, serif;
}

.bs-step--confirm {
    align-items: center;
    text-align: center;
}

/* Step icon */
.bs-icon {
    font-size: 44px;
    margin-bottom: 12px;
    line-height: 1;
}

/* Step title */
.bs-title {
    font-family: 'Kreon', serif;
    font-size: 22px;
    font-weight: 700;
    color: #148FA1;
    margin: 0 0 8px;
    line-height: 1.2;
}

/* Step subtitle */
.bs-sub {
    font-family: 'Kreon', serif;
    font-size: 14px;
    color: #7F8C8D;
    line-height: 1.6;
    margin: 0 0 22px;
}

/* ─────────────────────────────────────────────
   FORM LAYOUT
───────────────────────────────────────────── */
.bs-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.bs-row {
    display: flex;
    gap: 10px;
}

.bs-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.bs-field--grow { flex: 2; }

/* ─────────────────────────────────────────────
   LABELS & INPUTS
───────────────────────────────────────────── */
.bs-label {
    font-family: 'Kreon', serif;
    font-size: 12px;
    font-weight: 600;
    color: #2C3E50;
    letter-spacing: 0.02em;
}

.bs-optional {
    font-weight: 400;
    color: #7F8C8D;
    font-size: 11px;
}

.bs-input {
    font-family: 'Kreon', Georgia, serif;
    font-size: 15px;
    color: #2C3E50;
    background: #ffffff;
    border: 2px solid #ECF0F1;
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.bs-input:focus {
    border-color: #148FA1;
    box-shadow: 0 0 0 3px rgba(20, 143, 161, 0.10);
}

.bs-input::placeholder { color: #BDC3C7; }

.bs-input--code {
    font-size: 24px;
    letter-spacing: 0.35em;
    text-align: center;
    font-weight: 700;
    padding: 14px 13px;
}

.bs-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* Select arrow */
select.bs-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F8C8D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.bs-field-hint {
    font-family: 'Kreon', serif;
    font-size: 11px;
    color: #7F8C8D;
}

.bs-field-error {
    font-family: 'Kreon', serif;
    font-size: 11px;
    color: #e74c3c;
}

.bs-field--error .bs-input {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.08);
}

/* ─────────────────────────────────────────────
   SECTION LABEL (small uppercase divider)
───────────────────────────────────────────── */
.bs-section-label {
    font-family: 'Kreon', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #148FA1;
    margin-bottom: 8px;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
/* Actions row — always pinned to bottom of step */
.bs-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    justify-content: flex-end;
}

.bs-actions--single {
    justify-content: stretch;
    padding-top: 24px;
}

.bs-actions--single .bs-btn {
    flex: 1;
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    border-radius: 12px;
}

.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'Kreon', Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 10px;
    padding: 13px 22px;
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
    line-height: 1;
}

.bs-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Primary — teal gradient */
.bs-btn--primary {
    background: linear-gradient(135deg, #148FA1 0%, #1BA8BD 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(20, 143, 161, 0.28);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Simple background swap on hover — no ::before overlay needed */
.bs-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1BA8BD 0%, #0F6B7A 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 143, 161, 0.38);
}

/* Ghost — for back buttons */
.bs-btn--ghost {
    background: transparent;
    color: #7F8C8D;
    border: 1.5px solid #ECF0F1;
}

.bs-btn--ghost:hover:not(:disabled) {
    background: #F4F6F7;
    color: #2C3E50;
    border-color: #d5dbdb;
}

/* Full width */
.bs-btn--full {
    width: 100%;
    margin-top: 16px;
}

/* ─────────────────────────────────────────────
   LINK BUTTON
───────────────────────────────────────────── */
.bs-link {
    background: none;
    border: none;
    color: #148FA1;
    font-family: 'Kreon', serif;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 14px;

    /* Shrink to content width — prevents invisible click zone */
    display: inline-block;
    width: auto;
    align-self: flex-start;

    transition: color 0.2s ease;
}

.bs-link:hover { color: #0F6B7A; }

/* Inline variant — sits inside a line of text, no margin/block behavior */
.bs-link--inline {
    display: inline;
    margin: 0 0 0 8px;
    padding: 0;
    font-size: 11px;
    vertical-align: baseline;
}

/* ─────────────────────────────────────────────
   NOTICES
───────────────────────────────────────────── */
.bs-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: 'Kreon', serif;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.bs-notice--success {
    background: rgba(20, 143, 161, 0.07);
    border: 1px solid rgba(20, 143, 161, 0.2);
    color: #0F6B7A;
}

.bs-notice--info {
    background: rgba(52, 152, 219, 0.07);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #2471A3;
}

.bs-notice--warn {
    background: rgba(230, 126, 34, 0.07);
    border: 1px solid rgba(230, 126, 34, 0.22);
    color: #D35400;
}

/* ─────────────────────────────────────────────
   INLINE ERRORS
───────────────────────────────────────────── */
.bs-inline-error {
    font-family: 'Kreon', serif;
    font-size: 12px;
    color: #e74c3c;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* ─────────────────────────────────────────────
   LOADING + SPINNER
───────────────────────────────────────────── */
.bs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Kreon', serif;
    font-size: 13px;
    color: #7F8C8D;
    padding: 28px 0;
}

.bs-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bsSpin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

.bs-loading .bs-spinner {
    border-color: #ECF0F1;
    border-top-color: #148FA1;
}

@keyframes bsSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────
   STEP 1 — ZIP
───────────────────────────────────────────── */
/* nothing extra — uses shared form + notice styles */

/* ─────────────────────────────────────────────
   STEP 2 — ITEMS
───────────────────────────────────────────── */
.bs-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.bs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 2px solid #ECF0F1;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.bs-item--selected {
    border-color: #148FA1;
    background: rgba(20, 143, 161, 0.04);
}

.bs-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bs-item-name {
    font-family: 'Kreon', serif;
    font-size: 13px;
    font-weight: 600;
    color: #2C3E50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-item-price {
    font-family: 'Kreon', serif;
    font-size: 12px;
    color: #148FA1;
    font-weight: 500;
}

.bs-item-qty {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bs-qty-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid #ECF0F1;
    background: #ffffff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #148FA1;
    font-family: 'Kreon', serif;
    font-weight: 600;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.bs-qty-btn:hover:not(:disabled) {
    background: #148FA1;
    color: #fff;
    border-color: #148FA1;
}

.bs-qty-btn:disabled { opacity: 0.25; cursor: not-allowed; }

.bs-qty-val {
    font-family: 'Kreon', serif;
    font-size: 15px;
    font-weight: 700;
    color: #2C3E50;
    min-width: 20px;
    text-align: center;
}

/* Total strip */
.bs-total-strip {
    background: rgba(20, 143, 161, 0.05);
    border: 1px solid rgba(20, 143, 161, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.bs-total-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Kreon', serif;
    font-size: 13px;
    color: #2C3E50;
}

.bs-total-row--muted  { color: #7F8C8D; font-size: 12px; }
.bs-total-row--bold   { font-weight: 700; font-size: 15px; color: #148FA1; padding-top: 4px; border-top: 1px solid rgba(20,143,161,0.12); }

.bs-min-warn {
    font-family: 'Kreon', serif;
    font-size: 11px;
    color: #E67E22;
    margin-top: 4px;
}

/* ─────────────────────────────────────────────
   STEP 3 — SCHEDULE
───────────────────────────────────────────── */

/* Calendar row */
.bs-calendar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
    scrollbar-width: none;
}

.bs-calendar::-webkit-scrollbar { display: none; }

.bs-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 48px;
    padding: 10px 6px;
    border: 2px solid #ECF0F1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: 'Kreon', serif;
    flex-shrink: 0;
}

.bs-day:hover { border-color: #148FA1; background: rgba(20,143,161,0.04); }

.bs-day--selected {
    border-color: #148FA1;
    background: linear-gradient(135deg, #148FA1, #1BA8BD);
    color: #fff;
}

.bs-day-name  { font-size: 9px; font-weight: 700; text-transform: uppercase; opacity: 0.7; }
.bs-day-num   { font-size: 19px; font-weight: 700; line-height: 1; }
.bs-day-month { font-size: 9px; opacity: 0.7; }

/* Time windows */
.bs-windows {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bs-window {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px;
    border: 2px solid #ECF0F1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: 'Kreon', serif;
}

.bs-window:hover { border-color: #148FA1; background: rgba(20,143,161,0.04); }

.bs-window--selected {
    border-color: #148FA1;
    background: rgba(20, 143, 161, 0.07);
}

.bs-window-icon  { font-size: 20px; }
.bs-window-label { font-size: 12px; font-weight: 600; color: #2C3E50; }
.bs-window-time  { font-size: 10px; color: #7F8C8D; }

/* ─────────────────────────────────────────────
   STEP 7 — PAYMENT
───────────────────────────────────────────── */
.bs-pay-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.bs-pay-tab {
    flex: 1;
    padding: 9px 8px;
    border: 2px solid #ECF0F1;
    border-radius: 10px;
    background: #fff;
    font-family: 'Kreon', serif;
    font-size: 12px;
    font-weight: 600;
    color: #7F8C8D;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}

.bs-pay-tab:hover { border-color: #148FA1; color: #148FA1; }

.bs-pay-tab.active {
    border-color: #148FA1;
    color: #148FA1;
    background: rgba(20, 143, 161, 0.06);
}

.bs-pay-section { margin-bottom: 14px; }

.bs-stripe-element {
    min-height: 80px;
    border-radius: 10px;
    padding: 4px 0;
}

.bs-stripe-element.hidden { display: none; }

.bs-saved-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid #ECF0F1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: 'Kreon', serif;
    font-size: 13px;
    color: #2C3E50;
    margin-bottom: 8px;
    transition: border-color 0.18s ease, background 0.18s ease;
    text-align: left;
}

.bs-saved-card:hover    { border-color: #148FA1; background: rgba(20,143,161,0.04); }
.bs-saved-card.selected { border-color: #148FA1; background: rgba(20,143,161,0.06); }

.bs-card-brand { font-weight: 700; color: #148FA1; min-width: 48px; }
.bs-card-num   { flex: 1; color: #7F8C8D; letter-spacing: 0.04em; font-size: 12px; }
.bs-card-exp   { font-size: 11px; color: #7F8C8D; }

/* ─────────────────────────────────────────────
   STEP 8 — REVIEW
───────────────────────────────────────────── */
.bs-review-section {
    padding: 12px 0;
    border-bottom: 1px solid #F4F6F7;
}

.bs-review-section:first-of-type { padding-top: 0; }
.bs-review-section--total { border-bottom: none; }

.bs-review-label {
    font-family: 'Kreon', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #148FA1;
    margin-bottom: 7px;
}

.bs-review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-family: 'Kreon', serif;
    font-size: 13px;
    color: #2C3E50;
    margin-bottom: 3px;
}

.bs-review-row span:first-child { color: #555; }
.bs-review-row span:last-child  { font-weight: 600; color: #2C3E50; white-space: nowrap; }

.bs-review-row--discount span { color: #27AE60; }
.bs-review-row--discount span:last-child { color: #27AE60; }

.bs-review-row--total {
    font-weight: 700;
    font-size: 15px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ECF0F1;
}

.bs-review-row--total span { color: #148FA1 !important; }

/* ─────────────────────────────────────────────
   STEP 9 — CONFIRM
───────────────────────────────────────────── */
.bs-confirm-icon {
    width: 68px; height: 68px;
    background: linear-gradient(135deg, #148FA1, #1BA8BD);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 24px rgba(20, 143, 161, 0.35);
    animation: bsScaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bsScaleIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.bs-order-id {
    background: rgba(20, 143, 161, 0.06);
    border: 1px solid rgba(20, 143, 161, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.bs-order-id-label {
    font-family: 'Kreon', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7F8C8D;
}

.bs-order-id-value {
    font-family: 'Kreon', serif;
    font-size: 26px;
    font-weight: 700;
    color: #148FA1;
    letter-spacing: 0.06em;
}

.bs-order-id-hint {
    font-family: 'Kreon', serif;
    font-size: 11px;
    color: #7F8C8D;
}

.bs-confirm-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 4px;
}

.bs-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Kreon', serif;
    font-size: 12px;
    color: #2C3E50;
    padding: 8px 0;
    border-bottom: 1px solid #F4F6F7;
    gap: 10px;
}

.bs-confirm-row span:first-child { color: #7F8C8D; flex-shrink: 0; }
.bs-confirm-row span:last-child  { font-weight: 500; text-align: right; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 768px) {
    .bm-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .bm-panel {
        width: 100%;
        min-width: unset;
        height: 88vh;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
    }

    .bs-row       { flex-direction: column; }
    .bs-field--grow { flex: 1; }
    .bs-windows   { flex-direction: column; }
    .bs-pay-tabs  { flex-wrap: wrap; }
    .bs-pay-tab   { min-width: calc(50% - 4px); }
}