/* ═══════════════════════════════════════════════
   IRM (Irace Management) — Brand overrides on Bootstrap 5
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* IRM Brand Colors */
    --irm-red: #C82333;
    --irm-blue: #2B328C;
    --theme: #C82333;
    --theme-dark: #A01C29;

    /* Typography */
    --font-primary: 'Oswald', 'Bebas Neue', sans-serif;
    --font-secondary: 'Roboto', 'Montserrat', sans-serif;
}

/* ── Layout utilities ── */
.min-w-0 { min-width: 0; }

/* ── Theme utilities ── */
.text-theme,
a.text-theme,
a.text-theme:hover { color: var(--theme) !important; }
.bg-theme { background: var(--theme); }

/* ── Typography: headings ── */
h1, h2, h3, h4, h5, h6,
.hero-heading, .scene-heading,
.section-label, .legal-content h1,
.legal-content h2 {
    font-family: var(--font-primary);
    letter-spacing: -0.01em;
}
body {
    font-family: var(--font-secondary);
}

/* ── Status Badges ── */
.badge-pending   { background-color: #fef9c3 !important; color: #a16207 !important; }
.badge-paid      { background-color: #dcfce7 !important; color: #166534 !important; }
.badge-verified  { background-color: #dbeafe !important; color: #1e40af !important; }
.badge-expired   { background-color: #fee2e2 !important; color: #991b1b !important; }
.badge-cancelled { background-color: #f3f4f6 !important; color: #6b7280 !important; }
.badge-rejected  { background-color: #fee2e2 !important; color: #991b1b !important; }
.badge-refunded  { background-color: #e0e7ff !important; color: #3730a3 !important; }
/* /app/results merender lewat `badge-{{ $activity->status }}`; tanpa aturan ini "Disqualified"
   tampil polos — satu-satunya status tanpa warna. Nilainya disamakan dengan rejected. */
.badge-disqualified { background-color: #fee2e2 !important; color: #991b1b !important; }

/* ── OTP Countdown Timer ── */
.otp-timer {
    font-weight: 600;
    font-family: ui-monospace, monospace;
    font-size: .95rem;
}
.otp-timer.urgent {
    color: #dc2626;
}
.timer-expired-text {
    color: #dc2626;
    font-weight: 500;
}

/* ── OTP Inputs (6 digit) ── */
.otp-digit {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s;
}
.otp-digit:focus {
    border-color: var(--theme);
}

/* ── Event Card Accent ── */
.event-accent-bar {
    width: 4px;
    flex-shrink: 0;
}

/* ── Body background ── */
body {
    background: #f8f9fa;
}

/* ── Registration form (Bootstrap-compatible) ── */
.reg-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 840px) {
    .reg-checkout-grid { grid-template-columns: 1fr; }
}

/* ── Category card grid ── */
.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .category-grid { grid-template-columns: 1fr; }
}

/* ── Category card ── */
.category-card {
    position: relative;
    display: block;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 24px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background: #fff;
    user-select: none;
}
.category-card:hover {
    border-color: #b0b7c3;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.category-card.selected {
    border-color: var(--theme);
    background: #f5f3ff;
}
/* Radio kategori disembunyikan (opacity: 0) supaya kartunya sendiri yang tampak terpilih —
   akibatnya fokus keyboard juga tak terlihat. :focus-within pada label adalah satu-satunya
   cara menampilkannya tanpa mengubah markup; radio tetap bisa dijangkau lewat Tab. */
.category-card:focus-within {
    outline: 3px solid var(--theme);
    outline-offset: 2px;
}

/* Hidden radio inside card */
.category-card .category-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Card content */
.category-card-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.category-card-type {
    font-size: .75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 6px;
}
.category-card-price {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--theme);
    margin-top: 12px;
}
.category-card-meta {
    font-size: .78rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Checkmark circle */
.category-card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}
.category-card.selected .category-card-check {
    display: flex;
}

/* ── Category section (transparent, no visual wrapper) ── */
.category-section {
    margin-bottom: 20px;
}

/* ── Registration form section (fade-in animation) ── */
.reg-form-section {
    transition: opacity .3s ease, transform .3s ease;
}
.reg-form-section.d-none {
    display: none !important;
}
.reg-form-section.fade-ready {
    opacity: 0;
    transform: translateY(8px);
}

/* ── Team name card (sidebar, above summary) ── */
.team-name-sidebar {
    margin-bottom: 16px;
}

/* ── Participant layout ── */
/* Section add-on kini menyatu di dalam form peserta (sebelum PAR-Q) — wrapper flex dua
   kolom (form kiri + sidebar addon kanan) sudah tidak dipakai lagi. */

/* ── Sidebar sticky ── */
.sidebar-sticky { position: sticky; top: 72px; }
.sidebar-card     { border-top: 3px solid var(--theme) !important; }

/* ── Summary rows ── */
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: .85rem;
    color: #374151;
}
.summary-row.total {
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--theme);
}
.summary-row.indent {
    padding-left: 12px;
    font-size: .8rem;
    color: #6c757d;
}

/* ── Auth Card (login + verify centered) ── */
.auth-card {
    max-width: 420px;
    margin: 48px auto;
}
.auth-card .card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── Auth tabs (OTP | Password) ── */
.auth-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}
.auth-tabs a {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: .85rem;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .15s;
}
.auth-tabs a.active,
.auth-tabs a:hover.active {
    color: var(--theme) !important;
    border-bottom-color: var(--theme);
    font-weight: 500;
}
.auth-tabs a:hover:not(.active) {
    color: #374151;
}

/* ── Auth info banner ── */
.auth-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .78rem;
    margin-bottom: 16px;
    text-align: center;
}
.auth-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .82rem;
    margin-bottom: 12px;
    text-align: center;
}

