/* ============================================================
   Kuehlah.my — Storefront Brand CSS
   Malaysian Kuih Muih Traditional Snacks
   Color palette: Pandan Green + Gula Melaka Gold + Santan Cream
   ============================================================ */

/* CSS Custom Properties */
:root {
    --kl-green-dark:    #1B4332;
    --kl-green-mid:     #2D6A4F;
    --kl-green-light:   #95D5B2;
    --kl-gold:          #C9942A;
    --kl-gold-light:    #E8A838;
    --kl-cream:         #FFF8EC;
    --kl-tan:           #F5E6C8;
    --kl-tan-mid:       #E8D5B0;
    --kl-tan-dark:      #D4B896;
    --kl-brown-text:    #1A0A00;
    --kl-brown-muted:   #5A4A3A;
}

/* ─── GLOBAL BODY ─── */
body {
    background-color: var(--kl-cream) !important;
}

main#main {
    background-color: var(--kl-cream) !important;
    min-height: 60vh;
}

/* ─── OVERRIDE BAGISTO navyBlue (#060C3B) → Kuehlah Deep Green ─── */
.text-navyBlue  { color: var(--kl-green-dark) !important; }
.bg-navyBlue    { background-color: var(--kl-green-dark) !important; }
.border-navyBlue { border-color: var(--kl-green-dark) !important; }

/* Category nav hover underline */
.hover\:border-b-4.hover\:border-navyBlue:hover,
[class*="hover:border-navyBlue"]:hover {
    border-color: var(--kl-green-dark) !important;
}

/* Selection highlight */
::selection {
    background-color: rgba(27, 67, 50, 0.18) !important;
}

/* ─── BUTTONS ─── */
.primary-button {
    background-color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    transition: background-color 0.2s, opacity 0.2s !important;
}
.primary-button:hover {
    background-color: var(--kl-green-mid) !important;
    opacity: 1 !important;
}

.secondary-button {
    color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
    background-color: transparent !important;
}
.secondary-button:hover {
    background-color: rgba(27, 67, 50, 0.06) !important;
}

/* ─── HEADER TOPBAR ─── */
/* Top bar border + subtle green top stripe */
[class*="border-b"][class*="px-16"] {
    border-top: 3px solid var(--kl-green-dark) !important;
    background-color: var(--kl-cream) !important;
}

/* ─── HEADER BOTTOM (NAV BAR) ─── */
/* Main nav container border */
.flex.min-h-\[78px\].w-full.justify-between {
    background-color: #fff !important;
    border-color: var(--kl-tan-mid) !important;
}

/* Category nav item hover border */
.group.relative.flex.h-\[77px\] {
    border-color: transparent !important;
}
.group.relative.flex.h-\[77px\]:hover {
    border-bottom-color: var(--kl-green-dark) !important;
}

/* Category link text */
.group.relative.flex.h-\[77px\] a {
    color: var(--kl-brown-text);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.07em;
}
.group.relative.flex.h-\[77px\]:hover a {
    color: var(--kl-green-dark) !important;
}

/* Search input */
input[name="query"] {
    background-color: var(--kl-tan) !important;
    border-color: var(--kl-tan-dark) !important;
    color: var(--kl-brown-text) !important;
}
input[name="query"]:hover,
input[name="query"]:focus {
    border-color: var(--kl-green-dark) !important;
}

/* ─── KUEHLAH LOGO ─── */
.kuehlah-logo {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.kuehlah-logo-name {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.9rem;
    color: var(--kl-green-dark);
    letter-spacing: -0.5px;
    line-height: 1;
}
.kuehlah-logo-name span {
    color: var(--kl-gold);
}
.kuehlah-logo-tagline {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kl-gold);
    margin-top: 3px;
    font-weight: 600;
}

/* ─── DROPDOWN (profile/guest) ─── */
/* Welcome text in profile dropdown */
.font-dmserif {
    color: var(--kl-green-dark) !important;
}

/* Hover items in profile dropdown */
.hover\:bg-gray-100:hover {
    background-color: var(--kl-tan) !important;
}

/* ─── FOOTER ─── */
footer.mt-9 {
    background-color: var(--kl-tan) !important;
    border-top: 3px solid var(--kl-green-dark) !important;
}

/* Footer bottom bar */
.bg-\[\#F1EADF\] {
    background-color: var(--kl-green-dark) !important;
    color: var(--kl-cream) !important;
}

