/**
 * MM Adora Bookings - Frontend Calendar Styles
 * Version: 1.9.7
 */

/* Main container gets the ID to scope all styles */
#booking-calendar-app { font-family: var(--bb-body-font); max-width: 500px; margin: 2rem auto; padding: 2rem; background: #000000; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); color: var(--bb-text-color); border: 2px solid var(--bb-primary-color); }
#booking-calendar-app .bb-step h2, #booking-calendar-app .bb-manage-booking h2, .bb-confirmation-page h2 { font-family: var(--bb-heading-font); text-align: center; color: var(--bb-primary-color); margin-top: 0; margin-bottom: 1.5rem; }
#booking-calendar-app p { text-align: center; color: var(--bb-text-color); margin-bottom: 1.5rem; }

/* Type Selection */
#booking-calendar-app .bb-type-selection { display: flex; gap: 1rem; justify-content: center; }
#booking-calendar-app .bb-type-btn.selected { background: #ffffff; color: #000000; }
#booking-calendar-app .bb-select { width: 100%; padding: 0.8rem; font-family: var(--bb-body-font); font-size: 1em; border-radius: 5px; border: 1px solid var(--bb-primary-color); background: #fff; color: #000; }
#booking-calendar-app .bb-input { width: 100%; padding: 0.8rem; font-family: var(--bb-body-font); font-size: 1em; border-radius: 5px; border: 1px solid var(--bb-primary-color); background: #fff; color: #000; box-sizing: border-box; }


/* Forms & Calendar */
#booking-calendar-app textarea, #booking-calendar-app .bb-form input { width: 100%; padding: 0.8rem; font-family: var(--bb-body-font); font-size: 1em; border-radius: 5px; border: 1px solid var(--bb-primary-color); background: #fff; color: #000; }
#booking-calendar-app textarea { min-height: 100px; }
#booking-calendar-app .bb-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#month-year-display { font-weight: bold; font-size: 1.2em; padding: 1em; color: var(--bb-primary-color); }
.nav-btn { cursor: pointer; }
.calendar-grid, .weekdays-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; padding: 1em 0; }
.weekdays-grid div { font-weight: bold; padding: 0.5rem 0; font-size: 0.9em; }
.day-cell { background-color: #222; color: var(--bb-primary-color); padding: 0.8rem 0; border-radius: 5px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
.day-cell:not(.disabled):hover { background-color: var(--bb-primary-color); color: var(--bb-secondary-color); }
.day-cell.disabled { background-color: #333; opacity: 0.5; color: #777; cursor: not-allowed; }
.day-cell.selected { background-color: var(--bb-primary-color); color: var(--bb-secondary-color); font-weight: bold; }
.time-slots-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; padding: 1em 0; }
.time-slot { cursor: pointer; border: 1px solid var(--bb-primary-color); padding: 0.5rem; }
.time-slot.selected { background: var(--bb-primary-color); color: var(--bb-secondary-color); }
.time-slot.booked { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }

/* Payment Step */
#booking-calendar-app .bb-payment-summary { background: #222; padding: 1.5rem; border-radius: 5px; margin-bottom: 1.5rem; }
#booking-calendar-app .bb-payment-summary p { margin: 0.5rem 0; text-align: left; }
.payment-line-item { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.payment-line-item.total { font-weight: bold; font-size: 1.2em; color: var(--bb-primary-color); border-top: 1px solid #444; margin-top: 0.5rem; padding-top: 0.5rem; }
.payment-line-item.discount { color: #28a745; }
#booking-calendar-app .bb-coupon-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
#booking-calendar-app #coupon-code { flex-grow: 1; }
#booking-calendar-app #apply-coupon-btn { background: #555; padding: 0.8rem 1rem; }
#booking-calendar-app h3 { text-align: center; margin-top: 2rem; }
#booking-calendar-app .bb-payment-options, #booking-calendar-app .bb-payment-selection { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
#booking-calendar-app .bb-payment-opt-btn, #booking-calendar-app .bb-payment-btn { cursor: pointer; padding: 0.5rem; }
#booking-calendar-app .bb-payment-opt-btn.selected, #booking-calendar-app .bb-payment-btn.selected { background: var(--bb-primary-color); color: var(--bb-secondary-color); }
#booking-calendar-app #eft-details { display: none; background: #222; padding: 1rem; margin-top: 1rem; border-radius: 5px; }

/* General Buttons & Notices */
#booking-calendar-app .bb-button-container { display: flex; justify-content: center; gap: 1em; margin-top: 1.5rem; }
#booking-calendar-app .bb-btn { padding: 0.8rem 1.5rem; cursor: pointer; font-weight: bold; }
#booking-calendar-app .bb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#booking-calendar-app .bb-manage-booking .bb-cancel-btn { color: #dc3545; }

/* --- Confirmation Page Styles --- */
.bb-confirmation-page { text-align: center; }
.bb-confirmation-page h2 .fa-check-circle { font-size: 1.2em; vertical-align: middle; margin-right: 10px; }
.bb-confirmation-page p { font-size: 1.1em; max-width: 400px; margin-left: auto; margin-right: auto; }
.bb-confirmation-page .bb-payment-summary { border: 1px solid var(--bb-primary-color); padding: 1.5rem; background: #111; max-width: 450px; margin: 2rem auto; }
.bb-confirmation-page .bb-payment-summary p { margin: 0.5rem 0; text-align: left; font-size: 1em; }
.bb-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.bb-featured-products { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid #333; }
.bb-featured-products h3 { font-family: var(--bb-heading-font); text-align: center; color: var(--bb-primary-color); margin-bottom: 1.5rem; }
.bb-featured-products .product-slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bb-featured-products .product-slide img { width: 100%; border-radius: 8px; transition: transform 0.3s ease; }
.bb-featured-products .product-slide:hover img { transform: scale(1.05); }


.bb-action-sep {
    margin: 0 8px;
    color: #ccc;
}