/*
 * SafariBookingPro Frontend Stylesheet - STANDALONE VERSION
 * Version: 2.2.2
 *
 * CONTENTS:
 * 1. THEME VARIABLES & GLOBALS
 * 2. SINGLE SERVICE PAGE LAYOUT
 * 3. MAIN BOOKING FORM WRAPPER
 * 4. CALENDAR & TIME SLOT UI
 * 5. PARTICIPANT & CHECKOUT SECTIONS
 * 6. SERVICE LIST PAGE (CARD GRID)
 * 7. "MY BOOKINGS" PAGE
 * 8. HELPER CLASSES (LOADER, ETC.)
*/

/* ===================================================================
 * 1. THEME VARIABLES & GLOBALS
 * ================================================================ */
:root {
    --sbp-bg-color: #fdfaf5;
    --sbp-primary-color: #7a5c1f;
    --sbp-text-color: #3d3d3d;
    --sbp-border-color: #e0d8cc;
    --sbp-text-light: #6d6d6d;
    --sbp-serif-font: 'Georgia', 'Times New Roman', serif;
    --sbp-sans-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===================================================================
 * 2. SINGLE SERVICE PAGE LAYOUT
 * ================================================================ */
.sbp-single-service-header {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}
.sbp-single-image-wrap {
    flex: 1 1 40%;
    min-width: 300px;
}
.sbp-single-image-wrap img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--sbp-border-color);
}
.sbp-single-content-wrap {
    flex: 1 1 55%;
}
/* This hides the default page title that themes might add inside the content area */
.sbp-single-service-page-container > h1.entry-title {
    display: none;
}
.sbp-single-title {
    font-family: var(--sbp-serif-font) !important;
    font-size: 2.8em !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: var(--sbp-text-color) !important;
    line-height: 1.2 !important;
    font-weight: normal !important;
    padding: 0 !important;
    border: none !important;
}
.sbp-single-description {
    line-height: 1.7;
    color: var(--sbp-text-light);
    font-size: 1.1em;
}
.sbp-booking-form-section {
    padding-top: 40px;
    border-top: 1px solid var(--sbp-border-color);
}
.sbp-single-service-page .safari-booking-pro-wrapper {
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    background: transparent;
}

/* ===================================================================
 * 3. MAIN BOOKING FORM WRAPPER
 * ================================================================ */
.safari-booking-pro-wrapper { max-width: 960px; margin: 20px auto; font-family: var(--sbp-sans-font); background-color: var(--sbp-bg-color); border: 1px solid var(--sbp-border-color); padding: 30px 40px; border-radius: 8px; position: relative; color: var(--sbp-text-color); }
.sbp-main-layout { display: flex; flex-wrap: wrap; gap: 40px; }
.sbp-left-column { flex: 1; min-width: 320px; }
.sbp-right-column { flex-basis: 300px; flex-grow: 0; }
.safari-booking-pro-wrapper h3, .safari-booking-pro-wrapper h4 { font-family: var(--sbp-serif-font); font-weight: normal; font-size: 1.4em; padding-bottom: 10px; border-bottom: 1px solid var(--sbp-border-color); margin-top: 0; margin-bottom: 25px; }
.safari-booking-pro-wrapper h4 { font-size: 1.2em; border: none; padding: 0; margin-bottom: 15px; }

/* ===================================================================
 * 4. CALENDAR & TIME SLOT UI
 * ================================================================ */
