/*
SimplyBook Custom CSS — Sanitized, Accessible, SEO-friendly
Brand: Ministro de Bodas by Nexus DBA
Policy: ENGLISH-ONLY code (selectors, comments, variables). Spanish allowed only in HTML content.
Security & Compatibility: No experimental CSS (e.g., color-mix), no remote assets, scoped to SimplyBook IDs, WCAG AA focus/contrast, print & reduced-motion support.
*/


/* =============================
Theme Variables
============================= */
:root {
--sb-primary: #4f46e5; /* indigo-600 */
--sb-primary-contrast: #ffffff;
--sb-accent: #0ea5e9; /* sky-500 */
--sb-bg: #ffffff;
--sb-surface: #f8fafc; /* slate-50 */
--sb-text: #0f172a; /* slate-900 */
--sb-muted: #475569; /* slate-600 */
--sb-border: #e2e8f0; /* slate-200 */
--sb-success: #16a34a; /* green-600 */
--sb-warning: #f59e0b; /* amber-500 */
--sb-danger: #dc2626; /* red-600 */
--sb-radius: 14px;
--sb-shadow: 0 6px 16px rgba(2, 6, 23, .06);
--sb-shadow-lg: 0 10px 24px rgba(2, 6, 23, .12);
}


@media (prefers-color-scheme: dark) {
:root {
--sb-bg: #0b1020;
--sb-surface: #121a2d;
--sb-text: #e5e7eb;
--sb-muted: #94a3b8;
--sb-border: #1f2a44;
}
}


/* =============================
Base & Typography
============================= */
#events, #eventForm, #timeline-container {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--sb-text);
background: transparent;
}


#events h3,
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
margin: 0 0 .5rem;
font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
line-height: 1.25;
color: var(--sb-text);
}


#events p.duration,
#events div.duration,
#events p.description,
#events div.description {
margin: 0.25rem 0;
color: var(--sb-muted);
font-size: .95rem;
}


/* =============================
Event Card
============================= */
#events .selectedEvent {
background: var(--sb-surface);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius);
padding: 1rem;
box-shadow: var(--sb-shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
#events .selectedEvent:hover {
transform: translateY(-2px);
box-shadow: var(--sb-shadow-lg);