/* ==========================================================================
   Book a Table — public members-only table-hire wizard.
   Reuses the .sb-stepper / .sb-form-card / .sb-btn system from form.css;
   adds the members gate, calendar, table grid, slot grid, summary & payment.
   ========================================================================== */
.bt-hidden {
    display: none !important;
}

/* ---------- Members-only gate ---------- */

.bt-gate {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 12px 0 8px;
}

.bt-gate-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 6px;
}

.bt-gate-title {
    font-size: 45px;
    font-weight: 700;
    color: #131413;
    margin: 30px 0 16px;
}

.bt-gate-desc {
    max-width: 674px;
    color: #424342;
    font-size: 20px;
    margin: 0 0 40px;
    line-height: 1.5;
    opacity: 80%;
}

.bt-gate-card {
    background: #F9F9F9;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    padding: 30px;
    text-align: left;
}

.bt-gate-card .sb-form-group {
   margin-bottom: 24px;
}

.bt-gate-card .sb-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.bt-gate-foot {
    text-align: center;
    font-size: 16px;
    color: #525252;
    margin-top: 30px;
}

.bt-gate-foot a {
    color: #5DA12C;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Calendar (Step 1) ---------- */
.bt-date-step {
    max-width: 530px;
}
.bt-step-title {
    text-align: center;
    font-weight: 700;
    color: #131413;
    margin-bottom: 30px;
}
.bt-step-title span {
    color: #5DA12C;
}
.bt-cal {
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    padding: 38px;
    background: #FFFFFF;
}


.bt-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bt-cal-title {
    font-size: 20px;
    font-weight: 600;
    color: #131413;
}

.bt-cal-nav {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    color: #475569;
    line-height: 1;
}

.bt-cal-nav:hover {
    background: #f8fafc;
}

.bt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bt-cal-dow {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #808080;
    padding: 20px 0;
}

.bt-cal-day {
     aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
    color: #1A1A1A;
    border: none;
    background: transparent;
    font-family: inherit;
}

.bt-cal-day:hover:not(:disabled) {
    background: #eef7e6;
}

.bt-cal-day:disabled {
    color: #cbd5e1;
    cursor: default;
}

.bt-cal-day.bt-empty {
    visibility: hidden;
}

.bt-cal-day.selected {
    background: #5DA12C;
    color: #fff;
}

/* ---------- Table cards (Step 2) ---------- */

.bt-sub {
    text-align: center;
    color: #424342;
    font-size: 14px;
    margin: -22px 0 30px;
    line-height: 32px;
}
.bt-table-grid-card {
    padding: 25px;
    background: #F9F9F9;
    border-radius: 14px;
    border: 1px solid #E9E9E9;
 margin-bottom: 20px;
}

.bt-table-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.bt-table-card {
    border: 1.5px solid #E0E0E0;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #FFFFFF;
    transition: all 0.12s;
}

.bt-table-card:hover {
    border-color: #8ed081;
}

.bt-table-card.selected {
    border-color: #5DA12C;
    background: #E9F5E0;
}
.bt-table-card.selected .bt-table-name {
    color: #5DA12C;
}
.bt-table-card.selected  .bt-table-rate{
    color: #5DA12C;
}

.bt-table-ball {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}
.bt-table-ball img{
    width:100%;
    height:100%;
}
.bt-table-name {
    font-weight: 600;
    font-size: 16px;
    color: #131413;
}

.bt-table-spec {
    font-size: 12px;
    color: #424342;
    margin: 4px 0 4px;
    opacity: 80%;
}

.bt-table-rate {
    font-weight: 700;
    font-size: 16px;
    color: #131413;
}

/* ---------- Slots ---------- */

.bt-slot-wrap {
    padding: 25px;
    background: #F9F9F9;
    border-radius: 14px;
    border: 1px solid #E9E9E9;
    margin-bottom: 20px;
}

.bt-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: #475569;
    margin-bottom: 10px;
}

.bt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    font-size: 18px;
    color: #131413;
}

