/*
 * mod_magnetchair — layout & states.
 * Inputs/buttons inherit the site design via the theme's UIkit classes
 * (uk-input, uk-select, uk-button); this file only adds layout, the loader,
 * the day navigation and the slot selection states in the brand colours.
 */
.magnetchair { max-width: 710px; margin: 0 auto; }
.magnetchair .mc-field { margin-bottom: .75rem; display: flex; flex-direction: column; }
.magnetchair label { font-weight: 700; margin-bottom: .25rem; }

/* Inputs/select styled like the theme buttons: pill shape, transparent fill,
   dark 2px border. */
.magnetchair .uk-input,
.magnetchair .uk-select {
	background: transparent;
	border: 2px solid #1e1e1e;
	border-radius: 20px;
	color: #1e1e1e;
	height: 40px;
	padding: 0 15px;
}
.magnetchair .uk-select { padding-right: 2.2rem; }
.magnetchair .uk-input:focus,
.magnetchair .uk-select:focus {
	background: rgba(255, 255, 255, .3);
	border-color: #1e1e1e;
	outline: none;
}

/* Package cards (radio cards): outline pills, selected = inverted colours */
.magnetchair .mc-label { font-weight: 700; margin-bottom: .25rem; display: block; }
.magnetchair .mc-packages { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Desktop: all four blocks side by side; narrow screens wrap to 2 / 1 columns. */
.magnetchair .mc-package { flex: 1 1 140px; min-width: 130px; cursor: pointer; }
.magnetchair .mc-package input { position: absolute; opacity: 0; pointer-events: none; }
.magnetchair .mc-package-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: .25rem;
	padding: 1rem .75rem;
	border: 2px solid #1e1e1e;
	border-radius: 20px;
	color: #1e1e1e;
	transition: background-color .15s ease-in-out, color .15s ease-in-out, transform .15s ease-in-out;
}
.magnetchair .mc-package:hover .mc-package-card { transform: translateY(-2px); }
.magnetchair .mc-package input:checked + .mc-package-card {
	background: #1e1e1e;
	color: #fcbe40;
}
.magnetchair .mc-package input:focus-visible + .mc-package-card { outline: 2px dashed #1e1e1e; outline-offset: 3px; }
.magnetchair .mc-package-title { font-weight: 700; font-size: 19px; }
.magnetchair .mc-package-sub { font-size: 13px; line-height: 1.35; opacity: .85; }

/* Highlighted recommendation note (trial training / instruction) */
.magnetchair .mc-note {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	background: #1e1e1e;
	color: #fcbe40;
	border-radius: 12px;
	font-size: 15.5px;
	line-height: 1.55;
}
.magnetchair .mc-note a { color: #fcbe40; font-weight: 700; text-decoration: underline; white-space: nowrap; }

.magnetchair .mc-intro { margin-bottom: 1.25rem; }
.magnetchair .mc-intro h3 { margin-bottom: .4rem; }
.magnetchair .mc-intro p { margin: 0; }

.magnetchair .mc-field-row { display: flex; gap: .75rem; }
.magnetchair .mc-field-zip { flex: 0 0 30%; }
.magnetchair .mc-field-city { flex: 1; }

/* Buttons sit close to their field. */
.magnetchair .mc-code-form .mc-field { margin-bottom: .6rem; }
.magnetchair form button[type="submit"] { margin-top: 0; }
.magnetchair .mc-book { margin-top: .75rem; }

/* Code card after "login": dark panel with code, credit and change button */
.magnetchair .mc-codebar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	background: #1e1e1e;
	color: #fcbe40;
	border-radius: 20px;
	padding: 1.1rem 1.4rem;
	margin-bottom: 1.5rem;
}
.magnetchair .mc-codebar-info { display: flex; flex-direction: column; }
.magnetchair .mc-codebar-caption { font-size: 13px; opacity: .75; }
.magnetchair .mc-codebar-code { font-size: 26px; font-weight: 700; letter-spacing: .18em; line-height: 1.2; }
.magnetchair .mc-codebar-value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.magnetchair .mc-change-code {
	background: transparent;
	color: #fcbe40;
	border: 2px solid #fcbe40;
}
.magnetchair .mc-change-code:hover { background: #fcbe40; color: #1e1e1e; }

/* Customer's upcoming reservations with cancel buttons */
.magnetchair .mc-myreservations { margin-bottom: 1.5rem; }
.magnetchair .mc-myreservations h4 { font-size: 18px; font-weight: 700; margin: 0 0 .75rem; }
.magnetchair .mc-myres-item {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	border: 2px solid #1e1e1e;
	border-radius: 16px;
	padding: .7rem 1rem;
	margin-bottom: .6rem;
}
.magnetchair .mc-myres-label { font-weight: 700; }
.magnetchair .mc-cancel {
	background: transparent;
	color: #b00020;
	border: 2px solid #b00020;
}
.magnetchair .mc-cancel:hover { background: #b00020; color: #fff; }

/* "Buy a block" CTA on the reservation page / "reserve" CTA on the buy page */
.magnetchair .mc-buy-cta,
.magnetchair .mc-reserve-cta { margin: 1.75rem 0 .5rem; }
.magnetchair .mc-buy-cta p,
.magnetchair .mc-reserve-cta p { margin: 0 0 .75rem; }

/* Empty-credit notice with buy link */
.magnetchair .mc-empty { margin: 1rem 0; }
.magnetchair .mc-empty p { font-weight: 700; margin: 0 0 .75rem; }

/* Selected slot summary */
.magnetchair .mc-selected { margin: 1rem 0 .25rem; font-weight: 700; }

/* Messages */
.magnetchair .mc-message { margin: 1rem 0; font-weight: 700; }
.magnetchair .mc-message.error { color: #b00020; }
.magnetchair .mc-message.success { color: #1e6b1e; }

/* Loader */
.magnetchair .mc-loader { display: flex; align-items: center; gap: .6rem; margin: .9rem 0; }
.magnetchair .mc-spinner {
	width: 1.25rem; height: 1.25rem; flex: none;
	border: 3px solid rgba(30, 30, 30, .25);
	border-top-color: #1e1e1e;
	border-radius: 50%;
	animation: mc-spin .8s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Day navigation: ‹  Datum  › */
.magnetchair .mc-daynav {
	display: flex; align-items: center; justify-content: space-between;
	gap: .5rem; margin: 1rem 0;
}
.magnetchair .mc-day-btn {
	flex: none;
	min-width: 3rem;
	padding: 0 1rem;
	font-size: 22px;
	line-height: 40px;
}
.magnetchair .mc-day-btn:disabled { opacity: .35; cursor: default; }
.magnetchair .mc-day-label { font-weight: 700; font-size: 19px; text-align: center; flex: 1; }

/* Slot buttons (outline pills; selected = inverted brand colours) */
.magnetchair .mc-slot-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 1rem; }
.magnetchair .mc-slot {
	font-size: 16px;
	line-height: 40px;
	padding: 0 18px;
}
.magnetchair .mc-slot,
.magnetchair .mc-day-btn {
	background: transparent;
	color: #1e1e1e;
	border: 2px solid #1e1e1e;
}
.magnetchair .mc-slot:hover,
.magnetchair .mc-day-btn:hover:not(:disabled) {
	background: #1e1e1e;
	color: #fcbe40;
}
.magnetchair .mc-slot.selected {
	background: #1e1e1e;
	color: #fcbe40;
	border-color: #1e1e1e;
}

.magnetchair [hidden] { display: none !important; }

/* Custom confirm modal (appended to <body>, so classes are not scoped) */
.mc-modal-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.mc-modal {
	background: #fff;
	color: #1e1e1e;
	border-radius: 18px;
	width: 100%;
	max-width: 400px;
	padding: 1.6rem;
	box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
	font-family: inherit;
}
.mc-modal-text { font-weight: 700; font-size: 17px; margin: 0 0 1.4rem; }
.mc-modal-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.mc-modal-btn { font-size: 15px; }
.mc-modal-cancel { background: transparent; color: #1e1e1e; border: 2px solid #1e1e1e; }
.mc-modal-cancel:hover { background: #1e1e1e; color: #fff; }
.mc-modal-ok { background: #b00020; color: #fff; border: 2px solid #b00020; }
.mc-modal-ok:hover { background: #900018; border-color: #900018; }

/* Info modal (terms) — neutral/brand styling, left-aligned body */
.mc-modal-info { max-width: 460px; text-align: left; }
.mc-modal-title { margin: 0 0 .9rem; font-size: 19px; }
.mc-modal-body { font-size: 15px; line-height: 1.55; margin: 0 0 1.4rem; max-height: 60vh; overflow-y: auto; }
.mc-modal-body p { margin: 0 0 .8rem; }
.mc-modal-body p:last-child { margin-bottom: 0; }
.mc-modal-body h5 { margin: 1.1rem 0 .35rem; font-size: 15px; font-weight: 700; }
.mc-modal-body ul { margin: 0; padding-left: 1.1rem; }
.mc-modal-body li { margin-bottom: .6rem; }
.mc-modal-body li:last-child { margin-bottom: 0; }
.mc-modal-info .mc-modal-actions { justify-content: center; }
.mc-modal-info .mc-modal-ok { background: #1e1e1e; color: #fcbe40; border-color: #1e1e1e; }
.mc-modal-info .mc-modal-ok:hover { background: #000; border-color: #000; }

/* Cancellation terms checkbox above the booking button */
.magnetchair .mc-terms {
	display: flex; align-items: center; gap: .55rem;
	margin: 1rem 0 1rem; font-size: 15px; line-height: 1.45; cursor: pointer;
}
.magnetchair .mc-terms input {
	flex: 0 0 auto; width: 18px; height: 18px; cursor: pointer;
	accent-color: #1e1e1e;
}
.magnetchair .mc-terms a { font-weight: 700; text-decoration: underline; }