/* =====================================================================
   World Cup Hotels — Frontend theme (public + Fan)
   Layered on top of Bootstrap 5. No Tailwind, no Vite.
   ===================================================================== */

:root {
    --wc-green: #1b8f5a;
    --wc-green-dark: #14613f;
    --wc-gold: #f4b400;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Brand colour overrides (Bootstrap 5.3 CSS variable API) --- */
.bg-success {
    background-color: var(--wc-green) !important;
}

.text-success {
    color: var(--wc-green) !important;
}

.btn-primary {
    --bs-btn-bg: var(--wc-green);
    --bs-btn-border-color: var(--wc-green);
    --bs-btn-hover-bg: var(--wc-green-dark);
    --bs-btn-hover-border-color: var(--wc-green-dark);
    --bs-btn-active-bg: var(--wc-green-dark);
    --bs-btn-active-border-color: var(--wc-green-dark);
    --bs-btn-disabled-bg: var(--wc-green);
    --bs-btn-disabled-border-color: var(--wc-green);
}

a {
    color: var(--wc-green-dark);
}

a:hover {
    color: var(--wc-green);
}

/* --- Components --- */
.card {
    border-radius: .75rem;
}

.hero {
    background: linear-gradient(135deg, var(--wc-green) 0%, var(--wc-green-dark) 100%);
}

.opacity-90 {
    opacity: .9;
}

/* Listing cards (used from Phase 2 onward) */
.listing-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12) !important;
}

.listing-card .listing-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
}