/* ── Booking Calendar — component styles only ──────────────────────────────
   Structural page layout (columns, image sizing, form rows) is intentionally
   absent. Bricks Builder controls placement; this file owns only the widget
   internals: calendar cells, slot buttons, summary card, form inputs, etc.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens — Electric Solarium dark palette ───────────────────────── */

.bc-app {
	/* Primary: Icy Solarium Cyan */
	--bc-primary:      #7DD3FC;
	--bc-primary-h:    #38bdf8;
	/* Muted / booked */
	--bc-booked:       rgba( 125, 211, 252, 0.12 );
	--bc-booked-text:  rgba( 242, 242, 240, 0.45 );
	/* Past / disabled */
	--bc-past:         rgba( 128, 128, 128, 0.10 );
	--bc-past-text:    rgba( 128, 128, 128, 0.40 );
	/* Surfaces & borders */
	--bc-border:       rgba( 125, 211, 252, 0.22 );
	--bc-border-accent:rgba( 125, 211, 252, 0.50 );
	--bc-bg:           rgba( 125, 211, 252, 0.09 );   /* icy-blue input surface  */
	--bc-bg-alt:       rgba( 125, 211, 252, 0.05 );   /* icy-blue calendar tint  */
	/* Neon glow shorthands */
	--bc-glow-sm:      0 0 8px  rgba( 125, 211, 252, 0.55 );
	--bc-glow-md:      0 0 14px rgba( 125, 211, 252, 0.55 ), 0 0 30px rgba( 125, 211, 252, 0.25 );
	/* Shape */
	--bc-radius:       4px;
	--bc-gap:          0.5rem;
	/* Status */
	--bc-success:      #34d399;
	--bc-error:        #f87171;
	/* Package */
	--bc-pkg-bg:       rgba( 125, 211, 252, 0.08 );
	--bc-pkg-border:   rgba( 125, 211, 252, 0.25 );
	--bc-pkg-text:     #7DD3FC;
	/* Base text */
	color:             #F2F2F0;
}

/* ── Outer shell ───────────────────────────────────────────────────────────── */

.bc-wrap {
	font-family:   inherit;
	box-sizing:    border-box;
}

/* ── Picker groups (label stacked above select) ────────────────────────────── */

.bc-picker-group {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
	margin-bottom:  0.45rem;
}

.bc-picker-label {
	font-size:      0.75rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var( --bc-booked-text );
}

.bc-select {
	width:         100%;
	padding:       0.5rem 0.75rem;
	border:        1.5px solid rgba( 125, 211, 252, 0.4 );
	border-radius: var( --bc-radius );
	background:    rgba( 125, 211, 252, 0.09 );
	font-size:     0.95rem;
	color:         #F2F2F0;
	cursor:        pointer;
	box-sizing:    border-box;
	transition:    border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.bc-select:focus {
	border-color: var( --bc-primary );
	outline:      none;
	background:   rgba( 125, 211, 252, 0.14 );
	box-shadow:   0 0 0 3px rgba( 125, 211, 252, 0.25 );
}

/* Force select option readability */
.bc-select option {
	background: #0d1f2d;   /* dark teal — readable in most Chromium popup lists */
	color:      #F2F2F0;
}

.bc-select option:hover,
.bc-select option:checked {
	background: rgba( 125, 211, 252, 0.25 );
	color:      #7DD3FC;
}

/* ── Calendar widget ───────────────────────────────────────────────────────── */

.bc-calendar {
	border:                  1.5px solid rgba( 125, 211, 252, 0.35 );
	border-top:              2px   solid rgba( 125, 211, 252, 0.80 );
	border-left:             2px   solid rgba( 125, 211, 252, 0.50 );
	border-radius:           var( --bc-radius );
	overflow:                hidden;
	background:              rgba( 125, 211, 252, 0.07 );
	backdrop-filter:         blur( 15px );
	-webkit-backdrop-filter: blur( 15px );
	box-shadow:              inset 0 0 0 1px rgba( 125, 211, 252, 0.08 ), 0 8px 20px rgba( 0, 0, 0, 0.4 );
	transition:              opacity 0.35s ease;
}

/* Visible but non-interactive until service + duration are chosen. */
.bc-cal--locked {
	opacity:        0.3;
	pointer-events: none;
}

/* Calendar header */

.bc-cal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.65rem 0.9rem;
	background:      var( --bc-bg-alt );
	border-bottom:   1px solid var( --bc-border );
}

.bc-cal-header h2 {
	font-size:   1.0rem;
	font-weight: 700;
	margin:      0;
	color:       var( --bc-primary );
	letter-spacing: 0.04em;
}

