/* ═══════════════════════════════════════════════════
   ZAITA TOURS — Brand Color System Override
   
   Navy:  #121029 (primary dark / headings / nav)
   Gold:  #E8B65B (accent / buttons / highlights)
   Ivory: #F4EFE6 (backgrounds / light surfaces)
   
   These override the TripRex theme defaults.
═══════════════════════════════════════════════════ */

:root {
    /* ── Brand tokens ── */
    --navy:   #121029;
    --gold:   #E8B65B;
    --ivory:  #F4EFE6;
    --navy-rgb: 18, 16, 41;
    --gold-rgb: 232, 182, 91;
    --ivory-rgb: 244, 239, 230;

    /* ── Map to theme variables ── */
    --primary-color1: var(--gold);
    --primary-color1-opc: var(--gold-rgb);
    --primary-color2: var(--gold);
    --primary-color2-opc: var(--gold-rgb);
    --title-color: var(--navy);
    --text-color: #3d3a50;
    --white-color: #fff;
    --black-color: var(--navy);
}

/* ── Body ── */
body {
    background-color: var(--ivory);
    color: var(--navy);
}

/* ── Links ── */
a { color: var(--navy); }
a:hover { color: var(--gold); }

/* ── Links inside rich/user content (descriptions, itinerary text, page bodies) ──
   Plain navy links blend into the navy body text here, so give them the same
   gold treatment already used on blog/destination pages. ── */
