/*
Theme Name:  Elite Counsel Child
Theme URI:   https://eclcuae.com
Description: Child theme for Elite Counsel For Legal Consultants — eclcuae.com
             Luxury dark gold design system matching the React/Tailwind original.
Template:    hello-elementor
Author:      Elite Counsel ECLC
Author URI:  https://eclcuae.com
Version:     1.0.0
License:     Private
Text Domain: eclcuae
*/

/* ============================================================
   1. GOOGLE FONTS — Same as React site (Lato + Montserrat + Playfair Display)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   2. CSS CUSTOM PROPERTIES — Direct translation of React index.css variables
      All HSL values preserved exactly as in the original
   ============================================================ */
:root {
    /* ── Colour palette ── */
    --ec-bg:               #0a0a0a;          /* hsl(0 0% 4%)   background */
    --ec-fg:               #ffffff;          /* hsl(0 0% 100%) foreground */

    --ec-primary:          #d4af37;          /* hsl(46 65% 52%) Gold — exact match */
    --ec-primary-fg:       #0a0a0a;          /* Black text on gold buttons */

    --ec-secondary:        #1f1f1f;          /* hsl(0 0% 12%) */
    --ec-secondary-fg:     #ffffff;

    --ec-muted:            #262626;          /* hsl(0 0% 15%) */
    --ec-muted-fg:         #a6a6a6;          /* hsl(0 0% 65%) */

    --ec-card:             #121212;          /* hsl(0 0% 7%) */
    --ec-card-fg:          #ffffff;

    --ec-border:           #262626;          /* hsl(0 0% 15%) */
    --ec-input:            #262626;
    --ec-ring:             #d4af37;

    --ec-destructive:      #f87171;
    --ec-success:          #4ade80;

    --ec-whatsapp:         #25D366;
    --ec-whatsapp-hover:   #1DA851;

    /* ── Typography ── */
    --ec-font-body:        'Lato', sans-serif;
    --ec-font-heading:     'Montserrat', sans-serif;
    --ec-font-display:     'Playfair Display', serif;

    /* ── Spacing & shape ── */
    --ec-radius:           0.5rem;
    --ec-radius-lg:        0.75rem;
    --ec-radius-xl:        1rem;

    /* ── Shadows ── */
    --ec-shadow-premium:   0 10px 40px -10px rgba(0,0,0,0.8);
    --ec-shadow-gold:      0 20px 40px -10px rgba(212,175,55,0.2);
    --ec-shadow-gold-btn:  0 10px 30px -5px rgba(212,175,55,0.35);

    /* ── Transitions ── */
    --ec-transition:       all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --ec-transition-fast:  all 0.2s ease;
}

/* ============================================================
   3. GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    border-color: var(--ec-border);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family:              var(--ec-font-body);
    background-color:         var(--ec-bg);
    color:                    var(--ec-fg);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    line-height:              1.625;
    letter-spacing:           0.01em;
    margin: 0;
    padding: 0;
}

/* Headings — Playfair Display (same as React font-display) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:    var(--ec-font-display);
    text-wrap:      balance;
    letter-spacing: -0.02em;
    line-height:    1.2;
    color:          var(--ec-fg);
    margin-top:     0;
}

/* UI elements — Montserrat (same as React font-heading) */
button, input, select, textarea, label,
.nav-link, .ui-text, .btn,
nav a, .menu-item a {
    font-family: var(--ec-font-heading);
}

/* Links */
a {
    color:           var(--ec-primary);
    text-decoration: none;
    transition:      var(--ec-transition-fast);
}
a:hover { color: color-mix(in srgb, var(--ec-primary) 80%, transparent); }

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Focus ring — gold, matching React */
*:focus-visible {
    outline:    none;
    box-shadow: 0 0 0 2px var(--ec-bg), 0 0 0 4px var(--ec-ring);
}

/* ============================================================
   4. RTL / LTR DIRECTION SUPPORT
      WordPress + WPML will add lang="ar" / dir="rtl" to <html>
   ============================================================ */
