/* =========================================================
WORLDISON BOOKING PAGE
Uses the existing Worldison / About page visual system
========================================================= */

/* =========================================================
BOOKING HERO
========================================================= */

.booking-page-hero {
position: relative;
min-height: 500px;


display: flex;
align-items: center;

overflow: hidden;

color: #fff;
isolation: isolate;


}

/* ---------------------------------------------------------
HERO IMAGE
--------------------------------------------------------- */

.booking-page-hero-image {
position: absolute;
inset: 0;


z-index: -2;

background-image: url("/images/booking-hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

transform: scale(1.02);


}

/* ---------------------------------------------------------
HERO OVERLAY
--------------------------------------------------------- */

.booking-page-hero-overlay {
position: absolute;
inset: 0;


z-index: -1;

background:
    linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.68) 45%,
        rgba(0, 0, 0, 0.42) 100%
    );


}

/* ---------------------------------------------------------
HERO CONTENT
--------------------------------------------------------- */

.booking-page-hero-content {
position: relative;
z-index: 2;


width: 100%;

padding-top: 150px;
padding-bottom: 90px;


}

.booking-hero-copy {
max-width: 760px;
}

/* ---------------------------------------------------------
HERO EYEBROW
--------------------------------------------------------- */

.booking-hero-copy .section-label {
display: inline-block;


margin-bottom: 18px;

color: #fff;

}

/* ---------------------------------------------------------
HERO TITLE
--------------------------------------------------------- */

.booking-hero-copy h1 {
margin: 0 0 20px;


font-size: clamp(42px, 6vw, 72px);
line-height: 1.05;

font-weight: 700;

color: #fff;


}

.booking-hero-copy h1 span {
color: #22c55e;
}

/* ---------------------------------------------------------
HERO DESCRIPTION
--------------------------------------------------------- */

.booking-hero-copy p {
max-width: 680px;


margin: 0;

font-size: 17px;
line-height: 1.8;

color: rgba(255, 255, 255, 0.88);


}

/* =========================================================
BOOKING CONTENT
========================================================= */

.booking-content {
background: #f8f9fa;
}

/* =========================================================
FORM CARD
========================================================= */

.booking-content .content-card {
background: #fff;


border-radius: 14px;

padding: 35px;

border: 1px solid rgba(0, 0, 0, 0.05);

box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.06);


}

/* =========================================================
FORM
========================================================= */

#bookingForm .form-label {
font-weight: 600;
margin-bottom: 8px;
}

#bookingForm .input-group-text {
min-width: 48px;


display: flex;
align-items: center;
justify-content: center;

background: #f8f9fa;


}

#bookingForm .input-group-text svg {
width: 18px;
height: 18px;
}

#bookingForm .form-control {
min-height: 48px;
}

#bookingForm .form-control:focus {
border-color: var(--primary-color, #198754);


box-shadow:
    0 0 0 0.2rem rgba(25, 135, 84, 0.12);


}

#bookingForm .form-text {
margin-top: 7px;
}

/* =========================================================
SERVICE PICKER
========================================================= */

.service-picker {
position: relative;
width: 100%;
}

