/* ==============================================
   EXPERT BIL SRL — Global Styles
   Variabile CSS, reset-uri, Astra overrides, cursor, animatii
   ============================================== */

/* --- 1. CSS VARIABLES (Design Guide sectiunea 17) --- */
:root {
    /* Primare (Dark) */
    --bg-dark: #1C1917;
    --bg-section-2: #292524;
    --bg-card: #44403C;
    --text-primary: #FAFAF9;
    --text-secondary: #78716C;

    /* Accent Copper */
    --accent-gold: #B45309;
    --accent-gold-light: #D97706;
    --accent-gold-hover: #92400E;
    --accent-amber: #FEF3C7;

    /* Accent Steel */
    --color-steel: #2563EB;
    --color-steel-deep: #1E3A5F;
    --color-steel-wash: #DBEAFE;

    /* Neutri caldi */
    --color-ivory: #FAFAF9;
    --color-mist: #F5F5F4;
    --color-sand: #E7E5E4;
    --color-pebble: #D6D3D1;

    /* Stari */
    --color-error: #B91C1C;
    --color-success: #0D9488;

    /* Tipografie */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'DM Sans', sans-serif;

    /* Layout */
    --radius-box: 12px;
    --radius-btn: 8px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(28,25,23,0.05);
    --shadow-md: 0 4px 12px rgba(28,25,23,0.08);
    --shadow-lg: 0 8px 24px rgba(28,25,23,0.12);

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* Easing */
    --expbil-ease-fluid: cubic-bezier(0.19, 1, 0.22, 1);

    /* Aliasuri compatibilitate (folosite in CSS per-pagina) */
    --expbil-gold: #B45309;
    --expbil-dark: #1C1917;
    --expbil-cream: #FAFAF9;
    --expbil-border: #E7E5E4;
    --expbil-error: #B91C1C;
    --expbil-success: #0D9488;
    --expbil-text-primary: #292524;
    --expbil-text-secondary: #57534e;
    --expbil-text-dim: #78716C;
    --expbil-text-muted: #a8a29e;

    /* Transparente reutilizabile (R1 compliance) */
    --alpha-gold-light: rgba(180, 83, 9, 0.06);
    --alpha-gold-medium: rgba(180, 83, 9, 0.15);
    --alpha-gold-strong: rgba(180, 83, 9, 0.3);

    /* Shadows standardizate */
    --shadow-card: 0 2px 12px rgba(28, 25, 23, 0.06);
    --shadow-card-hover: 0 12px 32px rgba(28, 25, 23, 0.12);
    --shadow-copper-glow: 0 8px 24px rgba(180, 83, 9, 0.15);
}

/* --- 2. BASE RESET --- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--color-ivory);
    color: var(--bg-card);
    font-family: var(--font-body);
    overflow-x: hidden;
    cursor: default;

    /* R29: Tailwind CDN + Astra columns-N conflict fix */
    /* Astra pune columns-4/tablet-columns-3/mobile-columns-2 pe body */
    /* Tailwind CDN genereaza .columns-4 { columns: 4 } care sparge layout-ul complet */
    columns: unset !important;
    column-count: unset !important;
    column-gap: unset !important;
}

/* Page fade-in on load */
body {
    animation: expbilPageFadeIn 0.4s ease-out;
}
@keyframes expbilPageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 3. FOCUS STYLES (Accessibility) --- */
*:focus-visible {
    outline: 2px solid var(--accent-gold-light);
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent-gold-light);
    outline-offset: 2px;
}

/* --- 4. GLOBAL UI --- */
.progress-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--color-steel));
    width: 0%; z-index: 10001; transition: width 0.15s linear;
    box-shadow: 0 1px 6px rgba(180, 83, 9, 0.4);
}