[dir="rtl"],
html[lang="ar"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"],
html[lang="en"] {
    direction: ltr;
    text-align: left;
}

/* RTL — flip arrow icons used in menus and links */
[dir="rtl"] .ec-arrow-icon,
[dir="rtl"] .arrow-right {
    transform: rotate(180deg);
}

/* RTL — WhatsApp floating button position */
[dir="rtl"] .ec-whatsapp-btn {
    right: auto;
    left:  1.5rem;
}

/* RTL — Dropdown menu alignment */
[dir="rtl"] .sub-menu,
[dir="rtl"] .dropdown-menu {
    right: 0;
    left:  auto;
}

/* RTL — Tooltip arrow flip */
[dir="rtl"] .ec-tooltip::after {
    right: auto;
    left:  -8px;
    border-left-color:  transparent;
    border-right-color: var(--ec-fg);
}

/* RTL — Footer link hover underline origin */
[dir="rtl"] .ec-footer-link span.underline-bar {
    transform-origin: right;
}

/* RTL — expertise card gold bottom bar */
[dir="rtl"] .expertise-card::after {
    transform-origin: right;
}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.ec-container {
    width:      100%;
    max-width:  1280px;   /* matches React max-w-7xl */
    margin:     0 auto;
    padding:    0 1rem;
}
@media (min-width: 640px)  { .ec-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .ec-container { padding: 0 2rem; } }

.section-padding {
    padding-top:    5rem;
    padding-bottom: 5rem;
}
@media (max-width: 768px) {
    .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================
   6. COLOUR UTILITY CLASSES
   ============================================================ */
.text-primary   { color: var(--ec-primary)   !important; }
.text-muted     { color: var(--ec-muted-fg)  !important; }
.bg-primary     { background-color: var(--ec-primary)   !important; }
.bg-card        { background-color: var(--ec-card)      !important; }
.bg-secondary   { background-color: var(--ec-secondary) !important; }
.border-primary { border-color: var(--ec-primary)       !important; }

/* ============================================================
   7. TYPOGRAPHY UTILITY CLASSES
   ============================================================ */
.font-display  { font-family: var(--ec-font-display)  !important; }
.font-heading  { font-family: var(--ec-font-heading)  !important; }
.font-body     { font-family: var(--ec-font-body)     !important; }

/* Gold divider line — used under section headings */
.divider-gold {
    width:            4rem;
    height:           2px;
    background-color: var(--ec-primary);
    display:          block;
    margin:           1rem 0;
}

/* ============================================================
   8. CARD COMPONENTS
   ============================================================ */

/* Premium card — matches React .premium-card */
.premium-card {
    background-color: var(--ec-card);
    color:            var(--ec-card-fg);
    border-radius:    var(--ec-radius);
    border:           1px solid var(--ec-border);
    padding:          2rem;
    box-shadow:       var(--ec-shadow-premium);
    transition:       var(--ec-transition);
}
.premium-card:hover {
    box-shadow:    var(--ec-shadow-gold);
    transform:     translateY(-4px);
    border-color:  rgba(212, 175, 55, 0.5);
}

/* Expertise card — matches React .expertise-card */
.expertise-card {
    background-color: var(--ec-card);
    border:           1px solid var(--ec-border);
    border-radius:    var(--ec-radius);
    transition:       var(--ec-transition);
    position:         relative;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
    height:           100%;
}
.expertise-card::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           3px;
    background-color: var(--ec-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.4s ease;
}
.expertise-card:hover {
    box-shadow:   var(--ec-shadow-gold);
    transform:    translateY(-6px);
    border-color: rgba(212, 175, 55, 0.5);
}
.expertise-card:hover::after { transform: scaleX(1); }

/* Expertise icon wrapper */
.expertise-icon-wrapper {
    width:            4rem;
    height:           4rem;
    border-radius:    0.75rem;
    background:       linear-gradient(135deg, var(--ec-secondary), var(--ec-card));
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-bottom:    1.5rem;
    transition:       var(--ec-transition);
    border:           1px solid var(--ec-border);
}
.expertise-card:hover .expertise-icon-wrapper {
    background:   rgba(212, 175, 55, 0.1);
    border-color: var(--ec-primary);
}

/* ============================================================
   9. BUTTON COMPONENTS
   ============================================================ */

/* Primary gold button */
.btn-primary,
.ec-btn-primary,
.elementor-button.ec-btn-primary {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    background-color: var(--ec-primary);
    color:            var(--ec-primary-fg);
    font-family:      var(--ec-font-heading);
    font-weight:      600;
    font-size:        0.875rem;
    padding:          0.625rem 1.25rem;
    border-radius:    var(--ec-radius);
    border:           none;
    cursor:           pointer;
    text-decoration:  none;
    box-shadow:       var(--ec-shadow-gold-btn);
    transition:       var(--ec-transition);
    white-space:      nowrap;
}
.btn-primary:hover,
.ec-btn-primary:hover {
    background-color: color-mix(in srgb, var(--ec-primary) 90%, black);
    color:            var(--ec-primary-fg);
    box-shadow:       var(--ec-shadow-gold);
    transform:        translateY(-1px);
}

/* Ghost button */
.btn-ghost,
.ec-btn-ghost {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    background-color: transparent;
    color:            var(--ec-fg);
    font-family:      var(--ec-font-heading);
    font-weight:      700;
    font-size:        0.875rem;
    padding:          0.5rem 0.75rem;
    border-radius:    var(--ec-radius);
    border:           none;
    cursor:           pointer;
    text-decoration:  none;
    transition:       var(--ec-transition-fast);
}
.btn-ghost:hover,
.ec-btn-ghost:hover {
    background-color: rgba(212, 175, 55, 0.1);
    color:            var(--ec-primary);
}

/* ============================================================
   10. TOP NAV BAR — Gold strip at very top (TopNavBar.jsx)
   ============================================================ */
.ec-topnav {
    background-color: var(--ec-primary);
    color:            var(--ec-primary-fg);
    padding:          0.5rem 0;
    border-bottom:    1px solid rgba(255,255,255,0.1);
}
.ec-topnav a {
    color:           var(--ec-primary-fg);
    font-family:     var(--ec-font-heading);
    font-size:       0.875rem;
    font-weight:     500;
    text-decoration: none;
    transition:      var(--ec-transition-fast);
}
.ec-topnav a:hover { opacity: 0.8; }
.ec-topnav .separator {
    width:            4px;
    height:           4px;
    border-radius:    50%;
    background-color: rgba(10,10,10,0.3);
    display:          inline-block;
    vertical-align:   middle;
}

/* ============================================================
   11. MAIN HEADER — Sticky dark header with logo & nav
   ============================================================ */
.ec-header,
#masthead {
    position:         sticky;
    top:              0;
    z-index:          1000;
    width:            100%;
    border-bottom:    1px solid rgba(38,38,38,0.4);
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:       0 1px 0 rgba(212,175,55,0.05);
    transition:       var(--ec-transition);
}

.ec-header .ec-container,
#masthead .site-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    min-height:      6.5rem;
    padding-top:     0.75rem;
    padding-bottom:  0.75rem;
}

