/*
 * XPANDSIA — Mobile Improvements (bug fixes only)
 * ─────────────────────────────────────────────────────────────────────
 * This file ONLY fixes pre-existing mobile rendering bugs. It does NOT
 * change colors, layout, sizing, or anything visually intentional.
 *
 * Loaded LAST in cascade so it can apply on top of all legacy CSS without
 * needing !important on visual properties.
 */

/* ─── Bug #1: REMOVED ────────────────────────────────────────────────
 * Initially we added `html, body { overflow-x: clip }` to stop horizontal
 * scroll on mobile, but it broke the testimonials/why-choose carousels
 * which rely on parent overflow context for their inner-track animation.
 * Pre-existing mobile-fixes.css already handles overflow per-section.
 */

/* ─── Bug #2: iOS Safari auto-resizes text on landscape rotation ──────
 * https://kilianvalkhof.com/2017/css/the-importance-of-correct-text-size-adjust-css/
 * `100%` keeps text size identical to portrait. Does NOT change rendering
 * in any way users can see — only disables an OS-level "helpful" override.
 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ─── Bug #3: 300ms tap delay on mobile WebKit ────────────────────────
 * `touch-action: manipulation` tells the browser the element only needs
 * pan/zoom — no double-tap-to-zoom — so taps fire immediately. Applied
 * to interactive elements only (no visual effect).
 */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.cta-buttons button,
.hero-btn-primary,
.hero-btn-secondary,
.whatsapp-float,
.chatbot-float,
.chatbot-close,
.chatbot-send {
    touch-action: manipulation;
}

/* ─── Bug #4: iOS smooth-scroll momentum on overflow containers ───────
 * Restores native momentum scrolling inside scrollable carousels.
 */
.carousel-container,
.testimonials-carousel-container,
.why-choose-carousel-container,
.chatbot-messages {
    -webkit-overflow-scrolling: touch;
}

/* ─── Bug #5: Long URLs / unbreakable strings ────────────────────────
 * Conservative scope — only applies to footer and disclaimer text, never
 * to testimonial cards (which need their own width control).
 */
@media (max-width: 480px) {
    .footer-section p,
    .footer-bottom {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* ─── Bug #6: REMOVED ────────────────────────────────────────────────
 * `body { min-width: 320px }` could force a min-width that breaks the
 * carousel track on very narrow Galaxy Fold–style devices. Skipped for
 * safety; the legacy mobile CSS already targets ≥320px properly.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE HAMBURGER MENU & DRAWER
 * Visible only on small viewports. Drawer slides in from right (or left for RTL).
 * ═══════════════════════════════════════════════════════════════════════
 */

/* Hamburger button — all properties !important to beat any legacy rules */
.mobile-menu-btn {
    display: none;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 212, 0, 0.45) !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 1100 !important;
    overflow: visible !important;
}

.mobile-menu-btn:hover { background: rgba(255, 212, 0, 0.12) !important; border-color: rgba(255, 212, 0, 0.7) !important; }
.mobile-menu-btn:active { transform: scale(0.92) !important; background: rgba(255, 212, 0, 0.18) !important; }

/* Higher-specificity rule (0,1,1) to beat landing-inline.css `button.mobile-menu-btn`.
   No `display` here — that stays in the media queries below. */
button.mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 212, 0, 0.45) !important;
    border-radius: 11px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1100 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* SVG icon toggle */
.mobile-menu-btn .hamburger-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.mobile-menu-btn .close-icon {
    display: none !important;
}
.mobile-menu-btn.active .hamburger-icon {
    display: none !important;
}
.mobile-menu-btn.active .close-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ─── Mobile drawer — slides from RIGHT ─── */
/*
 * IMPORTANT: landing-inline.css sets `left: 0; transform: translateY(-100%)` on
 * .mobile-nav. We must explicitly override BOTH to prevent the drawer from
 * sitting invisibly over the header (z-index 1050) and blocking all clicks.
 */
.mobile-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: rgba(8, 8, 12, 0.38) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border-left: 1px solid rgba(255, 212, 0, 0.18) !important;
    border-right: none !important;
    z-index: 1050 !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: none;
}

.mobile-nav.active {
    right: 0 !important;
    left: auto !important;
    pointer-events: auto !important;
}

