/**
 * Reservation Booking — Public Stylesheet
 * Version: 3.1.0
 *
 * Typography philosophy
 * ─────────────────────
 * No font-size or font-family values are declared on any user-facing text
 * element. Every label, button, input, and paragraph inherits directly from
 * the theme's <p> styles. Where !important is used it guards against theme
 * specificity resets, not against deliberate overrides.
 *
 * Colour philosophy
 * ─────────────────
 * --rb-primary and --rb-accent cascade in this order:
 *   1. --ax-color-accent / --ax-color-accent-dark  (Appstax / Bricks tokens)
 *   2. --wp--preset--color--primary / --secondary  (Gutenberg Global Styles)
 *   3. --color-accent / --color-primary             (GeneratePress / Astra)
 *   4. Fallback hex
 *
 * Sections:
 *  1. Custom properties
 *  2. Base wrap and layout
 *  3. Wizard sidebar + nav
 *  4. Wizard content + steps
 *  5. Form fields
 *  6. Time slot grid
 *  7. Review summary
 *  8. Wizard action buttons
 *  9. Notices and errors
 * 10. Deposit step
 * 11. Utilities
 * 12. Responsive
 * 13. Confirmation screen
 */

/* =========================================================
 * 1. CUSTOM PROPERTIES
 * ========================================================= */

