/* =========================================================
   TWENTYONE BOOKING
   Foundation
========================================================= */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --text:#0f172a;
    --text-light:#64748b;

    --border:#e2e8f0;
    --background:#f8fafc;

    --card:#ffffff;

    --radius:18px;

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

}

/* =========================================================
   RESET
========================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

.twentyone-booking{

    width:100%;
    max-width:1200px;

    margin:40px auto;

    padding:20px;

}

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

.booking-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    margin-bottom:28px;

    box-shadow:var(--shadow);

    transition:.25s ease;

}

.booking-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(15,23,42,.12);

}

/* =========================================================
   HEADING
========================================================= */

.booking-card h3{

    color:var(--text);

    font-size:24px;

    font-weight:700;

    margin-bottom:24px;

    padding-bottom:14px;

    border-bottom:1px solid var(--border);

}

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

.form-row{

    display:flex;

    gap:20px;

    margin-bottom:20px;

}

.form-group{

    flex:1;

    display:flex;

    flex-direction:column;

}

/* =========================================================
   LABEL
========================================================= */

.form-group label{

    font-size:14px;

    font-weight:600;

    color:var(--text);

    margin-bottom:8px;

}

/* =========================================================
   INPUT
========================================================= */

.form-group input:not([type="file"]),

.form-group textarea,

.form-group select{

    width:100%;

    height:52px;

    padding:0 16px;

    font-size:15px;

    line-height:52px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    color:var(--text);

    outline:none;

    transition:.25s;

    box-sizing:border-box;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

}

.form-group input[type="file"]{

    width:100%;

    min-height:52px;

    padding:8px;

    border:2px dashed var(--border);

    border-radius:12px;

    background:#f8fafc;

    box-sizing:border-box;

    line-height:normal;

}

.form-group input[type="file"]::file-selector-button{

    padding:10px 16px;

    margin-right:12px;

    border:none;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    cursor:pointer;

}

/* =========================================================
   FOCUS
========================================================= */

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}

/* =========================================================
   TEXTAREA
========================================================= */

textarea{

    resize:vertical;

    min-height:120px;

}

/* =========================================================
   PLACEHOLDER
========================================================= */

::placeholder{

    color:#94a3b8;

}

/* =========================================================
   SELECT
========================================================= */

select{

    cursor:pointer;

}

/* =========================================================
   FILE
========================================================= */

input[type=file]{

    padding:12px;

}

/* =========================================================
   SMALL TEXT
========================================================= */

small{

    color:var(--text-light);

    margin-top:8px;

    display:block;

    line-height:1.5;

}

/* =========================================================
   MIX PACKAGE NOTICE
========================================================= */

.mix-notice{

    margin-top:20px;

    padding:18px;

    border-radius:14px;

    background:#eff6ff;

    border:1px solid #bfdbfe;

}

.mix-notice strong{

    display:block;

    color:#1d4ed8;

    margin-bottom:8px;

}

.mix-notice p{

    color:#334155;

    line-height:1.6;

}

/* =========================================================
   CHECKBOX LIST
========================================================= */

.service-checkboxes{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:16px;

}

.service-checkboxes label{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

}

.service-checkboxes label:hover{

    border-color:var(--primary);

    background:#eff6ff;

}

.service-checkboxes input{

    width:18px;

    height:18px;

}

/* =========================================================
   AGREEMENT
========================================================= */

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    line-height:1.7;

    cursor:pointer;

}

.checkbox input{

    margin-top:4px;

}

/* =========================================================
   BOOKING SUMMARY
========================================================= */

.booking-summary{

    width:100%;

    border-collapse:collapse;

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    background:#fff;

}

.booking-summary tr{

    border-bottom:1px solid var(--border);

}

.booking-summary tr:last-child{

    border-bottom:none;

}

.booking-summary th{

    width:35%;

    text-align:left;

    background:#f8fafc;

    color:var(--text);

    padding:16px 18px;

    font-size:14px;

    font-weight:600;

}

.booking-summary td{

    padding:16px 18px;

    color:#334155;

    font-size:14px;

}

#summary_price strong{

    color: #445369;
    font-size: 14px;
    font-weight: 600;

}

#summary_total strong{

    color: #111827;
    font-size: 25px;
    font-weight: 700;

}