[dir="rtl"] .mobile-nav {
    right: auto !important;
    left: -100% !important;
    border-left: none !important;
    border-right: 1px solid rgba(255, 212, 0, 0.15) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.4) !important;
}

[dir="rtl"] .mobile-nav.active {
    left: 0 !important;
    right: auto !important;
}

/* ─── Drawer header: logo ─── */
.mobile-nav-header {
    display: flex;
    align-items: center;
    padding: 28px 24px 20px;
    border-bottom: 1px solid rgba(255, 212, 0, 0.12);
    flex-shrink: 0;
}

.mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.mobile-nav-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    /* Remove white bg from logo PNG via multiply blend */
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px rgba(255, 212, 0, 0.3));
}

.mobile-nav-logo span {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* ─── Stagger-in animation for menu items ─── */
@keyframes navItemSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-nav.active .mobile-nav-header,
.mobile-nav.active .mobile-nav-list li {
    animation: navItemSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.mobile-nav.active .mobile-nav-header          { animation-delay: 0.05s; }
.mobile-nav.active .mobile-nav-list li:nth-child(1) { animation-delay: 0.10s; }
.mobile-nav.active .mobile-nav-list li:nth-child(2) { animation-delay: 0.15s; }
.mobile-nav.active .mobile-nav-list li:nth-child(3) { animation-delay: 0.20s; }
.mobile-nav.active .mobile-nav-list li:nth-child(4) { animation-delay: 0.25s; }
.mobile-nav.active .mobile-nav-list li:nth-child(5) { animation-delay: 0.30s; }
.mobile-nav.active .mobile-nav-list li:nth-child(6) { animation-delay: 0.35s; }
.mobile-nav.active .mobile-nav-list li:nth-child(7) { animation-delay: 0.40s; }

/* Reset animation when drawer closes so re-open re-triggers it */
.mobile-nav:not(.active) .mobile-nav-header,
.mobile-nav:not(.active) .mobile-nav-list li {
    opacity: 0;
    transform: translateX(24px);
    animation: none;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list li a {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(255, 212, 0, 0.4);
}

.mobile-nav-list li a:hover,
.mobile-nav-list li a:active {
    background: linear-gradient(90deg, rgba(255, 212, 0, 0.15), transparent);
    color: #FFD400;
    padding-left: 36px;
}

[dir="rtl"] .mobile-nav-list li a:hover,
[dir="rtl"] .mobile-nav-list li a:active {
    padding-left: 28px;
    padding-right: 36px;
}

/* ─── Backdrop ─── */
/*
 * IMPORTANT: backdrop-filter is independent of `opacity`. Even with
 * opacity:0, a blur backdrop covering inset:0 still blurs everything
 * underneath it. So we keep the element COMPLETELY out of the way
 * (visibility:hidden + no blur) until it is .active.
 */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: none;
}

.mobile-nav-backdrop.active {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Body lock when drawer open ─── */
body.mobile-nav-open {
    overflow: hidden;
}

/* ═══════════ Mobile breakpoint: SHOW hamburger + drawer, HIDE desktop nav ═══════════ */
@media (max-width: 768px) {
    .mobile-menu-btn,
    button.mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .mobile-nav-backdrop {
        display: block;
    }
    /* Tighter header gap on mobile so flag/login/hamburger fit */
    .header-right {
        gap: 8px !important;
    }
    /* Login button: keep visible but compact */
    #loginBtn {
        padding: 8px 14px !important;
        font-size: 13px;
    }
}

/* Small phones (≤480px) — still full height */
@media (max-width: 480px) {
    .mobile-nav {
        top: 0 !important;
        height: 100vh !important;
    }
}

/* On very narrow phones (≤400px), drop login text — keep door icon only */
@media (max-width: 400px) {
    #loginBtn .login-text-translate {
        display: none;
    }
    #loginBtn {
        padding: 8px 10px !important;
    }
    .logo-text {
        display: none !important;
    }
}