/* Link styles for content areas */
.expbil-article-content a,
.expbil-legal-content a {
    color: var(--color-steel);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.expbil-article-content a:hover,
.expbil-legal-content a:hover {
    color: var(--color-steel-deep);
}

/* --- 5. NAVIGATION --- */
.nav-glass {
    background: rgba(28, 25, 23, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(68, 64, 60, 0.3);
}

/* Navbar scrolled state (added via JS) */
.nav-glass.nav-scrolled {
    background: rgba(28, 25, 23, 0.98);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-bottom-color: rgba(68, 64, 60, 0.5);
}
.nav-glass.nav-scrolled .container { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.hover-link { position: relative; }
.hover-link::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: -4px; left: 0;
    background-color: var(--accent-gold-light);
    transition: width 0.3s var(--expbil-ease-fluid);
}
.hover-link:hover::after { width: 100%; }

/* Mobile Menu */
.expbil-mobile-menu {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 380px;
    height: 100vh; height: 100dvh;
    background: var(--bg-section-2);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.4s var(--expbil-ease-fluid);
    box-shadow: -10px 0 40px rgba(0,0,0,0.2);
    overflow-y: auto;
}
.expbil-mobile-menu.open { transform: translateX(0); }

.expbil-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.expbil-mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* --- 6. ANIMATIONS (Design Guide 11) --- */
.reveal-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

/* Stagger delay utilities */
.reveal-up.delay-100 { transition-delay: 0.1s; }
.reveal-up.delay-200 { transition-delay: 0.2s; }
.reveal-up.delay-300 { transition-delay: 0.3s; }
.reveal-up.delay-400 { transition-delay: 0.4s; }
.reveal-up.delay-500 { transition-delay: 0.5s; }

/* Additional reveal variants */
.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Keyframe animations */
@keyframes expbilFadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes expbilPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(180, 83, 9, 0); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-left, .reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 7. BUTTON MICRO-INTERACTIONS --- */
button[type="submit"],
.expbil-btn {
    transition: all var(--transition-base);
}
button[type="submit"]:active,
.expbil-btn:active {
    transform: scale(0.97) !important;
}

/* --- 8. COMPONENTS --- */
.premium-card {
    background: #fff;
    border: 1px solid var(--color-sand);
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-box);
}
.premium-card:hover {
    border-color: var(--accent-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --- 9. WOOCOMMERCE GLOBAL --- */
.pagination-custom ul {
    display: flex; gap: 10px; padding: 0; margin: 0; list-style: none;
    flex-wrap: wrap; justify-content: center;
}
.pagination-custom li a,
.pagination-custom li span {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--color-sand);
    background: #fff;
    color: var(--bg-dark); font-size: 14px; font-weight: 600;
    transition: all 0.3s ease; text-decoration: none;
}
.pagination-custom li a:hover,
.pagination-custom li span.current {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
}

/* WP Default Pagination */
.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--color-sand);
    background: #fff;
    color: var(--bg-dark); font-size: 13px; font-weight: 600;
    transition: all 0.3s ease; text-decoration: none;
    margin: 0 3px;
}
.page-numbers:hover, .page-numbers.current {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}

/* Shop Ordering */
.shop-ordering-custom select {
    background-color: #fff;
    color: var(--bg-dark);
    border: 1px solid var(--color-sand);
    padding: 10px 40px 10px 20px; border-radius: var(--radius-pill);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
    cursor: pointer; outline: none; transition: all 0.3s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231C1917'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.shop-ordering-custom select:hover,
.shop-ordering-custom select:focus {
    border-color: var(--accent-gold);
}

/* Pricing */
.amount { color: inherit; font-family: var(--font-accent); }
del .amount { opacity: 0.5; text-decoration: line-through; font-size: 0.9em; margin-right: 8px; font-family: var(--font-body); }
ins { text-decoration: none; color: var(--bg-dark); font-weight: 700; }

/* WooCommerce Notices — R22 */
.woocommerce-message,
.woocommerce-info {
    background-color: #fff !important;
    color: var(--bg-dark) !important;
    border: 1px solid var(--color-sand) !important;
    border-left: 4px solid var(--accent-gold) !important;
    border-radius: var(--radius-box) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--shadow-sm);
    list-style: none !important;
}

.woocommerce-error {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid var(--color-error) !important;
    border-radius: var(--radius-box) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.02);
    list-style: none !important;
}
.woocommerce-error li {
    list-style: none !important;
    width: 100%;
}

/* Buton "Vezi cosul" */
.woocommerce-message .button {
    order: 3 !important;
    margin-left: auto !important;
    background: rgba(180, 83, 9, 0.1) !important;
    border: 1px solid rgba(180, 83, 9, 0.3) !important;
    color: var(--accent-gold) !important;
    padding: 0.5rem 1.125rem !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}
.woocommerce-message .button:hover {
    background: var(--accent-gold) !important;
    color: #fff !important;
}

/* Icon ::before */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    color: var(--accent-gold) !important;
}
.woocommerce-error::before {
    color: var(--color-error) !important;
}

/* --- 10. ASTRA OVERRIDES --- */
.site-content, #primary, .ast-container,
.ast-separate-container, .ast-article-single,
.entry-content, .ast-plain-container {
    background-color: var(--color-ivory) !important;
}

.woocommerce .col2-set {
    float: none !important;
    width: 100% !important;
}

/* Force remove Astra page title */
.ast-archive-description,
.ast-breadcrumbs-wrapper,
.entry-header { display: none !important; }

/* Astra main layout fullwidth — NUCLEAR override pe .ast-container flex */
/* Astra pune display:flex pe .site-content .ast-container pt sidebar layout */
/* Trebuie specificitate maxima + !important pt a suprascrie */
.site-content .ast-container,
.ast-right-sidebar .ast-container,
.ast-left-sidebar .ast-container,
#page .site-content .ast-container,
.ast-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
}

.site-content,
.content-area,
.site-main,
#primary,
#main,
.ast-woocommerce-container,
.ast-separate-container,
.ast-plain-container,
.ast-article-single {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* HIDE Astra sidebar — specificity maxima */
#secondary,
#secondary.widget-area,
.ast-right-sidebar #secondary,
.ast-left-sidebar #secondary,
#page #secondary,
.site-content .ast-container #secondary,
.widget-area.secondary,
aside.widget-area,
.sidebar-main {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Prevent Astra from using 2-column layout */
.ast-right-sidebar #primary,
.ast-left-sidebar #primary,
.ast-right-sidebar .content-area,
.ast-left-sidebar .content-area,
#page .site-content #primary,
#page .site-content .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* --- 11. UTILITY CLASSES --- */
.expbil-text-gradient {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}
img[loading="lazy"] {
    opacity: 0;
}
img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Selection colors */
::selection {
    background: var(--accent-gold);
    color: #fff;
}