/*
 * DR. BOBOEV MATERNITY CENTER — MOBILE NAVBAR BUTTONS V10.2
 * Mobile menu gets the same pill-button visual language as desktop.
 * Keeps text crisp and touch-friendly.
 */

@media (max-width: 900px) {
    /* Support the common/current mobile menu containers. */
    .liv-mobile-menu,
    .mobile-menu,
    .site-mobile-menu,
    .liv-mobile-nav,
    .mobile-nav,
    [data-mobile-menu] {
        padding: 14px !important;
        gap: 9px !important;
    }

    .liv-mobile-menu a,
    .mobile-menu a,
    .site-mobile-menu a,
    .liv-mobile-nav a,
    .mobile-nav a,
    [data-mobile-menu] a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 15px !important;

        border: 1px solid rgba(255,255,255,.22) !important;
        border-radius: 12px !important;

        color: #fff !important;
        background:
            linear-gradient(
                135deg,
                #5147a8 0%,
                #6659bd 100%
            ) !important;

        box-shadow:
            0 7px 16px rgba(76,64,150,.20),
            inset 0 1px 0 rgba(255,255,255,.13) !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        text-shadow: none !important;

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        transform: none !important;

        transition:
            background .16s ease,
            box-shadow .16s ease,
            filter .16s ease !important;
    }

    /* Active page = pink */
    .liv-mobile-menu a.active,
    .mobile-menu a.active,
    .site-mobile-menu a.active,
    .liv-mobile-nav a.active,
    .mobile-nav a.active,
    [data-mobile-menu] a.active,
    .liv-mobile-menu a[aria-current="page"],
    .mobile-menu a[aria-current="page"],
    .site-mobile-menu a[aria-current="page"],
    .liv-mobile-nav a[aria-current="page"],
    .mobile-nav a[aria-current="page"],
    [data-mobile-menu] a[aria-current="page"] {
        color: #fff !important;
        background:
            linear-gradient(
                135deg,
                #bf3e6e 0%,
                #d24f7f 100%
            ) !important;

        box-shadow:
            0 7px 17px rgba(191,62,110,.24),
            inset 0 1px 0 rgba(255,255,255,.15) !important;
    }

    /* Hover / keyboard = green */
    .liv-mobile-menu a:hover,
    .mobile-menu a:hover,
    .site-mobile-menu a:hover,
    .liv-mobile-nav a:hover,
    .mobile-nav a:hover,
    [data-mobile-menu] a:hover,
    .liv-mobile-menu a:focus-visible,
    .mobile-menu a:focus-visible,
    .site-mobile-menu a:focus-visible,
    .liv-mobile-nav a:focus-visible,
    .mobile-nav a:focus-visible,
    [data-mobile-menu] a:focus-visible {
        color: #fff !important;
        background:
            linear-gradient(
                135deg,
                #11b98b 0%,
                #16a97f 100%
            ) !important;

        box-shadow:
            0 9px 20px rgba(17,185,139,.22),
            inset 0 1px 0 rgba(255,255,255,.16) !important;

        outline: none !important;
        transform: none !important;
    }

    /* Touch press feedback */
    .liv-mobile-menu a:active,
    .mobile-menu a:active,
    .site-mobile-menu a:active,
    .liv-mobile-nav a:active,
    .mobile-nav a:active,
    [data-mobile-menu] a:active {
        filter: brightness(.94);
        transform: none !important;
    }

    /* Remove old underline/highlight decorations. */
    .liv-mobile-menu a::before,
    .liv-mobile-menu a::after,
    .mobile-menu a::before,
    .mobile-menu a::after,
    .site-mobile-menu a::before,
    .site-mobile-menu a::after,
    .liv-mobile-nav a::before,
    .liv-mobile-nav a::after,
    .mobile-nav a::before,
    .mobile-nav a::after,
    [data-mobile-menu] a::before,
    [data-mobile-menu] a::after {
        display: none !important;
    }

    /*
     * Some layouts use the same .liv-nav element in a mobile drawer.
     * When it becomes vertical, keep the exact same mobile proportions.
     */
    .liv-nav.mobile-open,
    .mobile-open .liv-nav,
    .liv-nav.is-mobile,
    .is-mobile .liv-nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .liv-nav.mobile-open a,
    .mobile-open .liv-nav a,
    .liv-nav.is-mobile a,
    .is-mobile .liv-nav a {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: flex-start !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
    }
}

/* Very small phones */
@media (max-width: 430px) {
    .liv-mobile-menu,
    .mobile-menu,
    .site-mobile-menu,
    .liv-mobile-nav,
    .mobile-nav,
    [data-mobile-menu] {
        padding: 11px !important;
        gap: 8px !important;
    }

    .liv-mobile-menu a,
    .mobile-menu a,
    .site-mobile-menu a,
    .liv-mobile-nav a,
    .mobile-nav a,
    [data-mobile-menu] a,
    .liv-nav.mobile-open a,
    .mobile-open .liv-nav a,
    .liv-nav.is-mobile a,
    .is-mobile .liv-nav a {
        min-height: 46px !important;
        padding: 11px 13px !important;
        font-size: 13.5px !important;
        border-radius: 11px !important;
    }
}