/*
 * MYGRDS — Universal Mobile Navigation
 * Designed to work with the existing .site-header / .nav structure.
 */

.mygrds-universal-toggle {
    display: none;
}

.mygrds-universal-panel {
    display: none;
}

@media (max-width: 820px) {

    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 999999 !important;
        background: #fff !important;
    }

    .site-header .nav {
        position: relative;
        min-height: 60px !important;
        width: 100% !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 13px !important;
    }

    /* Fedena-style: hamburger LEFT of logo */
    .mygrds-universal-toggle {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex: 0 0 40px !important;
        order: 1 !important;
        margin: 0 !important;
        padding: 7px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        cursor: pointer !important;
        z-index: 1000001 !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mygrds-universal-toggle span {
        display: block !important;
        width: 23px !important;
        height: 3px !important;
        margin: 3px 0 !important;
        border-radius: 5px !important;
        background: #17345c !important;
        transition: transform .2s ease, opacity .2s ease !important;
    }

    .mygrds-universal-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }

    .mygrds-universal-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .mygrds-universal-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important;
    }

    .site-header .brand {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .site-header .brand img {
        width: 140px !important;
        height: auto !important;
        display: block !important;
    }

    /* Existing desktop navigation is hidden. */
    .site-header .nav-links {
        display: none !important;
    }

    .site-header .nav-actions {
        display: none !important;
    }

    /* Mobile panel */
    .mygrds-universal-panel {
        display: block !important;
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        padding: 11px 13px 18px !important;
        background: #fff !important;
        border-top: 1px solid #e7edf4 !important;
        border-bottom: 1px solid #dbe4ee !important;
        box-shadow: 0 18px 40px rgba(5,35,85,.16) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
        z-index: 1000000 !important;
    }

    .site-header.mygrds-mobile-open .mygrds-universal-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .mygrds-universal-links {
        width: min(100%, 520px);
        margin: 0 auto;
    }

    .mygrds-universal-links a {
        display: flex !important;
        align-items: center !important;
        min-height: 47px !important;
        padding: 0 13px !important;
        margin: 1px 0 !important;
        border-radius: 9px !important;
        color: #17345c !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .mygrds-universal-links a:hover {
        color: #1976f3 !important;
        background: #f1f6fd !important;
    }

    .mygrds-universal-actions {
        width: min(100%, 520px);
        margin: 9px auto 0;
        padding-top: 11px;
        border-top: 1px solid #e7edf4;
        display: grid !important;
        grid-template-columns: 1fr 1.45fr !important;
        gap: 8px !important;
    }

    .mygrds-universal-actions a {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
    }

    .mygrds-universal-login {
        color: #0b2d6b !important;
        background: #f3f6fa !important;
    }

    .mygrds-universal-demo {
        color: #fff !important;
        background: #0b2d6b !important;
    }

    .mygrds-universal-whatsapp {
        grid-column: 1 / -1;
        color: #fff !important;
        background: #00c27a !important;
    }

    .mygrds-universal-actions span {
        margin-left: 5px;
    }
}

@media (max-width: 380px) {

    .site-header .nav {
        padding: 0 12px !important;
    }

    .site-header .brand img {
        width: 132px !important;
    }
}