/* Navigasi mobile — top bar & menu drawer */
@media (max-width: 991px) {
    :root {
        --rp-header-h: 56px;
    }

    body.rp-menu-open {
        overflow: hidden;
    }

    .rp-theme .header-section {
        top: 0 !important;
        left: 0;
        right: 0;
        padding: 8px 0 !important;
        z-index: 1002;
    }

    .rp-theme .header-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rp-theme .header-section .header-wrapper {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        gap: 10px;
    }

  .rp-theme .header-section .header-wrapper .logo {
        width: 88px !important;
        max-width: 26vw !important;
        flex-shrink: 1;
        margin-right: auto;
        min-width: 0;
    }

    .rp-theme .header-section .header-wrapper .logo a {
        display: block;
        line-height: 0;
    }

    .rp-theme .header-section .header-wrapper .logo a img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 32px !important;
        object-fit: contain;
        object-position: left center;
    }

    /* Footer: logo ikon aplikasi tidak terlalu besar di HP */
    .rp-theme .footer-top .logo {
        max-width: 88px !important;
        margin-bottom: 20px !important;
    }

    .rp-theme .footer-top .logo a img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 72px !important;
        height: auto !important;
        object-fit: contain;
    }

    .rp-header-mobile-tools {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
        z-index: 1003;
    }

    .rp-theme .header-section .header-button--mobile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 7px 12px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.2;
        border-radius: 20px !important;
        white-space: nowrap;
        min-height: 36px;
    }

    .rp-theme .header-section .header-bar {
        display: block !important;
        position: relative;
        width: 28px;
        height: 22px;
        margin: 0 !important;
        flex-shrink: 0;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .rp-theme .header-section .header-bar span {
        height: 2.5px;
        border-radius: 2px;
    }

    .rp-theme .header-section .header-wrapper .menu {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 12px !important;
        max-height: min(72vh, calc(100dvh - var(--rp-header-h) - 24px)) !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001 !important;
        transform: scaleY(0);
        transform-origin: top center;
        opacity: 0;
        visibility: hidden;
        border-radius: 0 0 16px 16px !important;
    }

    .rp-theme .header-section .header-wrapper .menu.active {
        transform: scaleY(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .rp-theme .header-section .header-wrapper .menu > li > a {
        padding: 12px 16px !important;
        min-height: 44px;
        font-size: 15px !important;
    }

    .rp-theme .header-section .menu > li.menu-item-has-children > a {
        padding-right: 12px !important;
    }

    .rp-theme .header-section .menu > li.menu-item-has-children > a::after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: auto;
        font-size: 14px;
        opacity: 0.75;
        transition: transform 0.2s ease;
        border: none !important;
    }

    .rp-theme .header-section .menu > li.menu-item-has-children.open > a::after {
        transform: rotate(180deg);
    }

    .rp-theme .header-section .header-wrapper .menu li .submenu {
        display: none;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .rp-theme .header-section .header-wrapper .menu li.open > .submenu {
        display: block !important;
    }

    .rp-theme .header-section .header-wrapper .menu li .submenu li a {
        padding: 10px 14px 10px 22px !important;
        min-height: 42px;
    }

    .rp-theme .overlay {
        z-index: 1000;
    }

    .rp-theme.rp-inner .rp-page-hero,
    .rp-theme.rp-inner .rp-page-hero.rp-price-hero {
        padding-top: calc(var(--rp-header-h) + 1.25rem);
    }

    .rp-theme.rp-home .rp-hero {
        padding-top: calc(var(--rp-header-h) + 1.5rem) !important;
    }
}

@media (max-width: 575px) {
    :root {
        --rp-header-h: 52px;
    }

    .rp-theme .header-section {
        padding: 6px 0 !important;
    }

    .rp-theme .header-section .header-wrapper .logo {
        width: 76px !important;
        max-width: 24vw !important;
    }

    .rp-theme .header-section .header-wrapper .logo a img {
        max-height: 28px !important;
    }

    .rp-theme .footer-top .logo {
        max-width: 76px !important;
    }

    .rp-theme .footer-top .logo a img {
        max-height: 64px !important;
    }

    .rp-theme .header-section .header-button--mobile {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}