/* Footer bottom bar text */
.bg-\[\#F1EADF\] p,
.bg-\[\#F1EADF\] a {
    color: var(--kl-cream) !important;
}
.bg-\[\#F1EADF\] a:hover {
    color: var(--kl-gold-light) !important;
    text-decoration: none !important;
}

/* Footer newsletter background */
.bg-lightOrange {
    background-color: var(--kl-tan) !important;
}

/* Footer accordion border and header */
.border-\[\#e9decc\] { border-color: var(--kl-tan-dark) !important; }
.bg-\[\#F1EADF\].font-medium,
.rounded-t-lg.bg-\[\#F1EADF\] {
    background-color: var(--kl-tan-mid) !important;
    color: var(--kl-brown-text) !important;
}

/* Newsletter input in footer */
.border-\[\#e9decc\].bg-\[\#F1EADF\] {
    background-color: var(--kl-cream) !important;
    border-color: var(--kl-tan-dark) !important;
    color: var(--kl-brown-text) !important;
}

/* Newsletter subscribe button */
footer button[type="submit"] {
    background-color: var(--kl-green-dark) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
}
footer button[type="submit"]:hover {
    background-color: var(--kl-green-mid) !important;
}

/* Footer newsletter heading (italic) */
footer .text-navyBlue {
    color: var(--kl-green-dark) !important;
}

/* Footer links */
footer ul a {
    color: var(--kl-brown-muted);
    transition: color 0.2s;
}
footer ul a:hover {
    color: var(--kl-green-dark) !important;
}

/* ─── SERVICES / FEATURE BAR ─── */
/* The services/features bar between content and footer */
section[class*="bg-white"] + div,
.services-section {
    background-color: var(--kl-cream) !important;
}

/* ─── PRODUCT CARDS ─── */
/* Prevent white background clashing with cream body */
.rounded-xl.border {
    background-color: #fff;
}

/* ─── SHIMMER / LOADING ─── */
/* Keep shimmer neutral, not too blue-tinted */
.shimmer {
    background: linear-gradient(90deg, var(--kl-tan) 25%, var(--kl-tan-mid) 50%, var(--kl-tan) 75%);
    background-size: 400% 100%;
    animation: shimmer-kl 1.6s infinite;
}
@keyframes shimmer-kl {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── CATEGORY NAV DROPDOWN PANEL ─── */
/* Category mega-menu */
.pointer-events-none.absolute.top-\[78px\] {
    background-color: #fff !important;
    border-top-color: var(--kl-green-dark) !important;
}

/* Second-level category headings in mega-menu */
.pointer-events-none .font-medium.text-navyBlue {
    color: var(--kl-green-dark) !important;
}

/* ─── WISHLIST / CART / COMPARE ICONS ─── */
/* Ensure icon color follows brand */
.icon-compare,
.icon-users {
    color: var(--kl-green-dark) !important;
}

/* ─── KUIH MUIH DECORATIVE BAND ─── */
/* Thin decorative stripe below header nav */
.kuehlah-heritage-band {
    height: 4px;
    background: linear-gradient(90deg,
        var(--kl-green-dark) 0%,
        var(--kl-gold) 33%,
        var(--kl-green-dark) 66%,
        var(--kl-gold) 100%
    );
    background-size: 200% 100%;
}

/* ─── HOMEPAGE CAROUSEL AREA ─── */
/* Ensure carousel dots/controls use brand color */
[class*="carousel"] button:focus,
[class*="carousel"] button.active {
    background-color: var(--kl-green-dark) !important;
}

/* ─── MOBILE HEADER ─── */
/* Mobile nav hamburger / icons */
.icon-hamburger { color: var(--kl-green-dark) !important; }

/* ─── FORMS / INPUTS ─── */
input:focus, select:focus, textarea:focus {
    border-color: var(--kl-green-dark) !important;
    outline-color: var(--kl-green-dark) !important;
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.12) !important;
}

/* ─── BREADCRUMB ─── */
.breadcrumb a,
[aria-label="Breadcrumb"] a {
    color: var(--kl-green-dark) !important;
}

/* ─── PAGINATION ─── */
.primary-button.rounded-full,
button[class*="primary-button"] {
    background-color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
}

/* ─── PRICES ─── */
/* Sale price / highlighted price */
.text-darkPink { color: var(--kl-gold) !important; }

/* ─── STAR RATINGS ─── */
.icon-star-fill { color: var(--kl-gold) !important; }

/* ─── ACCORDION ─── */
/* Category sidebar accordion */
.rounded-xl.border-2.border-\[\#e9decc\] {
    border-color: var(--kl-tan-dark) !important;
}

/* ─── MINI CART BADGE ─── */
/* Cart item count badge */
span[class*="bg-navyBlue"].rounded-full {
    background-color: var(--kl-green-dark) !important;
}

/* ─── LANGUAGE SWITCHER ─── */
.kh-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f5f5f0;
    border-radius: 20px;
    padding: 3px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid #e8e0d0;
}
.kh-lang-active {
    background: #1B4332;
    color: #FFF8EC;
    border-radius: 16px;
    padding: 4px 10px;
    cursor: default;
}
.kh-lang-link {
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 16px;
    text-decoration: none;
    transition: color 0.15s;
}
.kh-lang-link:hover {
    color: #1B4332;
}