/**
 * Kibcloud — Global Responsive Overrides
 * Injected via header.php to fix responsiveness across ALL pages
 * ─────────────────────────────────────────────────────────────
 */

/* ===== SAFE-AREA / NOTCH SUPPORT ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
    .safe-area-top    { padding-top: env(safe-area-inset-top); }
}

/* ===== BASE MOBILE FIXES ===== */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

/* Prevent horizontal overflow everywhere */
*, *::before, *::after {
    max-width: 100vw;
}
main, section, div, form { max-width: none; }

img, video, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ===== TOUCH-FRIENDLY TARGETS ===== */
@media (max-width: 768px) {
    button, a, select, input[type="checkbox"], input[type="radio"],
    [role="button"], summary {
        min-height: 44px;
        /* touch target size per WCAG */
    }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="url"],
    textarea, select {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}

/* ===== TYPOGRAPHY SCALING ===== */
@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.25rem, 5vw, 1.875rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.5rem) !important; }
}

/* ===== CONTAINER FIXES ===== */
@media (max-width: 640px) {
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===== FORM LAYOUT FIXES ===== */
@media (max-width: 640px) {
    /* Stack side-by-side form fields */
    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Full-width buttons */
    button[type="submit"],
    .btn-primary,
    a.btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ===== STICKY SIDEBAR FIX ===== */
@media (max-width: 1024px) {
    .sticky {
        position: static !important;
    }
}

/* ===== TABLE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ===== CARD GRID IMPROVEMENTS ===== */
@media (max-width: 640px) {
    /* Give cards proper spacing on small screens */
    .grid {
        gap: 12px !important;
    }
    
    /* Reduce card padding on mobile */
    .rounded-xl, .rounded-2xl {
        /* Keep border-radius reasonable */
    }
}

/* ===== CHECKOUT-SPECIFIC MOBILE ===== */
@media (max-width: 1024px) {
    /* Ensure checkout form stacks properly */
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Order summary goes below on mobile */
    .lg\:col-span-1 {
        order: 2;
    }
    .lg\:col-span-2 {
        order: 1;
    }
}

/* ===== PAYMENT METHOD CARDS ===== */
@media (max-width: 480px) {
    label.flex.items-center {
        flex-wrap: nowrap;
    }
    label.flex.items-center .ml-4 p {
        font-size: 0.8125rem;
    }
}

/* ===== MOBILE BOTTOM BAR ===== */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ===== MODAL / OVERLAY FIXES ===== */
@media (max-width: 768px) {
    .fixed.inset-0 {
        padding: 16px;
    }
}

/* ===== ANIMATION PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== GLASS CARD DARK (shared by whatsapp, hosting, etc.) ===== */
.glass-dark {
    background: rgba(16, 42, 67, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ===== HOSTING PLAN CARDS — MOBILE FIX ===== */
@media (max-width: 768px) {
    /* Don't lift featured card on mobile — causes layout jump */
    .transform.md\:-translate-y-4 {
        transform: none !important;
    }
}

/* ===== INTEGRATION PARTNER CHIPS ===== */
@media (max-width: 640px) {
    .flex.flex-wrap.justify-center {
        gap: 8px !important;
    }
    .flex.flex-wrap.justify-center > div {
        padding: 8px 12px !important;
        font-size: 0.8125rem;
    }
}

/* ===== CART ITEM MOBILE ===== */
@media (max-width: 640px) {
    /* Cart item: stack icon+text and price+delete vertically */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
}

/* ===== FAQ ACCORDION TOUCH ===== */
details > summary {
    cursor: pointer;
    list-style: none;
    -webkit-appearance: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* ===== PRINT-FRIENDLY ===== */
@media print {
    nav, footer, .fixed, .mobile-sticky-bar, button { display: none !important; }
    body { background: white !important; color: black !important; }
    .bg-kib-900, .bg-kib-950 { background: white !important; }
    .text-white, .text-gray-300, .text-gray-400 { color: black !important; }
}