/* =========================================================
   ATHOKPAM INK
   BOOKING PAGE STYLES
   File: booking.css

   Purpose:
   - Style WP Booking Calendar to match Athokpam Ink
   - Keep plugin functionality untouched
   - Match the black / warm gold visual system
   - Improve calendar, legend and booking form presentation
   - Responsive on tablet and mobile

   Page body class required:
   body.athokpam-booking-page
   ========================================================= */


/* =========================================================
   1. PAGE / OUTER CONTAINER
   ========================================================= */

body.athokpam-booking-page {
    background: #050606;
    color: #f4f3ef;
}

body.athokpam-booking-page .section .container {
    width: min(1040px, calc(100% - 40px));
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   2. BOOKING INTRO / SUPPORTING COPY
   ========================================================= */

body.athokpam-booking-page .booking-intro {
    max-width: 760px;
    margin: 0 auto 30px;
    color: #c7c9c5;
    font-size: 16px;
    line-height: 1.75;
}

body.athokpam-booking-page .booking-note {
    max-width: 980px;
    margin: 20px auto 0;
    color: #929793;
    font-size: 14px;
    line-height: 1.7;
}

body.athokpam-booking-page .booking-note strong {
    color: #e8e7e2;
}


/* =========================================================
   3. MAIN BOOKING CARD
   ========================================================= */

body.athokpam-booking-page .wpbc_container,
body.athokpam-booking-page .wpbc_booking_form_structure,
body.athokpam-booking-page .wpbc_booking_form_structure form {
    color: #202220 !important;
}

body.athokpam-booking-page .wpbc_booking_form_structure {
    width: 100%;
    box-sizing: border-box;

    background: #f2f2ef !important;
    border: 1px solid rgba(216, 173, 59, .30) !important;
    border-radius: 0 !important;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .38),
        0 0 0 1px rgba(255, 255, 255, .02) !important;

    padding: 28px !important;
}


/* Remove unwanted plugin backgrounds */
body.athokpam-booking-page .wpbc_container .wpbc_booking_form_main,
body.athokpam-booking-page .wpbc_container .wpbc_booking_form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   4. CALENDAR OUTER FRAME
   ========================================================= */

body.athokpam-booking-page .wpbc_structure_calendar,
body.athokpam-booking-page .wpbc_calendar_wrap {
    width: 100%;
    box-sizing: border-box;

    background: #111515 !important;
    border: 1px solid rgba(216, 173, 59, .35) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 12px !important;
}


/* Calendar itself */
body.athokpam-booking-page .wpbc_calendar,
body.athokpam-booking-page .datepick {
    width: 100%;
    box-sizing: border-box;

    background: #111515 !important;
    color: #f4f3ef !important;

    border: 0 !important;
    border-radius: 0 !important;
}


/* Prevent plugin pseudo-elements from creating visual clutter */
body.athokpam-booking-page .wpbc_calendar::before,
body.athokpam-booking-page .wpbc_calendar::after {
    display: none !important;
}


/* =========================================================
   5. CALENDAR HEADER
   ========================================================= */

body.athokpam-booking-page .wpbc_cal_header,
body.athokpam-booking-page .wpbc_cal_header * {
    background: transparent !important;
    color: #f4f3ef !important;
}

body.athokpam-booking-page .wpbc_cal_header {
    padding: 8px 6px 14px !important;
}

body.athokpam-booking-page .wpbc_cal_header a,
body.athokpam-booking-page .wpbc_cal_header span {
    color: #f4f3ef !important;
}


/* Calendar navigation */
body.athokpam-booking-page .wpbc_cal_header .wpbc_cal_prev,
body.athokpam-booking-page .wpbc_cal_header .wpbc_cal_next,
body.athokpam-booking-page .wpbc_cal_header a {
    color: #d8ad3b !important;
}

body.athokpam-booking-page .wpbc_cal_header a:hover {
    color: #f0c84d !important;
}


/* =========================================================
   6. WEEKDAY HEADINGS
   ========================================================= */

body.athokpam-booking-page .wpbc_cal_dayname,
body.athokpam-booking-page .datepick-title-row th {
    background: #0a0d0d !important;
    color: #d8ad3b !important;

    border-color: rgba(216, 173, 59, .18) !important;

    font-weight: 700 !important;
    font-size: 11px !important;

    text-transform: uppercase;
    letter-spacing: .08em;
}


/* =========================================================
   7. CALENDAR CELLS
   ========================================================= */

