/* JM Booking widget — styled to match Direction B "Warm Modern" */

.jmb-booking-widget {
	--jmb-peach: #FFE8D6;
	--jmb-cream: #FFFAF3;
	--jmb-coral-accent: #FF6B4A; /* CONFIRMED background/decorative use only -- measures 2.82:1 on white, fails AA text contrast even at large sizes. Never apply to text or to a colored background with text on top. See theme's direction-b.css for the full verified contrast table; same palette, same fix applied here. */
	--jmb-coral-dark: #C4441F;  /* verified 5.01:1 with white text -- corrected from an earlier #E0512F (3.90:1, fails AA) */
	--jmb-coral-hover: #A83A1B; /* verified 6.39:1 -- genuinely darker hover state, not a duplicate of the default */
	--jmb-plum: #3B2A4A;
	--jmb-gray-meta: #766685;   /* verified 5.24:1 on white -- replaces an earlier #9c8fab (3.03:1, fails AA) */
	--jmb-teal: #1F7A6C;
	--jmb-line: #F0DFCB;
	--jmb-error: #C0392B;       /* verified 5.44:1 on white */
	--jmb-focus-ring: #1A56DB;  /* verified 6.18:1 -- distinct from brand palette so focus is never mistaken for hover styling */

	font-family: 'Inter', sans-serif;
	color: var(--jmb-plum);
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--jmb-line);
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 16px 40px rgba(59,42,74,.08);
	position: relative; /* anchor for the visually-hidden live region */
}

.jmb-booking-widget * { box-sizing: border-box; }

/* WCAG 1.1.1 / 4.1.3: screen-reader-only utility, defined defensively in
   this plugin's own CSS rather than assumed to come from the active
   theme -- same reasoning as JM Content Fields' copy of this class. */
.jmb-booking-widget .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* WCAG 2.4.7: visible focus indicator for every interactive element this
   widget creates (package/date/time buttons, form fields, nav buttons).
   Matches the theme's --focus-ring token in spirit but kept as a
   plugin-owned value so this widget's accessibility doesn't silently
   depend on the active theme defining its own focus styles correctly. */
