/* =========================================================================
   JANNAH FIRDAUS KARAWANG — Design System
   Premium, elegant, high-trust Islamic travel aesthetic.
   Token source: brand brief (Juli 2026).
   ========================================================================= */

:root {
    /* Brand palette — kuning keemasan (gold) sebagai warna aksi utama, hijau utk WhatsApp/sukses.
       Tidak ada biru di seluruh UI, sesuai gaya jannahfirdaus.com. */
    --jf-primary: #C8A951;
    --jf-primary-dark: #A98826;
    --jf-primary-tint: #F8F2E2;
    --jf-gold: #C8A951;
    --jf-gold-dark: #A98826;
    --jf-gold-tint: #F8F2E2;
    --jf-green: #2E7D32;
    --jf-green-dark: #1F5723;
    --jf-green-tint: #E8F3E8;
    --jf-bg: #FFFFFF;
    --jf-ink: #333333;
    --jf-ink-soft: #6B6B6B;
    --jf-border: #ECEAE4;

    /* Radii */
    --jf-radius-card: 16px;
    --jf-radius-btn: 12px;
    --jf-radius-input: 12px;

    /* Shadow */
    --jf-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.07);
    --jf-shadow-lift: 0 18px 40px rgba(15, 23, 42, 0.12);

    /* Type */
    --jf-font: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--jf-font);
    color: var(--jf-ink);
    background: var(--jf-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }
.jf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jf-gold-dark);
    margin-bottom: .75rem;
}
.jf-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--jf-gold);
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 2px;
}

a { color: var(--jf-primary); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--jf-radius-btn); font-weight: 600; padding: .65rem 1.4rem; }
.btn-lg { padding: .85rem 1.9rem; font-size: 1rem; }