/* Logo area */
.ec-logo-wrap {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    flex-shrink: 0;
    transition:  var(--ec-transition);
    text-decoration: none;
}
.ec-logo-wrap:hover { transform: scale(1.02); }
.ec-logo-wrap img {
    height:        5rem;
    width:         auto;
    object-fit:    contain;
    filter:        drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@media (min-width: 768px) { .ec-logo-wrap img { height: 6rem; } }

.ec-logo-text { display: none; }
@media (min-width: 768px) {
    .ec-logo-text {
        display:        flex;
        flex-direction: column;
        justify-content: center;
    }
    .ec-logo-text .name {
        font-family:    var(--ec-font-display);
        font-weight:    700;
        color:          var(--ec-primary);
        font-size:      1.125rem;
        line-height:    1.2;
        letter-spacing: 0.05em;
    }
    .ec-logo-text .tagline {
        font-family:    var(--ec-font-heading);
        font-size:      0.65rem;
        color:          var(--ec-muted-fg);
        font-weight:    500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-top:     0.25rem;
    }
}

/* Desktop Navigation */
.ec-nav {
    display:     none;
    align-items: center;
    gap:         1rem;
}
@media (min-width: 1024px) { .ec-nav { display: flex; } }

.ec-nav a,
.ec-nav .menu-item > a {
    font-family:     var(--ec-font-heading);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--ec-fg);
    text-decoration: none;
    white-space:     nowrap;
    transition:      var(--ec-transition);
    display:         inline-block;
}
.ec-nav a:hover,
.ec-nav .menu-item > a:hover,
.ec-nav .current-menu-item > a {
    color:     var(--ec-primary);
    transform: translateY(-2px);
}
.ec-nav .current-menu-item > a { font-weight: 700; }

/* Nav divider before CTA buttons */
.ec-nav-actions {
    display:      flex;
    align-items:  center;
    gap:          0.75rem;
    margin-inline-start: 0.25rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid rgba(38,38,38,0.5);
}

/* Services Dropdown */
.ec-nav .menu-item-has-children {
    position: relative;
}
.ec-nav .menu-item-has-children > a {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    cursor:      pointer;
}
.ec-nav .menu-item-has-children > a::after {
    content:     '▾';
    font-size:   0.65rem;
    opacity:     0.7;
}
.ec-nav .sub-menu {
    display:          none;
    position:         absolute;
    top:              calc(100% + 8px);
    inset-inline-start: 0;
    min-width:        14rem;
    background-color: var(--ec-card);
    border:           1px solid var(--ec-border);
    border-radius:    0.75rem;
    box-shadow:       var(--ec-shadow-premium);
    padding:          0.5rem;
    list-style:       none;
    margin:           0;
    z-index:          200;
}
.ec-nav .menu-item-has-children:hover .sub-menu { display: block; }
.ec-nav .sub-menu li a {
    display:          block;
    padding:          0.5rem 0.75rem;
    border-radius:    0.375rem;
    font-size:        0.875rem;
    font-weight:      500;
    color:            var(--ec-fg);
    transition:       var(--ec-transition-fast);
}
.ec-nav .sub-menu li a:hover {
    background-color: rgba(212,175,55,0.05);
    color:            var(--ec-primary);
    transform:        none;
}

/* Language toggle button */
.ec-lang-toggle {
    background:   transparent;
    border:       none;
    color:        var(--ec-fg);
    font-family:  var(--ec-font-heading);
    font-weight:  700;
    font-size:    0.875rem;
    cursor:       pointer;
    padding:      0.375rem 0.5rem;
    border-radius: var(--ec-radius);
    transition:   var(--ec-transition-fast);
}
.ec-lang-toggle:hover {
    background-color: rgba(212,175,55,0.1);
    color:            var(--ec-primary);
}

