@font-face {
    font-family: 'FranciaQatar2022';
    src: url('/fonts/FranciaQatar2022.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background: #0b0f1a;
    color: #e6e6e6;
}

.navbar {
    background: rgba(10, 14, 24, 0.85);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.brand-title {
    font-family: 'FranciaQatar2022', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    letter-spacing: 1px;
}

.hero {
    min-height: 70vh;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(76, 110, 245, 0.12), transparent 60%),
                radial-gradient(900px 500px at 80% -10%, rgba(0, 255, 200, 0.09), transparent 60%);
    display: flex;
    align-items: center;
}

.card-dark {
    background: #0f1524;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    color: #e6e6e6;
}

/* Tables: adapt colors to dark theme */
.table {
    --tbl-bg: #0f1524;
    --tbl-border: rgba(255,255,255,0.08);
    --tbl-text: #e6e6e6;
    --tbl-muted: #9aa4b2;
    --tbl-hover: rgba(0, 212, 166, 0.08);
    --tbl-stripe: rgba(255,255,255,0.03);
    color: var(--tbl-text);
    background-color: var(--tbl-bg);
    border-color: var(--tbl-border);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--tbl-text);
    border-color: var(--tbl-border);
}
.table thead th {
    color: #8ad6c8;
    border-bottom: 2px solid var(--tbl-border);
    background: linear-gradient(180deg, rgba(138,214,200,0.06), rgba(138,214,200,0.02));
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--tbl-stripe);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--tbl-hover);
}
.table .price-tag {
    color: #49d1b4;
}
.badge.bg-success { background-color: #2e7d6b !important; }
.badge.bg-danger { background-color: #8a3a3a !important; }

.btn-neon {
    /* Metallic gold gradient */
    background: linear-gradient(135deg, #7a5f15 0%, #d4af37 35%, #ffd700 50%, #d4af37 65%, #7a5f15 100%);
    border: 1px solid #d4af37;
    color: #121212;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-neon:hover,
.btn-neon:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255,255,255,0.3);
    color: #121212;
}

.btn-outline-neon {
    color: #d4af37;
    border-color: #d4af37;
    background: transparent;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-outline-neon:hover,
.btn-outline-neon:focus {
    background: linear-gradient(135deg, #7a5f15 0%, #d4af37 35%, #ffd700 50%, #d4af37 65%, #7a5f15 100%);
    color: #121212;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    color: #9aa4b2;
}

.logo-img { max-width: 180px; height: auto; }

/* Ensure clicked/active search buttons keep metallic gold styling */
.btn-outline-neon.active,
.btn-outline-neon:active,
.btn-outline-neon[aria-pressed="true"],
.btn-check:checked + .btn-outline-neon {
    background: linear-gradient(135deg, #7a5f15 0%, #d4af37 35%, #ffd700 50%, #d4af37 65%, #7a5f15 100%);
    color: #121212;
    border-color: #d4af37;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-outline-neon.active:hover,
.btn-outline-neon.active:focus,
.btn-outline-neon:active:hover,
.btn-outline-neon:active:focus,
.btn-check:checked + .btn-outline-neon:hover,
.btn-check:checked + .btn-outline-neon:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
}


/* Dark modal styling */
.modal-content { background: #0f1524; color: #e6e6e6; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
.modal-header, .modal-footer { border-color: rgba(255,255,255,0.08); background: transparent; }
.modal-title { color: #d4af37; }
.modal-body h6 { color: #d4af37; }
.modal .btn-close { filter: invert(1) grayscale(100%); opacity: .8; }
.modal .btn-close:hover { opacity: 1; }
.modal-backdrop.show { opacity: 0.75; }