.bt-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.bt-legend-hint {
    font-size: 14px;
    color: #424342;
    margin: 0px 0 24px;
    opacity: 80%;
}
.bt-slot-grid.grid-empty-not-slot {
    display: block;
}
.bt-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.bt-slot {
    border: 1.5px solid #5DA12C;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    background: #E9F5E0;
    font-family: inherit;
    transition: all 0.1s;
}
.bt-selected-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#1181EA;
    font-weight:500;
}

.bt-selected-label svg{
    width:14px;
    height:14px;
}
.bt-slot .bt-slot-time {
    font-weight: 600;
    font-size: 16px;
    color: #131413;
}

.bt-slot .bt-slot-price {
    font-size: 14px;
    color: #424342;
    font-weight: 400;
    opacity: 80%;
}

.bt-slot:hover:not(.booked):not(:disabled) {
    border-color: #1181EA;
    background: #E4EDFF;
}

.bt-slot.selected {
    border-color: #2563eb;
    background: #eff6ff;
}

.bt-slot.selected .bt-slot-time,
.bt-slot.selected .bt-slot-price {
    color: #2563eb;
}

.bt-slot.booked {
    border-color: #FF0000;
    background:#FFE9E9;
    cursor: not-allowed;
}

.bt-slot.booked .bt-slot-time {
    color: #FF0000;
}

.bt-slot.booked .bt-slot-price {
   color: #FF0000;
}

.bt-slots-empty {
    padding: 24px;
    text-align: center;
    font-size: 16px;
    color: #141514;
    margin: 0px 0 24px;
}

/* ---------- Selection Bar ---------- */

.bt-selbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #E4EDFF;
    border-radius: 16px;
    padding: 24px 26px;
    margin-top: 16px;
}

.bt-selbar .bt-sel-l {
    font-size: 18px;
    font-weight: 600;
    color: #1181EA;
    margin-bottom: 5px;
}

.bt-selbar .bt-sel-l small {
    display: block;
    font-weight: 500;
    color: #1181EA;
    font-size: 14px;
    margin-top: 2px;
    opacity: 80%;
}

.bt-selbar .bt-sel-r {
    text-align: right;
}

.bt-selbar .bt-sel-amt {
    font-size: 20px;
    font-weight: 700;
    color: #1181EA;
}

.bt-selbar .bt-sel-clear {
    font-size: 14px;
    color: #1181EA;
    cursor: pointer;
    text-decoration: underline;
    opacity: 80%;
}

/* ---------- Details (Step 3) ---------- */

.bt-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.bt-panel {
    background: #F9F9F9;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    padding: 25px;
}

.bt-panel h3 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 600;
    color: #0F1B12;
}

.bt-member-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #E9E9E9;
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

.bt-member-av {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex: 0 0 80px;
    background: #e6f4da;
    color: #3f7a1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    overflow: hidden;
}

.bt-member-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bt-member-name {
    font-weight: 600;
    font-size: 20px;
    color: #131413;
    line-height: 100%;
}

.bt-member-sub {
    font-size: 12px;
    color: #94a3b8;
}

.bt-verified {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #316D38;
    background: #E5F5E7;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.bt-panel .sb-input {
    margin-bottom: 16px;
}


/* ---------- Payment (Step 4) ---------- */
.bt-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bt-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 0;
}
.bt-sum-row .k {
    color: #131413;
    font-weight: 400;
}
.bt-sum-row .v {
    color: #131413;
    font-weight: 600;
    text-align: right;
}
.bt-sum-line {
    display: flex;
    justify-content: space-between;
    padding: 18px 0 0 0;
    border-top: 1px solid #E9E9E9;
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #525252;
}
.bt-sum-total {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed #C2C2C2;
    margin-top: 18px;
    font-size: 20px;
    font-weight: 700;
}
.bt-sum-total .amt {
    color: #5DA12C;
}
.bt-pay-secure {
    font-size: 14px;
    color: #525252;
    margin-top: 10px;
    display: flex;
    gap: 5px;
}
.bt-pay-secure .secured-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ---------- Confirmed (Step 5) ---------- */
.bt-confirm-hero {
    background: #193C00;
    color: #fff;
    border-radius: 24px 24px 0 0;
    padding: 40px;
    text-align: center;
}