/* Mobile menu toggle */
.ec-mobile-toggle {
    display:          flex;
    align-items:      center;
    gap:              0.75rem;
}
@media (min-width: 1024px) { .ec-mobile-toggle { display: none; } }

.ec-hamburger {
    background:   none;
    border:       none;
    cursor:       pointer;
    color:        var(--ec-fg);
    padding:      0.5rem;
    border-radius: var(--ec-radius);
    transition:   var(--ec-transition-fast);
    display:      flex;
    align-items:  center;
}
.ec-hamburger:hover { color: var(--ec-primary); background: rgba(212,175,55,0.05); }

/* Mobile drawer */
.ec-mobile-menu {
    display:          none;
    position:         fixed;
    inset:            0;
    z-index:          2000;
}
.ec-mobile-menu.is-open { display: block; }
.ec-mobile-menu-overlay {
    position:         absolute;
    inset:            0;
    background:       rgba(0,0,0,0.6);
}
.ec-mobile-menu-panel {
    position:         absolute;
    top:              0;
    inset-inline-end: 0;
    width:            min(400px, 85vw);
    height:           100%;
    background-color: var(--ec-bg);
    border-inline-start: 1px solid var(--ec-border);
    overflow-y:       auto;
    padding:          2.5rem 1.5rem 3rem;
    display:          flex;
    flex-direction:   column;
    gap:              1.25rem;
}
[dir="rtl"] .ec-mobile-menu-panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
    border-inline-start: none;
    border-inline-end: 1px solid var(--ec-border);
}
.ec-mobile-menu-panel a {
    font-family:  var(--ec-font-heading);
    font-size:    1.125rem;
    font-weight:  600;
    color:        var(--ec-fg);
    text-decoration: none;
    transition:   var(--ec-transition-fast);
    display:      block;
}
.ec-mobile-menu-panel a:hover,
.ec-mobile-menu-panel a.active { color: var(--ec-primary); }
.ec-mobile-menu-services-label {
    font-family:    var(--ec-font-heading);
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--ec-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:  1rem;
}
.ec-mobile-services-divider {
    border-top:     1px solid var(--ec-border);
    padding-top:    1.25rem;
    padding-bottom: 1.25rem;
    margin-top:     0.25rem;
}
.ec-mobile-services-divider a {
    font-size:   1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* ============================================================
   12. HERO SECTION
   ============================================================ */
.hero-shell,
.ec-hero {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    position:        relative;
    width:           100%;
    min-height:      70vh;
    padding-top:     5rem;
    padding-bottom:  5rem;
    overflow:        hidden;
}
.ec-hero-overlay {
    position:         absolute;
    inset:            0;
    background:       linear-gradient(135deg, var(--ec-bg) 0%, rgba(10,10,10,0.85) 100%);
    z-index:          1;
}
.ec-hero-content { position: relative; z-index: 2; }

/* Profile image in hero */
.profile-circle,
.ec-profile-img {
    border-radius: 50%;
    border:        3px solid var(--ec-primary);
    box-shadow:    var(--ec-shadow-gold);
    object-fit:    cover;
    aspect-ratio:  1 / 1;
}

/* ============================================================
   13. STATS / HERO COUNTERS SECTION
   ============================================================ */
.ec-stats-section {
    padding:          3rem 0;
    background-color: var(--ec-bg);
    border-bottom:    1px solid var(--ec-border);
    border-radius:    1rem;
    box-shadow:       var(--ec-shadow-premium);
    border:           1px solid var(--ec-border);
    margin:           0 1rem;
    position:         relative;
    z-index:          10;
    margin-top:       -2rem;
}
.ec-stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        1.5rem;
}
.ec-stat-number {
    font-family:  var(--ec-font-display);
    font-size:    2.5rem;
    font-weight:  700;
    color:        var(--ec-primary);
    line-height:  1;
    margin-bottom: 0.5rem;
}
.ec-stat-label {
    font-family:  var(--ec-font-heading);
    font-size:    0.875rem;
    color:        var(--ec-muted-fg);
    font-weight:  500;
}

/* ============================================================
   14. SERVICE CARDS
   ============================================================ */
.ec-service-card {
    background-color: var(--ec-card);
    border:           1px solid var(--ec-border);
    border-radius:    var(--ec-radius);
    padding:          1.5rem;
    transition:       var(--ec-transition);
    height:           100%;
    display:          flex;
    flex-direction:   column;
}
.ec-service-card:hover {
    border-color: rgba(212,175,55,0.5);
    box-shadow:   var(--ec-shadow-gold);
    transform:    translateY(-4px);
}
.ec-service-icon {
    width:            3rem;
    height:           3rem;
    color:            var(--ec-primary);
    margin-bottom:    1rem;
}
.ec-service-title {
    font-family:  var(--ec-font-display);
    font-size:    1.125rem;
    font-weight:  700;
    color:        var(--ec-fg);
    margin-bottom: 0.75rem;
}
.ec-service-desc {
    font-family:  var(--ec-font-body);
    font-size:    0.9rem;
    color:        var(--ec-muted-fg);
    line-height:  1.7;
    flex:         1;
}

