/*
 * Peak99 — Mobile App Experience v2.0
 * Ultra-aggressive mobile-only redesign.
 * Target: <= 767px (phone). Tablet: 768-1023px minor tweaks.
 * Desktop (1024px+): completely untouched.
 *
 * Philosophy: Mobile is a separate product surface.
 * Hide 40-60% of desktop content. App-like shell. Screen-based UX.
 *
 * Structure:
 *  1. Tokens
 *  2. Base resets
 *  3. Aggressive content hiding (global)
 *  4. Mobile header (app bar)
 *  5. Drawer menu
 *  6. Bottom nav
 *  7. Hero / banner — ultra-compact
 *  8. Homepage: dashboard layout
 *  9. Product/hosting pages: focused screens
 * 10. Domain page
 * 11. Cart & checkout: app-like
 * 12. Contact
 * 13. Blog
 * 14. Footer: minimal
 * 15. Utilities & animations
 * 16. Tablet tweaks
 * 17. Safe area
 */

/* ============================================================
   1. Tokens
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --mob-px: 16px;
        --mob-radius: 14px;
        --mob-card-radius: 16px;
        --mob-shadow: 0 2px 12px rgba(0,0,0,.06);
        --mob-shadow-lg: 0 8px 32px rgba(0,0,0,.10);
        --mob-accent: #00c8ff;
        --mob-purple: #673de6;
        --mob-dark: #19202d;
        --mob-surface: #fff;
        --mob-bg: #f5f7fa;
        --mob-border: #eaecf0;
        --mob-text: #19202d;
        --mob-muted: #6b7685;
        --mob-nav-h: 56px;
        --mob-bottom-h: 64px;
    }
}

/* ============================================================
   2. Base Resets
   ============================================================ */
@media (max-width: 767px) {
    html {
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
    }

    body {
        font-size: 14px;
        line-height: 1.55;
        padding-top: var(--mob-nav-h) !important;
        padding-bottom: var(--mob-bottom-h) !important;
        background: var(--mob-bg);
        overflow-x: hidden;
    }

    * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

    h1 { font-size: 24px !important; line-height: 1.2 !important; }
    h2 { font-size: 20px !important; line-height: 1.25 !important; }
    h3 { font-size: 17px !important; line-height: 1.3 !important; }
    h4 { font-size: 15px !important; line-height: 1.35 !important; }
    h5, h6 { font-size: 14px !important; line-height: 1.4 !important; }

    p { font-size: 13px; line-height: 1.6; }

    img { max-width: 100%; height: auto; }

    .loader-mask {
        position: fixed;
        inset: 0;
        z-index: 99999;
        opacity: 1;
        visibility: visible;
        transition: opacity .24s ease, visibility .24s ease;
    }
    .loader-mask.is-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #button { display: none !important; }

    /* Reduce all section padding aggressively */
    .padding-top { padding-top: 32px !important; }
    .padding-bottom { padding-bottom: 32px !important; }
    .p-100, .pt-100, .pb-100, .pt-120, .pb-120 {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .container-fluid, .container {
        padding-left: var(--mob-px) !important;
        padding-right: var(--mob-px) !important;
    }

    section { overflow-x: hidden; }
}

/* ============================================================
   3. AGGRESSIVE CONTENT HIDING — Global
   Hide decorative images, repeated marketing, secondary sections.
   ============================================================ */
@media (max-width: 767px) {

    /* === HOMEPAGE: Hide 5 of 10 content sections === */
    /* Hide: Speed Comparison, Advance Features, Hosting Solution, Partners, Why Choose image */
    .speed-comparison-main-con,
    .advnace-features-main-con.index-advnace-features-main-con,
    .hosting-solution-main-con,
    .global-partners-main-con {
        display: none !important;
    }

    /* === PRODUCT PAGES: Hide heavy marketing sections === */
    /* Hide advance-features decorative image panel */
    .advance-shared-features-main-con .shared-features-img,
    .advnace-features-main-con:not(.index-advnace-features-main-con) .advnace-feature-box:nth-child(n+3) {
        display: none !important;
    }

    /* Hide comparison tables on product pages — too wide, low mobile value */
    .shared-table-main-con,
    .reseller-main-con:not(.faq-main-con) {
        display: none !important;
    }

    /* Hide "Why choose" section images — keep text only */
    .why-choose-peak99-img,
    .why-choose-hostiko-img,
    .improvement-img-con,
    .hosting-solution-img-con {
        display: none !important;
    }

    /* Hide decorative illustrations that add no mobile value */
    .client-review-outer-con figure.quote-img,
    .search-domain-con::before,
    .faq-img-con,
    .banner-bottom-wave {
        display: none !important;
    }

    /* Hide banner background video on mobile — saves data + perf */
    .banner-video-bg {
        display: none !important;
    }

    /* === ALL PAGES: Hide generic section subtitles when too wordy === */
    .generic-title p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px !important;
        color: var(--mob-muted) !important;
    }

    /* Hide the owl carousel navigation arrows — use swipe */
    .owl-nav { display: none !important; }

    /* Mark collapsible sections added by JS */
    .mob-collapsed-section .mob-collapse-content {
        display: none;
    }
    .mob-collapsed-section.mob-expanded .mob-collapse-content {
        display: block;
    }
}

