<?php
/**
 * Shared <style> block for every standalone PUBLIC page — the booking
 * widget (embedded cross-origin in an iframe) and event
 * registration/check-in (reached via SMS link or QR scan). None of
 * these extend layouts/main.php (no staff sidebar/nav makes sense for
 * an anonymous visitor) and none of them are the staff auth pages
 * either, so this is a sibling of app/Views/auth/_auth_shared_styles.php
 * rather than a reuse of it — same reasoning that file's own header
 * comment gives (avoid repeating ~50 lines across every page), just for
 * a different audience. Deliberately drops that file's split-screen
 * .hero-col/.feature-card styling, which has no place in a small iframe
 * or a page reached by scanning a QR code on a phone.
 *
 * Relies on $primaryColor, $secondaryColor already being set (via
 * safe_hex_color(), never esc(..., 'css') — see app/Helpers/theme_helper.php
 * for why) in the including view before this file is included.
 */
?>
<style>
    :root { --brand: <?= $primaryColor ?>; --brand-accent: <?= $secondaryColor ?>; }
    * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    body { min-height: 100vh; background: #f6f7fb; }
    .brand-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; flex-shrink: 0; }
    .brand-name { font-weight: 800; font-size: 1.1rem; color: #16182b; letter-spacing: -0.02em; }
    .public-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,0.08); padding: 1.5rem; }
    .public-shell { max-width: 480px; margin: 0 auto; padding: 1.5rem 1rem; }
    .public-shell.public-shell-wide { max-width: 640px; }
    .btn-brand {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--brand);
        --bs-btn-border-color: var(--brand);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--brand);
        --bs-btn-hover-border-color: var(--brand);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--brand);
        --bs-btn-active-border-color: var(--brand);
        font-weight: 600;
    }
    .btn-brand:hover { filter: brightness(0.92); }
    .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 20%, transparent); }
    .info-box { background: color-mix(in srgb, var(--brand) 8%, white); border-radius: 10px; padding: 0.85rem 1rem; }
</style>