/* ============================================================
   15. SECTION HEADINGS — Gold underline style
   ============================================================ */
.ec-section-heading {
    font-family:  var(--ec-font-display);
    font-size:    clamp(1.75rem, 4vw, 2.5rem);
    font-weight:  700;
    color:        var(--ec-fg);
    margin-bottom: 1rem;
}
.ec-section-subheading {
    font-family:  var(--ec-font-body);
    font-size:    1rem;
    color:        var(--ec-muted-fg);
    line-height:  1.7;
    max-width:    42rem;
}
.ec-section-label {
    font-family:    var(--ec-font-heading);
    font-size:      0.75rem;
    font-weight:    700;
    color:          var(--ec-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    margin-bottom:  0.75rem;
}
.ec-section-label::before {
    content:          '';
    display:          block;
    width:            2rem;
    height:           1px;
    background-color: var(--ec-primary);
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.ec-footer,
#colophon {
    background-color: var(--ec-bg);
    border-top:       1px solid var(--ec-border);
    padding-top:      5rem;
    padding-bottom:   2.5rem;
    position:         relative;
    overflow:         hidden;
}

/* Gold glow line at top of footer */
.ec-footer::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     1px;
    background: linear-gradient(to right, transparent, rgba(212,175,55,0.5), transparent);
}

.ec-footer-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3rem;
    margin-bottom:         4rem;
}
@media (min-width: 768px)  {
    .ec-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .ec-footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4rem; }
}

/* Footer brand column */
.ec-footer-logo-wrap {
    display:          inline-flex;
    background:       rgba(255,255,255,0.05);
    padding:          1rem;
    border-radius:    0.75rem;
    border:           1px solid rgba(38,38,38,0.5);
    transition:       var(--ec-transition-fast);
    margin-bottom:    1.5rem;
}
.ec-footer-logo-wrap:hover { border-color: rgba(212,175,55,0.3); }
.ec-footer-logo-wrap img { height: 4rem; width: auto; object-fit: contain; }

.ec-footer-desc {
    font-family:  var(--ec-font-body);
    font-size:    1rem;
    color:        var(--ec-muted-fg);
    line-height:  1.7;
    margin-bottom: 1.5rem;
}

/* Social icons row */
.ec-social-icons {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
    padding-top: 0.5rem;
}
.ec-social-icon {
    width:            3rem;
    height:           3rem;
    border-radius:    50%;
    background-color: var(--ec-secondary);
    border:           1px solid var(--ec-border);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--ec-muted-fg);
    text-decoration:  none;
    transition:       all 0.4s ease;
    box-shadow:       0 2px 8px rgba(0,0,0,0.3);
}
.ec-social-icon svg { width: 1.25rem; height: 1.25rem; }
.ec-social-icon:hover {
    background-color: var(--ec-primary);
    color:            var(--ec-primary-fg);
    border-color:     var(--ec-primary);
    transform:        translateY(-4px);
    box-shadow:       0 10px 20px -5px rgba(212,175,55,0.4);
}

/* Footer column headings */
.ec-footer-col-title {
    font-family:   var(--ec-font-display);
    font-size:     1.25rem;
    font-weight:   700;
    color:         var(--ec-fg);
    margin-bottom: 2rem;
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
}
.ec-footer-col-title::before {
    content:          '';
    display:          block;
    width:            2rem;
    height:           2px;
    background-color: var(--ec-primary);
    flex-shrink:      0;
}

/* Footer links */
.ec-footer-links { list-style: none; margin: 0; padding: 0; }
.ec-footer-links li { margin-bottom: 1rem; }
.ec-footer-link {
    font-family:     var(--ec-font-heading);
    font-size:       1rem;
    color:           var(--ec-muted-fg);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    transition:      var(--ec-transition-fast);
    position:        relative;
    width:           fit-content;
}
.ec-footer-link .arrow { opacity: 0; transform: translateX(-8px); transition: var(--ec-transition-fast); }
.ec-footer-link:hover { color: var(--ec-primary); }
.ec-footer-link:hover .arrow { opacity: 1; transform: translateX(0); }
.ec-footer-link:hover .link-text { transform: translateX(4px); }
[dir="rtl"] .ec-footer-link:hover .link-text { transform: translateX(-4px); }
.ec-footer-link .link-text { transition: transform 0.3s ease; display: inline-block; }

/* Footer contact items */
.ec-footer-contact-item {
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    margin-bottom: 1.5rem;
    color:         var(--ec-muted-fg);
    font-family:   var(--ec-font-body);
}
.ec-contact-icon-wrap {
    width:            2.5rem;
    height:           2.5rem;
    border-radius:    0.5rem;
    background-color: rgba(38,38,38,0.5);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       var(--ec-transition-fast);
    color:            var(--ec-primary);
}
.ec-footer-contact-item:hover .ec-contact-icon-wrap {
    background-color: rgba(212,175,55,0.1);
}
.ec-footer-contact-item span { font-size: 0.875rem; line-height: 1.6; margin-top: 0.125rem; }

