:root {

    /* ===== GOLD PALETTE ===== */
    --gold-main: #D4AF37;
    --gold-dark: #B8962E;
    --gold-darker: #8C6A1F;
    --gold-light: #F5E6A8;
    --gold-soft: rgba(212, 175, 55, 0.15);

    /* ===== NEUTRAL ===== */
    --dark: #111111;
    --dark-soft: #1a1a1a;
    --gray: #6c757d;
    --light: #f8f9fa;

    /* ===== GRADIENT ===== */
    --gold-gradient: linear-gradient(135deg, #D4AF37, #B8962E);
}


/* ===== GLOBAL ===== */
body {
    background-color: var(--light);
    font-family: 'Segoe UI', Roboto, sans-serif;
    color: #333;
}


/* ===== NAVBAR ===== */
.navbar {
    background-color: var(--dark);
}

.navbar-brand {
    color: var(--gold-main) !important;
    font-weight: 600;
}

.navbar-brand:hover {
    color: var(--gold-light) !important;
}

.nav-link {
    color: #ddd !important;
}

.nav-link:hover {
    color: var(--gold-main) !important;
}

/* avatar circle */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #B8962E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

/* profile trigger hover */
.profile-trigger:hover .avatar-circle {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}


/* dropdown style */
.profile-dropdown {
    border-radius: 12px;
    min-width: 240px;
    padding: 8px;
}

/* dropdown item hover */
.profile-dropdown .dropdown-item {
    border-radius: 8px;
    padding: 10px 12px;
    transition: 0.2s;
}

.profile-dropdown .dropdown-item:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
}


/* ===== HERO ===== */
.hero {
    background: var(--gold-gradient);
    color: white;
    padding: 8rem 0 6rem;
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 600;
}

.hero p {
    opacity: 0.9;
}


/* ===== PAGE HERO ===== */

.page-hero,
.cart-hero {
    background: var(--gold-gradient);
    color: white;
    padding: 3rem 0;
    /* margin-top: 56px; */
}


/* ===== PACKAGE CARD ===== */

.package-card {
    border-radius: 1rem;
    border: 1px solid var(--gold-soft);
    background: white;
    transition: 0.3s;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 0 0 1px var(--gold-soft),
        0 0 20px var(--gold-soft);
}

.package-card img {
    aspect-ratio: 1/1;
    object-fit: cover;
}


/* ===== PRICE ===== */
.price {
    color: var(--gold-main);
    font-weight: bold;
    font-size: 1.2rem;
}


/* ===== BUTTON GOLD ===== */
.btn-gold {
    background: var(--gold-gradient);
    border: none;
    color: white;
    border-radius: 0.5rem;
    transition: 0.3s;
}

.btn-gold:hover {
    background: linear-gradient(135deg, #B8962E, #8C6A1F);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}


/* ===== BUTTON OUTLINE GOLD ===== */

.btn-outline-gold {
    border: 1px solid var(--gold-main);
    color: var(--gold-main);
    background: transparent;
}

.btn-outline-gold:hover {
    background: var(--gold-main);
    color: white;
}


/* ===== SECTION TITLE ===== */

.section-title {
    font-weight: 600;
    color: var(--dark);
}

.section-title span {
    color: var(--gold-main);
}


/* ===== FLOATING CART ===== */

.floating-cart {
    background: var(--gold-gradient);
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}


/* ===== FOOTER ===== */

footer {
    background: var(--dark);
    color: #aaa;
}

footer strong {
    color: var(--gold-main);
}


/* ===== BADGE GOLD ===== */

.badge-gold {
    background: var(--gold-main);
    color: white;
}


/* ===== LINK ===== */

a {
    color: var(--gold-main);
}

a:hover {
    color: var(--gold-dark);
}

/* ===== TEXT ===== */
.text-gold {
    color: var(--gold-main) !important;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero {
        padding: 6rem 0;
    }
}