/*
 * iDrive Composer — Premium Visual Pass. See idrive-composer-premium.php for
 * full rationale. Enqueued after every other composer sheet (jc-next.css,
 * corridor-v1.css and — on the homepage specifically — corridor's
 * `.hero .booking-shell` block); wins on cascade order alone, no !important.
 * Every colour, radius and shadow used below is a real Corridor design
 * token or a value composed from one — nothing invented, gold is never
 * used as a fill (matches the system's own documented rule), and no
 * negative/error colour is introduced (matches jc-next's own rule for its
 * error strip).
 */

:root {
	/* A larger radius than the system's largest token (--corr-r-lg, 12px),
	   reserved for the composer's own outer card only -- gives the whole
	   widget a more considered, "designed" silhouette without touching the
	   token scale everything else on the site still reads from. Clamped so
	   it never overwhelms the card on a narrow phone screen. */
	--jcp-radius-xl: clamp(14px, 4vw, 20px);

	/* A softer, larger-throw elevation than any of Corridor's own card
	   shadows (--corr-sh-3 / --corr-e3) -- more diffused blur, lower
	   opacity near the card edge, so the composer reads as a raised,
	   considered surface rather than a flat panel with a hairline. */
	--jcp-shadow-card: 0 1px 2px rgba(4, 17, 13, 0.06), 0 32px 64px -28px rgba(4, 17, 13, 0.35);

	/* Button shadow colour is --corr-action (#0E4C33) at low alpha -- a
	   colour-matched glow rather than a generic black drop shadow. */
	--jcp-shadow-button: 0 6px 16px -4px rgba(14, 76, 51, 0.45);
	--jcp-shadow-button-hover: 0 10px 24px -6px rgba(14, 76, 51, 0.5);
}

/*
 * 1. THE CARD ITSELF.
 *
 * Both selectors are needed and deliberately kept separate: `.booking-shell`
 * is what /book/ and every non-hero context resolves to; `.hero .booking-shell`
 * is a same-specificity (0,2,0) rule in corridor-v1.css that currently wins
 * on the homepage ONLY (see audit) and paints a different radius/shadow
 * there today. Declaring both, at equal specificity and after both
 * corridor-v1.css and jc-next.css in source order, makes the two pages
 * converge on ONE card treatment instead of two different ones -- a
 * booking widget that looks different on its own site's two pages is part
 * of what reads as unfinished.
 */
.booking-shell,
.hero .booking-shell {
	border-radius: var(--jcp-radius-xl);
	box-shadow: var(--jcp-shadow-card);
	background: var(--corr-surface);
}

.hero .booking-shell {
	/* Keep the gold top rule -- it is the one deliberate brand accent this
	   card already carries and competitor research flags a single confident
	   brand touch as a premium signal. Just tie its colour to the same
	   token corridor's own later (RB-20) block uses, so nothing regresses. */
	border-top: 2px solid var(--corr-gold-lift);
}

/* More breathing room inside the card. jc-next.css keys almost every
   internal padding/margin off this one custom property, so raising it here
   cascades cleanly through the whole card without re-declaring every rule
   that reads it -- a small, low-risk lever for a much roomier feel. */
.booking-shell {
	--jc-pad: 20px;
}
@media (min-width: 761px) {
	.booking-shell {
		--jc-pad: 28px;
	}
}

/* The disclaimer strip's own bottom corners are hard-coded to the OLD card
   radius (--corr-r-lg, 12px) in jc-next.css, so raising the card's radius
   above without this would leave two mismatched roundings stacked at the
   bottom of the card -- a new visual bug, not a fix. THE PLINTH note in
   jc-next.css governs the disclaimer's wording, placement and prominence,
   none of which this touches; only the corner geometry is kept in sync
   with the card it sits inside. */
.booking-shell__note {
	border-radius: 0 0 var(--jcp-radius-xl) var(--jcp-radius-xl);
}

/*
 * 2. SERVICE TOGGLE ("With a driver" / "Self-drive hire").
 *
 * Today this is a flat underline-tab pair (2px bottom rule on the active
 * tab, no background, no shadow ever). The trip-type control three rows
 * down already uses a proper segmented-pill pattern (Slice 87) -- this
 * makes the service toggle match it, which is also the single strongest,
 * cheapest recommendation from the competitor research already on file
 * for this project (trip-type/segment controls as a filled pill group,
 * not bare radio text).
 */
