/*
 * Simple Bookings - Booking Form Styles
 *
 * Uses the Onshore Unified Support design tokens where available,
 * with hardcoded fallbacks so the form renders correctly even if the
 * theme variables are not yet loaded.
 *
 * Token reference (from onshore-unified-support/style.css):
 *   --color-navy, --color-orange, --color-slate-*, --font-sans, etc.
 */

/* ============================================================
   Custom properties (fallbacks if theme tokens are absent)
   ============================================================ */
.simple-bookings-container {
	--sb-navy:        var( --color-navy,        #0B1F3A );
	--sb-navy-mid:    var( --color-navy-mid,     #122848 );
	--sb-navy-light:  var( --color-navy-light,   #1A3A5C );
	--sb-orange:      var( --color-orange,       #E85D1A );
	--sb-orange-dk:   var( --color-orange-dark,  #C94E12 );
	--sb-slate-100:   var( --color-slate-100,    #F0F4F8 );
	--sb-slate-200:   var( --color-slate-200,    #D9E2EC );
	--sb-slate-400:   var( --color-slate-400,    #9FB3C8 );
	--sb-slate-600:   var( --color-slate-600,    #627D98 );
	--sb-slate-800:   var( --color-slate-800,    #2D3748 );
	--sb-white:       #ffffff;
	--sb-success:     #2E7D32;
	--sb-error:       #C62828;
	--sb-radius:      8px;
	--sb-font:        var( --font-sans, 'Inter', sans-serif );
}

/* ============================================================
   Container
   ============================================================ */
.simple-bookings-container,
.simple-bookings-container * {
	box-sizing: border-box;
}

.simple-bookings-container {
	font-family: var( --sb-font );
	color:       var( --sb-slate-800 );
	max-width:   780px;
	margin:      0 auto;
}

/* ============================================================
   Unavailable / admin notice fallback states
   ============================================================ */
.simple-bookings-unavailable p,
.simple-bookings-admin-notice {
	padding:       16px 20px;
	background:    var( --sb-slate-100 );
	border-left:   3px solid var( --sb-slate-400 );
	border-radius: 0 var( --sb-radius ) var( --sb-radius ) 0;
	font-size:     0.9rem;
	color:         var( --sb-slate-600 );
}

/* ============================================================
   Loading state
   ============================================================ */
.sb-loading {
	display:         flex;
	align-items:     center;
	gap:             12px;
	padding:         40px 0;
	justify-content: center;
	color:           var( --sb-slate-600 );
	font-size:       0.95rem;
}

.sb-spinner {
	display:       inline-block;
	width:         20px;
	height:        20px;
	border:        3px solid var( --sb-slate-200 );
	border-top-color: var( --sb-orange );
	border-radius: 50%;
	animation:     sb-spin 0.7s linear infinite;
}

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

/* ============================================================
   Card shell
   ============================================================ */
.sb-card {
	background:    var( --sb-white );
	border-radius: var( --sb-radius );
	box-shadow:    0 2px 20px rgba( 11, 31, 58, 0.10 );
	overflow:      hidden;
}

.sb-card-body {
	padding: 28px 32px;
}

/* ============================================================
   Step indicator
   ============================================================ */
.sb-steps {
	display:       flex;
	align-items:   center;
	padding:       18px 32px;
	background:    var( --sb-slate-100 );
	border-bottom: 1px solid var( --sb-slate-200 );
}

.sb-step {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.8rem;
	font-weight: 600;
	color:       var( --sb-slate-400 );
}

.sb-step--active { color: var( --sb-navy ); }
.sb-step--done   { color: var( --sb-success ); }

.sb-step__num {
	width:          24px;
	height:         24px;
	border-radius:  50%;
	background:     var( --sb-slate-200 );
	color:          var( --sb-slate-600 );
	display:        flex;
	align-items:    center;
	justify-content: center;
	font-size:      0.75rem;
	font-weight:    700;
	flex-shrink:    0;
}

.sb-step--active .sb-step__num {
	background: var( --sb-navy );
	color:      var( --sb-white );
}

.sb-step--done .sb-step__num {
	background: var( --sb-success );
	color:      var( --sb-white );
}

.sb-step__connector {
	flex:       1;
	height:     2px;
	background: var( --sb-slate-200 );
	margin:     0 6px;
	max-width:  48px;
}

/* ============================================================
   Error banner
   ============================================================ */
.sb-error {
	padding:       12px 16px;
	background:    #FFF3F3;
	border-left:   3px solid var( --sb-error );
	border-radius: 0 6px 6px 0;
	color:         var( --sb-error );
	font-size:     0.875rem;
	margin-bottom: 20px;
}

/* ============================================================
   Step 1: Calendar + Time panel (Option A2)
   ============================================================ */
.sb-step1 {
	display:   grid;
	grid-template-columns: 1fr 1fr;
	gap:       32px;
	align-items: start;
}

@media ( max-width: 600px ) {
	.sb-step1 {
		grid-template-columns: 1fr;
	}
}

/* -- Calendar -------------------------------------------- */
.sb-cal__nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   14px;
}

.sb-cal__month {
	font-size:   1rem;
	font-weight: 700;
	color:       var( --sb-navy );
}

.sb-cal__nav-btn {
	background:    none;
	border:        1px solid var( --sb-slate-200 );
	border-radius: 6px;
	width:         32px;
	height:        32px;
	cursor:        pointer;
	font-size:     1rem;
	color:         var( --sb-navy );
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background 0.15s;
	font-family:   var( --sb-font );
}

.sb-cal__nav-btn:hover { background: var( --sb-slate-100 ); }

.sb-cal__grid {
	display:               grid;
	grid-template-columns: repeat( 7, 1fr );
	gap:                   3px;
}

.sb-cal__hdr {
	text-align:  center;
	font-size:   0.7rem;
	font-weight: 600;
	color:       var( --sb-slate-600 );
	text-transform: uppercase;
	padding:     4px 0 8px;
}

.sb-cal__cell {
	aspect-ratio:    1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   6px;
	font-size:       0.875rem;
	font-weight:     500;
	transition:      background 0.12s, color 0.12s, border-color 0.12s;
}

.sb-cal__cell--empty       { background: transparent; }
.sb-cal__cell--past        { color: var( --sb-slate-200 ); cursor: default; }
.sb-cal__cell--unavailable { color: var( --sb-slate-400 ); cursor: default; }

.sb-cal__cell--available {
	color:         var( --sb-navy );
	border:        1px solid var( --sb-slate-200 );
	cursor:        pointer;
}

.sb-cal__cell--available:hover,
.sb-cal__cell--available:focus {
	background:   var( --sb-navy );
	color:        var( --sb-white );
	border-color: var( --sb-navy );
	outline:      none;
}

.sb-cal__cell--selected {
	background:   var( --sb-navy );
	color:        var( --sb-white );
	border:       1px solid var( --sb-navy );
}

.sb-cal__cell--today {
	border: 2px solid var( --sb-orange ) !important;
}

/* -- Time panel ------------------------------------------ */
.sb-time-panel {
	min-height: 200px;
}

.sb-time-panel__hint,
.sb-time-panel__none {
	color:     var( --sb-slate-600 );
	font-size: 0.9rem;
	margin:    20px 0 0;
}

.sb-time-panel__date {
	font-size:   0.8rem;
	font-weight: 700;
	color:       var( --sb-slate-600 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.sb-time-panel__tz {
	font-size:   0.72rem;
	color:       var( --sb-slate-500, #64748b );
	margin:      0 0 14px;
}

.sb-time-list {
	display:               grid;
	grid-template-columns: repeat( 2, 1fr );
	gap:                   8px;
}

.sb-time-slot {
	padding:       10px 8px;
	text-align:    center;
	border:        1px solid var( --sb-slate-200 );
	border-radius: 6px;
	font-size:     0.875rem;
	font-weight:   500;
	color:         var( --sb-navy );
	cursor:        pointer;
	background:    var( --sb-white );
	font-family:   var( --sb-font );
	transition:    all 0.12s;
}

.sb-time-slot:hover,
.sb-time-slot:focus {
	border-color: var( --sb-orange );
	color:        var( --sb-orange );
	outline:      none;
}

.sb-time-slot--selected {
	background:   var( --sb-orange );
	color:        var( --sb-white );
	border-color: var( --sb-orange );
}

.sb-time-slot--selected:hover,
.sb-time-slot--selected:focus {
	background:   var( --sb-orange-dk );
	border-color: var( --sb-orange-dk );
	color:        var( --sb-white );
}

/* ============================================================
   Step 2: Contact form
   ============================================================ */
.sb-step2 { }

.sb-summary-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	background:      var( --sb-navy-light );
	color:           var( --sb-white );
	padding:         10px 16px;
	border-radius:   6px;
	font-size:       0.875rem;
	margin-bottom:   24px;
}

.sb-summary-bar__text { font-weight: 600; }

.sb-summary-bar__change {
	background:  none;
	border:      none;
	color:       var( --sb-slate-400 );
	font-size:   0.8rem;
	cursor:      pointer;
	font-family: var( --sb-font );
	transition:  color 0.12s;
}

.sb-summary-bar__change:hover { color: var( --sb-white ); }

.sb-form { }

.sb-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     16px;
}

@media ( max-width: 480px ) {
	.sb-form__row { grid-template-columns: 1fr; }
}

.sb-form__field {
	display:        flex;
	flex-direction: column;
	gap:            5px;
	margin-bottom:  16px;
}

.sb-form__field label {
	font-size:   0.8rem;
	font-weight: 600;
	color:       var( --sb-slate-800 );
}

.sb-req   { color: var( --sb-orange ); }
.sb-opt   { font-weight: 400; color: var( --sb-slate-600 ); font-size: 0.75rem; }

.sb-form__field input,
.sb-form__field textarea {
	padding:       10px 14px;
	border:        1px solid var( --sb-slate-200 );
	border-radius: 6px;
	font-family:   var( --sb-font );
	font-size:     0.9rem;
	color:         var( --sb-slate-800 );
	background:    var( --sb-white );
	outline:       none;
	transition:    border-color 0.15s;
}

.sb-form__field input:focus,
.sb-form__field textarea:focus {
	border-color: var( --sb-navy );
}

.sb-form__field textarea {
	resize:     vertical;
	min-height: 90px;
}

.sb-input--error {
	border-color: var( --sb-error ) !important;
}

/* ============================================================
   Step 3: Review / confirmation
   ============================================================ */
.sb-review {
	background:    var( --sb-slate-100 );
	border-radius: var( --sb-radius );
	padding:       20px 24px;
	margin-bottom: 20px;
}

.sb-review__row {
	display:       flex;
	gap:           12px;
	font-size:     0.875rem;
	padding:       6px 0;
	border-bottom: 1px solid var( --sb-slate-200 );
}

.sb-review__row:last-child { border-bottom: none; }

.sb-review__label {
	font-weight: 600;
	color:       var( --sb-slate-600 );
	flex-shrink: 0;
	width:       80px;
}

.sb-review__value {
	color:     var( --sb-slate-800 );
	word-break: break-word;
}

.sb-confirm-note {
	background:    #EAF4EA;
	border-radius: 6px;
	padding:       14px 16px;
	font-size:     0.875rem;
	color:         var( --sb-success );
	margin-bottom: 20px;
}

/* ============================================================
   Buttons
   ============================================================ */
.sb-btn-row {
	display:         flex;
	gap:             12px;
	justify-content: flex-end;
	margin-top:      24px;
}

.sb-btn {
	padding:       11px 24px;
	border-radius: 6px;
	font-family:   var( --sb-font );
	font-size:     0.875rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    background 0.15s, color 0.15s;
	border:        none;
	line-height:   1;
}

.sb-btn--primary {
	background: var( --sb-orange );
	color:      var( --sb-white );
}

.sb-btn--primary:hover  { background: var( --sb-orange-dk ); }

.sb-btn--secondary {
	background: var( --sb-white );
	color:      var( --sb-navy );
	border:     1px solid var( --sb-slate-200 );
}

.sb-btn--secondary:hover { background: var( --sb-slate-100 ); }

.sb-btn--loading {
	opacity: 0.7;
	cursor:  not-allowed;
}

/* ============================================================
   Step 4: Success screen
   ============================================================ */
.sb-success {
	text-align: center;
	padding:    48px 32px;
}

.sb-success__icon {
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      var( --sb-success );
	color:           var( --sb-white );
	font-size:       1.75rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 20px;
}

.sb-success__heading {
	font-size:     1.4rem;
	font-weight:   700;
	color:         var( --sb-navy );
	margin-bottom: 8px;
}

.sb-success__detail {
	font-size:     1rem;
	color:         var( --sb-slate-800 );
	margin-bottom: 16px;
}

.sb-success__note {
	font-size:  0.875rem;
	color:      var( --sb-slate-600 );
	max-width:  420px;
	margin:     0 auto;
	line-height: 1.6;
}

/* ============================================================
   Fetch failure fallback
   ============================================================ */
.sb-fallback {
	text-align: center;
	padding:    48px 32px;
	background: var( --sb-white, #ffffff );
	border:     1px solid var( --sb-slate-200, #e2e8f0 );
	border-radius: 10px;
}

.sb-fallback__icon {
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      #fff3cd;
	color:           #856404;
	font-size:       1.75rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 20px;
}

.sb-fallback__heading {
	font-size:     1.25rem;
	font-weight:   700;
	color:         var( --sb-navy );
	margin:        0 0 10px;
}

.sb-fallback__detail {
	font-size:     0.95rem;
	color:         var( --sb-slate-600 );
	max-width:     480px;
	margin:        0 auto 24px;
	line-height:   1.6;
}