:root{ --green:#048851; --dark:#000; --muted:#8D8D8D; --line:#e9e9e9; --bg:#f6f6f6;}
/* Page background */
* { margin: 0 0; padding: 0; outline: none; word-break: break-word; word-wrap: break-word;}
body{ font-family: "Inter", sans-serif; font-weight: normal !important; font-style: normal !important; margin:0; padding: 0px;}
[hidden] { display: none !important;}
.error, .invalid-feedback, .aler, .card-errors { font-size:12px; color:#EB0034; padding: 2px; margin-bottom: 0px; }
.topbar,
.screen.active{ max-width: 100%; margin-left:auto; margin-right:auto;}
.page{ background:#fff; padding: 0px 16px; }
.topbar{ /* background: #0000001A; */ border-bottom:none; padding:24px 0 20px; position:static; border-bottom: 2px solid #D9D9D9; }
.screen{ display:none; background:#fff; border-top:none; padding:30px 0 18px;}
.screen.active{ display:block; }
/* ===== Top title + steps ===== */
.topbar h2{ font-weight: 600; font-size: 20px; line-height: 20px; text-align: center; color: #000000; margin-bottom: 16px; }
.steps{ display:flex; justify-content:center; gap:2px; align-items:center;}
.step{  position:relative; padding-bottom:8px; cursor:pointer; font-weight: 600; font-size: 14px; line-height: 14px; text-align: center; color: #D9D9D9; border-bottom: 4px solid #D9D9D9; padding: 8px 10px; width: 136px; height: 34px; }
.step.disabled{ cursor:not-allowed; opacity:.5; }
.step.done,.step.active{ color:#000000; border-color: #000000; }
.step span { display: none; }
.step.active span { display: block; }
.btn{ position: relative; }
.btn.loading::after { content: ''; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid #fff; border-top: 2px solid transparent; border-radius: 50%; animation: spin 0.6s linear infinite;}
.btn.loading::after { border-color: #fff !important;  border-top: 1px solid transparent !important;}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg);}
}
/* ===== Date header ===== */
.date-row{ display:flex; align-items:center; gap:12px; margin:0px 0 18px; justify-content: center; }
.date-btn{ width:34px; height:34px; cursor:pointer; font-size:34px; line-height:32px; color:#111; background: transparent !important; border: none !important; box-shadow: none !important; display: flex; align-items: center;justify-content: center; }
.date-btn:hover{ background:#f7f7f7; }
.date-btn:disabled{opacity:.35; cursor:not-allowed;}
#nextDayBtn svg { width: 36px; height: 36px; }
#prevDayBtn svg { width: 28px; height: 28px; }
.date-pill{ padding:9px 14px; padding-left: 0px; border: none; cursor:pointer; user-select:none; background:#fff; box-shadow: none !important; position: relative; overflow: hidden; font-weight: 600; font-size: 18px; line-height: 18px; color: #000000; }
.cal-ic{ width:16px; height:16px; display:inline-block; }
.date-input-hidden{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; background: transparent;}
.grid-wrapper{ /* overflow: visible; */ background:#fff; max-height: none; -webkit-overflow-scrolling: touch; overflow-x: auto;}
/* ===== Table ===== */
table{ border-collapse:separate; border-spacing:0; table-layout: fixed; min-width: 100%; }
th, td{ border: none !important; padding:10px 8px; text-align:center; white-space: nowrap; overflow:hidden; font-weight: normal; min-width: 80px; }
/* tr:nth-child(odd) { background-color: #fff; }
tr:nth-child(even) { background-color: #0000001A;} */
tr:last-child td{ border-bottom:none; }
th:last-child, td:last-child{ border-right:none; }
th{ background:transparent; font-size: 12px; line-height: 12px; text-align: center; color: #000000; text-overflow: ellipsis; font-weight: 500; }
/* Time column */
.time-col{ color:#111; /* width:92px; */ font-size: 14px; line-height: 14px; color: #000000; font-weight: 500; }
/* Field name header - allow 2 lines like "Apple\nField1" */
th{ line-height:1.15;}
table td { border-bottom: 1px solid #D9D9D9 !important; }
/* ===== Slot buttons ===== */
.slot{ display:block; border: none !important; box-sizing:border-box; padding: 7px 8px; width: 80px; background: #8D8D8D; border-radius: 2px; font-weight: 500; font-size: 14px; line-height: 14px; text-align: center; color: #FFFFFF; margin: 0px auto; white-space: nowrap;  }
.slot.open{ background: var(--green); color:#fff; cursor:pointer;  transition: transform 0.1s ease; }
.slot.open:hover { opacity: 0.7; }
.slot.open:active { transform: scale(0.95); }
.slot.closed{ background:#F6F6F6; color:#8D8D8D; cursor:not-allowed;}
/* Make row height consistent + nicer spacing */
td{ padding:8px 6px;}
/* ===== Cards (contact/payment) ===== */
.card{ max-width: 100%; margin:0 auto; padding:4px 2px; border:none !important;}
.label{ font-size:14px; color:#5F5F5F; font-weight:400; margin:16px 0 8px;  }
.input{ width:100%; padding:11px 12px; box-shadow: none !important; background: transparent !important; border:1px solid #8D8D8D; border-radius:2px; font-size:14px; color: #000; font-weight: 400; outline:none; box-sizing:border-box;}
.input::placeholder { color: #8D8D8D; }
.input:focus{ border-color:#000;}
.summary{ background:#fff; margin-bottom:12px; font-size:16px; font-weight: 500; color: #000; display: flex; gap: 10px; }
.summary_icon {width: 24px; height: 24px; background: #000000; border-radius: 4px; padding: 4px; }
.summary_icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; vertical-align: top; }
.summary_info { width: 100%; flex: 1; }
.summary b{ display:block; margin-bottom:4px;color: #000; font-size: 18px; font-weight: 400 !important; line-height: 18px; }
.summary div + div { color: #8D8D8D; }
.primary-btn{ width:100%; margin:30px auto; padding: 8px; max-width: 160px; border-radius:6px; border:none; background:#000; color:#fff; font-size: 14px; font-weight:700; cursor:pointer; box-shadow: none !important; border: 1px solid #000 !important; display: block; }
.primary-btn:hover { background: transparent; color: #000; }
.primary-btn:disabled{background: #D9D9D9 !important; cursor:not-allowed; color: #fff !important; border-color: #D9D9D9 !important; }
.primary-btn:disabled:hover { background: #D9D9D9 !important; color: #fff !important;  }

.big-pay-box{ height:260px; background:#ededed; border-radius:12px; display:flex; align-items:center;justify-content:center;color:#666; font-weight:900;}
/* ===== Modal (Select Duration) ===== */
.modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; align-items:center; justify-content:center; padding:18px;}
.modal-backdrop.show{ display:flex; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eee; font-weight:900; font-size:14px;}
.close-x{ width:30px; height:30px; border-radius:8px;border:1px solid #e6e6e6; background:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.close-x:hover{ background:#f7f7f7; }
.pill-row{ display:flex; gap:10px; justify-content:center; margin: 20px 0;}
.dur-pill{ padding:14px 16px; cursor:pointer; font-weight: 500; font-size: 16px; line-height: 16px; text-align: center; color: #000000; background: rgba(255, 255, 255, 0.101961); border: 1px solid #000000; border-radius: 6px; box-shadow: none !important;  }
.dur-pill.active, .dur-pill:hover { background:#000000; color:#fff; border-color:#000000;}
.dur-pill:focus { background:#000000; color:#fff; border-color:#000000; }
#durationNextBtn{ background: var(--dark); max-width: 120px; width: 100%; margin: 0px auto; height: 38px; border-radius: 6px; font-weight: 600; font-size: 16px; line-height: 16px; text-align: center; color: #FFFFFF; box-shadow: none !important; border: 1px solid #000 !important; margin-top: 35px; }
#durationNextBtn:hover { background: transparent; color: #000;  }
/* Success */
.success-wrap{ max-width:420px; margin:0 auto; padding:26px 8px; text-align:center;}
.success-title{font-weight: 600; font-size: 20px; line-height: 20px; text-align: center; color: #000000; margin-bottom: 38px;  }
/* .iti__flag-container { display: none !important;} */
#screen-payment,#screen-contact,#screen-success{ max-width:420px; }
.card-wrapper {position: relative;width: 100%;}
#card-element {padding: 12px; background-color: #fff;border-radius: 8px;border: 1px solid #8D8D8D;}
.card-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 255, 255, 0.65);z-index: 10;display: flex;align-items: center;justify-content: center;pointer-events: none; /* If you want to let clicks go through, keep this */border-radius: 6px; /* Match #card-element border-radius */}
.overlay-text {color: #fff;font-size: 14px;}
.total_row { width: 100%;  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px 30px;}
.total_row .t_title { font-weight: 700; font-size: 24px; line-height: 26px; color: #000;}
.total_row .t_amount { font-weight: 700; font-size: 24px; line-height: 26px; text-align: right; color: #000;}
.ElementsApp, .ElementsApp .InputElement { color: #ffffff; font-size: 16px;}
/* signup form design */
.sc_second_screen_heading {  }
.sc_second_screen_heading h3 { font-weight: 700; font-size: 24px; line-height: 26px; text-align: center; color: #000000; margin-bottom: 10px; }
.sc_second_screen_heading p { font-size: 16px; line-height: 24px; text-align: center; color: #000000; margin-bottom: 4px; }
.sc_second_bottom_content { width: 100%; display: block; padding-top: 30px; }
.sc_second_bottom_content p { font-weight: 500; font-size: 11px; line-height: 14px; color: #5F5F5F; margin-bottom: 20px; }
.sc_second_bottom_content p a { color: #000000; text-decoration: underline !important; }

.booking_tax_info { width: 100%; display: block; margin-bottom: 22px; }
.booking_tax_info h5 { font-weight: 600; font-size: 18px; line-height: 18px; color: #000000; margin-bottom: 8px; }
.booking_tax_info .bti_row { width: 100%; display: flex; justify-content: space-between; }
.booking_tax_info .bti_row .bti_title { width: 75%; display: inline-block; font-size: 18px; line-height: 20px; color: #5F5F5F; }
.booking_tax_info .bti_row .bti_amount { width: 25%; text-align: right; display: inline-block; font-weight: 600; font-size: 18px; line-height: 20px; color: #000000; }

#screen-payment { max-width: 492px; }

.card_wrapper_outer_block {  }
.card_wrapper_outer_block .cwob_title {  }

.confirmed_booking_modal {  }
.confirmed_booking_modal .modal-body { padding-top: 10px; }
.confirmed_content_block {  }
.confirmed_content_block .tick { width: 48px; height: 48px; border-radius: 50%; margin: 0px auto 12px; background: #048851; font-size: 30px; font-weight: 400; color: #fff; display: flex; align-items: center; justify-content: center; }
.confirmed_content_block .ccb_title { font-weight: 700; font-size: 24px; line-height: 26px; text-align: center; color: #000000; margin-bottom: 8px; text-wrap: balance; }
.confirmed_content_block .ccb_desc { font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: #000000; margin-bottom: 32px; text-wrap: balance; }
.applinks_block { width: 100%; display: block; }
.applinks_block a { width: 240px; height: 48px; display: block; margin: 0px auto 12px;   transition: transform 0.2s, box-shadow 0.2s;  }
.applinks_block a img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.applinks_block a:active { transform: translateY(2px) scale(0.98); box-shadow: 0 0px #999; }
.applinks_block a:hover { opacity: 0.6; }



/* Responsive tweaks */
@media (max-width:520px){
    .modal-dialog { margin: 10px auto !important; }
    .topbar, .screen.active{ max-width: 100%; }
    th, td{ padding:9px 6px; }
    .slot{ font-size:10px; }
    .step {font-size: 12px; padding: 8px 8px; }
    .time-col { width: 66px; font-size: 10px;}
    th {font-size: 10px;}
    .date-pill { font-size: 16px; line-height: 16px;}
    /* .slot { width: 60px; max-width: unset; } */
    .screen { padding: 16px 0px 12px;}
    .date-btn { width: 16px;}
    .topbar { padding: 24px 0px 20px;}
}
@media (max-width: 330px) {
  .step {
    font-size: 10px;
    padding: 8px 8px;
  }
}
.cancel_policy_link{ font-weight: 500; font-size: 14px; line-height: 14px; text-align: center; letter-spacing: -0.03em; color: #EB0034;}
.cancel_policy_link:hover { color: #EB0034; text-decoration: underline !important; }
.not-available{ padding: 50px 0;text-align: center; font-size: 16px; font-weight: bold;}
/* modal */
.modal-dialog { max-width: 370px; }
.modal-content { border: none !important;  border-radius: 12px; }
.modal-header { position: relative; padding-top: 40px; border: none !important; }
.modal-header .modal-title { width: 100%; text-align: center; font-weight: 600; font-size: 20px; line-height: 20px; text-align: center; color: #000000; }
.modal-header .btn-close { position: absolute; right: 12px; top: 15px;}
.modal-body { padding-top: 36px; padding-bottom: 32px; }

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay 
{ 
  background: #000 !important;
  border-color: #000 !important;
}


.afb_button_block .btn {
    width: 100%;
    height: 46px;
    background:#000;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 5px;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.afb_button_block .btn:hover, .afb_button_block .btn.active {
    background: #FFFFFF;
    color: #000000;
    border: solid 1px #000 !important;
}

@media (min-width: 1700px) {
    .afb_button_block .btn {
        height: 2.42vw;
        border-radius: 0.42vw;
        font-size: 0.74vw;
        line-height: 0.74vw;
        padding: 0.26vw;
        margin-bottom: 0.84vw;
    }
}