/* =====================================================================
   GBE DateTime Picker — modal calendar
   Premium editorial aesthetic matching both Editorial Culinary and Dark Gold.
   ===================================================================== */

.gbe-dtp {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
	font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
}
.gbe-dtp--open {
	opacity: 1;
	pointer-events: auto;
}

/* Backdrop */
.gbe-dtp__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 22, 18, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Panel — flex column with scrollable body, header/footer always visible */
.gbe-dtp__panel {
	position: relative;
	background: #FDFAF4;
	border-radius: 20px;
	width: min(94vw, 720px);
	max-height: calc(100vh - 32px);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.8) inset,
		0 40px 80px -20px rgba(0, 0, 0, 0.5);
	transform: translateY(20px) scale(0.98);
	opacity: 0;
	transition: transform 320ms cubic-bezier(.34,1.56,.64,1), opacity 240ms ease;
	border: 1px solid rgba(201, 184, 159, 0.4);
}
.gbe-dtp__panel > .gbe-dtp__header,
.gbe-dtp__panel > .gbe-dtp__nav,
.gbe-dtp__panel > .gbe-dtp__weekdays,
.gbe-dtp__panel > .gbe-dtp__footer {
	flex-shrink: 0;
	padding-left: 26px;
	padding-right: 26px;
}
.gbe-dtp__panel > .gbe-dtp__header { padding-top: 24px; padding-bottom: 0; }
.gbe-dtp__panel > .gbe-dtp__weekdays { padding-top: 0; padding-bottom: 8px; }

/* Scrollable body holds grid + times */
.gbe-dtp__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 26px;
	scrollbar-width: thin;
	scrollbar-color: rgba(168,71,43,0.35) transparent;
}
.gbe-dtp__body::-webkit-scrollbar { width: 6px; }
.gbe-dtp__body::-webkit-scrollbar-thumb {
	background: rgba(168,71,43,0.3);
	border-radius: 3px;
}
.gbe-dtp--open .gbe-dtp__panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Parchment grain */
.gbe-dtp__panel::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(800px 400px at 0% 0%, rgba(217,164,52,0.06), transparent 60%),
		radial-gradient(600px 300px at 100% 100%, rgba(168,71,43,0.05), transparent 60%);
}
.gbe-dtp__panel > * { position: relative; z-index: 1; }