/* Safety: hamburger/drawer/backdrop never show on desktop */
@media (min-width: 769px) {
    .mobile-menu-btn,
    button.mobile-menu-btn,
    .mobile-nav,
    .mobile-nav-backdrop {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * CAROUSEL FIXES — works flawlessly across all 4 languages (id/en/ms/ar)
 * Three issues this addresses:
 *   1. Hover never paused (animation-play-state was set to "running" on hover,
 *      a no-op). Now hovering pauses so users can read.
 *   2. Long translations (Arabic/Bahasa Malaysia) overflow the fixed card
 *      height and get awkwardly clipped. We line-clamp testimonial bodies
 *      so they always end gracefully with an ellipsis.
 *   3. why-choose-card description had the same issue.
 *
 * Visual impact: ZERO when text already fits the card; only constrains
 * overflowing text. Brand colors and layout untouched.
 * ═══════════════════════════════════════════════════════════════════════
 */

/* Pause carousels on hover so users can actually READ a testimonial */
.testimonials-carousel:hover,
.why-choose-carousel:hover {
    animation-play-state: paused !important;
}

/* Line-clamp testimonial body so long translations don't break the layout */
.testimonial-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden !important;
    text-overflow: ellipsis;
    /* Restore flex-row→column behavior for the centered quote-mark layout */
    align-items: flex-start !important;
}

/* Line-clamp why-choose-card description */
.why-choose-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hint to GPU: smoother carousel rendering across redraws */
.testimonials-carousel,
.why-choose-carousel {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Equal flex stretch ensures cards keep identical height regardless of text length */
.testimonials-carousel,
.why-choose-carousel {
    align-items: stretch !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1. HEADER — mobile polish + uniform button sizes
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    header {
        height: 60px !important;
        background: rgba(10, 10, 10, 0.80) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 212, 0, 0.12) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
    }

    header nav {
        padding: 0 8px 0 0 !important; /* Remove left padding completely */
    }

    /* Logo link — position at far left with no padding */
    .logo-link {
        margin-left: 0 !important;
        padding-left: 0 !important; /* No padding - flush with left edge */
    }

    /* Logo — smaller circle, no oversized glow */
    .logo-container {
        width: 34px !important;
        height: 34px !important;
        box-shadow: 0 0 10px rgba(255, 212, 0, 0.25) !important;
    }

    .logo-image {
        width: 28px !important;
        height: 28px !important;
    }

    .logo-text {
        font-size: 14px !important;
        letter-spacing: 0.5px;
    }

    /* header-right — tighter gap */
    .header-right {
        gap: 6px !important;
        align-items: center;
    }

    /* ── Uniform height 38px for ALL 3 header-right buttons ── */

    /* 1. Language toggle */
    #langToggleBtn {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        min-width: unset !important;
        width: auto !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }

    /* Arrow text inside lang toggle — smaller */
    #langToggleBtn > span:last-child {
        font-size: 9px !important;
    }

    /* 2. Login button — same 38px, icon only */
    #loginBtn {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        min-width: 38px !important;
        width: auto !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }

    #loginBtn .login-text-translate {
        display: none !important;
    }

    #loginBtn .login-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
        top: -8px !important;
        right: -8px !important;
    }

    /* 3. Hamburger button — same 38px */
    .mobile-menu-btn,
    button.mobile-menu-btn {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. WHY CHOOSE US — vertical stack on mobile, hide duplicates
 * CRITICAL FIX: Display all 6 cards vertically like testimonials carousel
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Section container - ensure proper stacking context */
    #why-choose-us {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        min-height: auto !important;
        padding-bottom: 4rem !important;
    }

    /* Carousel container - remove fixed height and horizontal scroll */
    #why-choose-us .why-choose-carousel-container,
    .why-choose-carousel-container {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        mask: none !important;
        -webkit-mask: none !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Carousel track - vertical stack with proper spacing */
    #why-choose-us .why-choose-carousel,
    .why-choose-carousel {
        display: flex !important;
        flex-direction: column !important;
        animation: none !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
        will-change: auto !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* Show ONLY first 6 cards (original cards) - hide duplicates (7-12) */
    #why-choose-us .why-choose-card:nth-child(1),
    #why-choose-us .why-choose-card:nth-child(2),
    #why-choose-us .why-choose-card:nth-child(3),
    #why-choose-us .why-choose-card:nth-child(4),
    #why-choose-us .why-choose-card:nth-child(5),
    #why-choose-us .why-choose-card:nth-child(6),
    .why-choose-carousel .why-choose-card:nth-child(1),
    .why-choose-carousel .why-choose-card:nth-child(2),
    .why-choose-carousel .why-choose-card:nth-child(3),
    .why-choose-carousel .why-choose-card:nth-child(4),
    .why-choose-carousel .why-choose-card:nth-child(5),
    .why-choose-carousel .why-choose-card:nth-child(6) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide duplicate cards (7-12) completely */
    #why-choose-us .why-choose-card:nth-child(n+7),
    .why-choose-carousel .why-choose-card:nth-child(n+7) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Individual card styling - full width, auto height, proper stacking */
    #why-choose-us .why-choose-card,
    .why-choose-carousel .why-choose-card {
        flex: 0 0 auto !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 1.75rem !important;
        margin: 0 0 1.5rem 0 !important;
        flex-direction: column !important;
        text-align: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* CTA section inside Why Choose Us - ensure proper spacing */
    #why-choose-us > div > div:last-child {
        margin-top: 3rem !important;
        margin-bottom: 2rem !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Typography adjustments for mobile */
    .why-choose-card h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .why-choose-card p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Icon sizing */
    .why-choose-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Tablet specific adjustments (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #why-choose-us {
        padding-bottom: 5rem !important;
    }

    .why-choose-card {
        padding: 2rem !important;
    }

    .why-choose-card h3 {
        font-size: 1.25rem !important;
    }

    .why-choose-card p {
        font-size: 1rem !important;
    }
}

/* Mobile specific adjustments (max-width: 768px) */
@media (max-width: 768px) {
    #why-choose-us {
        padding-bottom: 4rem !important;
    }

    .why-choose-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .why-choose-card h3 {
        font-size: 1rem !important;
    }

    .why-choose-card p {
        font-size: 0.875rem !important;
    }

    .why-choose-icon {
        font-size: 2.25rem !important;
    }

    /* Ensure next section (Pricing) doesn't overlap */
    #pricing {
        margin-top: 0 !important;
        padding-top: 4rem !important;
        position: relative !important;
        z-index: 0 !important;
    }
}