.jmb-booking-widget button:focus-visible,
.jmb-booking-widget input:focus-visible,
.jmb-booking-widget textarea:focus-visible,
.jmb-booking-widget a:focus-visible {
	outline: 3px solid var(--jmb-focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

.jmb-step-indicator {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
}
.jmb-step-indicator span {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: var(--jmb-line);
}
.jmb-step-indicator span.active { background: var(--jmb-coral-dark); }
.jmb-step-indicator span.done { background: var(--jmb-teal); }

.jmb-step-title {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 6px;
	display: block;
}
.jmb-step-subtitle {
	color: var(--jmb-gray-meta);
	font-size: 14px;
	margin: 0 0 24px;
}

/* Step 1: package picker */
.jmb-package-list { display: flex; flex-direction: column; gap: 12px; }

/* .jmb-package-option is now a real <button> (WCAG 2.1.1 / 4.1.2 fix --
   previously a clickable but non-interactive <div>, unreachable by
   keyboard). Full button-reset before reapplying the original visual
   design, same pattern as the FAQ accordion fix in JM Content Fields. */
.jmb-package-option {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	border: 1.5px solid var(--jmb-line);
	border-radius: 16px;
	padding: 16px 18px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: border-color .15s, background .15s;
	font-family: inherit;
	color: var(--jmb-plum);
	text-align: left;
}
.jmb-package-option:hover { border-color: var(--jmb-coral-dark); background: #FFFAF3; }
.jmb-pkg-option-text { display: flex; flex-direction: column; }
.jmb-package-option .name { font-weight: 600; font-size: 15px; }
.jmb-package-option .meta { font-size: 13px; color: var(--jmb-gray-meta); margin-top: 2px; }
.jmb-package-option .price { font-family: 'Sora'; font-weight: 700; color: var(--jmb-coral-dark); }

/* Step 2: calendar */
.jmb-calendar-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.jmb-calendar-nav button {
	background: var(--jmb-peach);
	border: none;
	border-radius: 10px;
	width: 36px;
	height: 36px;
	font-size: 16px;
	cursor: pointer;
	color: var(--jmb-coral-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jmb-calendar-nav .label { font-weight: 600; }

.jmb-date-strip {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 20px;
}
.jmb-date-cell {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	padding: 10px 4px;
	border-radius: 12px;
	cursor: pointer;
	border: 1.5px solid transparent;
	font-size: 13px;
	font-family: inherit;
}
.jmb-date-cell .dow { display: block; font-size: 11px; color: var(--jmb-gray-meta); margin-bottom: 2px; }
.jmb-date-cell.has-slots { background: var(--jmb-cream); }
.jmb-date-cell.has-slots:hover { border-color: var(--jmb-coral-dark); }
/* aria-pressed="true" (set in booking.js whenever a date is the active
   selection) drives this visual state via attribute selector rather than
   only a .selected class -- keeps the visual state and the
   programmatically-exposed state from being able to drift out of sync. */
.jmb-date-cell[aria-pressed="true"] { background: var(--jmb-coral-dark); color: #fff; }
.jmb-date-cell[aria-pressed="true"] .dow { color: rgba(255,255,255,.85); }
.jmb-date-cell:disabled,
.jmb-date-cell[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } /* opacity raised from an earlier .3 -- WCAG 1.4.11 non-text contrast applies to disabled-but-meaningful UI boundaries too; .3 risked the disabled cell's text becoming illegible for low-vision users. Disabled controls are exempt from the strict 4.5:1 minimum, but "exempt" isn't the same as "illegible" */

.jmb-time-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* .jmb-time-slot is a real <button> (see booking.js renderTimeSlots).
   Clicking it advances immediately to step 3, so unlike .jmb-date-cell it
   never needs to persist a "selected" visual state across a re-render --
   no aria-pressed/.selected styling needed here, just button-reset plus
   the original visual design and a clear hover/focus state. */
.jmb-time-slot {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	border: 1.5px solid var(--jmb-line);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	background: #fff;
	font-family: inherit;
}
.jmb-time-slot:hover { border-color: var(--jmb-coral-dark); background: var(--jmb-cream); }
.jmb-no-slots { color: var(--jmb-gray-meta); font-size: 14px; padding: 24px 0; text-align: center; }

/* Step 3: details form */
.jmb-form-group { margin-bottom: 16px; }
.jmb-form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.jmb-form-group input,
.jmb-form-group textarea {
	width: 100%;
	border: 1.5px solid var(--jmb-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
}
.jmb-form-group input:focus,
.jmb-form-group textarea:focus {
	border-color: var(--jmb-coral-dark);
	/* outline intentionally NOT suppressed here -- the global
	   :focus-visible rule above provides the actual visible focus
	   indicator (WCAG 2.4.7); this border-color change is a secondary,
	   purely decorative reinforcement of the same state, not a
	   replacement for it. */
}
/* .jmb-honeypot hides the field from sighted users via off-screen
   positioning. Paired with aria-hidden="true" on the wrapping div in the
   JS-generated markup (see booking.js renderStep3) so assistive tech
   skips it entirely rather than just visually hiding it -- a CSS-only
   hidden honeypot can otherwise still be announced to or tabbed into by
   screen reader users. */
.jmb-honeypot { position: absolute; left: -9999px; }

.jmb-summary-card {
	background: var(--jmb-peach);
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 20px;
	font-size: 13.5px;
}
.jmb-summary-card strong { display: block; font-size: 15px; margin-bottom: 4px; }

/* Buttons */
.jmb-btn-primary {
	background: var(--jmb-coral-dark); /* corrected: was --jmb-coral-accent (2.82:1 with white text, fails AA) */
	color: #fff;
	border: none;
	padding: 14px 28px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	width: 100%;
}
.jmb-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.jmb-btn-secondary {
	background: none;
	border: none;
	color: var(--jmb-plum);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	padding: 10px;
}

.jmb-error {
	background: #FDE8E8;
	color: var(--jmb-error);
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	margin-bottom: 16px;
	font-weight: 600; /* WCAG 1.4.1 -- error state is conveyed by background+border+icon-adjacent text, not red color alone; weight added so it doesn't rely solely on the (already-passing) red color to stand out */
}

.jmb-success-state { text-align: center; padding: 20px 0; }
.jmb-success-state .icon { font-size: 40px; margin-bottom: 12px; }
.jmb-success-state h3 { font-family: 'Sora'; font-size: 22px; margin-bottom: 8px; }
.jmb-success-state p { color: var(--jmb-gray-meta); font-size: 14.5px; }

.jmb-spinner {
	display: inline-block;
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: jmb-spin .6s linear infinite;
}
@keyframes jmb-spin { to { transform: rotate(360deg); } }

/* WCAG 2.3.3 / prefers-reduced-motion: the loading spinner is a
   continuous animation, exactly the category this preference targets.
   Reduced to a static (non-spinning) state rather than removed entirely
   -- the visual "loading" cue should still exist for someone with this
   preference, it just shouldn't spin. */
@media (prefers-reduced-motion: reduce) {
	.jmb-spinner { animation: none; }
}

@media (max-width: 480px) {
	.jmb-booking-widget { padding: 20px; border-radius: 16px; }
	.jmb-time-slots { grid-template-columns: repeat(2, 1fr); }
}