#sbp_inline_calendar { border: none; }
.ui-datepicker { width: 100%; padding: 0; background: transparent !important; box-shadow: none !important; border: none !important; }
.ui-datepicker-header { background: transparent !important; border: none !important; padding: 0 0 1em; }
.ui-datepicker-title { font-family: var(--sbp-serif-font); font-weight: normal; font-size: 1.2em; color: var(--sbp-text-color); }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { background: transparent !important; border: 1px solid var(--sbp-border-color) !important; cursor: pointer; border-radius: 50%; top: 5px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { background-image: none !important; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before { font-family: 'dashicons'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--sbp-primary-color); }
.ui-datepicker .ui-datepicker-prev:before { content: "\f341"; }
.ui-datepicker .ui-datepicker-next:before { content: "\f345"; }
.ui-datepicker .ui-state-default { background: transparent; border: 1px solid transparent; text-align: center; padding: 10px 0; color: var(--sbp-text-light); }
.ui-datepicker .ui-state-hover { background: #f5efe6; border-radius: 4px; border-color: #f5efe6; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-active.ui-state-hover { background: var(--sbp-primary-color) !important; color: #fff !important; border-radius: 4px; }
.ui-datepicker-calendar th { color: var(--sbp-text-color); font-weight: 500; }
#sbp_time_slot_wrapper { margin-top: 30px; }
.sbp-availability-label { font-weight: 500; margin-bottom: 15px; font-family: var(--sbp-serif-font); }
#sbp_time_slot_buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.sbp-time-button { padding: 12px; border: 1px solid var(--sbp-border-color); border-radius: 4px; background-color: transparent; cursor: pointer; text-align: center; transition: all 0.2s; font-size: 14px; color: var(--sbp-primary-color); }
.sbp-time-button:hover:not(.disabled) { background-color: #f5efe6; }
.sbp-time-button.active { background-color: var(--sbp-primary-color); color: #fff; border-color: var(--sbp-primary-color); }
.sbp-time-button.disabled { color: #ccc; cursor: not-allowed; text-decoration: none; border-color: #eee; background-color: #f9f9f9; }
.sbp-time-placeholder { color: var(--sbp-text-light); font-style: italic; }
.sbp-summary-card { padding: 0 15px; }
.sbp-summary-card p { margin: 8px 0; font-size: 0.95em; color: var(--sbp-text-color); line-height: 1.5; }
#sbp-price-summary { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sbp-border-color); }
#sbp-price-summary .sbp-base-price { font-size: 1.1em; }
#sbp-price-summary .sbp-total-price, #sbp-price-summary .sbp-base-price { margin-bottom: 0; }

/* ===================================================================
 * 5. PARTICIPANT & CHECKOUT SECTIONS
 * ================================================================ */
#sbp-participant-section, #sbp-checkout-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--sbp-border-color); }
.sbp-form-group { margin-bottom: 15px; }
.sbp-form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.sbp-form-group input[type="text"], .sbp-form-group input[type="number"], .sbp-form-group input[type="email"], .sbp-form-group input[type="tel"], .sbp-form-group select, .sbp-form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--sbp-border-color); border-radius: 4px; box-sizing: border-box; background-color: #fff; }
input#sbp_participants_count:disabled { background-color: #f1f1f1; cursor: not-allowed; }
.sbp-participant-group { border: 1px solid var(--sbp-border-color); padding: 15px; border-radius: 4px; margin-bottom: 15px; background-color: #fff; }
.sbp-participant-group h5 { margin: 0 0 15px 0; font-size: 1em; font-weight: 500; }
.sbp-form-row { display: flex; flex-wrap: wrap; gap: 15px; } /* Use wrap for responsiveness */
.sbp-form-row .sbp-form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
.sbp-coupon-wrap { display: flex; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.sbp-coupon-wrap input { flex-grow: 1; }
.sbp-coupon-wrap .button { padding: 8px 12px; height: auto; background: #e0d8cc; color: var(--sbp-primary-color); border: none; line-height: 1.5; cursor: pointer; }
#sbp-coupon-message { font-size: 0.9em; padding: 5px 0; font-weight: 500; }
#sbp-coupon-message.success { color: #2E7D32; }
#sbp-coupon-message.error { color: #C62828; }
.sbp-payment-options label { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--sbp-border-color); border-radius: 4px; margin-bottom: 10px; cursor: pointer; transition: all .2s; }
.sbp-payment-options label:hover { background-color: #f5efe6; }
.sbp-payment-options input[type="radio"] { margin-top: -2px; }
.sbp-payment-options input[type="radio"]:checked + span { font-weight: bold; }
#sbp-final-price-summary { background: #fff; border: 1px solid var(--sbp-border-color); padding: 20px; margin-bottom: 20px; border-radius: 4px; }
#sbp-final-price-summary p { display: flex; justify-content: space-between; margin: 10px 0; padding: 0; }
#sbp-final-price-summary p.discount { color: #2E7D32; }
#sbp-final-price-summary p.total { font-weight: bold; font-size: 1.2em; border-top: 1px solid var(--sbp-border-color); padding-top: 10px; margin-top: 10px; }
.sbp-footer-actions { margin-top: 30px; text-align: right; }
.sbp-btn { background-color: var(--sbp-primary-color); color: #fff; border: none; padding: 14px 30px; font-size: 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; font-weight: 500; }
.sbp-btn:hover:not(:disabled) { background-color: #5a4517; }
.sbp-btn:disabled { background-color: #bca984; cursor: not-allowed; }
.sbp-input-error { border-color: #C62828 !important; }

/* ===================================================================
 * 6. SERVICE LIST PAGE (CARD GRID)
 * ================================================================ */
.sbp-service-list-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.sbp-service-card { border: 1px solid var(--sbp-border-color); border-radius: 8px; background: var(--sbp-bg-color); overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; }
.sbp-service-card:hover { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); transform: translateY(-5px); }
.sbp-card-image-link img { width: 100%; height: 200px; object-fit: cover; display: block; }
.sbp-card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.sbp-card-title { margin: 0 0 10px 0; font-size: 1.3em; font-weight: normal; font-family: var(--sbp-serif-font); }
.sbp-card-title a { text-decoration: none; color: var(--sbp-text-color); }
.sbp-card-title a:hover { color: var(--sbp-primary-color); }
.sbp-card-excerpt { font-size: 0.95em; color: var(--sbp-text-light); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.sbp-card-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--sbp-border-color); }
.sbp-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; color: var(--sbp-text-color); margin-bottom: 20px; }
.sbp-meta-price { font-weight: 600; font-size: 1.1em; }
.sbp-card-btn { background-color: var(--sbp-primary-color); color: #fff; text-decoration: none; display: block; text-align: center; padding: 12px; border-radius: 4px; transition: background-color .2s; }
.sbp-card-btn:hover { background-color: #5a4517; }

/* ===================================================================
 * 7. "MY BOOKINGS" PAGE & THANK YOU PAGE
 * ================================================================ */
.sbp-my-bookings-wrapper .sbp-booking-card, .sbp-thank-you-page { border: 1px solid var(--sbp-border-color); background: var(--sbp-bg-color); padding: 20px; margin-bottom: 20px; border-radius: 8px; }
.sbp-my-bookings-wrapper h4 { margin-top: 0; font-family: var(--sbp-serif-font); }
.sbp-booking-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.sbp-btn-secondary { background-color: #fff; color: var(--sbp-primary-color); border: 1px solid var(--sbp-primary-color); }
.sbp-btn-secondary:hover:not(:disabled) { background-color: #f5efe6; }
.sbp-thank-you-page { text-align: center; max-width: 600px; margin: 40px auto; padding: 40px; }
.sbp-thank-you-icon { font-size: 50px; line-height: 1; margin-bottom: 15px; }
.sbp-thank-you-page h2 { font-family: var(--sbp-serif-font); font-size: 2em; margin-bottom: 15px; }
.sbp-thank-you-summary { text-align: left; background: #fff; border: 1px solid var(--sbp-border-color); padding: 20px; border-radius: 8px; margin: 30px 0; }
.sbp-thank-you-summary h3 { margin-top: 0; }
.sbp-thank-you-summary p { display: flex; justify-content: space-between; margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.sbp-thank-you-summary p:last-child { border: none; }

/* ===================================================================
 * 8. HELPER CLASSES (LOADER, ETC.)
 * ================================================================ */
.sbp-hidden { display: none !important; }
.sbp-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(253, 250, 245, 0.85); z-index: 100; display: flex; align-items: center; justify-content: center; }
.sbp-loader div { border: 5px solid #f5efe6; border-top: 5px solid var(--sbp-primary-color); border-radius: 50%; width: 50px; height: 50px; animation: sbp-spin 1s linear infinite; }
@keyframes sbp-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }