/**
 * Modal styling. Brand-aware via the --brand custom property set
 * inline on .osc-modal-card per-event.
 *
 * Hidden by default via [hidden] + opacity:0 transition. JS swaps
 * the [hidden] attribute and adds .osc-modal--open to start the
 * fade-in.
 */

.osc-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.osc-modal[hidden] {
	display: none;
}

.osc-modal.osc-modal--open {
	opacity: 1;
	pointer-events: auto;
}

.osc-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 28, 0.62);
	cursor: pointer;
}

.osc-modal-card {
	position: relative;
	background: #fff;
	color: #222;
	border-radius: 14px;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	transform: translateY(8px) scale(0.99);
	transition: transform 0.18s ease;
	font: inherit;
}

.osc-modal.osc-modal--open .osc-modal-card {
	transform: translateY(0) scale(1);
}

/* Close X — Phase 3.6.7 Part B: ≥44×44 tap target, white-circle bg for
   contrast against partner-colored modal surfaces + map iframe, z-index
   above the brand top-accent border. Display flex centers the ×
   glyph regardless of inherited line-height.
   Phase 3.7 Part 0: top inset bumped from 0.5rem to 1.25rem so the
   X clears Chrome's edge-to-edge URL/tab strip on mobile. max() with
   env(safe-area-inset-top) honors iOS notch / Dynamic Island where
   the inset reports nonzero. */
.osc-modal-close {
	position: absolute;
	top: 1.25rem;
	top: max(1.25rem, calc(0.5rem + env(safe-area-inset-top, 0px)));
	right: 0.5rem;
	width: 44px;
	height: 44px;
	border: none;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	font-size: 1.6rem;
	line-height: 1;
	color: #1f2937;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.osc-modal-close:hover,
.osc-modal-close:focus-visible {
	background: #f3f4f6;
	color: #000;
	transform: scale(1.06);
	outline: none;
}

.osc-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.5rem 1rem;
	border-bottom: 1px solid #eee;
}

.osc-modal-logo {
	max-height: 56px;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.osc-modal-date-pill {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: var(--brand, #1e3167);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}

.osc-modal-body {
	padding: 1.25rem 1.5rem;
	font-size: 0.97rem;
	line-height: 1.5;
}

.osc-modal-body p {
	margin: 0 0 0.85rem;
}

.osc-presented-by,
.osc-contact-line {
	color: #444;
}

.osc-venue-name {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 1rem 0 0.25rem;
}

.osc-venue-addr {
	color: #555;
	font-size: 0.92rem;
	margin-top: 0;
}

.osc-event-detail strong {
	color: #333;
}

.osc-link {
	color: var(--brand, #1e3167);
	text-decoration: none;
	font-weight: 500;
}

.osc-link:hover,
.osc-link:focus-visible {
	text-decoration: underline;
}

.osc-register-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1rem;
}

.osc-register-btn {
	flex: 1 1 160px;
	text-align: center;
	padding: 0.7rem 1rem;
	border: 2px solid var(--brand, #1e3167);
	background: #fff;
	color: var(--brand, #1e3167);
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.osc-register-btn:hover,
.osc-register-btn:focus-visible {
	background: var(--brand, #1e3167);
	color: #fff;
	outline: none;
}

.osc-modal-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	padding: 1rem 1.5rem 1.5rem;
	border-top: 1px solid #eee;
	background: #fbfbfd;
	border-radius: 0 0 14px 14px;
}

.osc-contact-card {
	font-size: 0.9rem;
	line-height: 1.45;
	color: #444;
}

.osc-contact-card strong {
	display: block;
	color: #222;
	margin-bottom: 0.25rem;
	font-size: 0.95rem;
}

.osc-contact-addr {
	margin: 0.25rem 0 0.5rem;
}

.osc-office-hours {
	margin-top: 0.5rem;
}

.osc-map iframe {
	width: 100%;
	border-radius: 8px;
}

@media (max-width: 640px) {
	.osc-modal {
		padding: 0;
		align-items: flex-end;
	}
	.osc-modal-card {
		max-height: 92vh;
		border-radius: 14px 14px 0 0;
	}
	.osc-modal-header {
		flex-wrap: wrap;
	}
	.osc-modal-footer {
		grid-template-columns: 1fr;
	}
}

/* ── Private-event variant (Phase 3.6.2) ──────────────────────── */

.osc-private-badge {
	display: inline-block;
	background: #e5e7eb;
	color: #4b5563;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 12px;
	margin-right: 12px;
}

.osc-modal-card--private .osc-modal-body {
	padding: 0.5rem 0;
}

.osc-private-location {
	margin: 0.5rem 0;
	font-size: 0.95rem;
	color: #1f2937;
}

.osc-private-explainer {
	margin: 1rem 0;
	color: #4b5563;
	line-height: 1.5;
}

/* .osc-private-contact-btn is a marker class for the private-modal
   Contact Us button. Visual styling comes from .osc-cta-btn--outline
   (3.6.6 partner-branded outline + hover fill). This rule only adds
   the inline-block + margin-top so the button sits below the
   explainer text with breathing room. */
.osc-private-contact-btn {
	display: inline-block;
	margin-top: 12px;
	min-width: 160px;
}

.osc-modal-footer--private {
	/* Combined with .osc-modal-partner-card in markup — that rule
	   carries the border-top + padding. This is a no-op kept for
	   backwards compat with any theme override hooking the class. */
}

/* ── Partner-branded modal (Phase 3.6.6 restoration on top of 3.6.4 layout) ── */

/* Top accent border in partner brand color — restored from pre-3.6.4. */
.osc-modal-card--spa {
	background: linear-gradient(135deg, #f5fbff, #eef6ff);
	padding: 20px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
	border-top: 5px solid var(--brand, #1e3167);
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

/* The .osc-modal-card--has-map modifier class is still emitted by
   templates/modal-card.php as a hook for theme overrides, but the
   default sheet no longer reserves space for an absolute-positioned
   map (3.7.1 inlined the map below the body). No rule needed here. */

/* Header row: partner logo on left, date pill on right. */
.osc-modal-header--spa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.osc-modal-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.osc-modal-partner-logo {
	max-width: 120px;
	max-height: 50px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.osc-modal-location-title {
	font-size: 1.3rem;
	font-weight: 800;
	color: #0f172a;
	margin: 4px 0;
}

/* Amber state badge — SPA _texasBadge values verbatim. */
.osc-state-badge {
	display: inline-block;
	background: #fde68a;
	color: #7c5200;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 8px;
	padding: 2px 8px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Semi-private badge (Phase 3.6.6 Part B) — SPA _semiPrivateBadge verbatim. */
.osc-semi-private-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #ccfbf1;
	color: #0f766e;
	font-size: 0.72rem;
	font-weight: 600;
	margin-left: 6px;
	vertical-align: middle;
}

/* Presenter / contact paragraph (restored from pre-3.6.4). */
.osc-modal-presented-by,
.osc-modal-contact-line {
	margin: 4px 0;
	font-size: 0.93rem;
	color: #333;
}

/* Date pill: gradient derived from partner --brand to a lighter sibling.
   The :is() trick lets us use color-mix for the lighter shade where
   supported, falling back to a static gradient via the --brand-2
   custom property (which the renderer doesn't set today — defaults
   to a 60% white-blend that visually approximates the SPA's sky-blue
   pairing for navy and matches the amber pairing for orange). */
.osc-modal-date-pill--spa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--brand, #1e3167), var(--brand-2, color-mix(in srgb, var(--brand, #1e3167) 55%, #fbbf24)));
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	border-radius: 12px;
	padding: 7px 14px;
	box-shadow: 0 4px 14px rgba(2, 6, 23, 0.15);
	white-space: nowrap;
	flex: 0 0 auto;
}

.osc-modal-date-pill-tz {
	opacity: 0.85;
	font-size: 0.8rem;
}

/* Body 2-column grid. Collapses to 1-col on narrow viewports. */
.osc-modal-body--spa {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	.osc-modal-body--spa {
		grid-template-columns: 1fr;
	}
}

.osc-modal-left {
	min-width: 0;
}

.osc-modal-right {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Venue: teal hyperlink. SPA _venue color #0f766e verbatim. */
.osc-venue-link {
	font-weight: 600;
	color: #0f766e;
	text-decoration: none;
	font-size: 1.02rem;
}

.osc-venue-link:hover,
.osc-venue-link:focus-visible {
	text-decoration: underline;
	outline: none;
}

.osc-modal-card--spa .osc-venue-addr {
	font-size: 0.88rem;
	color: #555;
	margin: 4px 0 0;
}

.osc-meta-row {
	font-size: 0.93rem;
	color: #333;
	margin: 0;
	line-height: 1.5;
}

/* CTA row: outline-style buttons in partner brand color (Phase 3.6.6).
   Pre-3.6.4 used outline-style brand-colored buttons; 3.6.4 swapped
   to filled gradients (sky-blue + green per SPA palette). Tony's
   restoration mandate puts the partner brand back in charge.
   Filled gradient classes (--primary/--secondary/--tertiary) are
   retained for shortcodes / themes that opt in via the
   osc_register_buttons_html filter. */
.osc-modal-cta--spa {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 14px 0;
}

.osc-modal-cta--spa.osc-modal-cta--single {
	grid-template-columns: 1fr;
}

@media (max-width: 500px) {
	.osc-modal-cta--spa {
		grid-template-columns: 1fr;
	}
}

.osc-cta-btn {
	display: block;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	text-align: center;
	transition: background 0.18s, color 0.18s, filter 0.18s, transform 0.18s;
}

/* Outline variant — partner brand color, fills on hover. */
.osc-cta-btn--outline {
	border: 2px solid var(--brand, #1e3167);
	background: transparent;
	color: var(--brand, #1e3167);
}

.osc-cta-btn--outline:hover,
.osc-cta-btn--outline:focus-visible {
	background: var(--brand, #1e3167);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

/* Filled-gradient variants — retained for theme/plugin override use. */
.osc-cta-btn--primary,
.osc-cta-btn--secondary,
.osc-cta-btn--tertiary {
	color: #fff;
}
.osc-cta-btn--primary:hover,
.osc-cta-btn--secondary:hover,
.osc-cta-btn--tertiary:hover,
.osc-cta-btn--primary:focus-visible,
.osc-cta-btn--secondary:focus-visible,
.osc-cta-btn--tertiary:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	outline: none;
}
.osc-cta-btn--primary   { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.osc-cta-btn--secondary { background: linear-gradient(135deg, #16a34a, #22c55e); }
.osc-cta-btn--tertiary  { background: linear-gradient(135deg, #4f46e5, #6366f1); }

/* Map thumbnail (Phase 3.7.1): inline at all viewports so the partner
   card flows naturally below in document order. Previously absolute-
   positioned bottom-right with the card carrying a 220px padding-bottom
   reservation — the absolute pattern made the card visually "between"
   the body and the map, which read as "Where the event is" instead of
   "About this partner." */
.osc-modal-map-thumb {
	position: relative;
	width: 100%;
	height: 220px;
	margin-top: 14px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.osc-modal-map-thumb iframe {
	pointer-events: none;
	width: 100%;
	height: 100%;
	border: 0;
}

.osc-modal-map-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(255, 255, 255, 0.92);
	color: #1e3167;
	font-size: 0.78rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 4px 10px;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.osc-modal-map-btn:hover,
.osc-modal-map-btn:focus-visible {
	background: #fff;
	outline: none;
}

@media (max-width: 600px) {
	.osc-modal-map-thumb {
		height: 180px;
	}
}

/* Modal permalink + share (Phase 3.10 Part E). Small inline row
   below the date pill — same brand-link styling as the venue link. */
.osc-modal-permalink {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.osc-modal-permalink a {
	color: var(--brand, #1e3167);
	font-weight: 600;
	text-decoration: none;
}

.osc-modal-permalink a:hover,
.osc-modal-permalink a:focus-visible {
	text-decoration: underline;
	outline: none;
}

.osc-modal-share-btn {
	background: transparent;
	border: 1px solid var(--brand, #1e3167);
	color: var(--brand, #1e3167);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.osc-modal-share-btn:hover,
.osc-modal-share-btn:focus-visible {
	background: var(--brand, #1e3167);
	color: #fff;
	outline: none;
}

.osc-modal-share-toast {
	position: absolute;
	right: 16px;
	top: 60px;
	background: rgba(15, 23, 42, 0.92);
	color: #fff;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.8rem;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s, transform 0.18s;
	pointer-events: none;
	z-index: 20;
}

.osc-modal-share-toast.osc-modal-share-toast--show {
	opacity: 1;
	transform: translateY(0);
}

/* Partner contact card (Phase 3.7.1): de-emphasized "About this
   partner" footer — gray bg + smaller type + muted color so it
   reads as supplementary contact info, not the primary venue.
   Two-column grid: left = name + mailing address, right = email
   + phone + office hours. Collapses to single column on narrow. */

.osc-modal-partner-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin: 1.5rem 0 0.5rem;
}

.osc-modal-partner-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1.5rem;
	padding: 0.875rem 1rem;
	background: #f9fafb;
	border-radius: 8px;
	font-size: 0.825rem;
	line-height: 1.4;
	color: #4b5563;
}

.osc-modal-partner-card p {
	margin: 0;
}

.osc-modal-partner-card-name {
	font-weight: 600;
	color: #111827;
}

.osc-modal-partner-card-addr {
	color: #6b7280;
	margin-top: 0.25rem;
}

.osc-modal-partner-card .osc-link {
	color: var(--brand, #1e3167);
	font-weight: 500;
}

@media (max-width: 640px) {
	.osc-modal-partner-card {
		grid-template-columns: 1fr;
	}
}

/* Private modal: keep border-left accent in brand color, top accent
   inherits from .osc-modal-card--spa above (border-top:5px var(--brand)). */
.osc-modal-card--private {
	background: #f9fafb;
}

/* SPA-actual private badge color: #6b7280 fill + #fff text (was light
   gray + dark text pre-3.6.6 per spec; Tony's parity confirmation
   reverts to the SPA's _privatePill values). */
.osc-modal-card--private .osc-private-badge {
	background: #6b7280;
	color: #fff;
}

.osc-modal-card--private .osc-private-contact-btn {
	/* Outline in partner brand on private modal too — overridden from
	   the 3.6.2 navy-fill default. The .osc-cta-btn--outline class
	   already supplies the right styling; this rule is just the
	   override-of-the-override no-op for safety. */
}