.rb-booking-wrap {
	--rb-primary:       var( --ax-color-accent,      var( --wp--preset--color--primary,   var( --color-accent,      var( --color-primary,  #2563eb ) ) ) );
	--rb-accent:        var( --ax-color-accent-dark,  var( --wp--preset--color--secondary, var( --color-accent-dark, var( --color-secondary, #1e40af ) ) ) );
	--rb-success:       #16a34a;
	--rb-error:         #dc2626;
	--rb-warning:       #d97706;
	--rb-surface:       #ffffff;
	--rb-bg:            #f9fafb;
	--rb-border:        #e5e7eb;
	--rb-muted:         #6b7280;
	--rb-radius:        8px;
	--rb-radius-sm:     4px;
	--rb-transition:    0.15s ease;
	--rb-shadow:        0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--rb-shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--rb-sidebar-width: 260px;
}

/* =========================================================
 * 2. BASE WRAP AND LAYOUT
 * ========================================================= */

.rb-booking-wrap {
	box-sizing:  border-box;
	font-family: inherit;
	color:       inherit;
	line-height: inherit;
}

.rb-booking-wrap *,
.rb-booking-wrap *::before,
.rb-booking-wrap *::after {
	box-sizing: inherit;
}

.rb-booking-wrap--multi-step {
	display:               grid;
	grid-template-columns: var(--rb-sidebar-width) 1fr;
	background:            var(--rb-surface);
	border:                1px solid var(--rb-border);
	border-radius:         var(--rb-radius);
	box-shadow:            var(--rb-shadow-md);
	overflow:              hidden;
	min-height:            500px;
}

.rb-booking-wrap__title {
	margin: 0 0 1.5rem;
}

.rb-booking-wrap__notice {
	padding:          0.875rem 1rem;
	border-radius:    var(--rb-radius-sm);
	margin-block-end: 1.25rem;
	font-size:        inherit !important;
	font-family:      inherit !important;
	line-height:      inherit !important;
}

.rb-booking-wrap__notice--success {
	background: #f0fdf4;
	border:     1px solid #86efac;
	color:      #166534;
}

.rb-booking-wrap__notice--error {
	background: #fef2f2;
	border:     1px solid #fca5a5;
	color:      #991b1b;
}

/* =========================================================
 * 3. WIZARD SIDEBAR AND NAV
 * ========================================================= */

.rb-wizard-sidebar {
	background:     var(--rb-primary);
	padding:        2rem 1.5rem;
	display:        flex;
	flex-direction: column;
	gap:            2rem;
}

.rb-wizard-sidebar__header {
	display:           flex;
	align-items:       center;
	justify-content:   center;
	padding-block-end: 1.5rem;
	border-block-end:  1px solid rgb(255 255 255 / 0.2);
}

.rb-wizard-sidebar__logo {
	max-inline-size: 160px;
	max-block-size:  60px;
	object-fit:      contain;
}

.rb-wizard-sidebar__title {
	color:      #fff;
	margin:     0;
	text-align: center;
}

.rb-wizard-nav {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

.rb-wizard-nav__step {
	display:       flex;
	align-items:   center;
	gap:           0.75rem;
	padding:       0.625rem 0.875rem;
	border-radius: var(--rb-radius-sm);
	cursor:        default;
	transition:    background var(--rb-transition);
	opacity:       0.55;
}

.rb-wizard-nav__step--active,
.rb-wizard-nav__step--complete {
	opacity: 1;
}

.rb-wizard-nav__step--active {
	background: rgb(255 255 255 / 0.15);
}

.rb-wizard-nav__icon {
	position:        relative;
	inline-size:     32px;
	block-size:      32px;
	flex-shrink:     0;
	background:      rgb(255 255 255 / 0.2);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #fff;
}

.rb-wizard-nav__step--complete .rb-wizard-nav__icon {
	background: var(--rb-success);
}

.rb-wizard-nav__icon-svg   { display: block; }
.rb-wizard-nav__icon-check { display: none;  }

.rb-wizard-nav__step--complete .rb-wizard-nav__icon-svg   { display: none;  }
.rb-wizard-nav__step--complete .rb-wizard-nav__icon-check { display: block; }

.rb-wizard-nav__label {
	font-size:   inherit !important;
	font-family: inherit !important;
	font-weight: 500;
	color:       #fff;
	line-height: inherit !important;
}

/* =========================================================
 * 4. WIZARD CONTENT AND STEPS
 * ========================================================= */

.rb-wizard-content {
	padding:        2rem 2.5rem;
	display:        flex;
	flex-direction: column;
}

.rb-wizard-step__title {
	margin: 0 0 1.5rem;
}

/* =========================================================
 * 5. FORM FIELDS
 * ========================================================= */

.rb-booking-form {
	flex:           1;
	display:        flex;
	flex-direction: column;
}

.rb-booking-form__row {
	margin-block-end: 1.25rem;
}

.rb-booking-form__row--two-col {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
}

.rb-booking-form__field {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

.rb-booking-form__label {
	font-size:   inherit !important;
	font-family: inherit !important;
	font-weight: 600;
	line-height: inherit !important;
}

.rb-booking-form__required {
	color:               var(--rb-error);
	margin-inline-start: 2px;
}

.rb-booking-form__input,
.rb-booking-form__select,
.rb-booking-form__textarea {
	inline-size:        100%;
	padding:            0.625rem 0.875rem;
	border:             1px solid var(--rb-border);
	border-radius:      var(--rb-radius-sm);
	font-size:          inherit !important;
	font-family:        inherit !important;
	line-height:        inherit !important;
	color:              inherit;
	background:         var(--rb-surface);
	transition:         border-color var(--rb-transition), box-shadow var(--rb-transition);
	appearance:         none;
	-webkit-appearance: none;
}

.rb-booking-form__input:focus,
.rb-booking-form__select:focus,
.rb-booking-form__textarea:focus {
	outline:      none;
	border-color: var(--rb-primary);
	box-shadow:   0 0 0 3px color-mix( in srgb, var(--rb-primary) 15%, transparent );
}

.rb-booking-form__textarea {
	resize:         vertical;
	min-block-size: 90px;
}

.rb-booking-form__select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 0.875rem center;
	padding-inline-end:  2.5rem;
}

.rb-booking-form__help-text {
	font-size:   inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color:       var(--rb-muted);
	margin:      0 0 0.5rem;
}

.rb-booking-form__privacy {
	font-size:        inherit !important;
	font-family:      inherit !important;
	line-height:      inherit !important;
	color:            var(--rb-muted);
	margin-block-end: 1rem;
}

.rb-booking-form__info {
	display:            flex;
	align-items:        flex-start;
	gap:                0.625rem;
	padding:            0.875rem 1rem;
	background:         #fffbeb;
	border:             1px solid #fde68a;
	border-radius:      var(--rb-radius-sm);
	color:              #92400e;
	font-size:          inherit !important;
	font-family:        inherit !important;
	line-height:        inherit !important;
	margin-block-start: 0.5rem;
}

.rb-booking-form__info svg {
	flex-shrink:        0;
	margin-block-start: 1px;
}

.rb-booking-form__info-body {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

.rb-booking-form__info-phone {
	display:         inline-flex;
	align-items:     center;
	gap:             0.3rem;
	font-weight:     600;
	color:           inherit;
	text-decoration: none;
}

.rb-booking-form__info-phone:hover {
	text-decoration: underline;
}

.rb-combobox {
	position: relative;
}

.rb-combobox__dropdown {
	position:            absolute;
	inset-block-start:   calc(100% + 4px);
	inset-inline-start:  0;
	inline-size:         100%;
	max-block-size:      220px;
	overflow-y:          auto;
	background:          var(--rb-surface);
	border:              1px solid var(--rb-border);
	border-radius:       var(--rb-radius-sm);
	box-shadow:          var(--rb-shadow-md);
	z-index:             1000;
	list-style:          none;
	margin:              0;
	padding:             0.25rem 0;
}

.rb-combobox__option {
	padding:     0.5rem 0.875rem;
	font-size:   inherit !important;
	font-family: inherit !important;
	cursor:      pointer;
	transition:  background var(--rb-transition);
}

.rb-combobox__option:hover,
.rb-combobox__option--active {
	background: var(--rb-bg);
}

/* =========================================================
 * 6. TIME SLOT GRID
 * ========================================================= */

.rb-time-slots-container {
	margin-block-start: 0.5rem;
}

.rb-time-grid {
	margin-block-end: 1.25rem;
}

.rb-time-grid__service-header {
	font-size:      inherit !important;
	font-family:    inherit !important;
	font-weight:    600;
	color:          var(--rb-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:         0 0 0.625rem;
}

.rb-time-grid__slots {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
}

.rb-time-grid__slot {
	padding:       0.5rem 0.875rem;
	border:        1px solid var(--rb-border);
	border-radius: var(--rb-radius-sm);
	background:    var(--rb-surface);
	font-size:     inherit !important;
	font-family:   inherit !important;
	font-weight:   500;
	color:         inherit;
	cursor:        pointer;
	transition:    border-color var(--rb-transition), background var(--rb-transition), color var(--rb-transition);
}

.rb-time-grid__slot:hover {
	border-color: var(--rb-primary);
	background:   color-mix( in srgb, var(--rb-primary) 8%, transparent );
	color:        var(--rb-primary);
}

.rb-time-grid__slot--selected {
	border-color: var(--rb-primary);
	background:   var(--rb-primary);
	color:        #fff;
}

.rb-time-slots__loading,
.rb-time-slots__empty,
.rb-time-slots__closed,
.rb-time-slots__error {
	font-size:   inherit !important;
	font-family: inherit !important;
	color:       var(--rb-muted);
	padding:     0.75rem 0;
	margin:      0;
}

.rb-time-slots__closed,
.rb-time-slots__error {
	color: var(--rb-error);
}

/* =========================================================
 * 7. REVIEW SUMMARY
 * ========================================================= */

.rb-review-summary {
	border:           1px solid var(--rb-border);
	border-radius:    var(--rb-radius);
	overflow:         hidden;
	margin-block-end: 1.5rem;
}

.rb-review-summary__section {
	padding:          1rem 1.25rem;
	border-block-end: 1px solid var(--rb-border);
}

.rb-review-summary__section:last-child {
	border-block-end: none;
}

.rb-review-summary__heading {
	font-size:      inherit !important;
	font-family:    inherit !important;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--rb-muted);
	margin:         0 0 0.375rem;
}

.rb-review-summary__content {
	font-size:   inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

/* =========================================================
 * 8. WIZARD ACTION BUTTONS (CTAs)
 * ========================================================= */

.rb-wizard-actions {
	display:             flex;
	align-items:         center;
	gap:                 0.75rem;
	padding-block-start: 0.5rem;
	margin-block-start:  auto;
}

.rb-wizard-actions__btn {
	display:       inline-flex;
	align-items:   center;
	gap:           0.5rem;
	padding:       0.75rem 1.5rem;
	border:        none;
	border-radius: var(--rb-radius-sm);
	font-size:     inherit !important;
	font-family:   inherit !important;
	line-height:   inherit !important;
	font-weight:   600;
	cursor:        pointer;
	transition:    background var(--rb-transition), opacity var(--rb-transition), box-shadow var(--rb-transition);
}

.rb-wizard-actions__btn--next,
.rb-wizard-actions__btn--submit {
	background:          var(--rb-primary);
	color:               #fff;
	margin-inline-start: auto;
}

.rb-wizard-actions__btn--next:hover,
.rb-wizard-actions__btn--submit:hover {
	background: var(--rb-accent);
	box-shadow: var(--rb-shadow);
}

.rb-wizard-actions__btn--back {
	background: transparent;
	color:      var(--rb-muted);
	border:     1px solid var(--rb-border);
	padding:    0.75rem 1.125rem;
}

.rb-wizard-actions__btn--back:hover {
	background: var(--rb-bg);
	color:      inherit;
}

.rb-wizard-actions__btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

.rb-booking-form__submit-spinner {
	display:                  inline-block;
	inline-size:              16px;
	block-size:               16px;
	border:                   2px solid rgb(255 255 255 / 0.4);
	border-block-start-color: #fff;
	border-radius:            50%;
	animation:                rb-spin 0.65s linear infinite;
}

.rb-booking-form__submit-spinner--hidden {
	display: none;
}

@keyframes rb-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================
 * 9. NOTICES AND ERRORS
 * ========================================================= */

.rb-step-error {
	font-size:        inherit !important;
	font-family:      inherit !important;
	color:            var(--rb-error);
	background:       #fef2f2;
	border:           1px solid #fca5a5;
	border-radius:    var(--rb-radius-sm);
	padding:          0.625rem 0.875rem;
	margin-block-end: 0.75rem;
}

/* =========================================================
 * 10. DEPOSIT STEP
 * ========================================================= */

.rb-deposit-summary {
	background:       var(--rb-bg);
	border:           1px solid var(--rb-border);
	border-radius:    var(--rb-radius-sm);
	padding:          1rem 1.25rem;
	margin-block-end: 1.25rem;
}

.rb-deposit-summary__amount {
	margin:      0;
	font-size:   inherit !important;
	font-family: inherit !important;
}

.rb-deposit-summary__amount strong {
	color:       var(--rb-primary);
	font-weight: 700;
}

.rb-deposit-sandbox-notice {
	display:          flex;
	gap:              0.5rem;
	flex-wrap:        wrap;
	align-items:      baseline;
	background:       #fffbeb;
	border:           1px solid #fde68a;
	border-radius:    var(--rb-radius-sm);
	padding:          0.75rem 1rem;
	font-size:        inherit !important;
	font-family:      inherit !important;
	color:            #92400e;
	margin-block-end: 1rem;
}

.rb-deposit-sandbox-notice strong { font-weight: 700; }

.rb-deposit-payfast-notice {
	display:          flex;
	align-items:      center;
	gap:              0.625rem;
	background:       #f0f9ff;
	border:           1px solid #bae6fd;
	border-radius:    var(--rb-radius-sm);
	padding:          0.875rem 1rem;
	font-size:        inherit !important;
	font-family:      inherit !important;
	color:            #0c4a6e;
	margin-block-end: 1rem;
}

.rb-deposit-payfast-notice svg { flex-shrink: 0; }

.rb-deposit-stripe-wrap {
	margin-block-end: 1rem;
}

.rb-stripe-card-element {
	padding:       0.75rem 0.875rem;
	border:        1px solid var(--rb-border);
	border-radius: var(--rb-radius-sm);
	background:    var(--rb-surface);
	transition:    border-color var(--rb-transition), box-shadow var(--rb-transition);
}

.rb-stripe-card-element.StripeElement--focus {
	border-color: var(--rb-primary);
	box-shadow:   0 0 0 3px color-mix( in srgb, var(--rb-primary) 15%, transparent );
}

.rb-stripe-card-element.StripeElement--invalid {
	border-color: var(--rb-error);
}

.rb-stripe-card-errors {
	min-block-size:     1.25em;
	margin-block-start: 0.5rem;
	font-size:          inherit !important;
	font-family:        inherit !important;
	color:              var(--rb-error);
}

/* =========================================================
 * 11. UTILITIES
 * ========================================================= */

[hidden] { display: none !important; }

/* =========================================================
 * 12. RESPONSIVE
 * ========================================================= */

@media ( max-width: 768px ) {
	.rb-booking-wrap--multi-step {
		grid-template-columns: 1fr;
	}

	.rb-wizard-sidebar {
		padding: 1.25rem 1.5rem;
		gap:     1rem;
	}

	.rb-wizard-sidebar__header {
		padding-block-end: 1rem;
	}

	.rb-wizard-nav {
		flex-direction: row;
		flex-wrap:      wrap;
		gap:            0.375rem;
	}

	.rb-wizard-nav__label { display: none; }

	.rb-wizard-nav__step {
		padding: 0.375rem;
	}

	.rb-wizard-content {
		padding: 1.5rem;
	}

	.rb-booking-form__row--two-col {
		grid-template-columns: 1fr;
	}

	.rb-wizard-actions { flex-wrap: wrap; }

	.rb-wizard-actions__btn--next,
	.rb-wizard-actions__btn--submit {
		margin-inline-start: 0;
		flex:                1;
		justify-content:     center;
	}
}

@media ( max-width: 480px ) {
	.rb-wizard-content {
		padding: 1.25rem 1rem;
	}

	.rb-time-grid__slots {
		gap: 0.375rem;
	}

	.rb-time-grid__slot {
		padding: 0.4375rem 0.625rem;
	}
}

/* =========================================================
 * 13. CONFIRMATION SCREEN
 * ========================================================= */

.rb-confirmation {
	border-radius: var(--rb-radius);
	overflow:      hidden;
	border:        1px solid var(--rb-border);
}

.rb-confirmation__header {
	background: var(--rb-primary);
	padding:    2rem 2rem 1.75rem;
	text-align: center;
}

.rb-confirmation__icon {
	inline-size:     52px;
	block-size:      52px;
	border-radius:   50%;
	border:          2px solid rgba(255, 255, 255, 0.3);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 1rem;
	color:           rgba(255, 255, 255, 0.9);
}

.rb-confirmation__heading {
	color:  #fff;
	margin: 0 0 4px;
}

.rb-confirmation__subheading {
	color:  rgba(255, 255, 255, 0.55);
	margin: 0;
}

.rb-confirmation__body {
	padding: 1.5rem 2rem 2rem;
}

.rb-confirmation__summary {
	background:       var(--rb-bg);
	border-radius:    var(--rb-radius-sm);
	padding:          1rem 1.25rem;
	margin-block-end: 1.25rem;
}

.rb-confirmation__row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding:         5px 0;
	font-size:       inherit !important;
	font-family:     inherit !important;
}

.rb-confirmation__row + .rb-confirmation__row {
	border-block-start: 1px solid var(--rb-border);
}

.rb-confirmation__label {
	color:       var(--rb-muted);
	font-size:   inherit !important;
	font-family: inherit !important;
}

.rb-confirmation__value {
	font-weight: 500;
	text-align:  end;
}

.rb-confirmation__deposit-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	font-size:     inherit !important;
	font-weight:   500;
	padding:       3px 10px;
	border-radius: 9999px;
	background:    #dcfce7;
	color:         #166534;
}

.rb-confirmation__cta {
	display: flex;
	gap:     10px;
}

.rb-confirmation__btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex:            1;
	padding:         0.75rem 1rem;
	border-radius:   var(--rb-radius-sm);
	font-size:       inherit !important;
	font-family:     inherit !important;
	font-weight:     500;
	text-decoration: none;
	text-align:      center;
	transition:      opacity var(--rb-transition);
}

.rb-confirmation__btn:hover {
	opacity:         0.85;
	text-decoration: none;
}

.rb-confirmation__btn--primary {
	background: var(--rb-primary);
	color:      #fff;
}

.rb-confirmation__btn--secondary {
	background: transparent;
	color:      inherit;
	border:     1px solid var(--rb-border);
}

@media ( max-width: 480px ) {
	.rb-confirmation__body {
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.rb-confirmation__cta {
		flex-direction: column;
	}
}

/* =========================================================
 * 14. CONSENT ITEMS (V3.2.0)
 * ========================================================= */

.rb-consent-items {
	display:          flex;
	flex-direction:   column;
	gap:              1rem;
	margin-block-end: 1.5rem;
}

.rb-consent-item__label {
	display:     flex;
	align-items: flex-start;
	gap:         0.625rem;
	font-size:   inherit !important;
	font-family: inherit !important;
	cursor:      pointer;
}

.rb-consent-item__checkbox {
	flex-shrink:        0;
	margin-block-start: 2px;
	inline-size:        18px;
	block-size:         18px;
	accent-color:       var(--rb-primary);
}