/* =========================================================
   BOOKING ACTION
========================================================= */

.booking-action{

    display:flex;

    justify-content:flex-end;

    margin-top:32px;

}

.btn-booking{

    min-width:240px;

    padding:16px 28px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:

        0 10px 25px rgba(37,99,235,.25);

}

.btn-booking:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(37,99,235,.35);

}

.btn-booking:active{

    transform:scale(.98);

}

.btn-booking:disabled{

    background:#94a3b8;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* =========================================================
   HIDDEN SECTION
========================================================= */

#schedule-section,

#design-section,

#reference-section,

#printing-section,

#print-document-section,

#photo-print-section,

#passport-photo-section,

#polaroid-section,

#lanyard-section,

#per-person-section{

    transition:.25s ease;

}

/* =========================================================
   DATE
========================================================= */

input[type=date]{

    cursor:pointer;

}

/* =========================================================
   NUMBER
========================================================= */

input[type=number]{

    text-align:left;

}

/* =========================================================
   FILE INPUT
========================================================= */

input[type=file]{

    border:2px dashed var(--border);

    background:#f8fafc;

}

input[type=file]:hover{

    border-color:var(--primary);

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

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

@media (max-width:768px){

    .twentyone-booking{

        padding:16px;

        margin:20px auto;

    }

    .booking-card{

        padding:20px;

        border-radius:16px;

    }

    .booking-card h3{

        font-size:20px;

        margin-bottom:20px;

    }

    .form-row{

        flex-direction:column;

        gap:16px;

    }

    .service-checkboxes{

        grid-template-columns:1fr;

    }

    .booking-summary th,

    .booking-summary td{

        display:block;

        width:100%;

    }

    .booking-summary th{

        border-bottom:none;

        padding-bottom:6px;

    }

    .booking-summary td{

        padding-top:0;

        padding-bottom:18px;

    }

    .booking-action{

        justify-content:stretch;

    }

    .btn-booking{

        width:100%;

        min-width:unset;

    }

}

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

@media (min-width:1400px){

    .twentyone-booking{

        max-width:1300px;

    }

}

/* =========================================================
   SPRINT 2
   SERVICE CARD
========================================================= */

.service-checkboxes{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.service-card{

    position:relative;

    cursor:pointer;

    display:block;

}

.service-card input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.service-card-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:28px 20px;

    min-height:145px;

    border:2px solid var(--border);

    border-radius:18px;

    background:#fff;

    transition:.25s ease;

}


.service-title{

    font-size:20px;

    font-weight:700;

    color:var(--text);

    text-align:center;

    letter-spacing:-.3px;

}

.service-subtitle{

    font-size:14px;

    color:var(--text-light);

    text-align:center;

    line-height:1.6;

}

.service-card:hover .service-card-content{

    transform:translateY(-5px);

    border-color:var(--primary);

    box-shadow:

        0 18px 35px rgba(37,99,235,.18);

}

/* ===============================
   ACTIVE
================================ */

.service-card input:checked
+ .service-card-content{

    background:#eff6ff;

    border-color:var(--primary);

    box-shadow:

        0 20px 40px rgba(37,99,235,.25);

}

/* CHECK ICON */

.service-card input:checked
+ .service-card-content::after{

    content:"✓";

    position:absolute;

    top:14px;

    right:14px;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

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

@media(max-width:991px){

    .service-checkboxes{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .service-checkboxes{

        grid-template-columns:1fr;

    }

}

.service-card.disabled{

    opacity:.35;

    pointer-events:none;

    filter:grayscale(1);

    cursor:not-allowed;

}

/*
============================================================
PRIORITY
============================================================
*/

.priority-options{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.priority-card{

    cursor:pointer;

}

.priority-card input{

    display:none;

}

.priority-content{

    border:1px solid var(--border);

    border-radius:12px;

    padding:18px;

    background:#fff;

    transition:.25s;

}

.priority-content strong{

    display:block;

    margin-bottom:6px;

    color:var(--text);

}

.priority-content small{

    color:#6b7280;

}

.priority-card input:checked + .priority-content{

    border-color:var(--primary);

    background:#eef5ff;

}

.priority-card.express input:checked + .priority-content{

    border-color:#0400ff;

    background:#fff5f5;

}

/* =========================================================
   BOOKING CALENDAR
========================================================= */

.booking-calendar-layout{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    margin-bottom:24px;

}

.calendar-panel,
.session-panel{

    display:flex;
    flex-direction:column;

}

.calendar-panel label,
.session-panel label{

    font-weight:600;

    margin-bottom:12px;

    color:#334155;

}

#booking-calendar{

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

    padding:32px;

    background:linear-gradient(
        180deg,
        #eef6ff 0%,
        #f8fbff 100%
    );

    border:1px solid #c7dcff;

    border-radius:20px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        0 8px 24px rgba(59,130,246,.08);

    transition:.25s;

}

#booking-calendar:hover{

    border-color:var(--primary);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.8),
        0 12px 28px rgba(37,99,235,.15);

}

/* =========================================================
   SESSION
========================================================= */

.session-grid{

    display:grid;
    gap:14px;

}

.session-card{

    width:100%;

    padding:18px;

    border:2px solid var(--border);

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.session-card strong{

    font-size:16px;

    color:var(--text);

}

.session-card small{

    margin-top:6px;

    color:var(--text-light);

}

.session-card:hover{

    border-color:var(--primary);

    background:#eff6ff;

    transform:translateY(-2px);

}

.session-card.active{

    border-color:var(--primary);

    background:#eff6ff;

    color:var(--primary);

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(37,99,235,.18);

}

.session-card.disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:auto;

    transform:none;

    filter:grayscale(.2);

}

.session-card.disabled:hover{

    transform:none;

    box-shadow:none;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .booking-calendar-layout{

        grid-template-columns:1fr;

    }

}

/* =========================================================
   FLATPICKR
========================================================= */

#booking-calendar .flatpickr-calendar{

    background:#fff;

    border:1px solid #dbeafe;

    border-radius:18px;

    box-shadow:
        0 18px 40px rgba(15,23,42,.12);

}

