/* ═══════════════════════════════════════════════════════════════
   Mobile-first comfortable spacing — less whitespace, tighter rhythm
   Loaded after portal theme; applies app-wide.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .theme-ayyappa.mobile-shell,
    .mobile-shell.theme-ayyappa {
        --spacing: 12px;
    }

    /* Main content area */
    .theme-ayyappa .temple-main .content,
    .theme-ayyappa .content,
    .temple-main.has-bottom-nav .content,
    .mobile-page,
    .temple-main.has-bottom-nav .mobile-page {
        padding: 0.625rem 0.75rem !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Page shells inside .content already have horizontal padding */
    .admin-page,
    .mobile-page,
    .history-page,
    .gallery-page,
    .blog-page,
    .offerings-page,
    .temple-book-puja-page,
    .admin-config-page,
    .admin-dashboard-page,
    .users-page,
    .offerings-admin-page,
    .payment-checkout-shell,
    .receipt-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100%;
    }

    /* Cards & toolbars */
    .theme-ayyappa .card,
    .theme-ayyappa .temple-card,
    .theme-ayyappa .temple-toolbar,
    .theme-pocket .card {
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
        border-radius: 16px !important;
    }

    .theme-ayyappa .card-body {
        padding: 0.75rem !important;
    }

    .theme-ayyappa .card-header {
        padding-bottom: 6px !important;
        font-size: 1rem !important;
    }

    .theme-ayyappa .kpi-card,
    .theme-ayyappa .temple-stat-card {
        padding: 12px 14px !important;
        min-height: 88px !important;
        margin-bottom: 10px !important;
    }

  .theme-ayyappa .seva-card,
  .seva-card {
        padding: 0.65rem 0.7rem !important;
        margin-bottom: 8px !important;
    }

    /* Page banners */
    .temple-page-banner,
    .theme-ayyappa .temple-page-banner,
    .hero {
        padding: 14px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 16px !important;
    }

    .temple-page-banner .banner-title,
    .temple-page-banner h1,
    .banner-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }

    .temple-page-banner .banner-sub {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    /* Headings */
    .content > h3,
    .content h3.mb-4,
    .theme-ayyappa .content > h3,
    .theme-ayyappa .heading-lg,
    .theme-ayyappa .temple-page-header .page-title {
        margin-bottom: 0.5rem !important;
        font-size: 1.15rem !important;
    }

    .theme-ayyappa .temple-page-header {
        margin-bottom: 10px !important;
    }

    /* Bootstrap spacing utilities */
    .theme-ayyappa .mb-4 { margin-bottom: 0.75rem !important; }
    .theme-ayyappa .mb-3 { margin-bottom: 0.5rem !important; }
    .theme-ayyappa .mt-4 { margin-top: 0.75rem !important; }
    .theme-ayyappa .mt-3 { margin-top: 0.5rem !important; }
    .theme-ayyappa .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .theme-ayyappa .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .theme-ayyappa .p-4 { padding: 0.75rem !important; }
    .theme-ayyappa .p-3 { padding: 0.625rem !important; }
    .theme-ayyappa .gap-3 { gap: 0.5rem !important; }
    .theme-ayyappa .gap-2 { gap: 0.375rem !important; }

    .theme-ayyappa .row,
    .mobile-page .row,
    .admin-page .row {
        --bs-gutter-x: 0.625rem;
        --bs-gutter-y: 0.625rem;
    }

    /* Forms — touch-friendly but not oversized */
    .theme-ayyappa .form-control,
    .theme-ayyappa .form-select {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
    }

    /* Offerings search — keep icon gutter (global form-control padding resets it) */
    .offerings-page .offerings-toolbar .form-control,
    .offerings-page .offerings-search-wrap .form-control {
        display: block !important;
        padding: 0.5rem 0.75rem 0.5rem 2.4rem !important;
        min-height: 44px !important;
        height: 44px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .offerings-page .offerings-toolbar {
        padding: 0.65rem 0.75rem !important;
    }

    .offerings-page .offerings-filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .theme-ayyappa .search-box {
        min-height: 44px;
        padding: 0 12px;
    }

    /* Tables in cards */
    .mobile-page .card-body,
    .admin-page .card-body {
        padding: 0.75rem !important;
    }

    .devotee-booking-cards {
        gap: 8px;
    }

    .devotee-booking-card {
        padding: 12px;
    }
}

@media (min-width: 992px) {
    .theme-ayyappa .content {
        padding: 18px 24px 2rem !important;
    }

    .theme-ayyappa .card,
    .theme-ayyappa .temple-card,
    .theme-ayyappa .temple-toolbar {
        margin-bottom: 14px;
        padding: 16px;
    }

    .temple-page-banner,
    .theme-ayyappa .temple-page-banner {
        padding: 20px 1.25rem !important;
        margin-bottom: 14px !important;
    }
}