/* ---------------------------------------------------------
   GLOBAL — MATCH ADMIN THEME
--------------------------------------------------------- */
body{
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    background:#f5f7fa;
    color:#222;
}

h1{
    text-align:center;
    padding:16px 0;
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#333;
    background:white;
    border-bottom:1px solid #e6e6e6;
    position:sticky;
    top:0;
    z-index:100;
}

h1 i{
    color:#3A86FF; /* ADMIN BLUE */
    margin-right:6px;
}

.container{
    padding:16px;
    max-width:700px;
    margin:0 auto;
}

/* ---------------------------------------------------------
   CARDS (IDENTICAL TO ADMIN)
--------------------------------------------------------- */
.card{
    background:#fff;
    padding:20px;
    border-radius:14px;
    border:1px solid #e6e6e6;
    box-shadow:0 3px 10px rgba(0,0,0,0.07);
    margin-bottom:20px;
}

.card h3{
    margin:0 0 12px;
    color:#333;
    font-size:16px;
    font-weight:600;
}

/* ---------------------------------------------------------
   DAY SELECTOR
--------------------------------------------------------- */
.day-selector{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
}

.day{
    padding:10px 12px;
    background:#f9fafb;
    border:1px solid #ddd;
    border-radius:10px;
    min-width:90px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#333;
    cursor:pointer;
    transition:0.2s;
}

.day:hover{
    background:#eef4ff;
    border-color:#3A86FF;
    color:#3A86FF;
}

.day.active{
    background:#3A86FF;
    border-color:#3A86FF;
    color:white;
    transform:scale(1.03);
}

/* ---------------------------------------------------------
   TIME SLOTS
--------------------------------------------------------- */
.slot{
    padding:12px;
    background:#f9fafb;
    border-radius:10px;
    border:1px solid #ddd;
    margin-bottom:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#333;
    transition:0.15s;
}

.slot:hover{
    background:#eef4ff;
    border-color:#3A86FF;
    color:#3A86FF;
    transform:translateY(-1px);
}

/* ---------------------------------------------------------
   MODAL OVERLAY — FIXED & RESPONSIVE
--------------------------------------------------------- */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:9999;

    /* allow scrolling inside if content gets tall */
    overflow-y:auto;

    /* prevents accidental horizontal scroll */
    overflow-x:hidden;

    padding:16px;
    box-sizing:border-box;
}

/* ---------------------------------------------------------
   MODAL PANEL — RESPONSIVE FIX
--------------------------------------------------------- */
.modal-content{
    background:white;

    /* responsive width */
    width:100%;
    max-width:420px;

    /* center safely */
    margin:40px auto;

    /* adaptive padding */
    padding:20px;
    box-sizing:border-box;

    border-radius:14px;
    border:1px solid #e6e6e6;
    box-shadow:0 4px 20px rgba(0,0,0,0.25);

    animation:pop 0.25s ease-out;
}

/* Ensures NOTHING spills outside */
.modal-content *{
    max-width:100%;
    box-sizing:border-box;
}

/* ---------------------------------------------------------
   MOBILE FIXES (VERY IMPORTANT)
--------------------------------------------------------- */
@media (max-width: 480px){

    /* reduce side padding so panel fits on tiny screens */
    .modal{
        padding:10px;
    }

    .modal-content{
        margin:20px auto;
        padding:16px;
        border-radius:12px;
        max-width:100%;
    }
}

@media (max-width: 360px){
    .modal-content{
        padding:14px;
        border-radius:10px;
    }
}


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

/* ---------------------------------------------------------
   SERVICES — ADMIN STYLING
--------------------------------------------------------- */
.service-option{
    padding:12px;
    background:#f9fafb;
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:10px;
    cursor:pointer;
    font-size:14px;
    transition:0.15s;
}

.service-option:hover{
    border-color:#3A86FF;
    background:#eef4ff;
    color:#3A86FF;
}

.service-option.selected{
    background:#3A86FF;
    border-color:#3A86FF;
    color:white;
}

/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */
.modal-content input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:10px;
    font-size:14px;
    background:white;
    margin-bottom:10px;
}

.modal-content input:focus{
    outline:none;
    border-color:#3A86FF;
    box-shadow:0 0 0 1px rgba(58,134,255,0.3);
}

/* ---------------------------------------------------------
   BUTTONS — MATCH ADMIN PRIMARY
--------------------------------------------------------- */
.confirm-btn{
    width:100%;
    padding:14px;
    background:#3A86FF;
    border:none;
    border-radius:12px;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-top:6px;
    transition:0.2s;
}

.confirm-btn:hover{
    background:#2674F0;
}

.close-btn{
    width:100%;
    padding:12px;
    background:#e5e7eb;
    border:none;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
    color:#333;
    cursor:pointer;
    margin-top:10px;
    transition:0.2s;
}

.close-btn:hover{
    background:#d6d9de;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media(max-width:480px){
    .container{padding:12px;}
    .slot{font-size:14px;}
    .service-option{font-size:13px;}
}
select.admin-input {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background:#fff url("data:image/svg+xml;utf8,<svg fill='%23333' height='20' width='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 20,0 10,10'/></svg>") 
        no-repeat right 12px center;

    border:1px solid #ccc;
    border-radius:10px;
    padding:10px 40px 10px 12px;
    font-size:14px;
    width:100%;
    cursor:pointer;
    box-sizing:border-box;
}

select.admin-input:focus {
    border-color:#3A86FF;
    box-shadow:0 0 0 1px rgba(58,134,255,0.3);
    outline:none;
}
/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.booking-header{
    text-align:center;
    margin-bottom:16px;
}

.booking-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.booking-logo{
    max-width:70px;
    height:auto;
}

.booking-company{
    font-size:20px;
    font-weight:700;
    color:#333;
    display:flex;
    align-items:center;
}

.booking-tagline{
    font-size:24px;
    color:#555;
    margin-top:6px;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.booking-footer{
    background:white;
    border-top:1px solid #e6e6e6;
    padding:18px;
    text-align:center;
    font-size:14px;
    color:#555;
    margin-top:40px;
    line-height:1.4;
}

@media(max-width:480px){
    .booking-company{
        font-size:18px;
    }
    .booking-logo{
        height:40px;
    }
    .booking-footer{
        font-size:13px;
    }
}
.enquiry-card {
    background:#fff9e6;
    border-left:4px solid #ff9800;
    cursor:pointer;
    transition:0.2s;
}
.enquiry-card:hover {
    background:#fff3cc;
}

textarea {
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:16px;
    box-sizing:border-box;
}

#modal-notes {
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:16px;
    box-sizing:border-box;
    margin-top:6px;
}

.booking-warning {
    background: #ffe9e9;
    border-left: 5px solid #d9534f;
    padding: 12px 15px;
    margin: 18px 0;
    font-size: 15px;
    color: #b30000;
    border-radius: 6px;
}