/* Copy address button */
.ec-copy-btn {
    display:     inline-flex;
    align-items: center;
    gap:         0.375rem;
    font-size:   0.75rem;
    font-weight: 500;
    color:       var(--ec-primary);
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     0;
    margin-top:  0.5rem;
    transition:  var(--ec-transition-fast);
}
.ec-copy-btn:hover { opacity: 0.8; }

/* Map embed */
.ec-map-wrap {
    width:         100%;
    height:        180px;
    border-radius: 0.75rem;
    overflow:      hidden;
    border:        1px solid rgba(38,38,38,0.5);
    transition:    var(--ec-transition-fast);
    position:      relative;
}
.ec-map-wrap:hover { border-color: rgba(212,175,55,0.5); }
.ec-map-wrap iframe {
    width:           100%;
    height:          100%;
    border:          0;
    pointer-events:  none;
    display:         block;
}

/* Footer bottom bar */
.ec-footer-bottom {
    padding-top:   2rem;
    border-top:    1px solid rgba(38,38,38,0.6);
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           1.5rem;
}
@media (min-width: 768px) {
    .ec-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}
.ec-copyright {
    font-family: var(--ec-font-body);
    font-size:   0.875rem;
    color:       var(--ec-muted-fg);
    margin:      0;
}
.ec-footer-legal-links {
    display:   flex;
    flex-wrap: wrap;
    gap:       1.5rem;
    align-items: center;
}
.ec-legal-link {
    font-family:     var(--ec-font-heading);
    font-size:       0.875rem;
    color:           var(--ec-muted-fg);
    text-decoration: none;
    position:        relative;
    transition:      var(--ec-transition-fast);
}
.ec-legal-link::after {
    content:          '';
    position:         absolute;
    bottom:           -2px;
    left:             0;
    width:            100%;
    height:           1px;
    background-color: var(--ec-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}
.ec-legal-link:hover { color: var(--ec-primary); }
.ec-legal-link:hover::after { transform: scaleX(1); }
[dir="rtl"] .ec-legal-link::after { transform-origin: right; }

/* ============================================================
   17. WHATSAPP FLOATING BUTTON
   ============================================================ */
.ec-whatsapp-btn {
    position:      fixed;
    bottom:        1.5rem;
    right:         1.5rem;
    z-index:       9999;
    display:       inline-flex;
    width:         70px;
    height:        70px;
    border-radius: 50%;
    background-color: var(--ec-whatsapp);
    color:         #fff;
    align-items:   center;
    justify-content: center;
    text-decoration: none;
    box-shadow:    0 8px 25px rgba(0,0,0,0.4);
    transition:    transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    animation:     ec-wa-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 1s both;
}
@media (min-width: 768px) { .ec-whatsapp-btn { width: 80px; height: 80px; } }
.ec-whatsapp-btn:hover {
    background-color: var(--ec-whatsapp-hover);
    color:            #fff;
    transform:        scale(1.15);
    box-shadow:       0 15px 40px -5px rgba(37,211,102,0.4);
}
.ec-whatsapp-btn:active { transform: scale(0.95); }

/* Pulsing ring */
.ec-whatsapp-btn::before {
    content:          '';
    position:         absolute;
    inset:            0;
    border-radius:    50%;
    background-color: var(--ec-whatsapp);
    animation:        ec-wa-ping 2s ease-out infinite;
    opacity:          0.25;
}
.ec-whatsapp-btn svg,
.ec-whatsapp-btn .icon { width: 2.5rem; height: 2.5rem; position: relative; z-index: 1; }
@media (min-width: 768px) {
    .ec-whatsapp-btn svg,
    .ec-whatsapp-btn .icon { width: 3rem; height: 3rem; }
}

/* Tooltip */
.ec-whatsapp-tooltip {
    position:    absolute;
    right:       calc(100% + 1.25rem);
    top:         50%;
    transform:   translateY(-50%);
    background:  var(--ec-fg);
    color:       var(--ec-bg);
    font-family: var(--ec-font-heading);
    font-size:   0.875rem;
    font-weight: 500;
    padding:     0.5rem 1rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity:     0;
    pointer-events: none;
    transition:  opacity 0.3s ease;
    box-shadow:  0 4px 12px rgba(0,0,0,0.3);
}
.ec-whatsapp-tooltip::after {
    content:      '';
    position:     absolute;
    right:        -8px;
    top:          50%;
    margin-top:   -6px;
    border:       6px solid transparent;
    border-left-color: var(--ec-fg);
}
[dir="rtl"] .ec-whatsapp-tooltip {
    right: auto;
    left:  calc(100% + 1.25rem);
}
[dir="rtl"] .ec-whatsapp-tooltip::after {
    right: auto;
    left:  -8px;
    border-left-color:  transparent;
    border-right-color: var(--ec-fg);
}
.ec-whatsapp-btn:hover .ec-whatsapp-tooltip { opacity: 1; }

/* ============================================================
   18. FORMS — Matching React form styling
   ============================================================ */
.ec-form-group { margin-bottom: 1.25rem; }
.ec-label {
    display:       block;
    font-family:   var(--ec-font-heading);
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--ec-fg);
    margin-bottom: 0.375rem;
}
.ec-input,
.ec-textarea,
.ec-select,
input.ec-input, textarea.ec-textarea, select.ec-select {
    width:            100%;
    background-color: var(--ec-input);
    border:           1px solid var(--ec-border);
    border-radius:    var(--ec-radius);
    color:            var(--ec-fg);
    font-family:      var(--ec-font-heading);
    font-size:        0.875rem;
    padding:          0.625rem 0.875rem;
    transition:       var(--ec-transition-fast);
    outline:          none;
    -webkit-appearance: none;
}
.ec-input:focus, .ec-textarea:focus, .ec-select:focus {
    border-color: var(--ec-primary);
    box-shadow:   0 0 0 2px rgba(212,175,55,0.2);
}
.ec-input::placeholder, .ec-textarea::placeholder { color: var(--ec-muted-fg); }
.ec-textarea { resize: vertical; min-height: 120px; }