/* Small phones (max-width: 480px) */
@media (max-width: 480px) {
    #why-choose-us {
        padding-bottom: 3rem !important;
    }

    .why-choose-card {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    .why-choose-card h3 {
        font-size: 0.9375rem !important;
    }

    .why-choose-card p {
        font-size: 0.8125rem !important;
    }

    .why-choose-icon {
        font-size: 2rem !important;
    }

    /* Ensure next section (Pricing) doesn't overlap */
    #pricing {
        padding-top: 3rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. PRICING BADGE — pill badge (fully responsive, no rotation math)
 * ═══════════════════════════════════════════════════════════════════════ */
.pricing-ribbon-wrap {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    pointer-events: none;
}

.pricing-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
    color: #fff;
    padding: 5px 12px;
    border-radius: 99px;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
    line-height: 1;
}

@media (max-width: 480px) {
    .pricing-ribbon {
        font-size: 9px;
        padding: 4px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. DRAWER — glassmorphism redesign
 * ═══════════════════════════════════════════════════════════════════════ */
.mobile-nav {
    background: rgba(8, 8, 12, 0.38) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border-left: 1px solid rgba(255, 212, 0, 0.18) !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5),
                inset 1px 0 0 rgba(255, 255, 255, 0.04) !important;
}

.mobile-nav-header {
    background: linear-gradient(180deg,
        rgba(255, 212, 0, 0.06) 0%,
        transparent 100%);
    border-bottom: 1px solid rgba(255, 212, 0, 0.12) !important;
}

.mobile-nav-list li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease !important;
}

.mobile-nav-list li a:hover,
.mobile-nav-list li a:active {
    background: linear-gradient(90deg,
        rgba(255, 212, 0, 0.12),
        rgba(255, 212, 0, 0.04) 60%,
        transparent) !important;
    color: #FFD400 !important;
    padding-left: 38px !important;
}

/* Subtle glow on active drawer */
.mobile-nav.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 212, 0, 0.4),
        transparent);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * FAB LAUNCHER — unified WhatsApp + AI Chat floating button
 * ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   FLOATING ACTION BUTTON — unified WA + AI Chat launcher
   ═══════════════════════════════════════════════════════ */

/* Hide legacy separate buttons */
#whatsappFloat,
.chatbot-float {
    display: none !important;
}