.content-body a,
.page-content a {
    color: var(--gold);
    text-decoration: underline;
}
.content-body a:hover,
.page-content a:hover {
    color: var(--navy);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 { color: var(--navy); }

/* ── Primary Button (gold bg, navy text) ──
   The theme's default hover effect is a skewed color-sweep painted by an
   ::after pseudo-element. It collided with our brand colors (the sweep and
   the hover text both resolved to gold, so the label vanished into it on
   hover) and looked dated besides, so it's disabled here in favor of a
   simple, reliable color swap with a subtle lift. ── */
.primary-btn1,
.primary-btn2 {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.primary-btn1::after,
.primary-btn2::after {
    content: none !important;
}
.primary-btn1 svg,
.primary-btn2 svg {
    fill: currentColor !important;
}
.primary-btn1 {
    background-color: var(--gold) !important;
    color: var(--navy) !important;
    border-color: var(--gold) !important;
}
.primary-btn1:hover {
    background-color: var(--navy) !important;
    color: var(--gold) !important;
    border-color: var(--navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18,16,41,.25);
}

/* ── Secondary Button (navy outline) ── */
.primary-btn2 {
    background-color: transparent !important;
    color: var(--navy) !important;
    border: 2px solid var(--navy) !important;
}
.primary-btn2:hover {
    background-color: var(--navy) !important;
    color: var(--gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18,16,41,.25);
}

/* ── Secondary Button variant for dark/navy backgrounds ──
   .primary-btn2 on its own is a navy outline with navy text, which
   disappears when placed on a navy or image hero background (hero
   section, dark CTA section). Add .on-dark there for a gold outline
   with white text instead. ── */
.primary-btn2.on-dark {
    color: #fff !important;
    border-color: var(--gold) !important;
}
.primary-btn2.on-dark:hover {
    background-color: var(--gold) !important;
    color: var(--navy) !important;
    border-color: var(--gold) !important;
}

/* ── Header ── */
header.style-1 {
    background: #fff;
    border-bottom: 1px solid rgba(18,16,41,.06);
}
header.style-1 .main-menu ul > li a { color: var(--navy); }
header.style-1 .main-menu ul > li a:hover,
header.style-1 .main-menu ul > li.active > a { color: var(--gold); }
header.style-1 .nav-right .hotline-area .icon svg { fill: var(--gold); }
header.style-1 .nav-right .hotline-area .content h6 a { color: var(--navy); }
header.style-1 .nav-right .hotline-area .content h6 a:hover { color: var(--gold); }

/* ── Footer ── */
.site-footer {
    background-color: var(--navy) !important;
    background-image: none !important;
}
.site-footer::before { background: var(--navy) !important; opacity: .95 !important; }
.footer-newsletter { background: var(--gold) !important; }
.footer-newsletter .newsletter-text h4 { color: var(--navy) !important; }
.footer-newsletter .newsletter-text p { color: rgba(18,16,41,.7) !important; }
.newsletter-form button { background: var(--navy) !important; color: var(--gold) !important; }
.newsletter-form button:hover { background: #1e1a3d !important; }
.widget-heading::after { background: var(--gold) !important; }
.footer-social a:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}
.footer-contact .icon {
    background: rgba(232,182,91,.15) !important;
    color: var(--gold) !important;
}
.footer-contact a:hover { color: var(--gold) !important; }
.footer-links li a::before { color: var(--gold) !important; }
.footer-links li a:hover { color: var(--gold) !important; }
.footer-bottom .copyright a { color: var(--gold) !important; }
.footer-bottom-links li a:hover { color: var(--gold) !important; }
.dest-tour-count { background: var(--gold) !important; color: var(--navy) !important; }

/* ── Cards ── */
.tour-card-item { background: #fff; }
.tour-card-locations span i { color: var(--gold) !important; }
.tour-card-title a:hover { color: var(--gold) !important; }
.tour-card-price .amount strong { color: var(--gold) !important; }
.tour-card-btn {
    background: var(--gold) !important;
    color: var(--navy) !important;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tour-card-btn:hover {
    background: var(--navy) !important;
    color: var(--gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18,16,41,.2);
}
.tour-badge.duration { background: rgba(18,16,41,.7); }

/* ── Sidebar ── */
.sidebar-box { background: #fff; }
.sidebar-links li a:hover { color: var(--gold) !important; }
.sidebar-links .count {
    background: rgba(232,182,91,.12) !important;
    color: var(--gold) !important;
}
.search-form input:focus { border-color: var(--gold) !important; }
.search-form button {
    background: var(--gold) !important;
    color: var(--navy) !important;
}
.search-form button:hover { background: #d4a24e !important; }
.sidebar-cta {
    background: linear-gradient(135deg, var(--navy), #1e1a3d) !important;
}
.sidebar-cta i { color: var(--gold) !important; }
.sidebar-cta a {
    background: var(--gold) !important;
    color: var(--navy) !important;
}
.sidebar-cta a:hover { background: #d4a24e !important; }

/* ── Section backgrounds ── */
.tours-archive-section,
.destinations-archive-section,
.dest-detail-section { background: var(--ivory) !important; }

/* ── Pagination ── */
.zaita-pagination .page-link { color: var(--navy); border-color: rgba(18,16,41,.15); }
.zaita-pagination .page-link:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}
.zaita-pagination .page-link.active {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: var(--gold) !important;
}

/* ── Breadcrumb ── */
.breadcrumb-area { background-color: var(--navy) !important; }

/* ── General section BG overrides ── */
[style*="background:#f8f9fa"],
[style*="background: #f8f9fa"] { background-color: var(--ivory) !important; }

/* ── Accent elements (check marks, icons, highlights) ── */
.bi-check-circle-fill { color: var(--gold) !important; }
.bi-check2-circle { color: var(--gold) !important; }

/* ── Accordion / itinerary ── */
.accordion-btn-custom:hover { background: rgba(232,182,91,.08) !important; }

/* ── Blog ── */
.blog-content-body a { color: var(--gold); }
.blog-content-body blockquote { border-left-color: var(--gold); background: var(--ivory); }

/* ── Tour detail price card ── */
[style*="color:var(--primary-color1)"] { color: var(--gold) !important; }

/* ── WhatsApp icon stays green (plain icon glyphs only — buttons keep their own color scheme) ── */
.bi-whatsapp, .fab.fa-whatsapp { color: #25D366 !important; }

/* ── WhatsApp CTA button ──
   Previously a raw inline-styled <a> with JS onmouseover/onmouseout swapping
   the inline background — that inline mutation broke the `[style*=...]`
   selector that used to restore white text, and combined with the (now
   removed) blanket `[href*="wa.me"]` green-text rule, the label went
   green-on-green and vanished on hover. Now a plain class with a real
   transition, no inline JS. ── */
.wa-cta-btn {
    display: block;
    background-color: #25D366;
    color: #fff !important;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wa-cta-btn:hover {
    background-color: #1da851;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37,211,102,.3);
}
.wa-cta-btn i { color: #fff !important; }

/* ── Icon badges (colored square with a centered white icon) ──
   The blanket `.bi-whatsapp { color:#25D366 !important }` rule above was
   clobbering the intentional white icon on the contact page's WhatsApp
   badge — green icon on its own green badge background, invisible. This
   guarantees the icon stays white inside any `.icon-badge`, regardless of
   which glyph it is. ── */
.icon-badge i { color: #fff !important; }

/* ── Mobile nav overrides ── */
@media (max-width: 991px) {
    #main-menu { background: #fff; }
    #main-menu .menu-list > li.active > a {
        color: var(--gold) !important;
        background: rgba(232,182,91,.06) !important;
    }
}

/* ── Star ratings ── */
.text-warning, i.bi-star-fill.text-warning { color: var(--gold) !important; }