/* Header */
.gbe-dtp__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px dashed rgba(201, 184, 159, 0.5);
}
.gbe-dtp__header-text {
	flex: 1;
}
.gbe-dtp__eyebrow {
	font-family: inherit;
	font-size: 0.66rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #6B5A47;
	font-weight: 600;
	margin-bottom: 4px;
}
.gbe-dtp__title {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 440;
	font-size: 1.5rem;
	color: #1A1612;
	letter-spacing: -0.01em;
	line-height: 1.15;
	/* Breathing room before the month-nav row beneath. Without this the
	   title sat glued to the next element. */
	margin: 0 0 14px;
}
.gbe-dtp__title:empty { display: none; margin: 0; }
.gbe-dtp__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(201, 184, 159, 0.4);
	background: #fff;
	color: #6B5A47;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Theme-coherent hover: terracotta in editorial. Dark-gold override
	   below switches it to champagne so the button stays visible on dark. */
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1);
}
.gbe-dtp__close:hover,
.gbe-dtp__close:focus-visible {
	background: var(--gbe-terracotta, #A8472B);
	color: #fff;
	border-color: #7E2E16;
	transform: rotate(90deg) scale(1.05);
	outline: none;
	box-shadow: 0 6px 16px -4px rgba(168, 71, 43, 0.45);
}
.gbe-dtp__close:active { transform: rotate(90deg) scale(0.95); }

/* Month navigation */
/* Calendar month nav — frecce raggruppate ATTORNO al titolo del mese,
   non più ai bordi del pannello (UX: l'utente non deve scorrere lo
   sguardo da un margine all'altro per cambiare mese). Il titolo resta
   centrato, le frecce gli stanno accanto a sinistra/destra, e
   visivamente "appartengono" al titolo invece che alla cornice. */
.gbe-dtp__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 12px;
}
/* Order to keep prev → title → next reading left-to-right */
.gbe-dtp__nav .gbe-dtp__prev      { order: 1; }
.gbe-dtp__nav .gbe-dtp__month-year { order: 2; }
.gbe-dtp__nav .gbe-dtp__next      { order: 3; }
.gbe-dtp__prev,
.gbe-dtp__next {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(201, 184, 159, 0.5);
	background: #fff;
	color: var(--gbe-terracotta, #A8472B);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 180ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
}
.gbe-dtp__prev:hover,
.gbe-dtp__next:hover {
	background: var(--gbe-terracotta, #A8472B);
	border-color: var(--gbe-terracotta, #A8472B);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(168,71,43,0.18),
	            0 6px 16px -4px rgba(168,71,43,0.45);
}
.gbe-dtp__month-year {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 460;
	font-size: 1.25rem;
	color: #1A1612;
	letter-spacing: -0.01em;
}

/* Weekdays row */
.gbe-dtp__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
}
.gbe-dtp__weekdays span {
	text-align: center;
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8A8074;
	font-weight: 700;
	padding: 6px 0;
}

/* Grid — viewport-adaptive row height so 6 rows always fit without scroll */
.gbe-dtp__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	/* Top padding gives the first-row buttons room for hover/selected
	   translateY(-2px) + box-shadow without being clipped by the body's
	   overflow-y:auto. Bottom padding does the same for the last row. */
	padding: 6px 0 8px;
}
.gbe-dtp__day {
	/* Responsive height: scale with viewport but clamp between 36-60px */
	height: clamp(36px, calc((100vh - 360px) / 7), 60px);
	border: 1px solid rgba(201, 184, 159, 0.3);
	background: #fff;
	color: #3D332A;
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 460;
	font-size: 1rem;
	border-radius: 10px;
	cursor: pointer;
	transition: all 180ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
	position: relative;
	-webkit-tap-highlight-color: transparent;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.gbe-dtp__day:hover:not(:disabled) {
	border-color: var(--gbe-terracotta, #A8472B);
	color: var(--gbe-terracotta, #A8472B);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px -6px rgba(168,71,43,0.4);
}
.gbe-dtp__day--other {
	color: #C9B89F;
	background: transparent;
	border-color: transparent;
}
.gbe-dtp__day--today {
	border-color: rgba(168,71,43,0.4);
	background: rgba(168,71,43,0.04);
	font-weight: 600;
	/* "Today" gets an outer ring instead of a dot — composes cleanly with
	   weekend/holiday backgrounds and never collides with the holiday dot. */
	box-shadow: 0 0 0 2px rgba(168,71,43,0.18);
}
.gbe-dtp__day--today::after {
	content: '';
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gbe-terracotta, #A8472B);
}
/* When today is ALSO a holiday/semi-holiday, suppress the bottom dot — the
   holiday dot (top-right) + the outer ring already convey both states. */
.gbe-dtp__day--today.gbe-dtp__day--holiday::after,
.gbe-dtp__day--today.gbe-dtp__day--semi-holiday::after {
	display: none;
}
.gbe-dtp__day--selected,
.gbe-dtp__day--selected:hover {
	background: linear-gradient(180deg, #BC5A3A 0%, var(--gbe-terracotta, #A8472B) 100%);
	color: #fff !important;
	border-color: var(--gbe-terracotta, #A8472B);
	box-shadow: 0 10px 22px -6px rgba(168,71,43,0.55),
	            inset 0 1px 0 rgba(255,255,255,0.15);
	transform: translateY(-2px);
}
.gbe-dtp__day--selected.gbe-dtp__day--today::after {
	background: #fff;
}
/* Weekend highlight — Saturday softer, Sunday slightly stronger.
   Border keeps the day clearly tappable; a tinted background marks it. */
.gbe-dtp__day--saturday {
	background: #FAF1E8;
	color: #6B4A2E;
	border-color: rgba(168, 122, 50, 0.28);
}
.gbe-dtp__day--saturday:hover:not(:disabled) {
	border-color: #B8843A;
	color: #B8843A;
}
.gbe-dtp__day--sunday {
	background: #FCEAE3;
	color: var(--gbe-terracotta, #A8472B);
	border-color: rgba(168, 71, 43, 0.32);
}
.gbe-dtp__day--sunday:hover:not(:disabled) {
	border-color: var(--gbe-terracotta, #A8472B);
	color: var(--gbe-terracotta, #A8472B);
}

/* National holiday — strongest red tint, with a tiny dot indicator. */
.gbe-dtp__day--holiday {
	background: linear-gradient(180deg, #FCE0D8 0%, #F8C9BB 100%);
	color: #7E2E16;
	border-color: rgba(126, 46, 22, 0.45);
	font-weight: 700;
}
.gbe-dtp__day--holiday:hover:not(:disabled) {
	border-color: #7E2E16;
	color: #fff;
	background: linear-gradient(180deg, #BC5A3A 0%, var(--gbe-terracotta, #A8472B) 100%);
}
.gbe-dtp__day--holiday::before {
	content: '';
	position: absolute;
	top: 4px;
	right: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #C8392B;
	box-shadow: 0 0 0 1px #fff;
}

/* Semi-festive — softer amber/saffron tint, smaller dot */
.gbe-dtp__day--semi-holiday {
	background: #FFF6E2;
	color: #8A6A1E;
	border-color: rgba(217, 164, 52, 0.45);
	font-weight: 600;
}
.gbe-dtp__day--semi-holiday:hover:not(:disabled) {
	border-color: #B8843A;
	color: #fff;
	background: linear-gradient(180deg, #E0B45A 0%, #C29438 100%);
}
.gbe-dtp__day--semi-holiday::before {
	content: '';
	position: absolute;
	top: 4px;
	right: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #D9A434;
}

/* Selected day always wins over weekend/holiday tints (terracotta gradient). */
.gbe-dtp__day--selected.gbe-dtp__day--saturday,
.gbe-dtp__day--selected.gbe-dtp__day--sunday,
.gbe-dtp__day--selected.gbe-dtp__day--holiday,
.gbe-dtp__day--selected.gbe-dtp__day--semi-holiday {
	background: linear-gradient(180deg, #BC5A3A 0%, var(--gbe-terracotta, #A8472B) 100%);
	color: #fff;
	border-color: var(--gbe-terracotta, #A8472B);
}
.gbe-dtp__day--selected.gbe-dtp__day--holiday::before,
.gbe-dtp__day--selected.gbe-dtp__day--semi-holiday::before { background: #fff; }

.gbe-dtp__day:disabled,
.gbe-dtp__day--disabled {
	opacity: 0.3;
	cursor: not-allowed;
	background: transparent;
	border-color: transparent;
}

/* Time slots */
.gbe-dtp__times {
	margin-top: 18px;
	padding-top: 14px;
	padding-bottom: 6px;
	border-top: 1px dashed rgba(201, 184, 159, 0.5);
	animation: gbe-dtp-times-in 280ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
}
@keyframes gbe-dtp-times-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gbe-dtp__times-label {
	font-size: 0.66rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #6B5A47;
	font-weight: 600;
	margin-bottom: 10px;
}
.gbe-dtp__times-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
}
.gbe-dtp__time {
	padding: 10px 8px;
	border: 1.5px solid rgba(201, 184, 159, 0.4);
	background: #fff;
	color: #3D332A;
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 460;
	font-size: 0.95rem;
	border-radius: 999px;
	cursor: pointer;
	transition: all 180ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.gbe-dtp__time:hover:not(.gbe-dtp__time--active) {
	border-color: var(--gbe-terracotta, #A8472B);
	color: var(--gbe-terracotta, #A8472B);
	transform: translateY(-1px);
}
.gbe-dtp__time--active {
	background: var(--gbe-terracotta, #A8472B);
	color: #fff;
	border-color: var(--gbe-terracotta, #A8472B);
	box-shadow: 0 6px 14px -4px rgba(168,71,43,0.5);
}
.gbe-dtp__time--active:hover {
	background: #7E2E16;
	color: #fff;
	border-color: #7E2E16;
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -6px rgba(168,71,43,0.6);
}

/* Footer — sticky at bottom, Confirm always visible */
.gbe-dtp__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 16px;
	padding-bottom: 22px;
	margin-top: 0;
	border-top: 1px solid rgba(201, 184, 159, 0.25);
	background: linear-gradient(180deg, transparent 0%, rgba(253,250,244,0.96) 20%, #FDFAF4 100%);
	flex-wrap: wrap;
}
.gbe-dtp__footer-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.gbe-dtp__today,
.gbe-dtp__clear {
	background: transparent;
	border: 1px solid rgba(168, 71, 43, 0.28);
	color: #7E2E16;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: 999px;
	transition: all 160ms ease;
	font-family: inherit;
}
.gbe-dtp__today:hover,
.gbe-dtp__clear:hover {
	background: #7E2E16;
	color: #fff;
	border-color: #7E2E16;
	transform: translateY(-1px);
}
.gbe-dtp__today:active,
.gbe-dtp__clear:active { transform: scale(.97); }
.gbe-dtp__confirm {
	background: linear-gradient(180deg, #BC5A3A 0%, var(--gbe-terracotta, #A8472B) 100%);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 6px 16px -6px rgba(168,71,43,0.5);
	transition: all 200ms var(--gbe-ease, cubic-bezier(.19,1,.22,1));
}
.gbe-dtp__confirm:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(168,71,43,0.6);
}
.gbe-dtp__confirm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

/* === Dark Gold override === */
.gbe-theme-dark-gold + .gbe-dtp .gbe-dtp__panel,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__panel {
	background: #15100B;
	border-color: rgba(201, 169, 110, 0.3);
}
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__title,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__month-year { color: #fff; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__eyebrow,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__times-label { color: #A0968A; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__day {
	background: #0A0807;
	color: #E0C687;
	border-color: rgba(201, 169, 110, 0.2);
}
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__day--selected {
	background: linear-gradient(180deg, #D4B87A 0%, #C9A96E 100%);
	color: #0A0807 !important;
	border-color: #C9A96E;
}
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__prev,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__next,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__close,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time {
	background: #0A0807;
	color: #C9A96E;
	border-color: rgba(201, 169, 110, 0.3);
}
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__prev:hover,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__next:hover,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time--active,
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time--active:hover {
	background: #C9A96E;
	color: #0A0807;
}
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__confirm {
	background: linear-gradient(180deg, #D4B87A 0%, #C9A96E 100%);
	color: #0A0807;
}

/* === Desktop side-by-side layout (calendar left, times right) === */
/* Activates when times block is visible and viewport is wide enough. */
@media (min-width: 680px) {
	.gbe-dtp__body:has(.gbe-dtp__times:not([hidden])) {
		display: grid;
		grid-template-columns: 1fr minmax(180px, 220px);
		gap: 20px;
		align-items: start;
	}
	/* Weekdays header spans only calendar column — shift left */
	.gbe-dtp__panel:has(.gbe-dtp__times:not([hidden])) > .gbe-dtp__weekdays {
		max-width: calc(100% - 240px);
	}
	.gbe-dtp__body:has(.gbe-dtp__times:not([hidden])) .gbe-dtp__times {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		border-left: 1px dashed rgba(201, 184, 159, 0.5);
		padding-left: 18px;
		align-self: stretch;
		position: sticky;
		top: 0;
	}
	.gbe-dtp__body:has(.gbe-dtp__times:not([hidden])) .gbe-dtp__times-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* === Mobile === */
@media (max-width: 520px) {
	.gbe-dtp__panel { border-radius: 16px; max-height: calc(100vh - 16px); }
	.gbe-dtp__panel > .gbe-dtp__header,
	.gbe-dtp__panel > .gbe-dtp__nav,
	.gbe-dtp__panel > .gbe-dtp__weekdays,
	.gbe-dtp__panel > .gbe-dtp__footer,
	.gbe-dtp__body { padding-left: 16px; padding-right: 16px; }
	.gbe-dtp__panel > .gbe-dtp__header { padding-top: 18px; }
	.gbe-dtp__title { font-size: 1.25rem; }
	.gbe-dtp__month-year { font-size: 1.1rem; }
	.gbe-dtp__day {
		font-size: 0.9rem;
		border-radius: 8px;
		height: clamp(32px, calc((100vh - 320px) / 7), 48px);
	}
	.gbe-dtp__times { margin-top: 12px; padding-top: 10px; }
	.gbe-dtp__times-grid {
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
		gap: 6px;
	}
	.gbe-dtp__time { padding: 8px 6px; font-size: 0.88rem; }
	.gbe-dtp__footer {
		flex-direction: row;
		padding-bottom: 16px;
		padding-top: 12px;
	}
	.gbe-dtp__today { order: 1; }
	.gbe-dtp__footer-actions { order: 2; margin-left: auto; }
}

/* =====================================================================
   Step 2 view: time slot picker (shown after a date is selected when the
   event has configured time_slots). REPLACES the calendar in the same
   modal panel — no side-by-side layout, no horizontal overflow.

   CRITICAL: the [hidden] HTML attribute has specificity (0,0,0,1) and
   loses the cascade against `.gbe-dtp__view--time { display: flex }` —
   so without this rule, when JS sets `timeView.hidden = true` the CSS
   still keeps it visible. We promote [hidden] to (0,1,1) so it always
   wins on both views and the date↔time swap actually toggles.
   ===================================================================== */
.gbe-dtp__view[hidden] { display: none !important; }
.gbe-dtp__view--time {
	padding: 18px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 260px;
}
.gbe-dtp__back {
	align-self: flex-start;
	background: transparent;
	border: 0;
	color: #6B5A47;
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	padding: 6px 12px 6px 0;
	border-radius: 6px;
	transition: color 160ms, transform 160ms;
}
.gbe-dtp__back:hover,
.gbe-dtp__back:focus-visible {
	color: var(--gbe-terracotta, #A8472B);
	transform: translateX(-2px);
	outline: none;
}
.gbe-dtp__time-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #9D8B73;
	font-weight: 600;
	margin-top: 4px;
}
.gbe-dtp__time-date {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 440;
	font-size: 1.5rem;
	color: #1A1612;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.gbe-dtp__time-prompt {
	font-size: 0.95rem;
	color: #6B5A47;
	margin-top: 8px;
	font-weight: 500;
}
/* The "full" times grid uses the entire panel width — wrap onto new
   rows instead of overflowing horizontally. */
.gbe-dtp__times-grid--full {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 6px;
}
.gbe-dtp__times-grid--full .gbe-dtp__time {
	padding: 14px 10px;
	font-size: 1.05rem;
}
/* Mobile fine-tuning */
@media (max-width: 520px) {
	.gbe-dtp__view--time { padding: 16px 18px 20px; }
	.gbe-dtp__time-date { font-size: 1.3rem; }
	.gbe-dtp__times-grid--full {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 8px;
	}
	.gbe-dtp__times-grid--full .gbe-dtp__time { padding: 12px 8px; font-size: 0.98rem; }
}
/* Dark-gold theme override (mirrors the date-view colours). */
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time-eyebrow { color: #9C8C76; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time-date    { color: #FAF4EA; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__time-prompt  { color: #C7B79E; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__back         { color: #C7B79E; }
body:has(.gbe-theme-dark-gold) .gbe-dtp .gbe-dtp__back:hover   { color: #D4B87A; }

@media (prefers-reduced-motion: reduce) {
	.gbe-dtp, .gbe-dtp__panel, .gbe-dtp__day, .gbe-dtp__times, .gbe-dtp__close {
		animation: none !important;
		transition: none !important;
	}
}