/* ============================================================
   Chikki Mukki — Customer Portal Utility Styles
   Supplements the inline CSS in index.php.
   ============================================================ */

/* ── Skeleton shimmer loader ── */
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f5ede3 25%, #eddec7 50%, #f5ede3 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s infinite;
    border-radius: 10px;
}

.skeleton-card {
    height: 220px;
    border-radius: 18px;
}

.skeleton-tab {
    height: 78px;
    width: 88px;
    border-radius: 16px;
}

/* ── Utility ── */
.hidden  { display: none !important; }
.text-center { text-align: center; }
.mt-16   { margin-top: 16px; }
.mb-16   { margin-bottom: 16px; }

/* ── Page visibility safety-net ──────────────────────────────
   If any .page was accidentally given display:block without
   the .active class, this ensures it stays hidden. */
.page:not(.active) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.page.active {
    animation: fadeInPage 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Reveal safety-net ───────────────────────────────────────
   Ensures .reveal elements inside an active page are ALWAYS
   fully visible, even if IntersectionObserver missed them. */
.page.active .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ── Auth / Order modal scroll fix ──────────────────────────
   Prevents the backdrop from clipping the scrollable modal
   card on iOS/Android when the soft keyboard raises. */
.modal-bg {
    overflow: visible;
}

.modal-bg.open {
    overflow: auto;  /* allow scroll when modal is taller than viewport */
}

.modal {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── Body scroll lock when modal is open ── */
body.modal-open {
    overflow: hidden;
    /* prevent background page from scrolling under the modal */
}

/* ── Responsive helpers ── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .hero-inner {
        grid-template-columns: 1fr !important;
    }

    .skeleton-card  { height: 180px; border-radius: 14px; }
    .skeleton-tab   { width: 72px; height: 64px; border-radius: 12px; }
}

@media (max-width: 480px) {
    .skeleton-card  { height: 150px; border-radius: 12px; }
    .skeleton-tab   { width: 64px; height: 58px; border-radius: 10px; }

    /* Auth modal: tighter gaps so all fields fit comfortably */
    .modal {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 44px; /* extra clearance above home-bar */
    }

    .modal .fg   { margin-bottom: 10px; }
    .modal .fi   { padding: 10px 12px; font-size: .88rem; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ── Print ── */
@media print {
    .header,
    .nav,
    .footer,
    .cart-btn,
    .cart-side,
    .cart-overlay,
    .modal-bg,
    #floatCart,
    .toast-wrap,
    .skeleton,
    .skeleton-card,
    .skeleton-tab {
        display: none !important;
    }

    body { background: white !important; }
}