.service-picker-button {
width: 100%;
min-height: 48px;


display: flex;
align-items: center;
justify-content: space-between;

padding: 0 15px;

text-align: left;

background: #fff;

border: 1px solid #ced4da;
border-radius: 6px;

color: #6c757d;

cursor: pointer;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.service-picker-button:hover {
border-color: #adb5bd;
}

.service-picker-button:focus {
outline: none;


border-color:
    var(--primary-color, #198754);

box-shadow:
    0 0 0 0.2rem rgba(25, 135, 84, 0.12);


}

.service-picker-button svg {
width: 18px;
height: 18px;


flex-shrink: 0;

transition:
    transform 0.2s ease;


}

.service-picker.is-open
.service-picker-button svg {
transform: rotate(180deg);
}

.service-picker-button span.has-selection {
color: #212529;
}

/* =========================================================
SERVICE DROPDOWN
========================================================= */

.service-picker-dropdown {
position: absolute;


top: calc(100% + 6px);
left: 0;
right: 0;

z-index: 1050;

max-height: 420px;

overflow-y: auto;

padding: 8px;

background: #fff;

border: 1px solid #dee2e6;
border-radius: 8px;

box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12);


}

.service-picker-dropdown[hidden] {
display: none !important;
}

/* =========================================================
SERVICE CATEGORY
========================================================= */

.service-category {
padding: 12px 8px 15px;


border-bottom: 1px solid #eee;


}

.service-category:last-child {
border-bottom: 0;
}

.service-category > strong {
display: block;


margin-bottom: 8px;

font-size: 13px;
font-weight: 700;

letter-spacing: 0.04em;
text-transform: uppercase;

color: #6c757d;

}

/* =========================================================
SERVICE CHECKBOXES
========================================================= */

.service-category label {
display: flex;
align-items: center;


gap: 10px;

margin: 0;
padding: 8px 6px;

border-radius: 5px;

cursor: pointer;

transition:
    background 0.15s ease;


}

.service-category label:hover {
background: #f8f9fa;
}

.service-category input[type="checkbox"] {
width: 17px;
height: 17px;


margin: 0;

flex-shrink: 0;

accent-color:
    var(--primary-color, #198754);

cursor: pointer;


}

.service-category label span {
font-size: 14px;
line-height: 1.4;
}

/* =========================================================
URGENT SERVICE
========================================================= */

.urgent-option {
padding: 15px;


background: #f8f9fa;

border: 1px solid #e9ecef;
border-radius: 8px;


}

.urgent-option > label {
display: flex;
align-items: center;


gap: 12px;

margin: 0;

cursor: pointer;


}

.urgent-option input[type="checkbox"] {
position: absolute;


opacity: 0;

pointer-events: none;


}

.urgent-check {
width: 22px;
height: 22px;


display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

background: #fff;

border: 2px solid #adb5bd;
border-radius: 5px;


}

.urgent-check svg {
width: 14px;
height: 14px;


opacity: 0;


}

.urgent-option input:checked + .urgent-check {
background:
var(--primary-color, #198754);


border-color:
    var(--primary-color, #198754);


}

.urgent-option input:checked + .urgent-check svg {
opacity: 1;
color: #fff;
}

.urgent-option strong {
display: block;


margin-bottom: 2px;


}

.urgent-option small {
display: block;


color: #6c757d;

line-height: 1.5;


}

/* =========================================================
BUTTONS
========================================================= */

#bookingForm .btn {
display: inline-flex;
align-items: center;
justify-content: center;


gap: 8px;


}

#bookingForm .btn svg {
width: 17px;
height: 17px;
}

#bookingForm .btn-primary {
background:
var(--primary-color, #198754);

border-color:
    var(--primary-color, #198754);


}

#bookingForm .btn-primary:hover {
filter: brightness(0.94);
}

/* =========================================================
BENEFIT ICON
========================================================= */

.benefit-icon {
width: 45px;
height: 45px;


display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

background:
    rgba(25, 135, 84, 0.10);

border-radius: 8px;

color:
    var(--primary-color, #198754);


}

.benefit-icon svg {
width: 21px;
height: 21px;
}

/* =========================================================
SIDEBAR
========================================================= */

.booking-sidebar {
position: sticky;
top: 100px;
}

/* =========================================================
WHATSAPP CARD
========================================================= */

.booking-whatsapp-card {
padding: 30px;


border-radius: 14px;

background:
    var(--bs-dark, #212529);

color: #fff;

box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.10);


}

.booking-whatsapp-card > div svg {
width: 30px;
height: 30px;
}

.booking-whatsapp-card .section-label {
color: rgba(255, 255, 255, 0.7);
}

.booking-whatsapp-card h3 {
margin-top: 12px;
margin-bottom: 12px;

color: #fff;


}

.booking-whatsapp-card p {
margin-bottom: 22px;


color: rgba(255, 255, 255, 0.75);

line-height: 1.7;


}

.booking-whatsapp-card .btn {
display: inline-flex;
align-items: center;
justify-content: center;


gap: 8px;


}

.booking-whatsapp-card .btn svg {
width: 17px;
height: 17px;
}

/* =========================================================
DESKTOP
========================================================= */

@media (min-width: 992px) {


.booking-page-hero {
    min-height: 500px;
}

.booking-page-hero-content {
    padding-top: 165px;
    padding-bottom: 100px;
}


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991.98px) {


.booking-page-hero {
    min-height: 450px;
}

.booking-page-hero-content {
    padding-top: 140px;
    padding-bottom: 75px;
}

.booking-sidebar {
    position: static;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767.98px) {

```
.booking-page-hero {
    min-height: 440px;
}

.booking-page-hero-image {
    background-position: center;
}

.booking-page-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.84),
            rgba(0, 0, 0, 0.62)
        );
}

.booking-page-hero-content {
    padding-top: 125px;
    padding-bottom: 65px;
}

.booking-hero-copy h1 {
    font-size: 42px;
}

.booking-hero-copy p {
    font-size: 15px;
    line-height: 1.7;
}

.booking-content .content-card {
    padding: 24px 20px;
}

.service-picker-dropdown {
    max-height: 350px;
}

.booking-whatsapp-card {
    padding: 25px 20px;
}

#bookingForm .btn {
    width: 100%;
}