/* ── Google SSO button ── */
.btn-google {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: .9rem;
}
.btn-google:hover {
    background: #f9fafb;
}

/* ── OTP resend button ── */
.btn-resend {
    min-width: 110px;
}
.btn-resend:disabled {
    pointer-events: none;
}

/* ── Divider ── */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: #9ca3af;
    font-size: .85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #d1d5db;
}
.auth-divider span {
    padding: 0 12px;
}

/* ── App page header card ── */
.app-header-card {
    border-radius: 12px;
    padding: 24px;
}

/* ── Registration list card ── */
.reg-list-card {
    transition: box-shadow .15s;
}
.reg-list-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ── Monospace code ── */
.code-mono {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .78rem;
    color: #6c757d;
}

/* ── Time display ── */
.time-val {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    font-size: .9rem;
    color: #111827;
}

/* ── Registration form ── */
.reg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
.reg-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 12px;
}

/* ── Participant card ── */
.participant-card {
    border-left: 3px solid var(--theme);
}

/* ── Addon sidebar ── */
.addon-sidebar {
    border-left: 1px solid #e5e7eb;
    padding-left: 16px;
}
.addon-sidebar h4 {
    font-size: .8rem;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.addon-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}
.addon-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.addon-item label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-weight: 400;
    cursor: pointer;
    font-size: .8rem;
}
.addon-item label input[type=checkbox] {
    width: auto;
    margin-top: 2px;
    accent-color: var(--theme);
}
.addon-price {
    color: var(--theme);
    font-size: .75rem;
    white-space: nowrap;
}
.addon-empty {
    color: #9ca3af;
    font-size: .75rem;
}

/* ── Add-on menyatu di form peserta (sebelum PAR-Q) ── */
/* Caption satu baris: nama barang + chip statusnya. Kelas form-label di markup membuat
   tipografinya sama persis dengan label field form di atasnya. */
.addon-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.addon-item-included .addon-caption {
    margin-bottom: 0;
}
/* Chip GRATIS (included) & BERBAYAR (optional) — dua warna beda supaya statusnya
   terbaca dalam sekali lihat, bukan dari posisi. */
.addon-free-chip,
.addon-paid-chip {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.addon-free-chip {
    background: rgba(5, 150, 105, .12);
    color: #059669;
}
.addon-paid-chip {
    background: rgba(200, 35, 51, .1);
    color: #c82333;
}
/* Barang berbayar digambar sebagai special case: baris captionsnya (checkbox + nama +
   harga + chip) diberi latar & garis merah samar + catatan "ditagih sebagai item kedua".
   Kontrolnya (select varian / qty) sengaja DI LUAR kotak ini, selebar penuh grid — kalau
   kotaknya membungkus kontrol, kontrol itu menyempit 2×12px dan terlihat berbeda dari
   field form di atasnya. */
.addon-item-optional {
    margin-bottom: 8px;
}
.addon-item-optional .addon-caption {
    background: rgba(200, 35, 51, .03);
    border: 1px dashed rgba(200, 35, 51, .35);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.addon-paid-note {
    color: #6c757d;
}

/* ── Summary sidebar ── */
.summary-placeholder {
    color: #9ca3af;
    font-size: .85rem;
    text-align: center;
    padding: 12px 0;
}

/* ── Guest/Logged-in banner ── */
.banner-guest {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}
.banner-logged-in {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}
.banner-guest a,
.banner-logged-in a {
    font-weight: 600;
}

/* ── Alert error ── */
.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}
[data-bs-theme="dark"] .alert-info {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.25);
    color: #93c5fd;
}

/* ── Section label (form field groups) ── */
.section-label {
    font-size: .7rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .5rem;
}

/* Tautan panduan ukuran (📏 Size) — duduk di ujung kanan baris caption, berdampingan
   dengan nama barang & chip. */
.variant-chart-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}
[data-bs-theme="dark"] .variant-chart-link {
    color: #f87171;
}

/* Judul section Tambahan Berbayar — sengaja beda warna dari 👜 Race Pack: merah brand,
   supaya peserta melihat dari kejauhan bahwa ini tagihan tambahan di luar paket.
   Selector .participant-card diperlukan: aturan dark-mode untuk .section-label
   (spesifisitas 0-3-1) harus dikalahkan di kedua tema. */
.participant-card .addon-paid-heading {
    color: #c82333;
}

