/* ================================================================
   MOKHTAR PERFUMES — LUXURY THEME
   Navy Deep: #081f2e  |  Gold: #c9a96e
   Font: Playfair Display (headings) + Inter (body)
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ================================================================
   CSS VARIABLES
================================================================ */
:root {
    --navy:        #081f2e;
    --navy-90:     rgba(8, 31, 46, 0.9);
    --navy-70:     rgba(8, 31, 46, 0.7);
    --navy-10:     rgba(8, 31, 46, 0.1);
    --gold:        #c9a96e;
    --gold-light:  rgba(201, 169, 110, 0.2);
    --gold-30:     rgba(201, 169, 110, 0.3);
    --border:      #ebebeb;
    --muted:       #6b7280;
    --off-white:   #fafaf8;

    /* Override existing primary color variables */
    --primary-color:    #c9a96e;
    --secondary-color:  #081f2e;
    --primary-clr:      207 73% 11%; /* HSL for #081f2e */
}

/* ================================================================
   TYPOGRAPHY
================================================================ */
body {
    font-family: 'Inter', sans-serif;
    color: #111;
}

h1, h2, h3, h4, h5,
.font-serif-display,
.title-box2,
.side-section-title,
.section-title,
.cat-title {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ================================================================
   ANNOUNCEMENT BAR
================================================================ */
.top-announcement-bar {
    background: var(--navy) !important;
}

/* ================================================================
   HEADER & NAVIGATION
================================================================ */
.main-header {
    border-bottom-color: var(--border) !important;
}

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

/* Original/Replica links → Gold/Navy */
.original-link {
    color: var(--gold) !important;
}

.replica-link {
    color: var(--navy) !important;
}

.cart-badge {
    background: var(--navy) !important;
}

.header-icon-link:hover {
    color: var(--gold) !important;
}

/* ================================================================
   FEATURES BAR
================================================================ */
.features-wrapper {
    background: var(--navy) !important;
}

/* ================================================================
   HERO SECTION (Carousel)
================================================================ */
.gshop-hero-fixed-height,
#heroCarousel,
.carousel-inner,
.carousel-item {
    background-color: var(--navy) !important;
}

/* ================================================================
   BRANDS SLIDER
================================================================ */
.collection-button:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 5px 15px rgba(201, 169, 110, 0.15) !important;
}

.custom-swiper-prev:hover,
.custom-swiper-next:hover {
    background-color: var(--navy) !important;
}

/* ================================================================
   FEATURED PRODUCTS — Swiper
================================================================ */
.title-box2 {
    color: var(--navy) !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
}

.swiper-button-next i,
.swiper-button-prev i {
    color: var(--navy) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--navy) !important;
}

.swiper-pagination-bullet-active {
    background: var(--navy) !important;
}

/* ================================================================
   BRAND SECTIONS
================================================================ */
.custom-brand-swiper .swiper-button-next,
.custom-brand-swiper .swiper-button-prev {
    color: var(--navy) !important;
}

/* ================================================================
   SMART CATEGORIES
================================================================ */
.smart-cat-card:hover .cat-title {
    color: var(--gold) !important;
}

.cat-title {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ================================================================
   FEEDBACK / TESTIMONIALS
================================================================ */
.side-section-title {
    color: var(--navy) !important;
    font-family: 'Playfair Display', Georgia, serif;
}

.swiper-nav {
    background-color: var(--navy) !important;
}

.swiper-nav:hover {
    background-color: var(--gold) !important;
    color: var(--navy) !important;
}

.feedback-pagination-dots-new .swiper-pagination-bullet-active {
    background-color: var(--gold) !important;
}

.external-avatar-wrapper {
    background: linear-gradient(135deg, var(--navy) 0%, var(--gold) 100%) !important;
}

.external-name-text {
    color: var(--navy) !important;
    font-family: 'Playfair Display', Georgia, serif;
}

/* ================================================================
   PRODUCT CARD
================================================================ */
.emarati-cart-btn {
    border-color: var(--navy) !important;
    color: var(--navy) !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
}

.emarati-cart-btn:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

.emarati-price-wrapper span,
.emarati-price-wrapper .fw-bold {
    color: var(--navy) !important;
}

.product-name {
    color: var(--navy) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

.product-brand {
    color: var(--gold) !important;
    font-size: 11px !important;
    letter-spacing: 1px;
}

.wishlist-btn:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}

.product-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 8px 24px rgba(201, 169, 110, 0.12) !important;
}

/* ================================================================
   BOOTSTRAP OVERRIDES (btn-primary, etc.)
================================================================ */
.btn-primary,
.button--primary {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
}

.btn-primary:hover,
.button--primary:hover {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}

/* ================================================================
   FOOTER
================================================================ */
footer .social-icon-circle:hover {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}

footer .contact-footer2 .color,
footer .title18.color {
    color: var(--gold) !important;
}

footer .email-form2 input[type="submit"] {
    background: var(--gold) !important;
    color: var(--navy) !important;
}

footer .email-form2 input[type="submit"]:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

/* ================================================================
   SCROLL TO TOP BUTTON
================================================================ */
.scroll-top-btn {
    background: var(--navy) !important;
    color: var(--gold) !important;
    border: none;
}

.scroll-top-btn:hover {
    background: var(--gold) !important;
    color: var(--navy) !important;
}

/* ================================================================
   WHATSAPP BUTTON
================================================================ */
.whatsapp-floating-btn {
    background: var(--navy) !important;
    border: 2px solid var(--gold) !important;
}

/* ================================================================
   SECTIONS HEADINGS — Global Pattern
================================================================ */
.section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

/* ================================================================
   SEARCH FORM
================================================================ */
.search-form-pill:focus-within {
    border-color: var(--gold) !important;
}

/* ================================================================
   FIX: Cart Panel always above footer & all elements
================================================================ */
footer,
.footer-section,
.footer-wrapper,
.main-footer {
    position: relative;
    z-index: 1 !important;
}

.lux-cp-overlay {
    z-index: 99998 !important;
}

.lux-cp {
    z-index: 99999 !important;
}