.bt-confirm-ball {
    width: 80px;
    height: 80px;
    margin: 0px auto 0px auto;
}
.bt-confirm-title {
    font-size: 50px;
    font-weight: 700;
    margin: 14px 0 10px;
    font-style: italic;
    line-height: 100%;
}

.bt-confirm-sub {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

.bt-confirm-ref {
    display: inline-block;
    margin-top: 20px;
    background: #FF9811;
    color: #131413;
    font-weight: 600;
    font-size: 12px;
    padding: 9px 22px;
    border-radius: 999px;
}

.bt-confirm-body {
    background: #F9F9F9;
    border: 1px solid #E9E9E9;
    border-top: none;
    border-radius: 0 0 24px 24px;
    padding: 30px;
}
.bt-confirm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.bt-confirm-mini {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 14px;
    padding: 20px;
}
.bt-confirm-mini .lbl {
    font-size: 12px;
    color: #424342;
    font-weight: 400;
    opacity: 80%;
    margin-bottom: 6px;
}

.bt-confirm-mini .val {
    font-weight: 700;
    color: #131413;
    margin-top: 2px;
    font-size: 16px;
    line-height: 26px;
}

.bt-confirm-mini .val small {
    display: block;
    color: #5DA12C;
    font-weight: 500;
    font-size: 14px;
}

.bt-confirm-note {
    background: #E1F4D3;
    border-radius: 20px;
    padding: 24px;
    font-size: 16px;
    color: #1D4003;
    line-height: 24px;
    margin-top: 4px;
}
.bt-confirm-sum-line {
    margin-top: 30px;
    border-top: 1px solid #E9E9E9;
    padding: 12px 0 0;
}
.bt-confirm-foot .bt-sum-total {
    margin-top: 20px;
    margin-bottom: 34px;
    font-size: 16px;
}
#bt-confirm-m-dst-k {
    color: #5DA12C;
}
#bt-confirm-v {
    font-weight: 600;
}
#bt-confirm-m-dst-v {
    font-weight: 600;
    color: #5DA12C;
}
.bt-confirm-foot .bt-sum-total {
    margin-top: 20px;
}
.bt-confirm-sum-line-in {
    display: flex;
    justify-content: space-between;
    padding: 0px 0 0 0;
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
    color: #525252;
}
.bt-confirm-inner-cd .sb-success-buttons {
    margin-top: 30px !important;
}
@media (max-width: 760px) {
    .bt-member-av {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }
    .bt-sum-row{
     font-size:12px;
    }
    .bt-verified {
      right: 0;
      top: 0;
      border-radius: 0 11px 0 11px;
    }
    .bt-member-name {
      font-size: 18px;
    }
    .bt-selbar .bt-sel-l {
      font-size: 14px;
    }
    .bt-selbar .bt-sel-amt {
    font-size: 16px;
    }
    .bt-gate-desc{
     font-size:16px;
    }
    .bt-gate-icon svg {
    width: 80px;
    height: 80px;
    }
    .bt-gate-title{
     font-size:30px;
     margin:15px 0px;
    }
    .bt-cal-day{
        font-size:14px;     
    }
    .bt-cal-dow{
      font-size:14px;  
    }
    .bt-panel h3 {
     font-size: 18px;
    }
    .bt-cal{
      padding:15px;    
    }
    .bt-table-grid,
    .bt-slot-grid {
        grid-template-columns: repeat(2, 1fr); 
        
    }
    .bt-details-grid, 
    .bt-pay-grid,
    .bt-confirm-cards {
        grid-template-columns: 1fr; 
        
    } 
    .bt-legend-hint {
       text-align: center;
    }
    .bt-legend span {
     font-size: 14px;
    }
    .bt-confirm-sub{
      font-size: 14px;    
    }
    .bt-confirm-ball {
      width: 60px;
      height: 60px;
    }
    .bt-confirm-ball svg {
      width: 60px;
      height: 60px;
     }
    .bt-confirm-hero {
     padding: 25px;
    }
    .bt-confirm-title{
      font-size:30px;
    }
}