/* Kepala "Item 1 / Item 2" di ringkasan — penanda dua item keranjang. */
.summary-item-head {
    font-size: .7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

/* ── Theme button ── */
.btn-theme {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
}
.btn-theme:hover {
    opacity: 1;
    background: var(--theme-dark, #A01C29);
    border-color: var(--theme-dark, #A01C29);
    color: #fff;
}
/* Bootstrap mematikan outline tombol (`.btn:focus-visible { outline: 0 }`) dan menyisakan
   bayangan fokus tipis; pengguna keyboard butuh indikator yang jelas (WCAG 2.4.7). */
.btn-theme:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}
[data-bs-theme="dark"] .btn-theme:focus-visible {
    outline-color: #f1f5f9;
}
.btn-outline-theme {
    background: transparent;
    border-color: var(--theme);
    color: var(--theme);
}
.btn-outline-theme:hover {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
}
[data-bs-theme="dark"] .btn-outline-theme {
    color: var(--theme);
}
[data-bs-theme="dark"] .btn-outline-theme:hover {
    color: #fff;
}

/* ── Invalid feedback sizing ── */
.invalid-feedback {
    font-size: .75rem;
}

/* ── Success page card ── */
.success-card {
    max-width: 480px;
    width: 100%;
}
.success-wrapper {
    min-height: 60vh;
}

/* ── Remove participant button ── */
.btn-remove-participant {
    font-size: .8rem;
}
.btn-remove-participant:hover {
    text-decoration: underline !important;
}

/* ── D-none override for JS init ── */
.d-none-js {
    display: none !important;
}

/* ── Legal pages (TnC, Privacy) ── */
.legal-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-top: 28px;
    margin-bottom: 8px;
}
.legal-content h2:first-child {
    margin-top: 0;
}
.legal-content p,
.legal-content li {
    font-size: .9rem;
    color: #374151;
    line-height: 1.7;
}
.legal-content ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

/* ── Landing Page: Hero ── */
.hero {
    position: relative;
    padding: 80px 0 72px;
    text-align: center;
    background: linear-gradient(160deg, #0B1120 0%, #111c34 40%, #0B1120 100%);
    overflow: hidden;
}
/* Running shoe pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M20 35c-2-6-1-12 4-16 6-5 14-4 18 2 3 5 2 12-2 17l-8-4 4-7-10-2-6 10zm18-10l5 3-2 5-5-3 2-5zm20 10c3-6 4-12 0-17-5-6-13-7-18-2-4 4-3 10 0 16l9-4-3-8 9-3 3 11zm-17-9l-4 3 1 4 4-3-1-4z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 120px 72px;
}
/* Accent glow (IRM brand gradient) */
.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse at center, rgba(200,35,51,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: .04;
    background: linear-gradient(135deg, var(--irm-red), var(--irm-blue));
}
.hero-shape-1 { width: 320px; height: 320px; top: -100px; right: -80px; animation: heroFloat 8s ease-in-out infinite; }
.hero-shape-2 { width: 140px; height: 140px; bottom: -30px; left: 8%; animation: heroFloat 6s ease-in-out infinite reverse; }
.hero-shape-3 { width: 200px; height: 200px; top: 40%; left: -60px; animation: heroFloat 10s ease-in-out infinite 2s; }
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-16px) scale(1.05); }
}
.hero-badge {
    display: inline-block;
    background: rgba(200,35,51,.12);
    color: #f87171;
    font-size: .73rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    border: 1px solid rgba(200,35,51,.2);
}
.hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
    position: relative;
    font-family: var(--font-primary);
}
.hero-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, #D11D3B, #00A9E0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    position: relative;
}
.hero-subtitle {
    font-size: 1rem;
    color: #94a3b8;
    max-width: 480px;
    margin: 0 auto 24px;
    position: relative;
}
.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 24px;
}
.btn-hero {
    background: var(--irm-red);
    border: 2px solid var(--irm-red);
    color: #fff;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    transition: background .2s, border-color .2s, transform .2s;
}
.btn-hero:hover {
    background: #A01C29;
    border-color: #A01C29;
    color: #fff;
}
.btn-hero-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,.2);
    color: #fff;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color .2s, background .2s;
}
.btn-hero-outline:hover {
    border-color: var(--irm-red);
    background: rgba(200,35,51,.1);
    color: #fff;
}
.hero-trust {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
    position: relative;
}
.hero-trust-divider {
    color: #334155;
}