/* Gold = warna aksi utama (booking, CTA) — teks gelap agar kontras aman di atas gold */
.btn-primary { background: var(--jf-primary); border-color: var(--jf-primary); color: #26210f; }
.btn-primary:hover, .btn-primary:focus { background: var(--jf-primary-dark); border-color: var(--jf-primary-dark); color: #fff; }
.btn-outline-primary { border-width: 1.5px; color: var(--jf-primary-dark); border-color: var(--jf-primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--jf-primary); border-color: var(--jf-primary); color: #26210f; }
.btn-gold { background: var(--jf-gold); border-color: var(--jf-gold); color: #26210f; }
.btn-gold:hover { background: var(--jf-gold-dark); border-color: var(--jf-gold-dark); color: #fff; }

/* Hijau = warna WhatsApp / status tersedia */
.btn-success { background: var(--jf-green); border-color: var(--jf-green); }
.btn-success:hover, .btn-success:focus { background: var(--jf-green-dark); border-color: var(--jf-green-dark); }
.btn-outline-success { color: var(--jf-green); border-color: var(--jf-green); }
.btn-outline-success:hover, .btn-outline-success:focus { background: var(--jf-green); border-color: var(--jf-green); color: #fff; }

.btn:focus-visible, a:focus-visible, .form-control:focus-visible { outline: 2px solid var(--jf-primary-dark); outline-offset: 2px; }
.form-control:focus, .form-select:focus { border-color: var(--jf-gold); box-shadow: 0 0 0 .25rem rgba(200,169,81,.25); }

/* Override kelas warna Bootstrap bawaan (dipakai di banyak file) supaya tidak ada biru tersisa */
.text-primary, .text-primary-emphasis { color: var(--jf-primary-dark) !important; }
.text-success { color: var(--jf-green) !important; }
.border-primary, .border-primary-subtle { border-color: var(--jf-primary) !important; }
.bg-primary, .badge.bg-primary { background-color: var(--jf-primary) !important; color: #26210f !important; }
.bg-primary-subtle { background-color: var(--jf-primary-tint) !important; }
.bg-success, .badge.bg-success { background-color: var(--jf-green) !important; }
.link-primary { color: var(--jf-primary-dark) !important; }

/* ---------- Cards ---------- */
.jf-card {
    background: #fff;
    border: 1px solid var(--jf-border);
    border-radius: var(--jf-radius-card);
    box-shadow: var(--jf-shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}
.jf-card:hover { transform: translateY(-4px); box-shadow: var(--jf-shadow-lift); }
.card { border-radius: var(--jf-radius-card); }
.form-control, .form-select { border-radius: var(--jf-radius-input); }

/* ---------- Announcement bar ---------- */
.jf-announce {
    background: linear-gradient(90deg, var(--jf-gold-dark) 0%, var(--jf-gold) 100%);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}
.jf-announce .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- Header ---------- */
.jf-header { backdrop-filter: saturate(180%) blur(6px); background: rgba(255,255,255,.92); }
.jf-header .nav-link { font-weight: 600; color: var(--jf-ink); }
.jf-header .nav-link:hover, .jf-header .nav-link.active { color: var(--jf-primary); }

/* ---------- Hero ---------- */
.jf-hero {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.jf-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,16,8,.72) 0%, rgba(20,16,8,.55) 55%, rgba(20,16,8,.85) 100%);
}
.jf-hero > .container { position: relative; z-index: 2; }
.jf-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); }

/* Signature: subtle Islamic geometric line motif (mashrabiya lattice), gold, low opacity */
.jf-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='1' opacity='0.35'%3E%3Cpath d='M28 2 L48 14 L48 42 L28 54 L8 42 L8 14 Z'/%3E%3Cpath d='M28 2 L28 54 M8 14 L48 42 M48 14 L8 42'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}
.jf-divider {
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='1.2' opacity='0.55'%3E%3Cpath d='M22 2 L38 12 L38 32 L22 42 L6 32 L6 12 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 32px 32px;
}

/* Hero search card — slight glass effect (used sparingly, per brief) */
.jf-search-card {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-radius: var(--jf-radius-card);
    box-shadow: var(--jf-shadow-lift);
}

/* ---------- Trust strip ---------- */
.jf-trust-item { font-weight: 700; color: var(--jf-ink); }
.jf-trust-item i { color: var(--jf-gold-dark); }

/* ---------- Package cards ---------- */
.jf-badge-discount {
    background: var(--jf-gold);
    color: #fff;
    font-weight: 700;
    font-size: .72rem;
    padding: .3rem .6rem;
    border-radius: 999px;
}
.jf-badge-seat {
    font-size: .72rem;
    font-weight: 700;
    padding: .3rem .6rem;
    border-radius: 999px;
}
.jf-badge-seat.is-available { background: var(--jf-green-tint); color: var(--jf-green); }
.jf-badge-seat.is-limited { background: #FFF3CD; color: #8a6d1a; }
.jf-badge-seat.is-full { background: #FBE7E7; color: #B3261E; }

/* Seat availability color dot (calendar-style indicator) */
.jf-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.jf-dot.is-available { background: var(--jf-green); }
.jf-dot.is-limited { background: #E0A100; }
.jf-dot.is-full { background: #C0392B; }

/* ---------- Stats ---------- */
.jf-stat-num { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 800; color: var(--jf-primary); }

/* ---------- Fade up on scroll (progressive enhancement) ---------- */
/* PENTING: default-nya konten selalu TAMPIL. Kelas .jf-pending (disematkan oleh
   JS saja) yang menyembunyikan sementara sebelum animasi — supaya kalau script
   gagal jalan (CDN diblokir jaringan, dsb), konten tetap terlihat, bukan hilang. */
.jf-fade-up { transition: opacity .5s ease, transform .5s ease; }
.jf-fade-up.jf-pending { opacity: 0; transform: translateY(16px); }
.jf-fade-up.jf-in { opacity: 1; transform: translateY(0); }

/* ---------- Sticky mobile bottom CTA ---------- */
.jf-mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
    background: #fff;
    border-top: 1px solid var(--jf-border);
    box-shadow: 0 -8px 24px rgba(15,23,42,.08);
    padding: .6rem .8rem;
    display: none;
}
@media (max-width: 767.98px) {
    .jf-mobile-cta { display: flex; gap: .5rem; }
    body { padding-bottom: 72px; }
}

/* ---------- Footer ---------- */
.jf-footer { background: #16233B; }
.jf-footer a { color: #C7D2E3; }
.jf-footer a:hover { color: var(--jf-gold); }
.jf-footer h5, .jf-footer h6 { color: #fff; }

/* ---------- Legacy compatibility ---------- */
.card-img-top { object-fit: cover; height: 220px; }
.accordion-button:not(.collapsed) { background-color: var(--jf-primary-tint); color: var(--jf-primary-dark); }
.navbar-brand img { object-fit: contain; }