/* ══════════════════════════════════════
   AromaEbro — Design Tokens & Global CSS
   Palette: Emerald Green, Gold/Mustard, White
   Geometry: 24px rounded corners (Solherbs style)
   ══════════════════════════════════════ */

:root {
    --emerald: #064e3b;
    --emerald-light: #065f46;
    --emerald-dark: #022c22;
    --mustard: #b8860b;
    --mustard-hover: #996f09;
    --mustard-light: #d4a017;
    --white: #ffffff;
    --cream: #fefce8;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
    --radius-xl: 1.5rem;
    --shadow-card: 0 4px 24px rgba(6, 78, 59, 0.08);
    --shadow-hover: 0 12px 40px rgba(6, 78, 59, 0.15);
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--gray-800);
    background: var(--white);
}

/* ── Language Toggle Active State ── */
.lang-btn {
    transition: var(--transition);
    cursor: pointer;
}

.active-lang {
    background-color: var(--mustard) !important;
    color: var(--white) !important;
    border-color: var(--mustard) !important;
    font-weight: 600;
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero Gradient Overlay ── */
.hero-overlay {
    background: linear-gradient(180deg,
            rgba(6, 78, 59, 0.55) 0%,
            rgba(6, 78, 59, 0.80) 100%);
}

/* ── Card Hover Effect ── */
.card-hover {
    transition: box-shadow var(--transition), transform var(--transition);
}

.card-hover:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px);
}

/* ── Zig-Zag Section ── */
.zigzag-block {
    transition: var(--transition);
}

.zigzag-block:hover .zigzag-img {
    transform: scale(1.03);
}

.zigzag-img {
    transition: transform 0.6s ease;
}

/* ── Product Card Hover ── */
.product-card {
    transition: var(--transition);
    cursor: pointer;
}

.product-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-overlay {
    opacity: 0;
    transition: opacity var(--transition);
}

/* ── WhatsApp Floating Button ── */
.wa-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    animation: pulse-wa 2s infinite;
}

@keyframes pulse-wa {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    50% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
}

/* ── Focus Ring (Accessibility / WCAG) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Contact Form Inputs ── */
.contact-input {
    transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-input:focus {
    border-color: var(--emerald);
    box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.15);
}

/* ── Map Card ── */
.map-card {
    transition: var(--transition);
}

.map-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}