/* ── Landing Page: Sections ── */
.section {
    padding: 64px 0;
}
.bg-light {
    background: #f9fafb;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
.section-subtitle {
    font-size: .95rem;
    color: #6c757d;
    margin-bottom: 32px;
}

/* ── Scroll reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Banner hero halaman detail: SATU tinggi untuk semua event ──
   Berfoto atau tidak, tingginya sama persis. Dulu yang berfoto memakai rasio 16:9 sementara
   yang tidak memakai pita tetap, jadi tinggi hero berbeda-beda antar event dan yang berfoto
   terlihat jauh lebih besar. Sekarang tingginya satu variabel yang dipakai kedua-duanya,
   supaya tidak bisa melenceng lagi kalau salah satu diubah.
   Angkanya menjaga dua hal sekaligus: foto 16:9 di layar desktop masih memperlihatkan sekitar
   separuh tingginya (cukup untuk judul yang tertulis di banner), tapi H1 dan tabel kategori
   tetap kelihatan tanpa menggulir. Foto dipotong mengikuti pita ini (object-fit: cover) —
   bukan sebaliknya. */
.event-detail-hero {
    --event-detail-banner-h: clamp(150px, 28vw, 380px);
}
/* .card-img-top bawaan Bootstrap dipakai untuk lebar dan radius sudut atas — .card TIDAK punya
   overflow:hidden, jadi radiusnya harus dari kelas itu, bukan warisan.
   flex-shrink: 0 karena .card adalah flex column dan gambar bisa terhimpit jadi tipis. */
.event-detail-hero-img,
.event-detail-hero-fallback {
    height: var(--event-detail-banner-h);
    flex-shrink: 0;
}
.event-detail-hero-img {
    width: 100%;
    object-fit: cover;
}
/* Banner untuk event yang belum diunggah fotonya: perlakukan yang sama persis dengan poster
   kartu event di brand.css (`.catalog .poster`) — gradasi brand + garis diagonal putih
   miring, tanpa ikon. Dulu blok ini menggambar gradasi dari theme_color event plus satu ikon
   gambar besar di tengahnya, dan ikon itu terbaca sebagai "gambar gagal dimuat", bukan
   sebagai banner. Tidak ada aturan khusus mode gelap: gradasinya sudah gelap di kedua tema.
   Cadangan di dalam var() dipakai kalau brand.css belum terunggah — tanpa itu bannernya
   hilang sama sekali, karena --gl hanya didefinisikan di sana.
   Tanpa nama event: H1-nya persis di bawah blok ini. Murni dekoratif. */
.event-detail-hero-fallback {
    position: relative;
    overflow: hidden;
    background: var(--gl, linear-gradient(135deg, #1B429A, #00A9E0));
}
/* Garis diagonalnya bentuk yang sama dengan `.poster:after`, tapi skalanya tidak bisa ikut:
   poster setinggi 160px sementara banner ini sampai 380px, jadi garis 200x260px yang sama
   akan terbaca sebagai bintik kecil di sudut. Karena itu ukurannya mengikuti tinggi banner
   (persen), bukan angka piksel tetap. */
.event-detail-hero-fallback::after {
    content: '';
    position: absolute;
    right: 6%;
    top: -20%;
    width: 18%;
    height: 140%;
    background: rgba(255, 255, 255, .14);
    transform: skewX(-24deg);
}

/* ── Kartu kategori di halaman detail event ──
   Menggantikan tabel. Di tabel jarak terjepit di kolom sempit padahal itu angka pertama yang
   dicari pelari; di kartu ia bisa ditulis besar, dan seluruh badan kartu jadi sasaran klik
   untuk memilih rute. Breakpoint-nya sengaja disamakan dengan grid daftar event supaya
   halaman ini dan /events terasa satu sistem. */
.event-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
@media (min-width: 992px) {
    .event-category-grid { grid-template-columns: repeat(3, 1fr); }
}
.event-category-card {
    transition: box-shadow .25s, border-color .25s, transform .25s;
}
/* Kartu kategori sebagai tautan penuh (halaman pemilihan kategori /register/{slug}):
   seluruh badan kartu = sasaran klik, tanpa garis bawah/pewarnaan tautan bawaan. */
.event-category-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.event-category-link:hover,
.event-category-link:focus-visible {
    color: inherit;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    border-color: var(--bs-card-border-color, rgba(0,0,0,.175));
}
/* Lebih lega dari .card-body bawaan (1rem): kartu ini berdiri sendiri sebagai satu-satunya
   isi section, jadi padding rapat membuatnya terlihat seperti baris tabel yang diperbesar. */
.event-category-card .card-body {
    padding: 1.35rem 1.35rem 1.15rem;
}
/* Hanya kartu ber-rute yang bisa diklik. Kartu tanpa rute harus terbaca sebagai informasi
   biasa — memberi kursor pointer di sana menjanjikan sesuatu yang tidak terjadi. */
.event-category-card-selectable {
    cursor: pointer;
}
.event-category-card-selectable:hover,
.event-category-card-selectable:focus-visible {
    transform: translateY(-4px);
    border-color: var(--theme);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    outline: none;
}
/* Kartu yang rute-nya sedang tampil di peta. */
.event-category-card-active {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px rgba(200, 35, 51, .18);
}
/* Kartu kategori SOLD OUT di /register/{slug}: bukan tautan, tampak mati, tapi
   nama/harga/paket tetap terbaca supaya pembaca tahu apa yang habis. */
.event-category-card-soldout {
    opacity: .6;
    cursor: not-allowed;
}
.event-category-card-soldout .event-category-card-price {
    text-decoration: line-through;
}
.event-category-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.event-category-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
.event-category-card-distance {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--theme);
}
.event-category-card-distance-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}
.event-category-card-distance-unit {
    font-size: .9rem;
    font-weight: 600;
}
.event-category-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    font-size: .85rem;
}
.event-category-card-route {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--theme);
    font-weight: 500;
}
/* Kategori yang GPX-nya belum diunggah: jangan pakai warna tema, itu warna ajakan. Warna ini
   justru keterangan yang menjelaskan kenapa kartunya tak bisa diklik, jadi harus terbaca:
   4.83:1 di kartu putih (0.85rem) — #9ca3af lama hanya 2.54:1. */
.event-category-card-route-empty {
    color: #6b7280;
    font-weight: 400;
}
.event-category-card-gpx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
    color: #6b7280;
    text-decoration: none;
}
.event-category-card-gpx:hover {
    border-color: var(--theme);
    color: var(--theme);
}
[data-bs-theme="dark"] .event-category-card-foot {
    border-top-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .event-category-card-gpx {
    border-color: rgba(255,255,255,.15);
    color: #94a3b8;
}
/* Warna tema event sebagai TEKS di atas kartu gelap (#1e293b) jatuh ke ~2.6:1 (mis. #C82333).
   #f87171 memulihkannya ke ~5.2:1 dan itu nada yang sama dengan .category-card-price di dark.
   Sengaja di ATAS aturan route-empty: elemen rute kosong membawa kedua kelas dan harus tetap
   netral (bukan warna ajakan). */
[data-bs-theme="dark"] .event-category-card-distance,
[data-bs-theme="dark"] .event-category-card-route {
    color: #f87171;
}
/* Harga membawa utilitas `.text-theme` (!important) dari markup, jadi butuh bobot yang sama —
   tanpa itu warna tema (terang) tetap menang di atas kartu gelap. */
[data-bs-theme="dark"] .event-category-card-price {
    color: #f87171 !important;
}
[data-bs-theme="dark"] .event-category-card-route-empty {
    /* 5.71:1 di atas kartu #1e293b — #64748b hanya 3.07:1. */
    color: #94a3b8;
}
/* ── Landing Page: Features ── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* Label Foto Otomatis — spotlight card */
.feature-label {
    position: relative;
    border: 1px solid rgba(79, 70, 229, .22);
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(79, 70, 229, .07), rgba(200, 35, 51, .05));
    box-shadow: 0 8px 24px rgba(79, 70, 229, .10);
}
.feature-label .feature-svg {
    color: #4f46e5;
}
.feature-label .feature-name {
    background: linear-gradient(120deg, #4f46e5, #C82333);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.feature-item {
    padding: 28px 16px;
}
.feature-svg {
    width: 36px;
    height: 36px;
    color: var(--theme);
    margin-bottom: 14px;
    stroke-width: 1.5;
}
.feature-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.feature-desc {
    font-size: .85rem;
    color: #6c757d;
    line-height: 1.6;
}

/* ── Landing Page: Stats ── */
.stats-section {
    padding: 56px 0;
    background: #fff;
}
.stats-grid {
    display: grid;
    /* Jumlah metrik statistik dinamis (1–3; saat ini 2): biarkan grid yang mengatur kolom.
       Inline `repeat(N, 1fr)` di welcome.blade.php dulu dipakai untuk itu, tapi ia juga menimpa
       aturan stack di bawah 480px — dengan auto-fit inline itu boleh dihapus dan stack kembali
       berlaku untuk semua jumlah metrik. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; gap: 20px; }
}
.stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--theme);
    line-height: 1.2;
}
.stat-label {
    font-size: .85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Events list page ── */
.events-header {
    padding-bottom: 8px;
}
/* Judul halaman katalog memakai skala judul seksi beranda (clamp yang sama dengan
   `.catalog h2` di brand.css). Bukan karena h1-nya kurang besar, tapi karena dua halaman
   dalam satu alur — beranda lalu /events — harus memakai satu skala judul; sebelumnya
   ukuran h1 di sini datang dari bawaan Bootstrap dan tidak berhubungan dengan apa pun. */
.events-header h1 {
    font-size: clamp(30px, 3.8vw, 46px);
}
/* Ikon kaca pembesar di dalam input pencarian — SVG Bootstrap sebaris, jadi tingginya
   ditentukan di sini. pointer-events: none supaya klik tepat di atas ikon tetap masuk ke
   input, bukan terhenti di ikon. Padding kiri 36px = 12px padding bawaan Bootstrap +
   16px ikon + 8px jarak. */
.search-field {
    position: relative;
}
.search-field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.search-field .form-control {
    padding-left: 36px;
}
.feather-sm {
    width: 14px;
    height: 14px;
}
.feather-lg {
    width: 48px;
    height: 48px;
    color: #9ca3af;
}
/* ── Landing Page: CTA section ── */
.cta-section {
    padding: 64px 0;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}
.cta-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}
.cta-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 24px;
}

