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

/* Main container gets the ID to scope all styles */
#booking-calendar-app { font-family: 'Righteous', sans-serif; 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: #ffffff; border: 2px solid #fab626; }
#booking-calendar-app .mmab-step h2, #booking-calendar-app .mmab-manage-booking h2, .mmab-confirmation-page h2 { font-family: 'Righteous', sans-serif; text-align: center; color: #fab626; margin-top: 0; margin-bottom: 1.5rem; }
#booking-calendar-app p { text-align: center; color: #ffffff; margin-bottom: 1.5rem; }

/* Type Selection */
#booking-calendar-app .mmab-type-selection { display: flex; gap: 1rem; justify-content: center; }
#booking-calendar-app .mmab-type-btn { width: 135px; height: 35px; font-family: "Boogaloo"; text-align: center; line-height: 1.1; color: var(--bricks-color-ubnrww); border: 2px ridge var(--bricks-color-ubnrww); border-radius: 50px 10px 50px 10px; background: black; padding: 1rem 2rem; font-size: 1em; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
#booking-calendar-app .mmab-type-btn:hover { background: #ffffff; color: #000000; transform: translateY(-2px); }

/* Forms & Calendar */
#booking-calendar-app textarea, #booking-calendar-app .mmab-form input { width: 100%; padding: 0.8rem; font-family: sans-serif; font-size: 1em; border-radius: 5px; border: 1px solid #fab626; background: #fff; color: #000; }
#booking-calendar-app textarea { min-height: 100px; }
#booking-calendar-app .mmab-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: #fab626; }
.nav-btn { background: #fab626; color: #000; border-radius: 5px; padding: 0.5rem 0.8rem; cursor: pointer; transition: background-color 0.2s; border: none; font-weight: bold; }
.nav-btn:hover { background-color: #ffffff; }
.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: #fab626; padding: 0.8rem 0; border-radius: 5px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
.day-cell:not(.disabled):hover { background-color: #fab626; color: #000; }
.day-cell.disabled { background-color: #333; opacity: 0.5; color: #777; cursor: not-allowed; }
.day-cell.selected { background-color: #fab626; color: #000; font-weight: bold; }
.time-slots-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; padding: 1em 0; }
.time-slot { background: #222; color: #fab626; padding: 1rem; border: 1px solid #fab626; border-radius: 5px; text-align: center; cursor: pointer; transition: all 0.2s; }
.time-slot:not(.booked):hover { background: #fab626; color: #000; }
.time-slot.selected { background: #fab626; color: #000; font-weight: bold; }
.time-slot.booked { background-color: #333; color: #777; cursor: not-allowed; text-decoration: line-through; border-color: #555; }

/* Payment Step */
#booking-calendar-app .mmab-payment-summary { background: #222; padding: 1.5rem; border-radius: 5px; margin-bottom: 1.5rem; }
#booking-calendar-app .mmab-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: #fab626; border-top: 1px solid #444; margin-top: 0.5rem; padding-top: 0.5rem; }
.payment-line-item.discount { color: #28a745; }
#booking-calendar-app .mmab-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 .mmab-payment-options, #booking-calendar-app .mmab-payment-selection { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
#booking-calendar-app .mmab-payment-opt-btn, #booking-calendar-app .mmab-payment-btn { background: #333; color: #fff; border: 2px solid #555; padding: 0.8rem; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
#booking-calendar-app .mmab-payment-opt-btn.selected, #booking-calendar-app .mmab-payment-btn.selected { background: #fab626; color: #000; border-color: #fff; }
#booking-calendar-app #eft-details { display: none; background: #222; padding: 1rem; margin-top: 1rem; border-radius: 5px; }

/* General Buttons & Notices */
#booking-calendar-app .mmab-button-container { display: flex; justify-content: center; gap: 1em; margin-top: 1.5rem; }
#booking-calendar-app .mmab-btn { padding: 1rem; cursor: pointer; background: #fab626; color: black; border: none; border-bottom: 5px solid black; border-radius: 5px; font-family: 'Unbounded', sans-serif; font-size: 1em; font-weight: bold; transition: all 0.3s ease-in-out; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; text-decoration: none; }
#booking-calendar-app .mmab-btn:hover:not(:disabled) { background: black; border-bottom: 5px solid #fab626; color: #fab626; transform: scale(1.05); }
#booking-calendar-app .mmab-btn:disabled { background-color: #ccc; border-bottom-color: #999; cursor: not-allowed; color: #777; }
#booking-calendar-app .mmab-back-btn { background: #555; color: #fff; border-bottom-color: #222; }
#booking-calendar-app .mmab-back-btn:hover:not(:disabled) { background: #fff; color: #000; border-bottom-color: #ccc; }
#booking-calendar-app .mmab-timezone-notice { font-size: 0.8em; color: #999; text-align: center; margin-top: 1rem; }
#booking-calendar-app .mmab-manage-booking .mmab-cancel-btn { background: #dc3545; color: #fff; border-bottom-color: #8b232e; }
#booking-calendar-app .mmab-manage-booking .mmab-cancel-btn:hover { background: #fff; color: #dc3545; border-bottom-color: #ccc; }

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