/* ── Launcher stack ── */
.fab-launcher {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ── Main trigger button ── */
.fab-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD400 0%, #FFC000 100%);
    color: #111;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(255, 212, 0, 0.5), 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.fab-main svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: 26px !important;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.fab-main:active { transform: scale(0.93); }

/* Pulse ring — stops when open */
.fab-main::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 212, 0, 0.45);
    animation: fabPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fabPulse {
    0%, 100% { transform: scale(1);    opacity: 0.65; }
    50%       { transform: scale(1.22); opacity: 0; }
}

/* Open state — main button */
.fab-icon-open  { display: block; }
.fab-icon-close { display: none; }

.fab-launcher.is-open .fab-icon-open  { display: none; }
.fab-launcher.is-open .fab-icon-close { display: block; }

.fab-launcher.is-open .fab-main {
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    color: #FFD400;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    transform: rotate(90deg);
}

/* Stop pulse when open */
.fab-launcher.is-open .fab-main::after {
    animation: none;
    opacity: 0;
}

/* ── Sub-buttons ── */
.fab-child {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
    transform: scale(0) translateY(16px);
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.fab-child svg { width: 24px; height: 24px; flex: 0 0 auto !important; flex-shrink: 0 !important; min-width: 24px !important; }

.fab-launcher.is-open .fab-child {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Stagger — chat first, WA second */
.fab-launcher.is-open .fab-chat { transition-delay: 0.04s; }
.fab-launcher.is-open .fab-wa   { transition-delay: 0.09s; }

.fab-child:active { transform: scale(0.9) !important; }

/* WA = green */
.fab-wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
}

/* Chat = indigo */
.fab-chat {
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.45);
}

/* ── Labels — always visible on mobile when open ── */
.fab-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 10, 15, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease 0.15s;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Show labels when open — both hover (desktop) and always (mobile) */
.fab-launcher.is-open .fab-child .fab-label {
    opacity: 1;
}

/* ── Mobile sizes + safe area ── */
@media (max-width: 480px) {
    .fab-launcher {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        gap: 11px;
    }
    .fab-main  { width: 54px; height: 54px; }
    .fab-child { width: 46px; height: 46px; }
    .fab-main  svg { width: 24px; height: 24px; }
    .fab-child svg { width: 22px; height: 22px; }
}

/* ═══════════════════════════════════════════════════════
   HAMBURGER BUTTON — improved mobile header toggle
   ═══════════════════════════════════════════════════════ */

.mobile-menu-btn {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* Smooth icon swap */
.mobile-menu-btn .hamburger-icon,
.mobile-menu-btn .close-icon {
    transition: opacity 0.18s ease, transform 0.22s ease !important;
}

.mobile-menu-btn .hamburger-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.mobile-menu-btn .close-icon {
    opacity: 0 !important;
    transform: scale(0.7) rotate(-45deg) !important;
}

.mobile-menu-btn.active .hamburger-icon {
    opacity: 0 !important;
    transform: scale(0.7) rotate(45deg) !important;
}
.mobile-menu-btn.active .close-icon {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

/* ═══════════════════════════════════════════════════════
   CARA KERJA — step icons larger & clearer on mobile
   (was 32px SVG in 80px box → too small to read on phone)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #cara-kerja .step-icon-bounce {
        width: 72px !important;
        height: 72px !important;
        border-width: 2px !important;
    }
    #cara-kerja .step-icon-bounce svg {
        width: 40px !important;
        height: 40px !important;
        color: #1a1a1a !important;
    }
    #cara-kerja .step-number {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }
    #cara-kerja .step-item h3 {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 480px) {
    #cara-kerja .step-icon-bounce {
        width: 76px !important;
        height: 76px !important;
    }
    #cara-kerja .step-icon-bounce svg {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   WHATSAPP MODAL close (×) — precise centering + visible circle
   (was bare 32px glyph, off-center & low-contrast on green header)
   ═══════════════════════════════════════════════════════ */
.whatsapp-modal-close {
    background: rgba(255, 255, 255, 0.2) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 36px !important;     /* glyph vertical-center via line-height */
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    align-self: center !important;    /* stop header flex from stretching height */
    transition: background 0.25s ease, transform 0.3s ease !important;
}
.whatsapp-modal-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: rotate(90deg) !important;
}