/* =================================== 
   GOHA HEADER - STICKY WITH TRANSITIONS
   =================================== */

:root {
    --n-white: #ffffff;
    --n-dark: var(--color-text-dark, #1e293b);
    --n-primary: var(--color-primary);
    --n-secondary: var(--color-secondary);
    --n-trans: 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.goha-header-final {
    position: fixed !important;
    top: 25px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    padding: 0 20px !important;
    transition: all var(--n-trans) !important;
}

.header-inner-final {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl !important;
}

/* === CAPSULE (RIGHT) === */
.header-capsule-final {
    display: flex !important;
}

.capsule-wrapper {
    background: var(--n-white) !important;
    border-radius: 60px !important;
    padding: 10px 15px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    transition: all var(--n-trans) !important;
    direction: rtl !important;
}

.goha-logo-final {
    padding: 0 15px 0 20px !important;
    flex-shrink: 0 !important;
    transition: all var(--n-trans) !important;
}

.goha-logo-final img {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
    transition: all var(--n-trans) !important;
}

.goha-logo-final a {
    text-decoration: none !important;
    color: var(--n-primary) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}

/* === MENU === */
.goha-nav-final {
    overflow: visible !important;
    max-width: 1500px !important;
    opacity: 1 !important;
    transition: all var(--n-trans) !important;
}

.goha-menu-final {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 15px 0 10px !important;
    gap: 20px !important;
    align-items: center !important;
    direction: rtl !important;
}

.goha-menu-final>li {
    position: relative !important;
    list-style: none !important;
}

.goha-menu-final li a {
    text-decoration: none !important;
    color: var(--n-dark) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 8px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.3s !important;
}

.goha-menu-final li.menu-item-has-children>a::after {
    content: "\f078" !important;
    font-family: "Font Awesome 7 Pro" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    margin-right: 4px !important;
    opacity: 0.7 !important;
}

.goha-menu-final li a:hover {
    color: var(--n-primary) !important;
}

/* Dropdown */
.goha-menu-final .sub-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: var(--color-white, #ffffff) !important;
    min-width: 220px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: all 0.3s ease !important;
    z-index: 100 !important;
    text-align: right !important;
    margin-top: 10px !important;
}

.goha-menu-final li:hover>.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.goha-menu-final .sub-menu li a {
    padding: 10px 20px !important;
    font-size: 13px !important;
    color: #475569 !important;
    display: block !important;
}

.goha-menu-final .sub-menu li a:hover {
    background: var(--color-gray-100) !important;
    color: var(--n-primary) !important;
}

/* Menu Icon (Hidden initially) */
.goha-menu-icon {
    width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: var(--color-white) !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    transition: all var(--n-trans) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* === ACTIONS (LEFT) === */
.header-actions-final {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.goha-btn-final {
    background: var(--color-primary) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.2) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    height: 54px !important;
    padding: 0 30px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all var(--n-trans) !important;
    box-shadow: 0 5px 20px rgba(var(--color-primary-rgb), 0.3) !important;
}

.goha-btn-final:hover {
    background: var(--color-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(var(--color-secondary-rgb), 0.4) !important;
}

.goha-btn-final i {
    font-size: 20px !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    --fa-primary-color: #ffffff !important;
    --fa-secondary-color: rgba(255, 255, 255, 0.7) !important;
}

/* Search Button */
.goha-search-btn {
    background: var(--color-primary) !important;
    border: 1px solid rgba(var(--color-white-rgb), 0.2) !important;
    color: #ffffff !important;
    border: none !important;
    height: 54px !important;
    padding: 0 30px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: inherit !important;
    transition: all var(--n-trans) !important;
    box-shadow: 0 5px 20px rgba(var(--color-primary-rgb), 0.3) !important;
    cursor: pointer !important;
}

.goha-search-btn:hover {
    background: var(--color-secondary) !important;
    transform: translateY(-2px) !important;
}

.goha-search-btn i {
    font-size: 20px !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    --fa-primary-color: #ffffff !important;
    --fa-secondary-color: rgba(255, 255, 255, 0.7) !important;
}

/* === SCROLLED STATE (THE MAGIC) === */

/* Header moves up slightly */
body.scrolled .goha-header-final {
    top: 15px !important;
}

/* Menu DISAPPEARS completely */
body.scrolled .goha-nav-final {
    max-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Menu ICON APPEARS */
body.scrolled .goha-menu-icon {
    width: 40px !important;
    opacity: 1 !important;
    margin-right: 15px !important;
}

/* Logo shrinks */
body.scrolled .goha-logo-final {
    padding: 0 10px 0 15px !important;
}

body.scrolled .goha-logo-final img {
    max-height: 38px !important;
}

/* Button becomes SMALL CIRCLE with icon only on scroll */
body.scrolled .goha-btn-final {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    justify-content: center !important;
}

body.scrolled .goha-btn-final span {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Search button becomes SMALL CIRCLE with icon only on scroll */
body.scrolled .goha-search-btn {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    justify-content: center !important;
}

body.scrolled .goha-search-btn span {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Capsule gets tighter */
body.scrolled .capsule-wrapper {
    padding: 8px 12px !important;
}

/* === MENU EXPANSION STATE (When Icon Clicked/Hovered) === */
body.scrolled .header-capsule-final.menu-expanded .goha-nav-final {
    max-width: 1500px !important;
    opacity: 1 !important;
    padding: 0 15px 0 10px !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

body.scrolled .header-capsule-final.menu-expanded .capsule-wrapper {
    padding: 10px 15px !important;
}

body.scrolled .header-capsule-final.menu-expanded .goha-logo-final {
    padding: 0 15px 0 20px !important;
}

body.scrolled .header-capsule-final.menu-expanded .goha-menu-icon {
    opacity: 0.5 !important;
}

/* Mobile */
.goha-mobile-toggle-final {
    display: none !important;
}

@media (max-width: 991px) {

    /* Keep header at top - NO position changes */
    .goha-header-final {
        top: 10px !important;
        padding: 0 8px !important;
    }

    /* Smaller capsule on mobile */
    .capsule-wrapper {
        padding: 6px 10px !important;
    }

    /* Smaller logo on mobile */
    .goha-logo-final {
        padding: 0 8px 0 12px !important;
    }

    .goha-logo-final img {
        max-height: 32px !important;
    }

    /* Hide contact button on mobile, show search instead */
    .goha-contact-btn,
    .goha-btn-final {
        display: none !important;
    }

    /* Smaller search button on mobile */
    .goha-search-btn {
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        gap: 8px !important;
    }

    .goha-search-btn i,
    .goha-btn-final i {
        font-size: 16px !important;
    }

    /* Hide desktop menu, show as dropdown */
    .goha-nav-final {
        position: fixed !important;
        top: 65px !important;
        right: 8px !important;
        left: 8px !important;
        background: #ffffff !important;
        border-radius: 15px !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2) !important;
        padding: 15px !important;
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        transition: all 0.4s ease !important;
        z-index: 99998 !important;
    }

    /* Show menu when mobile-active */
    .goha-nav-final.mobile-active {
        display: block !important;
        max-height: 500px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile menu styling */
    .goha-menu-final {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .goha-menu-final>li {
        width: 100% !important;
        border-bottom: 1px solid var(--color-gray-100) !important;
    }

    .goha-menu-final>li:last-child {
        border-bottom: none !important;
    }

    .goha-menu-final li a {
        padding: 12px 10px !important;
        font-size: 14px !important;
    }

    /* Hide desktop menu icon on mobile */
    .goha-menu-icon {
        display: none !important;
    }

    /* Mobile Toggle Button */
    .goha-mobile-toggle-final {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        background: var(--color-primary) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 5px 15px rgba(var(--color-primary-rgb), 0.3) !important;
        font-size: 20px !important;
        cursor: pointer !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
    }

    .goha-mobile-toggle-final i {
        --fa-primary-color: #ffffff !important;
        --fa-secondary-color: #ffffff !important;
        color: #ffffff !important;
    }

    .goha-mobile-toggle-final.active {
        background: var(--color-secondary) !important;
        color: #ffffff !important;
    }

    /* === DISABLE ALL SCROLL EFFECTS ON MOBILE === */

    /* Keep everything same size on scroll */
    body.scrolled .goha-header-final {
        top: 10px !important;
    }

    body.scrolled .goha-logo-final {
        padding: 0 8px 0 12px !important;
    }

    body.scrolled .goha-logo-final img {
        max-height: 32px !important;
    }

    body.scrolled .capsule-wrapper {
        padding: 6px 10px !important;
    }

    body.scrolled .goha-btn-final {
        width: auto !important;
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
    }

    body.scrolled .goha-btn-final .btn-text {
        display: inline !important;
        width: auto !important;
        opacity: 1 !important;
    }

    /* Keep search button normal size on mobile scroll */
    body.scrolled .goha-search-btn {
        width: auto !important;
        height: 42px !important;
        padding: 0 16px !important;
    }

    body.scrolled .goha-search-btn .btn-text {
        display: inline !important;
    }

    .goha-btn-final .btn-text {
        display: inline !important;
    }
}