/* ============================================================
   4. Mobile Header — Compact App Bar
   ============================================================ */
@media (max-width: 767px) {

    .header-main-con {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: rgba(25, 32, 45, 0.97) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        height: var(--mob-nav-h) !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-main-con .container-fluid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .header-main-con nav.navbar {
        height: var(--mob-nav-h);
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .header-main-con .navbar-brand { margin: 0 !important; flex-shrink: 0; }
    .header-main-con .navbar-brand figure img {
        height: 24px !important;
        width: auto !important;
    }

    .header-main-con .navbar-collapse,
    .header-main-con #navbarSupportedContent {
        display: none !important;
    }

    .mob-header-actions {
        display: flex !important;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    .mob-header-btn {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.85);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        transition: background .15s;
        text-decoration: none;
        position: relative;
        flex-shrink: 0;
    }

    .mob-header-btn:hover,
    .mob-header-btn:focus {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

    .mob-cart-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 15px;
        height: 15px;
        border-radius: 999px;
        background: var(--mob-accent);
        color: #071521;
        font-size: 9px;
        font-weight: 800;
        line-height: 15px;
        text-align: center;
        pointer-events: none;
    }

    .header-main-con .navbar-toggler {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        box-shadow: none !important;
    }

    .header-main-con .navbar-toggler .navbar-toggler-icon {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        background: rgba(255,255,255,.85) !important;
        border-radius: 2px !important;
        transition: transform .25s, opacity .25s !important;
        background-image: none !important;
    }

    .nav-btns .login-btn,
    .nav-btns .chat-btn {
        display: none !important;
    }

    .peak99-cart-nav-wrap { order: -1; }
    .peak99-cart-nav {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: rgba(255,255,255,.85) !important;
        font-size: 17px !important;
    }

    .peak99-cart-badge {
        top: 5px !important;
        right: 5px !important;
        width: 15px !important;
        height: 15px !important;
        font-size: 9px !important;
        line-height: 15px !important;
    }

    .pk-acnav__toggle {
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
    .pk-acnav__label { display: none !important; }
}

/* ============================================================
   5. Drawer Menu — Full-screen app sheet
   ============================================================ */
@media (max-width: 767px) {

    .mob-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 1998;
        background: rgba(10,15,26,.8);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .mob-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

    .mob-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        z-index: 1999;
        background: #fff;
        border-radius: 0;
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .mob-drawer.is-open { transform: translateX(0); }

    .mob-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 14px;
        background: var(--mob-dark);
        flex-shrink: 0;
    }
    .mob-drawer-header img { height: 22px; width: auto; }

    .mob-drawer-close {
        width: 34px; height: 34px;
        border-radius: 8px;
        border: 0;
        background: rgba(255,255,255,.1);
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }

    .mob-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 6px 0 20px;
        -webkit-overflow-scrolling: touch;
    }

    .mob-nav-section-label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #b0b8c4;
        padding: 14px 16px 4px;
    }

    .mob-nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #1a2433;
        text-decoration: none;
        transition: background .12s;
    }
    .mob-nav-link:hover,
    .mob-nav-link:focus { background: #f4f6f9; color: var(--mob-purple); text-decoration: none; }
    .mob-nav-link.active { color: var(--mob-purple); background: rgba(103,61,230,.06); }

    .mob-nav-link i {
        width: 30px; height: 30px;
        border-radius: 7px;
        background: #f4f6f9;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
        color: var(--mob-purple);
        flex-shrink: 0;
    }

    .mob-nav-group summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #1a2433;
        cursor: pointer;
        transition: background .12s;
    }
    .mob-nav-group summary::-webkit-details-marker { display: none; }
    .mob-nav-group summary:hover { background: #f4f6f9; }

    .mob-nav-group summary i.nav-icon {
        width: 30px; height: 30px;
        border-radius: 7px;
        background: #f4f6f9;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
        color: var(--mob-purple);
        flex-shrink: 0;
    }
    .mob-nav-group summary .nav-chevron {
        margin-left: auto;
        font-size: 11px;
        color: #b0b8c4;
        transition: transform .2s;
    }
    .mob-nav-group[open] summary .nav-chevron { transform: rotate(90deg); }

    .mob-nav-sub {
        padding: 2px 0 2px 56px;
        background: #fafbfc;
    }
    .mob-nav-sub a {
        display: block;
        padding: 9px 14px;
        font-size: 13px;
        color: #374151;
        text-decoration: none;
        border-radius: 7px;
        margin: 0 6px;
        transition: background .12s;
    }
    .mob-nav-sub a:hover { background: rgba(103,61,230,.07); color: var(--mob-purple); }

    .mob-drawer-footer {
        padding: 14px 16px;
        border-top: 1px solid #f0f2f5;
        display: grid;
        gap: 8px;
        flex-shrink: 0;
    }
    .mob-drawer-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s;
    }
    .mob-drawer-cta-primary { background: var(--mob-accent); color: #071521; }
    .mob-drawer-cta-secondary { background: #f4f6f9; color: #374151; border: 1px solid #e2e6ed; }
}

/* ============================================================
   6. Bottom Nav
   ============================================================ */
@media (max-width: 767px) {

    .mob-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 990;
        height: var(--mob-bottom-h);
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,.06);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mob-bottom-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 100%;
        text-decoration: none;
        color: #8a95a3;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .01em;
        border: 0;
        background: transparent;
        cursor: pointer;
        transition: color .15s;
        padding: 0 2px;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-bottom-item i { font-size: 19px; line-height: 1; transition: transform .15s, color .15s; }
    .mob-bottom-item:hover,
    .mob-bottom-item.active { color: var(--mob-purple); }
    .mob-bottom-item.active i { transform: translateY(-1px); }
    .mob-bottom-item.has-items { color: var(--mob-accent); }
    .mob-bottom-item.has-items i { color: var(--mob-accent); }
    .mob-bottom-item.active::after {
        content: '';
        width: 4px; height: 4px;
        border-radius: 999px;
        background: var(--mob-purple);
        margin-top: 1px;
    }

    /* Hide bottom nav on checkout/cart to avoid blocking form inputs */
    body.mob-hide-bottom-nav .mob-bottom-nav {
        display: none;
    }
    body.mob-hide-bottom-nav {
        padding-bottom: 0 !important;
    }
}