/* WPForms / Gravity Forms overrides */
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select {
    background-color: var(--ec-input)  !important;
    border-color:     var(--ec-border) !important;
    color:            var(--ec-fg)     !important;
    font-family:      var(--ec-font-heading) !important;
    border-radius:    var(--ec-radius) !important;
}
.wpforms-container .wpforms-submit,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    background-color: var(--ec-primary)    !important;
    color:            var(--ec-primary-fg) !important;
    font-family:      var(--ec-font-heading) !important;
    font-weight:      600 !important;
    border:           none !important;
    border-radius:    var(--ec-radius) !important;
    padding:          0.75rem 1.5rem !important;
    cursor:           pointer !important;
    transition:       var(--ec-transition) !important;
}
.wpforms-container .wpforms-submit:hover,
.gform_wrapper input[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--ec-primary) 90%, black) !important;
}

/* ============================================================
   19. ANIMATIONS
   ============================================================ */
@keyframes ec-wa-ping {
    0%   { transform: scale(1);   opacity: 0.25; }
    80%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}
@keyframes ec-wa-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Fade in up — used in hero and section entries (replaces framer-motion) */
@keyframes ec-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ec-animate-fade-up {
    animation: ec-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ec-animate-delay-1 { animation-delay: 0.1s; }
.ec-animate-delay-2 { animation-delay: 0.2s; }
.ec-animate-delay-3 { animation-delay: 0.3s; }
.ec-animate-delay-4 { animation-delay: 0.4s; }
.ec-animate-delay-5 { animation-delay: 0.5s; }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }
}

/* ============================================================
   20. WOOCOMMERCE — Checkout & Products pages
   ============================================================ */
.woocommerce,
.woocommerce-page {
    background-color: var(--ec-bg);
    color:            var(--ec-fg);
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    background-color: var(--ec-card);
    border-top-color: var(--ec-primary);
    color:            var(--ec-fg);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
    background-color: var(--ec-primary)    !important;
    color:            var(--ec-primary-fg) !important;
    font-family:      var(--ec-font-heading) !important;
    font-weight:      600 !important;
    border-radius:    var(--ec-radius) !important;
    transition:       var(--ec-transition) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover {
    background-color: color-mix(in srgb, var(--ec-primary) 90%, black) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    background-color: var(--ec-input);
    border-color:     var(--ec-border);
    color:            var(--ec-fg);
    border-radius:    var(--ec-radius);
}
.woocommerce table.shop_table {
    background-color: var(--ec-card);
    border-color:     var(--ec-border);
    color:            var(--ec-fg);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--ec-border);
    color:        var(--ec-fg);
}

/* ============================================================
   21. ADMIN BAR — Keep it dark so it doesn't break design
   ============================================================ */
#wpadminbar {
    background-color: #1a1a1a !important;
}
#wpadminbar .ab-item,
#wpadminbar a { color: #e0e0e0 !important; }
#wpadminbar li:hover > a,
#wpadminbar li.hover > a { color: var(--ec-primary) !important; }
#wpadminbar li#wp-admin-bar-site-name > .ab-item::before { color: var(--ec-primary) !important; }

/* ============================================================
   22. SCROLLBAR — Minimal dark style
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ec-bg); }
::-webkit-scrollbar-thumb {
    background:    var(--ec-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.4); }

/* ============================================================
   23. ELEMENTOR OVERRIDES — Ensure Elementor respects our tokens
   ============================================================ */
.elementor-section { background-color: var(--ec-bg); }
.elementor-widget-heading .elementor-heading-title { color: var(--ec-fg); }
.elementor-widget-text-editor { color: var(--ec-muted-fg); }
.e-con, .e-con-inner { background-color: transparent; }

