/**
 * BOOKING CARD
 *
 * Measured from the product page: 452 wide, 20px radius, a 70px accent cap,
 * pill tabs 46 tall, option rows 398x72, CTA 56 tall.
 *
 * Every colour is derived from --clr-accent rather than hard-coded, so the card
 * re-themes with the lounge. The design's #311211 selected-row tint is the
 * accent at low opacity over the card surface — expressed as a mix, it follows
 * whatever accent the next lounge brings.
 */

@layer components {

	.booking-card {
		--card-surface: #0f0f0f;

		/*
		 * The card sizes its own type. It appears both full-width on a phone and
		 * at a fixed 452 in the desktop rail, so a viewport query would be
		 * answering the wrong question — what matters is how much room the card
		 * itself has.
		 */
		container-type: inline-size;
		container-name: booking;

		inline-size: 100%;
		max-inline-size: 28.25rem;             /* 452px */
		background-color: var(--card-surface);
		border-radius: var(--radius-lg, 1.25rem);
		overflow: hidden;
		color: var(--clr-text);
	}

	/* ---- Coloured cap --------------------------------------------------- */

	.booking-card__cap {
		background-color: var(--clr-accent);
		padding: 1rem 1.6875rem;               /* 16 / 27, measured */
		min-block-size: 4.375rem;              /* 70px */
	}

	.booking-card__cap-title {
		margin: 0;
		font-family: var(--font-display);
		font-size: 1.875rem;                   /* 30px */
		line-height: 0.9;
		letter-spacing: 0.03em;
		font-weight: var(--weight-bold);
		text-transform: uppercase;
	}

	.booking-card__cap-meta {
		margin: 0.625rem 0 0;
		font-size: 0.875rem;                   /* 14px */
		line-height: 1;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: rgb(255 255 255 / 0.56);
	}

	/* ---- Body ----------------------------------------------------------- */

	.booking-card__body {
		padding: 1.4375rem 1.625rem 1.75rem;   /* 23 / 26, measured */
	}

	.booking-card__lead {
		margin: 0 0 var(--space-s);
		font-size: 1rem;
		line-height: 1.5;
	}

	/* ---- Tabs ------------------------------------------------------------ */

	.booking-card__tabs {
		display: flex;
		gap: 0.625rem;                         /* 10px, measured */
		margin-block-end: 0.875rem;
	}

	.booking-tab {
		flex: 1;
		min-block-size: 2.875rem;              /* 46px */
		padding-inline: var(--space-xs);
		background-color: transparent;
		border: 1px solid var(--ink-600);
		border-radius: var(--radius-pill);
		color: var(--clr-text);
		font-family: var(--font-display);
		font-size: 1.5rem;                     /* 24px */
		line-height: 0.9;
		letter-spacing: 0.04em;
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.booking-tab:hover {
		border-color: var(--clr-accent);
	}

	.booking-tab.is-selected {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
	}

	/* ---- Options --------------------------------------------------------- */

	.booking-option {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		min-block-size: 4.5rem;                /* 72px */
		padding-inline: 1.1875rem;
		border: 1px solid var(--ink-600);
		border-radius: var(--radius-lg, 1.25rem);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.booking-option + .booking-option {
		margin-block-start: 0.625rem;
	}

	/*
	 * The design's #311211 is the accent sitting at low opacity on the card.
	 * Mixed rather than fixed, so it tracks the lounge's colour.
	 */
	.booking-option.is-selected {
		background-color: color-mix(in srgb, var(--clr-accent) 16%, var(--card-surface));
		border-color: var(--clr-accent);
	}

	/* The real radio stays, visually hidden — it is what makes this a group. */
	.booking-option__input {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.booking-option__mark {
		inline-size: 1rem;
		block-size: 1rem;
		flex: none;
		border: 1px solid var(--grey-450);
		border-radius: 50%;
	}

	.booking-option.is-selected .booking-option__mark {
		border-color: var(--clr-accent);
		background-color: var(--clr-accent);
		box-shadow: inset 0 0 0 3px var(--card-surface);
	}

	.booking-option__input:focus-visible + .booking-option__mark {
		outline: 2px solid var(--clr-accent);
		outline-offset: 3px;
	}

	.booking-option__text {
		display: flex;
		flex-direction: column;
		gap: 0.1875rem;
		margin-inline-end: auto;
		min-inline-size: 0;
	}

	.booking-option__title {
		font-family: var(--font-display);
		font-size: 1.5rem;                     /* 24px */
		line-height: 0.9;
		letter-spacing: 0.04em;
		font-weight: var(--weight-bold);
		text-transform: uppercase;
	}

	.booking-option__subtitle {
		font-size: 0.8125rem;                  /* 13px */
		line-height: 1.2;
		color: var(--clr-text-inverse-subtle);
	}

	.booking-option__price {
		font-family: var(--font-display);
		font-size: 2.25rem;                    /* 36px */
		line-height: 0.9;
		letter-spacing: 0.03em;
		font-weight: var(--weight-bold);
		white-space: nowrap;
	}

	/* ---- CTA ------------------------------------------------------------- */

	/*
	 * The site's .btn, sized for the card — not a second button. Everything that
	 * makes it a button (fill, hover, focus, pill) comes from .btn--primary; all
	 * that lives here is the card's own scale and the glow the design gives it.
	 */
	.booking-card__cta {
		--btn-height: 3.5rem;                  /* 56px, measured */
		margin-block-start: 1.25rem;
		font-size: 1.25rem;                    /* 20px */
		letter-spacing: 0.125em;
		box-shadow: 0 8px 15px color-mix(in srgb, var(--clr-accent) 35%, transparent);
	}

	.booking-card__note {
		margin: 1rem 0 0;
		font-size: 0.8125rem;
		line-height: 1.2;
		text-align: center;
		color: rgb(255 255 255 / 0.29);
	}

	/* ---- Reassurance ----------------------------------------------------- */

	.booking-card__trust {
		margin: 1rem 0 0;
		padding: 1rem 0 0;
		list-style: none;
		border-block-start: 1px solid var(--clr-border);
		font-size: 0.875rem;
		line-height: 1.53;
	}

	/* Content, not decoration — but a literal tick in every row is noise to
	   read out, so it is drawn rather than typed. */
	.booking-card__trust li {
		padding-inline-start: 1.25rem;
		position: relative;
	}
	.booking-card__trust li::before {
		content: "✓";
		position: absolute;
		inset-inline-start: 0;
	}

	/*
	 * Narrow card. Everything steps down together — a 36px price and a 24px
	 * option title beside it left no room for the day names, and the 20px CTA
	 * label at 0.125em tracking ran the full width of a phone.
	 */
	@container booking (max-width: 26rem) {
		.booking-card__cap {
			padding: 0.875rem 1.125rem;
			min-block-size: 0;
		}
		.booking-card__cap-title { font-size: 1.375rem; }   /* 30 → 22 */
		.booking-card__cap-meta  { font-size: 0.75rem; margin-block-start: 0.4375rem; }

		.booking-card__body { padding: 1.125rem 1.125rem 1.375rem; }
		.booking-card__lead { font-size: 0.9375rem; }

		.booking-card__tabs { gap: 0.5rem; margin-block-end: 0.75rem; }
		.booking-tab {
			min-block-size: 2.5rem;                          /* 46 → 40 */
			padding-inline: var(--space-2xs);
			font-size: 1.125rem;                             /* 24 → 18 */
		}

		.booking-option {
			min-block-size: 4rem;                            /* 72 → 64 */
			padding-inline: 0.875rem;
			gap: 0.625rem;
			border-radius: 0.875rem;
		}
		.booking-option + .booking-option { margin-block-start: 0.5rem; }
		.booking-option__title    { font-size: 1.0625rem; }  /* 24 → 17 */
		.booking-option__subtitle { font-size: 0.75rem; }
		.booking-option__price    { font-size: 1.5rem; }     /* 36 → 24 */
		.booking-option__mark     { inline-size: 0.875rem; block-size: 0.875rem; }

		.booking-card__cta {
			--btn-height: 3rem;                              /* 56 → 48 */
			margin-block-start: 1rem;
			font-size: 1rem;                                 /* 20 → 16 */
			letter-spacing: 0.09em;
		}

		.booking-card__note  { margin-block-start: 0.75rem; font-size: 0.75rem; }
		.booking-card__trust {
			margin-block-start: 0.75rem;
			padding-block-start: 0.75rem;
			font-size: 0.8125rem;
			line-height: 1.45;
		}
	}
}