.booking-shell__tongue {
	gap: 4px;
	padding: 4px;
	margin-inline: 0;
	border-radius: var(--corr-r-md);
	background: var(--corr-stone);
	box-shadow: none;
}

.booking-shell__service {
	border-radius: var(--corr-r-sm);
	box-shadow: none;
	transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.booking-shell__service:not([aria-checked="true"]):hover {
	background: rgba(255, 255, 255, 0.6);
}

.booking-shell__service[aria-checked="true"] {
	background: var(--corr-surface);
	color: var(--corr-action);
	box-shadow: var(--corr-e2), inset 0 0 0 1px var(--corr-hair);
}

/*
 * 3. TRIP-TYPE PILLS.
 *
 * Already a segmented group structurally (Slice 87) -- this only adds the
 * resting/selected depth that was missing: unselected pills currently have
 * zero visible boundary at rest, which can read as unfinished rather than
 * minimal. The wrapper gets the same stone-wash treatment as the service
 * toggle above, for one consistent "control group" language across the
 * whole composer instead of two different flat-hairline treatments.
 */
.booking-shell__trip {
	background: var(--corr-stone);
	box-shadow: none;
	border-radius: var(--corr-r-md);
}

.booking-shell__trip-pill {
	border-radius: var(--corr-r-sm);
	transition: background 0.16s ease, box-shadow 0.16s ease;
}

.booking-shell__trip-pill:hover {
	background: rgba(255, 255, 255, 0.6);
}

.booking-shell__trip-pill:has(:checked) {
	background: var(--corr-surface);
	box-shadow: var(--corr-e2), inset 0 0 0 1px var(--corr-action);
}

/*
 * 4. THE FIELD RAIL.
 *
 * Same rationale as above: the rail and each cell currently carry no
 * resting boundary, only a single shared hairline between siblings. Giving
 * the rail itself a soft stone background (distinct from the white card)
 * makes the field group read as one cohesive control surface, and each
 * cell gets a visible (not just hover-triggered) lift on interaction.
 */
.booking-shell__row {
	background: var(--corr-stone);
	border-radius: var(--corr-r-md);
	box-shadow: none;
	padding: 6px;
}

.booking-shell__cell {
	border-radius: var(--corr-r-sm);
	transition: background 0.14s ease, box-shadow 0.14s ease;
}

.booking-shell__cell:hover {
	background: var(--corr-surface);
	box-shadow: var(--corr-e1);
}

.booking-shell__cell:focus-within {
	background: var(--corr-surface);
	box-shadow: 0 0 0 2px var(--corr-action);
}

/* The shared sibling hairline from jc-next.css is no longer needed once
   the rail itself carries a background and each cell lifts on its own --
   left in place it would double up as a visible seam between two adjacent
   white cells. Cleared here rather than in jc-next.css itself. */
.booking-shell__cell + .booking-shell__cell {
	box-shadow: none;
}

/*
 * 5. SEARCH BUTTON.
 *
 * Currently intentionally flat (jc-next.css explicitly retired the old
 * lime gradient). Flat is fine; shadow-less and lift-less on the single
 * highest-intent control on the page is not -- this adds a colour-matched
 * glow and a small hover lift, still a single flat fill, no gradient.
 */
/* jc-next.css itself sets `.booking-shell .button--search{box-shadow:none}`
   and corridor-v1.css sets `.hero .button--search{box-shadow:none}` -- both
   two-class-selector specificity (0,0,2,0), which beats a bare
   `.button--search` regardless of source order. Matched here at the same
   specificity so this sheet's later position in the cascade actually wins. */
.button--search,
.booking-shell .button--search,
.hero .button--search {
	box-shadow: var(--jcp-shadow-button);
	transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.button--search:hover,
.booking-shell .button--search:hover,
.hero .button--search:hover {
	background: var(--corr-action-hi);
	box-shadow: var(--jcp-shadow-button-hover);
	transform: translateY(-1px);
}

.button--search:active,
.booking-shell .button--search:active,
.hero .button--search:active {
	transform: translateY(0);
	box-shadow: var(--jcp-shadow-button);
}

/*
 * 6. ADVANCED-DRAWER HANDLE.
 *
 * Currently plain text with no interactive affordance at all. A soft
 * background on hover/focus is enough to signal it is a control, without
 * turning it into a bordered button that would compete with the search
 * button for visual weight.
 */
.booking-shell__handle {
	border-radius: var(--corr-r-sm);
	transition: background 0.14s ease;
}

.booking-shell__handle:hover {
	background: var(--corr-stone);
}