/* Force dark background on all Elementor sections unless overridden */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1280px;
}

/* ============================================================
   FIXES — Added for bug corrections
   ============================================================ */

/* 1. TopNav mobile centering */
@media (max-width: 768px) {
    .ec-topnav .ec-container > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: .875rem !important;
    }
}

/* 2. Map fix — proper height, not too tall */
.ec-map-wrap {
    height: 180px !important;
    max-height: 180px !important;
}
.ec-map-wrap iframe {
    height: 180px !important;
    min-height: 180px !important;
}

/* 3. Elementor white page fix — prevent Elementor hiding our content */
.elementor-editor-active .ec-custom-page,
.elementor-page .ec-custom-page {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. Full width for all custom PHP pages */
.ec-custom-page .site-content > .container,
.ec-custom-page .entry-content,
.ec-custom-page .post-content,
.ec-custom-page article.page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. Mobile responsive padding */
@media (max-width: 640px) {
    .fp-inner, .ab-inner, .ca-inner,
    .ec-inner, .ec-container { 
        padding-left: 1rem !important; 
        padding-right: 1rem !important; 
    }
    .ec-footer-grid { gap: 2rem !important; }
    .ec-stat-number { font-size: 1.875rem !important; }
}

/* 6. Footer map consistent */
.ec-footer-grid > div:last-child .ec-map-wrap {
    margin-top: 1rem;
    height: 160px !important;
}

/* 7. Fix about/careers page full width */
.ec-about-page section,
.ec-careers-page section {
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* ============================================================
   FINAL FIXES PACK — v4
   ============================================================ */

/* ── 1. HAMBURGER — force to LEFT on mobile (RTL site) ── */
@media (max-width: 1023px) {
    /* The mobile toggle group: Logo | [lang] [search] [☰]  */
    /* On RTL: ☰ should be at FAR LEFT = logical start */
    .ec-mobile-toggle {
        /* Keep flex row, but push hamburger to start */
        flex-direction: row-reverse !important; /* flips order in RTL */
    }
    /* Hamburger itself — remove any extra margin */
    .ec-hamburger {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Mobile panel: slide from LEFT on RTL */
    [dir="rtl"] .ec-mobile-menu-panel {
        left: 0 !important;
        right: auto !important;
        border-right: 1px solid var(--ec-border) !important;
        border-left: none !important;
    }
}

/* ── 2. MAP — consistent small height, above legal bar ── */
.ec-map-wrap,
a.ec-map-wrap {
    height: 150px !important;
    max-height: 150px !important;
    min-height: 150px !important;
    overflow: hidden !important;
}
.ec-map-wrap iframe {
    height: 150px !important;
    width: 100% !important;
    pointer-events: none !important;
}

/* ── 3. HERO BACKGROUND — behind logo section ── */
.ec-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    opacity: 0.14;
    mix-blend-mode: luminosity;
    filter: grayscale(30%);
    pointer-events: none;
    z-index: 0;
}

/* ── 4. FULL-WIDTH universal fix for ALL custom pages ── */
.ec-custom-page #page,
.ec-custom-page .site-main,
.ec-custom-page #content,
.ec-custom-page main#primary,
.ec-custom-page .entry-content,
.ec-custom-page article {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
.ec-custom-page .entry-title,
.ec-custom-page .page-header {
    display: none !important;
}

/* ── 5. ELEMENTOR integration ── */
/* When Elementor is active: show a notice, don't break layout */
.elementor-editor-active body.ec-custom-page .ec-svc-page,
.elementor-editor-active body.ec-custom-page .ec-about-page,
.elementor-editor-active body.ec-custom-page .ec-careers-page,
.elementor-editor-active body.ec-custom-page .ec-homepage {
    position: relative !important;
    z-index: 1 !important;
}
/* Prevent Elementor from adding white background */
.elementor-page-template-default .elementor-section,
body.ec-custom-page .elementor-section {
    background: transparent !important;
}

/* ── 6. SERVICE PAGES full width ── */
.ec-svc-page {
    position: relative;
}
.ec-svc-page > section {
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── 7. MOBILE GENERAL ── */
@media (max-width: 768px) {
    /* Header: logo + hamburger only, no extra gap */
    .ec-header .ec-container > div {
        padding-top: .5rem;
        padding-bottom: .5rem;
        min-height: 5rem !important;
    }
    .ec-logo-wrap img { height: 4rem !important; }
    /* Footer columns stack */
    .ec-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
    /* Services grid: single col on small mobile */
    .svc-cards-grid {
        grid-template-columns: 1fr !important;
    }
    /* Stats grid: 2 cols always */
    .stats-g {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 8. TopNav mobile: centered ── */
@media (max-width: 768px) {
    .ec-topnav { text-align: center; }
    .ec-topnav .ec-container > div {
        justify-content: center !important;
        gap: .75rem !important;
    }
}