/* ============================================================
   7. Hero / Banner — Ultra-compact
   Phone hero = tiny. Just message + CTA. No giant banners.
   ============================================================ */
@media (max-width: 767px) {

    /* Homepage hero */
    .banner-main-con {
        padding: 28px var(--mob-px) 32px !important;
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        align-items: center !important;
        text-align: center !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .banner-inner-con {
        padding: 0 !important;
        width: 100%;
    }

    /* Hide the breadcrumb badge */
    .banner-inner-con > span:first-child,
    .banner-inner-con > span.position-relative:first-of-type {
        display: none !important;
    }

    .banner-inner-con h1 {
        padding: 0 !important;
        margin-bottom: 10px !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .banner-inner-con p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
        color: rgba(255,255,255,.8) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Single CTA button — full width, compact */
    .banner-inner-con .generic-link a,
    .banner-inner-con .primary-btn a,
    .banner-inner-con .secondary-btn a {
        width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide secondary CTA if two exist */
    .banner-inner-con .banner-btn-con,
    .banner-inner-con > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .banner-inner-con .secondary-btn {
        display: none !important;
    }

    /* Inner page sub-banners — even more compact */
    .sub-banner-main-con {
        height: auto !important;
        padding: 24px var(--mob-px) 24px !important;
        text-align: center !important;
        min-height: unset !important;
    }

    .sub-banner-inner-con {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .sub-banner-inner-con span { display: none !important; }
    .sub-banner-inner-con h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    .sub-banner-inner-con p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Cart/checkout hero — hidden */
    .peak99-order-hero,
    .peak99-checkout-hero {
        display: none !important;
    }
}

/* ============================================================
   8. Homepage — Dashboard Layout
   Compact cards, horizontal scrolls, minimal content.
   ============================================================ */
@media (max-width: 767px) {

    /* Domain search section — keep but compact */
    .search-domain-con {
        padding-bottom: 20px !important;
    }

    .search-domain-outer-con {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .search-domain-inner-con {
        max-width: 100% !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .search-domain-box p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .domain-serach-con {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .domain-serach-con input {
        width: 100% !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }
    .domain-serach-con .search-btn {
        width: 100% !important;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    /* TLD boxes — horizontal scroll strip instead of grid */
    .domain-boxes-outer {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 8px !important;
        margin-bottom: 24px !important;
        grid-template-columns: unset !important;
        -webkit-overflow-scrolling: touch;
    }
    .domain-boxes-outer::-webkit-scrollbar { display: none; }

    .domain-detail-con {
        min-width: 140px !important;
        max-width: 160px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }

    .domain-detail-top-con {
        padding: 10px 10px !important;
    }
    .domain-detail-top-con p { font-size: 11px !important; line-height: 1.4 !important; }
    .domain-detail-bottom-con {
        width: 100% !important;
        padding: 6px 8px !important;
    }
    .domain-detail-bottom-con ul li { font-size: 11px !important; }

    /* Hosting plan carousel — horizontal card strip */
    .hosting-type-outer-con .generic-title {
        margin-bottom: 14px !important;
    }

    .hosting-types-carousel,
    .hosting-types-inner-con {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
    }
    .hosting-types-carousel::-webkit-scrollbar,
    .hosting-types-inner-con::-webkit-scrollbar { display: none; }

    .hosting-type-box,
    .hosting-types-inner-con > * {
        min-width: 260px !important;
        max-width: 280px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }

    .hosting-type-content-con {
        padding: 16px !important;
        border-radius: var(--mob-card-radius) !important;
    }

    .hosting-price-box span.dollar { font-size: 16px !important; }
    .hosting-price-box span.numeric1,
    .hosting-price-box .plan-price-amount { font-size: 32px !important; line-height: 1 !important; }
    .hosting-price-box .numeric2 { font-size: 14px !important; }

    .hosting-type-content-con ul {
        margin-bottom: 14px !important;
    }
    .hosting-type-content-con ul li {
        font-size: 12px !important;
        margin-bottom: 5px !important;
        padding-left: 20px !important;
    }

    .hosting-type-content-con .primary-btn a {
        width: 100% !important;
        height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* "We've helped" / why-choose section — compact, no image */
    .why-choose-peak99-main-con,
    .why-choose-hostiko-main-con {
        padding: 28px 0 !important;
    }

    .why-choose-peak99-inner-con,
    .why-choose-hostiko-inner-con {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .improvement-inner-con {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .improvement-box {
        padding: 12px !important;
        border-radius: 12px !important;
        gap: 10px !important;
        grid-template-columns: 36px 1fr !important;
    }
    .improvement-icon figure { width: 36px !important; height: 36px !important; }
    .improvement-txt-con h6 { margin-bottom: 3px !important; font-size: 13px !important; }
    .improvement-box p { font-size: 11px !important; margin-bottom: 0 !important; }

    /* Features grid — compact 2-col */
    .hosting-features-main-con {
        padding-bottom: 32px !important;
        padding-top: 28px !important;
    }

    .hosting-features-inner-con {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .feature-main-box {
        padding: 14px 10px !important;
        border-radius: 12px !important;
    }
    .feature-main-box figure {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 8px !important;
    }
    .feature-main-box h6 { font-size: 12px !important; margin-bottom: 4px !important; }
    .feature-main-box p { font-size: 11px !important; display: none !important; }

    /* Testimonials — keep 1 card visible, strip to essentials */
    .client-review-slider {
        padding: 28px var(--mob-px) !important;
    }
    .client-review-outer-con .btn-wrap { display: none !important; }
    .client-review-box {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .client-review-box p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .client-review-box > span { font-size: 11px !important; }
}

/* ============================================================
   9. Product / Hosting Pages — Focused Screens
   ============================================================ */
@media (max-width: 767px) {

    /* Disable scroll-triggered animation state on phones.
       Several sections stay hidden after WOW.js init and leave large blank gaps. */
    .wow,
    .animated,
    [class*="fadeIn"],
    [class*="zoomIn"],
    [class*="slideIn"] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Shared hosting plans on product pages — single column, compact */
    .shared-hosting-types-inner-con {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .shared-hosting-type-content-con {
        border-radius: var(--mob-card-radius) !important;
        padding: 0 !important;
    }

    .shared-hosting-type-box-heading {
        padding: 14px 16px 12px !important;
    }
    .shared-hosting-type-box-heading h6 { font-size: 15px !important; margin-bottom: 2px !important; }
    .shared-hosting-type-box-heading p { font-size: 11px !important; margin-bottom: 8px !important; }
    .shared-hosting-type-box-heading .hosting-price-box {
        display: flex !important;
        align-items: flex-end !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 10px !important;
    }
    .shared-hosting-type-box-heading .hosting-price-box .dollar {
        font-size: 0 !important;
        line-height: 1 !important;
    }
    .shared-hosting-type-box-heading .hosting-price-box .dollar::before {
        content: "\20B9";
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }
    .shared-hosting-type-box-heading .hosting-price-box .plan-price-amount,
    .shared-hosting-type-box-heading .hosting-price-box .numeric1 {
        font-size: 38px !important;
        font-weight: 700 !important;
        line-height: .95 !important;
    }
    .shared-hosting-type-box-heading .hosting-price-box .month-title {
        display: flex !important;
        align-items: flex-end !important;
        gap: 2px !important;
        margin-bottom: 4px !important;
    }
    .shared-hosting-type-box-heading .hosting-price-box .numeric2 {
        font-size: 15px !important;
        line-height: 1 !important;
    }
    .shared-hosting-type-box-heading .hosting-price-box .plan-period-label {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .shared-hosting-type-bottom-con {
        padding: 0 16px 16px !important;
    }
    .shared-hosting-type-bottom-con ul li {
        font-size: 12px !important;
        margin-bottom: 5px !important;
        padding-left: 20px !important;
    }
    .shared-hosting-type-bottom-con .primary-btn a {
        width: 100% !important;
        height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Billing selector compact */
    .billing-selector-wrap { margin-top: 6px !important; }
    .billing-select-box {
        width: 100% !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }
    .billing-options {
        left: 0 !important;
        right: 0 !important;
        border-radius: 10px !important;
    }
    .peak99-discount-pill {
        margin-top: 8px !important;
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        background: linear-gradient(135deg, rgba(5, 27, 46, 0.86), rgba(9, 76, 120, 0.78)) !important;
        border-color: rgba(255,255,255,0.62) !important;
    }

    /* Advance features on product pages — collapse to 2 items, hide image */
    .advance-shared-features-main-con {
        padding: 28px 0 !important;
    }
    .advance-shared-features-inner-con {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .shared-features-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .shared-features-content-box {
        padding: 14px !important;
        border-radius: 12px !important;
        background: #fff;
        border: 1px solid var(--mob-border);
    }
    .shared-features-content-box figure { display: none !important; }
    .shared-features-content-box h6 { font-size: 13px !important; margin-bottom: 4px !important; }
    .shared-features-content-box p { font-size: 11px !important; margin: 0 !important; }

    /* FAQ section — keep, compact */
    .faq-main-con {
        padding: 28px 0 !important;
    }
    .faq-outer-con,
    .faq-inner-con {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .faq-box {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    .accordion-button,
    .card-header .btn-link {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }
    .card-body {
        font-size: 12px !important;
        padding: 8px 14px 14px !important;
        line-height: 1.55 !important;
    }

    /* VPS / Dedicated plans — compact single column */
    .vps-con,
    .dedicated-plan-con {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Global partners → hide on product pages (already hidden on homepage) */
    .global-partners-inner-con ul {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .global-partners-inner-con ul li {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    /* Generic section titles */
    .generic-title {
        padding: 0 !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }
    .generic-title h2 { margin-bottom: 6px !important; }
}

/* ============================================================
   10. Domain Page
   ============================================================ */
@media (max-width: 767px) {

    /* Domain search is the PRIMARY action */
    [data-domain-search-input],
    .p99-domain-input {
        height: 48px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }
    [data-domain-search-button],
    .p99-domain-search-btn {
        height: 46px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    /* Domain result cards */
    .peak99-domain-result-card {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }
    .peak99-domain-add-btn,
    .peak99-domain-in-cart,
    .peak99-domain-taken-badge {
        width: 100% !important;
        height: 42px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    /* Domain pricing table — hide on mobile. Too dense. */
    .domain-pricing-table-con {
        display: block !important;
    }
    .peak99-pricing-table {
        display: block !important;
    }

    /* TLD chips */
    .peak99-tld-chip {
        font-size: 11px !important;
        min-height: 32px !important;
        padding: 4px 10px !important;
    }
}

/* ============================================================
   11. Cart & Checkout — App-like
   ============================================================ */
@media (max-width: 767px) {

    .peak99-cart-page {
        padding: 12px 0 90px !important;
        margin-top: 0 !important;
    }
    .peak99-cart-page .container {
        padding-left: var(--mob-px) !important;
        padding-right: var(--mob-px) !important;
    }

    /* Plan cards */
    .p99-plan-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .p99-period-row { flex-wrap: wrap !important; }
    .p99-period-select { min-height: 42px !important; font-size: 13px !important; }
    .p99-price-main { font-size: 18px !important; }
    .p99-price-display { text-align: left !important; }

    /* Single column layout */
    .peak99-cart-shell {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .peak99-cart-page-summary {
        position: static !important;
        order: -1 !important;
    }

    /* Sticky checkout strip */
    .p99-sticky-checkout-strip {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 991 !important;
        padding: 10px var(--mob-px) !important;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: blur(8px) !important;
        border-top: 1px solid #edf0f4 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .p99-sticky-total {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        color: #1a2433;
    }
    .p99-sticky-total span {
        display: block;
        font-size: 10px;
        font-weight: 400;
        color: #8a95a3;
    }
    .p99-sticky-checkout-btn {
        height: 44px;
        padding: 0 20px;
        border-radius: 10px;
        background: var(--mob-purple);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        border: 0;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .p99-continue-btn {
        height: 48px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* Domain sub-card */
    .peak99-domain-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .peak99-domain-fields input,
    .peak99-domain-fields select {
        min-height: 42px !important;
        font-size: 13px !important;
    }

    /* Cart drawer */
    .peak99-cart-drawer-panel {
        width: 100vw !important;
        border-radius: 0 !important;
    }
    .peak99-cart-drawer-header { padding: 14px 16px !important; }
    .peak99-cart-item { padding: 12px !important; border-radius: 10px !important; }
    .peak99-cart-item-title { font-size: 13px !important; }

    /* Checkout form */
    .peak99-checkout-form-block {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .peak99-cart-card .form-control,
    .peak99-cart-card input.form-control,
    .peak99-cart-card select.form-control {
        min-height: 46px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    .peak99-choice-grid { grid-template-columns: 1fr !important; }
    .peak99-choice-pill { min-height: 48px !important; font-size: 13px !important; }

    /* Success page */
    .peak99-success-card {
        padding: 28px 16px !important;
        border-radius: 16px !important;
    }
    .peak99-success-card h2 { font-size: 20px !important; }
    .peak99-success-icon i { font-size: 44px !important; }

    /* Coupon field */
    .peak99-coupon-input { min-height: 42px !important; font-size: 13px !important; border-radius: 10px !important; }
}

/* ============================================================
   12. Contact — Form-first
   ============================================================ */
@media (max-width: 767px) {

    .contact-banner-main-con .sub-banner-inner-con {
        background: rgba(13, 22, 38, .52) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 18px !important;
        padding: 14px 14px 12px !important;
        backdrop-filter: blur(10px) !important;
    }
    .contact-banner-main-con .sub-banner-inner-con h1,
    .contact-banner-main-con .sub-banner-inner-con p {
        color: #ffffff !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
    }

    .contact-inner-con {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Hide contact info boxes — form is primary action */
    .contact-info-items,
    .contact-detail-box:not(:first-child) {
        display: none !important;
    }

    .contact-form-con {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .contact-form-con .form-group { margin-bottom: 10px !important; }
    .contact-form-con input,
    .contact-form-con textarea,
    .contact-form-con select {
        height: 46px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
    }
    .contact-form-con textarea { height: 100px !important; padding: 10px 12px !important; }
    .contact-form-con .primary-btn a,
    .contact-form-con button[type="submit"] {
        width: 100% !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    .inquiry-main-con,
    .contact-boxes-inner-con {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .report-inquiry-con,
    .contact-box,
    .contact-form-inner-con {
        border-radius: 18px !important;
    }
    .contact-box {
        padding: 22px 18px !important;
        min-height: unset !important;
    }
    .contact-box p,
    .contact-box a,
    .report-inquiry-con p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
    }
    .contact-form-main-con {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .contact-form-main-con .generic-title p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        max-width: 30ch !important;
        margin-inline: auto !important;
    }
    .contact-form-inner-con {
        padding: 18px !important;
        background: #fff !important;
        box-shadow: 0 18px 44px rgba(18, 35, 59, .08) !important;
    }
    .contact-form-inner-con ul {
        display: grid !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    .contact-form-inner-con input,
    .contact-form-inner-con textarea {
        width: 100% !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        padding: 0 14px !important;
    }
    .contact-form-inner-con input {
        height: 48px !important;
    }
    .contact-form-inner-con textarea {
        min-height: 120px !important;
        padding: 14px !important;
    }
    .contact-form-inner-con .submit-btn button {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 12px !important;
    }
}

/* ============================================================
   13. Blog — Clean reading
   ============================================================ */
@media (max-width: 767px) {

    .blog-posts-outer,
    .blog-inner-con {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .blog-post-box {
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .blog-post-content {
        padding: 14px !important;
    }
    .blog-post-content h5 {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }
    .blog-post-content p { font-size: 12px !important; }

    .single-blog-banner-con {
        padding: 14px var(--mob-px) !important;
    }
}

/* ============================================================
   14. Footer — Minimal
   ============================================================ */
@media (max-width: 767px) {

    .footer-main-con {
        height: auto !important;
        min-height: unset !important;
        padding: 20px 0 18px !important;
        background: #0b1220 !important;
        background-image: none !important;
    }

    /* Hide builder/CTA banner — secondary */
    .builder-main-con {
        display: none !important;
    }

    /* Footer links removed on mobile */
    .footer-inner-con,
    .footer-box,
    .footer-contact-info {
        display: none !important;
    }

    .footer-copyright-con {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 8px 0 4px !important;
        align-items: center !important;
        justify-items: center !important;
    }
    .copyright-logo-con {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .footer-main-con::before,
    .footer-main-con::after,
    .footer-main-con .shape-img,
    .footer-main-con figure {
        display: none !important;
    }
    .copyright-logo-con a { margin-right: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
    .copyright-logo-con p { font-size: 11px !important; }
    .social-links-con ul { justify-content: center !important; }
}

/* ============================================================
   15. Buttons, Forms, Utilities
   ============================================================ */
@media (max-width: 767px) {

    .primary-btn a,
    .generic-btn a {
        height: 46px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        padding: 0 20px !important;
    }
    .secondary-btn a {
        height: 42px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    .peak99-cart-primary-btn,
    .peak99-cart-link-btn,
    .peak99-cart-secondary-btn {
        min-height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Login modal */
    .peak99-login-dialog {
        border-radius: 16px !important;
        width: min(100%, 360px) !important;
    }
    .peak99-login-main { padding: 20px 16px !important; }
    .peak99-login-field input,
    .peak99-login-field select {
        height: 46px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }
    .peak99-login-submit {
        height: 48px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* Account nav panel */
    .pk-acnav__panel {
        position: fixed !important;
        top: var(--mob-nav-h) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--mob-bottom-h) !important;
        min-width: unset !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        max-height: unset !important;
    }
    .pk-acnav__col,
    .pk-acnav__profile {
        border-right: 0 !important;
        border-bottom: 1px solid #f0f2f5 !important;
    }
    .pk-acnav__profile { min-width: unset !important; }

    /* Table overflow */
    .table-responsive { -webkit-overflow-scrolling: touch !important; }
    .shared-table-bg { overflow-x: auto !important; }
    .shared-table-bg table { min-width: 600px !important; font-size: 11px !important; }

    /* About page */
    .about-inner-con,
    .team-inner-con {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* "View more" toggle button injected by JS */
    .mob-view-more-btn {
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        background: transparent;
        border: 1px dashed var(--mob-border);
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--mob-purple);
        cursor: pointer;
        text-align: center;
        transition: background .15s;
    }
    .mob-view-more-btn:hover { background: rgba(103,61,230,.04); }

    /* Smooth tap states */
    a, button, [role="button"] { touch-action: manipulation; }

    /* Prevent text selection on nav UI */
    .mob-bottom-nav,
    .mob-drawer,
    .header-main-con { user-select: none; -webkit-user-select: none; }

    /* Stability overrides: keep the mobile layer from wiping out core content */
    .improvement-box,
    .feature-main-box,
    .faq-inner-con .card,
    .faq-outer-con .faq-box {
        display: block !important;
    }

    .p99-sticky-checkout-strip.is-hidden {
        display: none !important;
    }
}

/* ============================================================
   16. Tablet (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    .hosting-types-inner-con { grid-template-columns: 1fr 1fr !important; gap: 16px; }
    .hosting-features-inner-con { grid-template-columns: 1fr 1fr !important; gap: 16px; }
    .improvement-inner-con { grid-template-columns: 1fr !important; gap: 14px; }
    .domain-boxes-outer { grid-template-columns: 1fr 1fr !important; gap: 14px; }
    .footer-inner-con { grid-template-columns: 1fr 1fr !important; gap: 20px 16px; }
    .peak99-cart-shell,
    .peak99-checkout-shell { grid-template-columns: 1fr !important; }
    .peak99-cart-page-summary { position: static !important; }
    .banner-inner-con { padding: 0 32px; }
    .banner-inner-con h1 { font-size: 36px !important; }
    .generic-title { padding: 0 32px !important; }
}

/* ============================================================
   17. Safe Area (iPhone notch / home bar)
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .mob-bottom-nav {
            padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
            height: calc(var(--mob-bottom-h) + env(safe-area-inset-bottom));
        }
        body {
            padding-bottom: calc(var(--mob-bottom-h) + env(safe-area-inset-bottom)) !important;
        }
        .p99-sticky-checkout-strip {
            bottom: calc(var(--mob-bottom-h) + env(safe-area-inset-bottom)) !important;
        }
    }
}