/*
 * Grainy Vibrant — mobile & tablet overrides only.
 * Desktop (≥992px) unchanged; all rules scoped below 992px / 768px.
 */

@media (min-width: 992px) {
    .main-hero2__ .img-phone {
        min-width: 450px;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    html {
        overflow-x: clip;
    }

    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Navbar — reset padding berlebihan dari .navbar * */
    .navbar.fixed-top {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }

    .navbar > .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 100%;
        width: 100%;
    }

    .navbar .navbar-brand,
    .navbar .navbar-toggler,
    .navbar .navbar-collapse,
    .navbar .navbar-nav,
    .navbar .nav-item,
    .navbar .d-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .navbar .btn-cta {
        margin-left: 0 !important;
    }

    /* SlickLoader — jangan geser layout (halaman lain) */
    .loadingScreen,
    .slick-loader {
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: 100vw;
        margin: 0;
        overflow: hidden;
    }

    .loadingScreen:not(.active),
    .slick-loader:not(.active) {
        visibility: hidden;
        pointer-events: none;
    }

    .loadingScreen.active,
    .slick-loader.active {
        visibility: visible;
        pointer-events: auto;
    }

    .main-hero2__ {
        min-height: auto !important;
        padding-top: 6.5rem !important;
        padding-bottom: 2rem !important;
    }

    .main-hero2__ + section {
        margin-top: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .main-hero2__ + section .col-7,
    #pricing .col-7,
    #pricing .col-10 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .img-phone {
        min-width: 0 !important;
        width: 52% !important;
        max-width: 210px !important;
        right: 50% !important;
        transform: translateX(50%);
        bottom: 0 !important;
        opacity: 0.4;
    }

    .img-pattern {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        right: 0 !important;
        opacity: 0.45;
    }

    .mt-7 {
        margin-top: 2rem !important;
    }

    .pt-7,
    .pt-8 {
        padding-top: 2.5rem !important;
    }

    .pb-7 {
        padding-bottom: 2.5rem !important;
    }

    footer .py-7 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #pricing .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        max-width: 100%;
        scrollbar-width: none;
    }

    #pricing .nav-pills::-webkit-scrollbar {
        display: none;
    }

    #pricing .nav-pills .nav-item {
        flex: 0 0 auto;
    }

    #pricing .card-header.pt-7 {
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
    }

    .bg-patterns .row .col-md-7 {
        text-align: center;
    }

    .custom-shape-divider-bottom-1690551055 svg,
    .custom-shape-divider-top-1690551789 svg {
        height: 28px;
    }

    /* About feature cards — sejajar saat 2 kolom */
    .gv-feature-cards {
        --bs-gutter-y: 1.75rem;
    }

    .gv-feature-cards > [class*="col-"]:nth-child(n + 3) {
        margin-top: 0.75rem !important;
    }

    .main-hero2__ + section .row.justify-content-center > [class*="col-"]:nth-child(-n + 2) {
        margin-top: 0 !important;
    }

    .main-hero2__ + section .row.justify-content-center {
        align-items: stretch;
    }

    .main-hero2__ + section .card.h-100 {
        display: flex;
        flex-direction: column;
    }

    .main-hero2__ + section .card.h-100 .card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .main-hero2__ + section .card.h-100 .card-body .text {
        flex: 1 1 auto;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.875rem;
    }

    /* Navbar */
    .navbar * {
        font-size: 0.75rem !important;
    }

    .navbar .btn-cta {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .navbar-brand img {
        max-height: 1.65em;
    }

    /* Hero — index & inner pages */
    body .main-hero__ {
        padding: 4.75rem 0 1rem;
    }

    body .main-hero__ .headline {
        font-size: 1.2rem;
        line-height: 1.35;
        margin-bottom: 0.75rem !important;
    }

    body .main-hero__ .sub-headline {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .main-hero2__ .h1.headline,
    .main-hero2__ .headline {
        font-size: 1.25rem !important;
        line-height: 1.35;
    }

    .sub-headline2 {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .main-hero2__ .btn-primary {
        font-size: 0.8125rem !important;
        padding: 0.4375rem 0.875rem;
    }

    /* Typography scale */
    h1,
    .h1 {
        font-size: 1.375rem;
    }

    h2,
    .h2 {
        font-size: 1.2rem;
    }

    h3,
    .h3 {
        font-size: 1.0625rem;
    }

    h4,
    .h4 {
        font-size: 0.9375rem;
    }

    h5,
    .h5 {
        font-size: 0.875rem;
    }

    footer h2.text-light {
        font-size: 1.0625rem !important;
    }

    footer h5 {
        font-size: 0.875rem !important;
    }

    footer .text-light p,
    footer .footer-link {
        font-size: 0.8125rem;
    }

    /* Buttons */
    .btn-primary,
    .btn-outline-primary {
        font-size: 0.8125rem !important;
        padding: 0.4375rem 0.875rem;
    }

    .btn {
        font-size: 0.75rem;
    }

    .btn-sm {
        font-size: 0.6875rem !important;
        padding: 0.3125rem 0.625rem;
    }

    .btn-package {
        font-size: 0.625rem !important;
        width: auto !important;
        max-width: none;
        padding: 0.3125rem 0.625rem !important;
        margin: 0.125rem !important;
    }

    .more-info {
        font-size: 0.8125rem;
    }

    /* Package filter pills — index */
    .main-hero__ .d-lg-block {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .main-hero__ .h4.mb-4 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Theme gallery */
    .text--titleThemeGallery {
        font-size: 0.75rem;
    }

    .text--subtitleThemeGallery {
        font-size: 0.6875rem;
    }

    .imgBadge--themeGallery {
        font-size: 0.5625rem;
        padding: 2px 6px;
    }

    /* Feature cards — about us */
    .circle-icon {
        padding: 10px;
    }

    .circle-icon svg,
    .circle-icon .icon {
        width: 18px !important;
        height: 18px !important;
    }

    .card-title {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }

    .card-body .text,
    .card-body p.text {
        font-size: 0.75rem;
        line-height: 1.45;
    }

    /* Pricing tabs */
    #pricing .nav-pills {
        padding: 0.625rem !important;
    }

    #pricing .nav-pills .nav-link {
        font-size: 0.625rem;
        padding: 0.3125rem 0.5rem;
        white-space: nowrap;
    }

    #pricing .card-header h3.fw-bold {
        font-size: 1.125rem;
    }

    #pricing .card-header h5 {
        font-size: 0.8125rem;
    }

    #pricing .card-body li {
        font-size: 0.75rem;
    }

    #pricing .card-body .btn {
        font-size: 0.75rem !important;
    }

    /* CTA band */
    .bg-patterns .fw-medium.h4 {
        font-size: 0.9375rem;
        line-height: 1.4;
    }

    .bg-patterns .btn-primary {
        font-size: 0.8125rem !important;
    }

    /* Bundle modal */
    .bundle-section .card-bundle .bundle-img {
        width: 52px;
        height: 52px;
    }

    .bundle-section .card-bundle .bundle-img-container p {
        font-size: 0.6875rem;
        line-height: 1.25;
    }

    .bundle-section .card-bundle .bundle-content h4 {
        font-size: 0.8125rem;
    }

    .bundle-section .card-bundle .bundle-desc {
        font-size: 0.6875rem;
        line-height: 1.35;
    }

    .bundle-section .bundle-price {
        font-size: 0.6875rem;
    }

    /* Blog */
    .card-text {
        font-size: 0.8125rem;
    }

    .card-title,
    .card-title a {
        font-size: 0.9375rem;
    }

    .pager {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .pager a {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem;
    }

    .pager svg {
        width: 16px;
        height: 16px;
    }

    /* Modal product detail */
    .modal-lg {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .product-name {
        font-size: 1.0625rem;
    }

    .product-price-discount__discount {
        font-size: 1rem !important;
    }

    /* FAQ / legal content */
    .accordion .btn,
    .accordion .btn-link {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.75rem;
        text-align: left;
        white-space: normal;
    }

    .bg-white .container .col p,
    .bg-white .container .col li,
    .bg-white .container .col {
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    /* Pagination vue */
    .VuePagination * {
        font-size: 0.75rem;
    }

    /* Container padding */
    .container {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    /* Gallery grid tighter on small screens */
    .imgWrapper--themeGallery + .d-flex + .row .btn-sm,
    .imgWrapper--themeGallery ~ .row .btn-sm {
        font-size: 0.625rem !important;
    }
}

@media (max-width: 575.98px) {
    body .main-hero__ .headline {
        font-size: 1.0625rem;
    }

    .main-hero2__ .h1.headline {
        font-size: 1.125rem !important;
    }

    .img-phone {
        width: 48% !important;
        max-width: 170px !important;
    }

    .main-hero2__ + section .card-body {
        padding: 0.75rem 0.5rem;
    }

    .main-hero2__ + section .card-title {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .main-hero2__ + section .card-body .text {
        font-size: 0.625rem;
        line-height: 1.35;
    }

    .circle-icon {
        padding: 8px;
    }

    .circle-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .btn-package {
        font-size: 0.5625rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    footer .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Checkout modal loader — about_us, scoped ke modal (bukan body) */
.modal.detail.gv-checkout-loading .modal-content {
    position: relative;
}

.modal.detail.gv-checkout-loading .modal-body {
    position: relative;
    pointer-events: none;
}

.modal.detail.gv-checkout-loading .modal-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    z-index: 10;
}

.modal.detail.gv-checkout-loading .modal-body::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid var(--primary-color, #ad53fc);
    border-right-color: transparent;
    border-radius: 50%;
    animation: gv-spin 0.75s linear infinite;
    z-index: 11;
}

@keyframes gv-spin {
    to {
        transform: rotate(360deg);
    }
}