body.athokpam-booking-page .datepick td {
    background: #171b1b !important;

    border: 1px solid rgba(255, 255, 255, .055) !important;

    padding: 0 !important;
}

body.athokpam-booking-page .datepick td a,
body.athokpam-booking-page .datepick td span {
    display: flex !important;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    color: #e9e8e3 !important;

    background: transparent !important;

    font-weight: 600 !important;
    text-decoration: none !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


/* Available date hover */
body.athokpam-booking-page .datepick td a:hover {
    background: #d8ad3b !important;
    color: #050606 !important;
}


/* Selected date */
body.athokpam-booking-page
.datepick td.datepick-current-day a,
body.athokpam-booking-page
.datepick td.datepick-days-cell-over a {
    background: #d8ad3b !important;
    color: #050606 !important;
}


/* Today */
body.athokpam-booking-page
.datepick td.datepick-today a {
    color: #d8ad3b !important;
    box-shadow: inset 0 0 0 1px #d8ad3b !important;
}


/* Disabled / unavailable dates */
body.athokpam-booking-page
.datepick td.datepick-unselectable {
    background: #0d1010 !important;
}

body.athokpam-booking-page
.datepick td.datepick-unselectable span {
    color: #555b57 !important;
    background: transparent !important;
    opacity: .72;
}


/* =========================================================
   8. PRESERVE BOOKING STATUS COLOURS
   ========================================================= */

/*
   The plugin controls the actual availability states.
   These rules only improve their presentation without
   changing booking logic.
*/

body.athokpam-booking-page
.datepick td.datepick-days-cell.booked,
body.athokpam-booking-page
.datepick td.booked {
    border-color: rgba(150, 35, 35, .65) !important;
}

body.athokpam-booking-page
.datepick td.datepick-days-cell.pending,
body.athokpam-booking-page
.datepick td.pending {
    border-color: rgba(216, 173, 59, .65) !important;
}


/* =========================================================
   9. BOOKING LEGEND
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_legend,
body.athokpam-booking-page
.wpbc_booking_form_structure .block_hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;

    margin: 18px 0 24px !important;
    padding: 13px 16px !important;

    background: #101313 !important;
    border: 1px solid rgba(216, 173, 59, .22) !important;

    color: #c8cbc6 !important;
    border-radius: 0 !important;
}


/* =========================================================
   10. FORM AREA
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure form {
    margin-top: 20px;
}


/* Horizontal separators */
body.athokpam-booking-page
.wpbc_booking_form_structure hr {
    border: 0 !important;
    border-top: 1px solid #d8d8d3 !important;
    margin: 22px 0 !important;
}


/* Form groups */
body.athokpam-booking-page
.wpbc_booking_form_structure .form-group,
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc-form-field {
    margin-bottom: 18px;
    border-color: #deded9;
}


/* =========================================================
   11. FORM LABELS
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure label,
body.athokpam-booking-page
.wpbc_booking_form_structure .control-label {
    display: block;

    margin-bottom: 7px;

    color: #1c1e1d !important;

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

    letter-spacing: .02em;
}


/* Required marker */
body.athokpam-booking-page
.wpbc_booking_form_structure label .wpbc_required,
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_required {
    color: #b48915 !important;
}


/* =========================================================
   12. INPUTS
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.athokpam-booking-page
.wpbc_booking_form_structure textarea,
body.athokpam-booking-page
.wpbc_booking_form_structure select {
    width: 100% !important;
    box-sizing: border-box !important;

    min-height: 48px !important;

    padding: 11px 14px !important;

    background: #ffffff !important;
    color: #202220 !important;

    border: 1px solid #c9c9c4 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 15px !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


body.athokpam-booking-page
.wpbc_booking_form_structure textarea {
    min-height: 120px !important;
    resize: vertical !important;
}


/* Placeholder */
body.athokpam-booking-page
.wpbc_booking_form_structure input::placeholder,
body.athokpam-booking-page
.wpbc_booking_form_structure textarea::placeholder {
    color: #9a9d99 !important;
    opacity: 1;
}


/* Focus */
body.athokpam-booking-page
.wpbc_booking_form_structure input:focus,
body.athokpam-booking-page
.wpbc_booking_form_structure textarea:focus,
body.athokpam-booking-page
.wpbc_booking_form_structure select:focus {
    border-color: #d8ad3b !important;

    box-shadow:
        0 0 0 1px #d8ad3b,
        0 4px 14px rgba(216, 173, 59, .08) !important;
}


/* Checkbox */
body.athokpam-booking-page
.wpbc_booking_form_structure input[type="checkbox"] {
    accent-color: #d8ad3b;
}


/* =========================================================
   13. TERMS / LINKS
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure a {
    color: #b48915 !important;
    text-decoration: none;
}

body.athokpam-booking-page
.wpbc_booking_form_structure a:hover {
    color: #d8ad3b !important;
    text-decoration: underline;
}


/* =========================================================
   14. SUBMIT BUTTON
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure input[type="submit"],
body.athokpam-booking-page
.wpbc_booking_form_structure button[type="submit"],
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_button_light {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 48px !important;

    padding: 12px 28px !important;

    background: #d8ad3b !important;
    color: #050606 !important;

    border: 1px solid #d8ad3b !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: .10em !important;
    text-transform: uppercase !important;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


body.athokpam-booking-page
.wpbc_booking_form_structure input[type="submit"]:hover,
body.athokpam-booking-page
.wpbc_booking_form_structure button[type="submit"]:hover,
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_button_light:hover {
    background: transparent !important;
    color: #b48915 !important;
    border-color: #b48915 !important;
    transform: translateY(-1px);
}


/* =========================================================
   15. ERROR / SUCCESS MESSAGES
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc-error,
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_error {
    color: #9b2f2f !important;
}

body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc-success,
body.athokpam-booking-page
.wpbc_booking_form_structure .wpbc_success {
    color: #527c32 !important;
}


/* =========================================================
   16. SMALL HELPER TEXT
   ========================================================= */

body.athokpam-booking-page
.wpbc_booking_form_structure .help-block,
body.athokpam-booking-page
.wpbc_booking_form_structure .description {
    color: #777b77 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body.athokpam-booking-page .section .container {
        width: calc(100% - 28px);
        max-width: none;
    }

    body.athokpam-booking-page .booking-intro {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    body.athokpam-booking-page .wpbc_booking_form_structure {
        padding: 12px !important;
    }

    body.athokpam-booking-page .wpbc_structure_calendar,
    body.athokpam-booking-page .wpbc_calendar_wrap {
        padding: 7px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.athokpam-booking-page
    .datepick td a,
    body.athokpam-booking-page
    .datepick td span {
        min-height: 36px;
        font-size: 12px !important;
    }

    body.athokpam-booking-page
    .datepick-title-row th {
        font-size: 9px !important;
        letter-spacing: .04em;
    }

    body.athokpam-booking-page
    .wpbc_booking_form_structure label {
        font-size: 12px !important;
    }

    body.athokpam-booking-page
    .wpbc_booking_form_structure input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
    body.athokpam-booking-page
    .wpbc_booking_form_structure textarea,
    body.athokpam-booking-page
    .wpbc_booking_form_structure select {
        min-height: 46px !important;
        font-size: 16px !important;
    }

    body.athokpam-booking-page
    .wpbc_booking_form_structure textarea {
        min-height: 110px !important;
    }

    body.athokpam-booking-page
    .wpbc_booking_form_structure input[type="submit"],
    body.athokpam-booking-page
    .wpbc_booking_form_structure button[type="submit"],
    body.athokpam-booking-page
    .wpbc_booking_form_structure .wpbc_button_light {
        width: 100% !important;
    }

    body.athokpam-booking-page
    .wpbc_booking_form_structure .wpbc_legend,
    body.athokpam-booking-page
    .wpbc_booking_form_structure .block_hints {
        gap: 8px 12px;
        padding: 11px 12px !important;
    }

    body.athokpam-booking-page .booking-note {
        font-size: 13px;
    }
}


/* =========================================================
   18. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {

    body.athokpam-booking-page .section .container {
        width: calc(100% - 20px);
    }

    body.athokpam-booking-page .wpbc_booking_form_structure {
        padding: 8px !important;
    }

    body.athokpam-booking-page
    .wpbc_structure_calendar,
    body.athokpam-booking-page
    .wpbc_calendar_wrap {
        padding: 4px !important;
    }

    body.athokpam-booking-page
    .datepick td a,
    body.athokpam-booking-page
    .datepick td span {
        min-height: 32px;
        font-size: 11px !important;
    }
}

/* =========================================================
   ATHOKPAM INK - BOOKING CALENDAR POSITION
   ========================================================= */

.wpbc_bfb_form:has(:not(.wpbc__field)) .bk_calendar_frame,
.wpbc__field .bk_calendar_frame {
    margin: 8px auto 0 !important;
}