/* ── Contact page ── */
.contact-page {
    max-width: 600px;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 480px) {
    .contact-grid { grid-template-columns: 1fr; }
}
/* Kartu kini tiga (WhatsApp, Instagram, Email). Dengan dua kolom, kartu Email menggantung
   sendirian di baris kedua — di layar ≥768px beri ruang untuk tiga kolom sekaligus. */
@media (min-width: 768px) {
    .contact-page { max-width: 900px; }
    .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-card-link {
    text-decoration: none;
    color: inherit;
}
.contact-card-link:hover {
    color: inherit;
}
.contact-card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.contact-card-link:hover .contact-card {
    border-color: var(--theme);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}
/* Ikon Email digambar dengan `currentColor`; <svg>-nya masih membawa inline style warna, jadi
   aturan ini baru terlihat setelah inline style itu dihapus dari contact.blade.php. */
.contact-icon-email {
    color: #6c757d;
}
.contact-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
.contact-card-detail {
    font-size: .9rem;
    color: #6c757d;
    margin-bottom: 8px;
}
.contact-card-action {
    font-size: .85rem;
    font-weight: 600;
    color: var(--theme);
}

/* ── PAR-Q Health Screening ─────────────────────────────── */
.parq-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.parq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
}
.parq-question-text {
    font-size: .82rem;
    color: #333;
    flex: 1;
}
.parq-radio-group {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.parq-radio-label {
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.parq-radio-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}
.parq-notif {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: .85rem;
}
.parq-notif-warning {
    background: #fff5f5;
    border: 1px solid #e53e3e;
    color: #c53030;
}
.parq-notif-success {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    color: #2e7d32;
}
.parq-upload {
    background: #fafafa;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px dashed #ccc;
}

/* ═══════════════════════════════════════════════
   Dark Mode Styles
   ═══════════════════════════════════════════════ */
[data-bs-theme="dark"] .card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.06);
    color: #cbd5e1;
}
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card .fs-6 {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .section-title {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .section-subtitle {
    color: #94a3b8;
}
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
    background: #1e293b !important;
}
/* Navbar harus konsisten dengan footer (#0B1120), bukan #1e293b */
[data-bs-theme="dark"] .navbar.bg-white {
    background: #0B1120 !important;
}
[data-bs-theme="dark"] .text-dark {
    color: #f1f5f9 !important;
}
/* #64748b hanya 3.07:1 di atas kartu #1e293b (3.8:1 di latar #0f172a) — gagal AA untuk
   teks seperti "Pilih event dan daftar sekarang" / "Menampilkan 1–12 dari 28 event". */
[data-bs-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #1e293b;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
    color-scheme: dark;
}
/* Bootstrap mewarnai placeholder dengan --bs-secondary-color (#6c757d), yang tidak pernah
   di-override untuk dark mode: di atas input #1e293b kontrasnya cuma 3.1:1, di bawah ambang
   WCAG AA. Warna di bawah ini yang sudah dipakai app untuk teks redup di dark mode
   (lihat .form-label) dan mencapai 5.6:1. */
[data-bs-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: #1e293b;
    border-color: var(--irm-red);
    color: #e2e8f0;
}
[data-bs-theme="dark"] .form-label {
    color: #94a3b8;
}
[data-bs-theme="dark"] .legal-content,
[data-bs-theme="dark"] .legal-content p,
[data-bs-theme="dark"] .legal-content li {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .parq-row {
    background: rgba(255,255,255,0.03);
}
[data-bs-theme="dark"] .parq-question-text {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .btn-link {
    color: #94a3b8;
}
[data-bs-theme="dark"] .btn-link:hover {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .modal-content {
    background: #1e293b;
    border-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .category-card {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .category-card:hover {
    border-color: var(--irm-red);
}
[data-bs-theme="dark"] .category-card.selected {
    background: #1e2a3d !important;
    border-color: var(--irm-red);
}
[data-bs-theme="dark"] .category-card-price {
    color: #f87171;
}
[data-bs-theme="dark"] .category-card-check {
    background: var(--irm-red);
    color: #fff;
}
[data-bs-theme="dark"] .participant-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
}
/* Registration: category cards */
[data-bs-theme="dark"] .category-card-name {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .category-card-type {
    color: #94a3b8;
}
[data-bs-theme="dark"] .category-card-meta {
    color: #94a3b8;
}
/* Registration: participant card text */
[data-bs-theme="dark"] .participant-label,
[data-bs-theme="dark"] .participant-card h3,
[data-bs-theme="dark"] .participant-card h5,
[data-bs-theme="dark"] .participant-card .section-label {
    color: #e2e8f0;
}
/* Registration: addon section */
[data-bs-theme="dark"] .addon-item label {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .addon-price {
    color: #22c55e;
}
[data-bs-theme="dark"] .addon-free-chip {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}
[data-bs-theme="dark"] .addon-paid-chip {
    background: rgba(248, 113, 113, .15);
    color: #f87171;
}
[data-bs-theme="dark"] .addon-item-optional .addon-caption {
    background: rgba(248, 113, 113, .04);
    border-color: rgba(248, 113, 113, .3);
}
[data-bs-theme="dark"] .addon-paid-note,
[data-bs-theme="dark"] .summary-item-head {
    color: #94a3b8;
}
[data-bs-theme="dark"] .participant-card .addon-paid-heading {
    color: #f87171;
}
/* Registration: summary sidebar */
[data-bs-theme="dark"] .sidebar-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .summary-row {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .summary-row.total {
    color: #f1f5f9;
    border-top-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .summary-row.indent {
    color: #94a3b8;
}
[data-bs-theme="dark"] .summary-placeholder {
    color: #64748b;
}
/* Landing page sections */
[data-bs-theme="dark"] .stats-section {
    background: #0f172a;
}
[data-bs-theme="dark"] .stat-label {
    color: #94a3b8;
}
[data-bs-theme="dark"] .feature-name {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .feature-desc {
    color: #94a3b8;
}
[data-bs-theme="dark"] .cta-section {
    background: #0f172a;
    border-top-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .cta-title {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .cta-subtitle {
    color: #94a3b8;
}
/* Contact page */
[data-bs-theme="dark"] .contact-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .contact-card-title {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .contact-card-detail {
    color: #94a3b8;
}
[data-bs-theme="dark"] .contact-card-action {
    /* 5.29:1 di atas #1e293b — var(--theme) #C82333 hanya 2.61:1. */
    color: #f87171;
}
[data-bs-theme="dark"] .contact-icon-email {
    color: #94a3b8;
}
[data-bs-theme="dark"] .contact-card-link:hover .contact-card {
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════
   Dark Mode — Auth Pages (Login, Register, OTP)
   ═══════════════════════════════════════════════ */
[data-bs-theme="dark"] .auth-card .card {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .auth-card h1,
[data-bs-theme="dark"] .auth-card h2,
[data-bs-theme="dark"] .auth-card .fs-4,
[data-bs-theme="dark"] .auth-card .fs-5 {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .auth-tabs {
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .auth-tabs a {
    color: #94a3b8;
}
[data-bs-theme="dark"] .auth-tabs a:hover:not(.active) {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .auth-info {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.25);
    color: #93c5fd;
}
[data-bs-theme="dark"] .auth-success {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.25);
    color: #86efac;
}
[data-bs-theme="dark"] .btn-google {
    background: #1e293b;
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .btn-google:hover {
    background: rgba(255,255,255,0.05);
}
[data-bs-theme="dark"] .auth-divider {
    color: #64748b;
}
[data-bs-theme="dark"] .auth-divider::before,
[data-bs-theme="dark"] .auth-divider::after {
    border-top-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .otp-digit {
    background: #1e293b;
    border-color: rgba(255,255,255,0.15);
    color: #e2e8f0;
}
[data-bs-theme="dark"] .otp-digit:focus {
    border-color: var(--irm-red);
}
/* Auth: register/login bottom text & links */
[data-bs-theme="dark"] .auth-card .small {
    color: #94a3b8;
}
[data-bs-theme="dark"] .auth-card .small a {
    color: #f87171;
}
/* Auth: Google button hover visibility */
[data-bs-theme="dark"] .btn-google:hover {
    background: rgba(255,255,255,0.12);
    color: #f1f5f9;
}

/* ═══════════════════════════════════════════════
   Photo Search Page
   ═══════════════════════════════════════════════ */
.photo-search-page h1 { color: var(--theme); }
.photo-search-page .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.photo-search-page .photo-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.photo-search-page .photo-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.photo-search-page .bib-tag {
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--theme);
    text-align: center;
    margin-top: auto;
}
/* Pagination: chips, themed through Bootstrap's own custom properties. Scoped to .pagination and
   .page-link on purpose — the rules that used to live here matched every descendant a/span, which
   painted the wrapper spans and the counters inside "Showing 1 to 24 of 29".

   Anchored on .pagination-nav, the site-wide wrapper for ->links(), so every public page that
   paginates (photos, events) gets the same chips. It deliberately is NOT anchored on
   .photo-search-page: that would leave other pages on stock Bootstrap pagination. */
.pagination-nav {
    margin-top: 20px;
}
.pagination-nav .pagination {
    --bs-pagination-padding-x: 12px;
    --bs-pagination-padding-y: 6px;
    --bs-pagination-font-size: .85rem;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 6px;
    --bs-pagination-bg: #e5e7eb;
    --bs-pagination-color: #374151;
    --bs-pagination-hover-bg: #d1d5db;
    --bs-pagination-hover-color: #111827;
    --bs-pagination-focus-bg: #d1d5db;
    --bs-pagination-focus-color: #111827;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-bg: var(--theme);
    --bs-pagination-active-border-color: var(--theme);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: #e5e7eb;
    --bs-pagination-disabled-color: #9ca3af;

    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
}
/* Square off nothing: Bootstrap zeroes the inner corners of the first/last item, which reads as
   broken once the chips are separated by a gap. Same specificity, but app.css loads after it. */
.pagination-nav .page-item .page-link {
    border-radius: 6px;
    /* The ‹ and › chips are only ~27px wide otherwise — under the comfortable tap-target size
       for a page runners scroll on a phone. */
    min-width: 36px;
    text-align: center;
}

/* Dark mode — Photo Search Page */
[data-bs-theme="dark"] .photo-search-page .photo-card {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .photo-search-page .bib-tag {
    color: var(--theme);
}
[data-bs-theme="dark"] .pagination-nav .pagination {
    --bs-pagination-bg: #334155;
    --bs-pagination-color: #94a3b8;
    --bs-pagination-hover-bg: #475569;
    --bs-pagination-hover-color: #e2e8f0;
    --bs-pagination-focus-bg: #475569;
    --bs-pagination-focus-color: #e2e8f0;
    --bs-pagination-active-bg: var(--theme);
    --bs-pagination-active-border-color: var(--theme);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: #334155;
    --bs-pagination-disabled-color: #64748b;
}

/* ═══════════════════════════════════════════════
   Video Search Page (extends .photo-search-page)
   Own frame/facade classes on purpose: .photo-card img
   fixes a 150px height that would squash the player.
   ═══════════════════════════════════════════════ */

/* One column for the whole page. The player needs a width cap (16:9 at 1200px is 675px
   tall), and capping only the player left the heading and the search field stretching past
   it on desktop — the page read as two different layouts stacked. */
.video-search-page .video-search-inner {
    max-width: 880px;
    margin: 0 auto;
}

/* Player + action bar are one card. */
.video-search-page .video-result {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.video-search-page .video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.video-search-page .video-frame iframe,
.video-search-page .video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.video-search-page .video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    display: block;
}
.video-search-page .video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
}
.video-search-page .video-facade:hover img {
    opacity: 1;
}
.video-search-page .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* Action bar, welded to the bottom of the frame. */
.video-search-page .video-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-top: 1px solid #e5e7eb;
}
.video-search-page .video-who {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.video-search-page .video-bib {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--theme);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.video-search-page .video-note {
    font-size: .85rem;
    color: #6b7280;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The runner's goal is to leave with the file, so this is the loudest control on the page. */
.video-search-page .video-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--theme);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}
.video-search-page .video-download:hover {
    color: #fff;
    filter: brightness(1.1);
}
.video-search-page .video-download:active {
    filter: brightness(.95);
}
.video-search-page .video-download svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Empty / not-found states: a placeholder block reads as "nothing here yet",
   where loose grey text read as a page that failed to render. */
.video-search-page .video-empty {
    text-align: center;
    padding: 44px 24px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    color: #6b7280;
}
.video-search-page .video-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    color: #9ca3af;
}
.video-search-page .video-empty p {
    margin: 0;
}
.video-search-page .video-empty p + p {
    margin-top: 6px;
}

@media (max-width: 480px) {
    .video-search-page .video-bar {
        padding: 12px;
    }
    .video-search-page .video-who {
        width: 100%;
    }
    .video-search-page .video-download {
        width: 100%;
        justify-content: center;
    }
}

/* Dark mode — Video Search Page */
[data-bs-theme="dark"] .video-search-page .video-result {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
[data-bs-theme="dark"] .video-search-page .video-bar {
    border-top-color: #334155;
}
[data-bs-theme="dark"] .video-search-page .video-bib {
    background: #334155;
}
[data-bs-theme="dark"] .video-search-page .video-note {
    color: #94a3b8;
}
[data-bs-theme="dark"] .video-search-page .video-empty {
    border-color: #334155;
    background: #1e293b;
    color: #94a3b8;
}
[data-bs-theme="dark"] .video-search-page .video-empty svg {
    color: #64748b;
}

/* ═══════════════════════════════════════════════
   Pengaman kontras warna tema event (halaman foto & video)
   theme_color event dipakai apa adanya: di satu sisi terlalu terang untuk teks putih
   (mis. #0ea5e9 = 2.77:1 di atas tombol; 2.63:1 saat jadi judul di latar terang),
   di sisi lain terlalu gelap sebagai teks di latar gelap (#2B328C = 1.65:1 di atas
   #0f172a). Rona tetap milik event — hanya digelapkan/diterangkan lewat color-mix.
   Besarannya dihitung dengan rumus kontras WCAG terhadap SEMUA theme_color yang ada di
   basis data (14 nilai, kueri 2026-10-06); nilai terburuk tiap campuran tetap ≥ 4.5:1
   (latar tombol 72% → 4.98; :hover 62% → 6.34; teks terang 68% → 5.21; teks gelap 40% →
   4.74). Baris tanpa color-mix adalah cadangan peramban lama (tampilannya kembali seperti
   sekarang, bukan rusak).
   ═══════════════════════════════════════════════ */
.photo-search-page .btn-theme,
.video-search-page .video-download {
    background-color: var(--theme);
    border-color: var(--theme);
    background-color: color-mix(in srgb, var(--theme) 72%, black);
    border-color: color-mix(in srgb, var(--theme) 72%, black);
}
.photo-search-page .btn-theme:hover,
.photo-search-page .btn-theme:active,
.video-search-page .video-download:hover,
.video-search-page .video-download:active {
    /* :hover/:active ikut ditutup: filter brightness(1.1) bawaan .video-download menaikkan
       tema terang kembali ke bawah AA (~4.25:1), dan latar :active .btn jadi transparan saat
       `--bs-btn-active-bg` tak terdefinisi. */
    filter: none;
    background-color: color-mix(in srgb, var(--theme) 62%, black);
    border-color: color-mix(in srgb, var(--theme) 62%, black);
}
.photo-search-page .bib-tag,
.video-search-page .video-bib {
    color: var(--theme);
    color: color-mix(in srgb, var(--theme) 68%, black);
}
[data-bs-theme="dark"] .photo-search-page .bib-tag,
[data-bs-theme="dark"] .video-search-page .video-bib {
    color: #f87171;
    color: color-mix(in srgb, var(--theme) 40%, white);
}
/* Judul halaman juga berwarna tema mentah: di latar terang #0ea5e9 hanya 2.63:1, dan di
   latar gelap ada 6 theme di bawah 4.5:1 — #2B328C sampai 1.65:1. */
.photo-search-page h1 {
    color: var(--theme);
    color: color-mix(in srgb, var(--theme) 68%, black);
}
[data-bs-theme="dark"] .photo-search-page h1 {
    color: #f87171;
    color: color-mix(in srgb, var(--theme) 40%, white);
}
/* Chip halaman aktif di paginasi: teks putih (#fff) di atas tema mentah — persis kasus
   tombol di atas. Nilainya variabel Bootstrap, jadi penggantinya lewat @supports: custom
   property berisi color-mix tidak punya "fallback deklarasi" seperti properti biasa —
   di peramban lama ia justru menyubstitusi nilai tak dikenal ke background-color. */
@supports (background: color-mix(in srgb, red 50%, black)) {
    .photo-search-page .pagination-nav .pagination {
        --bs-pagination-active-bg: color-mix(in srgb, var(--theme) 72%, black);
        --bs-pagination-active-border-color: color-mix(in srgb, var(--theme) 72%, black);
    }
}

/* ═══════════════════════════════════════════════
   Route Map Page
   ═══════════════════════════════════════════════ */
.route-map-demo-page .route-map-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 10px;
}
@media (max-width: 768px) {
    .route-map-demo-page .route-map-layout {
        grid-template-columns: 1fr;
    }
    .route-map-demo-page .route-points-sidebar {
        order: 1;
    }
    .route-map-demo-page .route-map-container {
        height: 300px;
    }
}
.route-map-demo-page .route-map-panel {
    min-width: 0;
}
.route-map-demo-page .route-map-container {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    z-index: 1;
}
[data-bs-theme="dark"] .route-map-demo-page .route-map-container {
    border-color: rgba(255,255,255,0.08);
}
.route-map-demo-page .route-slider-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 6px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
[data-bs-theme="dark"] .route-map-demo-page .route-slider-bar {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
}
.route-map-demo-page .route-range-input {
    flex: 1;
    accent-color: var(--theme);
    height: 6px;
}
.route-map-demo-page .route-points-sidebar {
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    font-size: .85rem;
    align-self: start;
}
[data-bs-theme="dark"] .route-map-demo-page .route-points-sidebar {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
    color: #cbd5e1;
}
.route-map-demo-page .route-point-item {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .15s;
}
.route-map-demo-page .route-point-item:hover {
    background: rgba(0,0,0,.04);
}
[data-bs-theme="dark"] .route-map-demo-page .route-point-item:hover {
    background: rgba(255,255,255,0.05);
}
/* Route pin pulse animation (start/finish) */
.route-pin-pulse {
    animation: pinPulse 2s ease-in-out infinite;
}
@keyframes pinPulse {
    0%, 100% { filter: drop-shadow(0 0 3px currentColor); }
    50% { filter: drop-shadow(0 0 8px currentColor); }
}
/* Feather pin — iconAnchor offset via setIcon, no CSS transform needed */

/* Elevation chart container */
.route-map-demo-page .elevation-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px 2px;
    margin-top: 4px;
}
[data-bs-theme="dark"] .route-map-demo-page .elevation-container {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
}

/* Distance label dark mode — keep readable on dark tiles */
[data-bs-theme="dark"] .distance-label-icon > div {
    background: rgba(30,41,59,.9) !important;
}

/* Leaflet overrides — keep map visible in dark mode */
[data-bs-theme="dark"] .leaflet-container {
    background: #1e293b;
}
[data-bs-theme="dark"] .leaflet-control-zoom a {
    background: #1e293b;
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .leaflet-control-attribution {
    background: rgba(30,41,59,.85) !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .leaflet-control-attribution a {
    color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════
   FAQ ACCORDION (landing page)
   ══════════════════════════════════════════════ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faq-item {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    gap: 1rem;
}
.faq-question:hover {
    background: rgba(0,0,0,.02);
}
.faq-chevron {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    transition: transform .25s;
}
.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer {
    max-height: 20rem;
    padding: 0 1.25rem 1rem;
}
.faq-answer p {
    margin: 0;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.7;
}
.faq-answer a {
    font-weight: 600;
}
[data-bs-theme="dark"] .faq-question:hover {
    background: rgba(255,255,255,.03);
}

/* ══════════════════════════════════════════════
   BUAT EVENT PAGE
   ══════════════════════════════════════════════ */
.organize-hero {
    padding: 4rem 0 3rem;
}
.organize-hero .hero-title {
    font-size: 2.5rem;
}
.organize-hero .hero-badge {
    display: inline-block;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .8rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
}
.organize-hero .hero-subtitle {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Step number circles */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .organize-hero .hero-title {
        font-size: 1.75rem;
    }
}