#booking-calendar .flatpickr-months{

    background:#fff;

    border-bottom:1px solid #e2e8f0;

    border-radius:16px 16px 0 0;

}

#booking-calendar .flatpickr-weekdays{

    background:#f8fafc;

}

#booking-calendar .flatpickr-day{

    border-radius:10px;

    transition:.2s;

}

#booking-calendar .flatpickr-day:hover{

    background:#dbeafe;

    border-color:#dbeafe;

}

#booking-calendar .flatpickr-day.selected{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}

#booking-calendar .flatpickr-day.today{

    border-color:var(--primary);

}

#booking-calendar .flatpickr-day.today:hover{

    background:var(--primary);

    color:#fff;

}

/* ======================================
   CEK PESANAN
====================================== */

.booking-status-link{
    margin-top:40px;
    padding-top:30px;
    border-top:1px solid #e5e7eb;
    text-align:center;
}

.booking-status-link p{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#111827;
}

.booking-status-link span{
    display:block;
    margin:8px 0 20px;
    color:#6b7280;
    font-size:15px;
}

.btn-check-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:220px;
    height:52px;

    background:#111827;
    color:#fff;

    text-decoration:none;
    border-radius:10px;

    font-weight:600;
    transition:.25s;
}

.btn-check-status:hover{
    background:#000;
    color:#fff;
}

.calendar-partial{

    background:#F59E0B !important;
    color:#fff !important;

}

.calendar-full{

    background:#DC2626 !important;
    color:#fff !important;

}

.selected-date{

    margin-top:15px;

    text-align:center;

    font-size:14px;

    color:#6b7280;

}

.selected-date strong{

    color:#111827;

    font-weight:600;

}

.booking-legend{

    margin-top:15px;
    margin-bottom: 36px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;

}

.legend-title{

    width:100%;
    font-weight:600;
    color:#111827;
    margin-bottom:4px;

}

.legend-item{

    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#4B5563;

}

.legend-color{

    width:16px;
    height:16px;
    border-radius:4px;
    border:1px solid #aab3c0;

}

.legend-color.available{

    background:#FFFFFF;

}

.legend-color.partial{

    background:#F59E0B;

}

.legend-color.full{

    background:#DC2626;

}

#booking_date{

    display:none !important;

}