.bc-cal-nav {
	background:    rgba( 125, 211, 252, 0.08 );
	border:        1.5px solid rgba( 125, 211, 252, 0.35 );
	border-radius: calc( var( --bc-radius ) - 0.1rem );
	cursor:        pointer;
	font-size:     1.1rem;
	line-height:   1;
	padding:       0.22rem 0.6rem;
	color:         var( --bc-primary );
	transition:    background 0.15s, box-shadow 0.15s;
}

.bc-cal-nav:hover {
	background:  rgba( 125, 211, 252, 0.18 );
	box-shadow:  var( --bc-glow-sm );
}

/* Day-name row */

.bc-day-names,
.bc-days {
	display:               grid;
	grid-template-columns: repeat( 7, 1fr );
	gap:                   var( --bc-gap );
	padding:               0.5rem;
}

.bc-day-names {
	padding-bottom: 0;
}

.bc-day-names span {
	text-align:     center;
	font-size:      0.68rem;
	font-weight:    700;
	color:          rgba( 125, 211, 252, 0.60 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Day cells */

.bc-day {
	aspect-ratio:  1;
	border:        none;
	border-radius: var( --bc-radius );
	cursor:        pointer;
	font-size:     0.88rem;
	font-weight:   500;
	transition:    background 0.15s, color 0.15s, box-shadow 0.15s;
	background:    transparent;
	color:         #F2F2F0;
}

.bc-day--empty {
	background:     none;
	pointer-events: none;
}

.bc-day:not( :disabled ):not( .bc-day--empty ):hover {
	background: rgba( 125, 211, 252, 0.15 );
	color:      var( --bc-primary );
}

.bc-day--past,
.bc-day:disabled {
	background: rgba( 125, 211, 252, 0.04 ) !important;
	color:      rgba( 242, 242, 240, 0.28 ) !important;
	cursor:     default !important;
	pointer-events: none !important;
}

.bc-day--selected {
	background:  var( --bc-primary )      !important;
	color:       #0A0A0A                  !important;
	font-weight: 700;
	box-shadow:  var( --bc-glow-sm )      !important;
}

/* ── Time slot section ─────────────────────────────────────────────────────── */

.bc-slots {
	margin-top:  0.35rem;
	padding-top: 0.45rem;
	border-top:  1px solid var( --bc-border );
}

.bc-section-title {
	font-size:      0.82rem;
	font-weight:    700;
	color:          rgba( 125, 211, 252, 0.65 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin:         0 0 0.35rem;
}

.bc-slot-list {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.3rem;
}

.bc-slot-btn {
	border:        1.5px solid rgba( 125, 211, 252, 0.5 );
	border-radius: var( --bc-radius );
	background:    rgba( 125, 211, 252, 0.07 );
	color:         var( --bc-primary );
	cursor:        pointer;
	font-size:     0.82rem;
	font-weight:   500;
	padding:       0.22rem 0.6rem;
	transition:    background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
	white-space:   nowrap;
	line-height:   1.4;
}

.bc-slot-btn:hover:not( :disabled ):not( .bc-slot-btn--selected ) {
	background:  rgba( 125, 211, 252, 0.22 );
	border-color:var( --bc-primary );
	box-shadow:  var( --bc-glow-sm );
	color:       var( --bc-primary );
}

.bc-slot-btn--selected {
	background:  var( --bc-primary );
	border-color:var( --bc-primary );
	color:       #0A0A0A;
	font-weight: 700;
	box-shadow:  var( --bc-glow-sm );
}

.bc-slot-btn--booked,
.bc-slot-btn:disabled {
	border-color:    var( --bc-booked );
	color:           var( --bc-booked-text );
	cursor:          not-allowed;
	text-decoration: line-through;
}

/* ── Selection summary ─────────────────────────────────────────────────────── */

.bc-summary {
	margin-top:    1.5rem;
	background:    var( --bc-bg-alt );
	border:        1px solid var( --bc-border );
	border-radius: var( --bc-radius );
	padding:       1.5rem;
}

.bc-sum-hdr {
	margin-bottom:  1rem;
	padding-bottom: 1rem;
	border-bottom:  1px solid var( --bc-border );
}

.bc-sum-title {
	font-size:   1.2rem;
	font-weight: 700;
	margin:      0 0 0.3rem;
}

.bc-sum-desc {
	font-size:   0.875rem;
	color:       var( --bc-booked-text );
	margin:      0;
	line-height: 1.55;
}

.bc-sum-meta {
	margin-bottom:  1rem;
	padding-bottom: 1rem;
	border-bottom:  1px solid var( --bc-border );
}

.bc-meta-lbl {
	font-size:      0.68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var( --bc-booked-text );
	display:        block;
	margin-bottom:  0.15rem;
}

.bc-meta-val {
	font-size:   0.95rem;
	font-weight: 600;
}

/* ── Package option ─────────────────────────────────────────────────────────── */

.bc-pkg-option {
	margin-bottom: 1rem;
	padding:       0.5rem 0.75rem;
	background:    var( --bc-pkg-bg );
	border:        1px solid var( --bc-pkg-border );
	border-radius: var( --bc-radius );
}

.bc-pkg-label {
	display:     flex;
	align-items: center;
	gap:         0.45rem;
	font-size:   0.875rem;
	font-weight: 600;
	color:       var( --bc-pkg-text );
	cursor:      pointer;
	margin:      0;
	user-select: none;
}

.bc-pkg-chk {
	accent-color: var( --bc-success );
	width:        1rem;
	height:       1rem;
	cursor:       pointer;
	flex-shrink:  0;
}

/* ── Booking form ───────────────────────────────────────────────────────────── */

.bc-form {
	display:        flex;
	flex-direction: column;
	gap:            0.3rem;
}

.bc-field {
	display:        flex;
	flex-direction: column;
}

.bc-input {
	height:         34px                                    !important;
	min-height:     0                                       !important;
	max-height:     34px                                    !important;
	margin:         3px 0;
	padding-top:    0                                       !important;
	padding-bottom: 0                                       !important;
	padding-left:   0.75rem                                 !important;
	padding-right:  0.75rem                                 !important;
	border:         1.5px solid rgba( 125, 211, 252, 0.40 ) !important;
	border-radius:  var( --bc-radius )                      !important;
	font-size:      0.95rem                                 !important;
	line-height:    32px                                    !important;
	color:          #F2F2F0                                 !important;
	background:     rgba( 125, 211, 252, 0.09 )             !important;
	box-sizing:     border-box                              !important;
	width:          100%                                    !important;
	transition:     border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.bc-input:focus {
	border-color: var( --bc-primary )                    !important;
	outline:      none                                   !important;
	background:   rgba( 125, 211, 252, 0.14 )            !important;
	box-shadow:   0 0 0 3px rgba( 125, 211, 252, 0.22 ) !important;
}

.bc-input::placeholder { color: rgba( 125, 211, 252, 0.40 ) !important; }

/* Form status message */

.bc-form-msg {
	font-size:     0.875rem;
	padding:       0.5rem 0.75rem;
	border-radius: var( --bc-radius );
	margin:        0;
}

.bc-form-msg--ok    { background: rgba( 52, 211, 153, 0.1 ); color: #34d399; border: 1px solid rgba( 52, 211, 153, 0.3 ); }
.bc-form-msg--error { background: rgba( 248, 113, 113, 0.1 ); color: #f87171; border: 1px solid rgba( 248, 113, 113, 0.3 ); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.bc-btn-primary {
	background:     var( --bc-primary );
	border:         2px solid rgba( 125, 211, 252, 0.85 );
	border-radius:  var( --bc-radius );
	color:          #0A0A0A;
	cursor:         pointer;
	font-size:      0.95rem;
	font-weight:    700;
	padding:        0.6rem 1.6rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	box-shadow:     var( --bc-glow-md );
	transition:     background 0.15s, box-shadow 0.2s, opacity 0.15s;
}

.bc-btn-primary:hover:not( :disabled ) {
	background:  var( --bc-primary-h );
	border-color:var( --bc-primary-h );
	box-shadow:  0 0 22px rgba( 125, 211, 252, 0.80 ), 0 0 50px rgba( 125, 211, 252, 0.35 );
}

.bc-btn-primary:disabled {
	opacity: 0.50;
	cursor:  not-allowed;
	box-shadow: none;
}

.bc-btn-secondary {
	background:    rgba( 125, 211, 252, 0.07 );
	border:        1.5px solid rgba( 125, 211, 252, 0.55 );
	border-radius: var( --bc-radius );
	color:         var( --bc-primary );
	cursor:        pointer;
	font-size:     0.9rem;
	font-weight:   600;
	padding:       0.5rem 1.2rem;
	letter-spacing:0.05em;
	transition:    background 0.15s, color 0.15s, box-shadow 0.15s;
}

.bc-btn-secondary:hover {
	background:  var( --bc-primary );
	color:       #0A0A0A;
	box-shadow:  var( --bc-glow-sm );
}

/* ── Confirmation screen ────────────────────────────────────────────────────── */

.bc-confirm {
	margin-top:              0;
	text-align:              center;
	padding:                 2.5rem 1.5rem;
	border:                  1.5px solid rgba( 125, 211, 252, 0.40 );
	border-top:              2px   solid rgba( 125, 211, 252, 0.85 );
	border-left:             2px   solid rgba( 125, 211, 252, 0.55 );
	border-radius:           var( --bc-radius );
	background:              rgba( 125, 211, 252, 0.06 );
	backdrop-filter:         blur( 15px );
	-webkit-backdrop-filter: blur( 15px );
	box-shadow:              inset 0 0 0 1px rgba( 125, 211, 252, 0.08 ), 0 10px 20px rgba( 0, 0, 0, 0.45 );
}

.bc-confirm-icon {
	width:           3.5rem;
	height:          3.5rem;
	background:      rgba( 125, 211, 252, 0.1 );
	border:          1px solid rgba( 125, 211, 252, 0.3 );
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 1rem;
	color:           var( --bc-primary );
}

.bc-confirm-heading {
	font-size:   1.1rem;
	font-weight: 700;
	margin:      0 0 0.25rem;
	color:       var( --bc-primary );
}

.bc-confirm-sub {
	color:     var( --bc-booked-text );
	font-size: 0.875rem;
	margin:    0 0 1.25rem;
}

.bc-confirm-details {
	background:    var( --bc-bg-alt );
	border:        1px solid var( --bc-border );
	border-radius: var( --bc-radius );
	margin:        0 auto 0.25rem;
	max-width:     18rem;
	padding:       0.75rem 1rem;
	text-align:    left;
}

.bc-confirm-row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	gap:             1rem;
	padding:         0.35rem 0;
	border-bottom:   1px solid var( --bc-border );
}

.bc-confirm-row:last-child { border-bottom: none; }

.bc-confirm-row dt {
	color:          rgba( 125, 211, 252, 0.65 );
	font-size:      0.82rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space:    nowrap;
}

.bc-confirm-row dd {
	font-size:   0.95rem;
	font-weight: 600;
	margin:      0;
	color:       #F2F2F0;
	text-align:  right;
}

.bc-confirm-actions {
	display:         flex;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             0.6rem;
	margin-top:      1.25rem;
}

.bc-add-cal {
	display:         inline-flex;
	align-items:     center;
	gap:             0.35rem;
	text-decoration: none;
}

/* ── Bricks element fade transitions ────────────────────────────────────────
   JS tags elements with .bc-fade-target to opt them into opacity transitions.
   Toggling .bc-fade-out drives the animation — no JS animation frame needed.
   !important guards against Bricks inline styles that might override opacity.  */

.bc-fade-target {
	transition: opacity 0.35s ease;
}

.bc-fade-out {
	opacity:        0 !important;
	pointer-events: none !important;
}

/* ── Treatment image box (#bc-treatment-image) ──────────────────────────── */

/* Default instruction text — visible until a service is chosen. */
.bc-img-default {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	min-height:      180px;
	color:           var( --bc-booked-text );
	font-size:       0.875rem;
	text-align:      center;
	padding:         1rem;
	box-sizing:      border-box;
}

/* Service image — fills the container; crossfades in when service is selected. */
.bc-svc-img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Title overlay — sits on top of the image, anchored to the bottom. */
.bc-img-title-overlay {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    10;
	padding:    0.6rem 0.85rem;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.55 ) );
	color:      #fff;
	font-size:  0.95rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ── Treatment description (#bc-treatment-description) ───────────────────── */

.bc-desc-title {
	display:       block;
	font-weight:   700;
	font-size:     1rem;
	margin-bottom: 0.4rem;
}

.bc-desc-text {
	font-size:   0.875rem;
	color:       var( --bc-booked-text );
	line-height: 1.55;
	margin:      0;
}

/* ── Treatment details card (#bc-treatment-details) ─────────────────────── */

.bc-details-stack {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

/* Individual info row: Duration / Price / Date / Time */
.bc-detail-row {
	margin:      0;
	line-height: 1.5;
	font-size:   0.85rem;
}

/* Label / value pair inside each detail row */
.bc-label-mute {
	font-style: italic;
	color:      rgba( 125, 211, 252, 0.55 );
	font-size:  0.80rem;
}

.bc-value {
	font-weight: 600;
	color:       var( --bc-primary );
	font-size:   0.85rem;
}

/* ── Appointment summary strip removed — details shown in #bc-treatment-details ── */

/* ── Nudge animation ─────────────────────────────────────────────────────────
   Applied by nudge() when the user tries to skip a required step.             */

@keyframes bc-nudge {
	0%   { outline: 2px solid transparent; }
	30%  { outline: 2px solid var( --bc-primary ); outline-offset: 3px; }
	100% { outline: 2px solid transparent; }
}

.bc-nudge {
	animation:     bc-nudge 0.8s ease-out forwards;
	border-radius: var( --bc-radius );
}

/* ── Empty / error inline states ─────────────────────────────────────────────── */

.bc-empty {
	color:     var( --bc-booked-text );
	font-size: 0.875rem;
	margin:    0;
	padding:   0.5rem 0;
}

.bc-empty--error { color: #b91c1c; }

/* ── Accessibility ───────────────────────────────────────────────────────────── */

.bc-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border:     0;
}