/**
 * ============================================================================
 * 📱 SAHU PARIVAR MATRIMONY - UNIVERSAL MOBILE RESPONSIVE TYPOGRAPHY & UX ENGINE
 * ============================================================================
 * This stylesheet optimizes all text font sizes, headings, banners, cards,
 * modals, and interactive UI components for mobile & tablet viewports.
 * It prevents oversized text blowout, improves readability, and gives a sleek,
 * clean, compact mobile app feel.
 */

/* ============================================================================
   TABLET & MOBILE BREAKPOINT (<= 767.98px)
   ============================================================================ */
@media screen and (max-width: 767.98px) {

    /* --- 1. Base Document Scaling --- */
    html {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font-size: 14px !important;
        line-height: 1.55 !important;
        letter-spacing: normal !important;
        word-break: break-word;
        overflow-x: clip !important;
    }

    /* --- 2. Global Headings Normalization --- */
    h1, .h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 8px !important;
        font-weight: 800 !important;
    }

    h2, .h2 {
        font-size: 19.5px !important;
        line-height: 1.32 !important;
        letter-spacing: -0.2px !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }

    h3, .h3 {
        font-size: 17.5px !important;
        line-height: 1.35 !important;
        letter-spacing: -0.1px !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    h4, .h4 {
        font-size: 15.5px !important;
        line-height: 1.38 !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    h5, .h5 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    h6, .h6 {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
    }

    .lead {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }

    /* --- 3. Bootstrap Display & Font Size Helpers Cap --- */
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
        font-size: 23px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
    }

    .fs-1 { font-size: 22px !important; }
    .fs-2 { font-size: 20px !important; }
    .fs-3 { font-size: 18px !important; }
    .fs-4 { font-size: 16px !important; }
    .fs-5 { font-size: 14px !important; }
    .fs-6 { font-size: 12.5px !important; }

    /* Catch & Clamp Hardcoded Inline Font Sizes on Headings */
    h1[style*="font-size"],
    h2[style*="font-size"],
    h3[style*="font-size"] {
        font-size: clamp(17px, 5vw, 22px) !important;
        line-height: 1.3 !important;
    }

    h4[style*="font-size"],
    h5[style*="font-size"] {
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.35 !important;
    }

    /* --- 4. Hero Banners & Showcase Titles --- */
    .spm-hero-wrap {
        padding: 30px 0 35px !important;
        text-align: center !important;
    }

    .spm-hero-title,
    .ban-tit h1,
    .inn-ban h1,
    .plans-ban h1,
    .ab-ban h1,
    .spm-about-hero-title,
    .spm-hiw-hero-title,
    .all-pro-head h1,
    .matrimony-hero h1,
    .matrimony-hero h2,
    .form-tit h1,
    .spm-contact-hero-title,
    .spm-pwd-hero-title,
    .spm-fav-hero-title,
    .spm-matched-hero-title,
    .spm-notif-hero-title,
    .spm-close-hero-title,
    .spm-privacy-hero-title,
    .spm-filter-hero-title {
        font-size: 21px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        font-weight: 800 !important;
    }

    .spm-hero-desc,
    .inn-ban p,
    .spm-about-hero-desc,
    .spm-hiw-hero-desc,
    .matrimony-hero p,
    .ban-tit span,
    .form-tit p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
    }

    .spm-hero-tag,
    .spm-hero-badge-item,
    .spm-about-hero-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        gap: 5px !important;
        margin-bottom: 12px !important;
    }

    /* --- 5. Homepage Sections & Headers --- */
    .spm-home-header {
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    .spm-home-header-title,
    .home-tit h2,
    .spm-3d-title,
    .spm-section-heading,
    .spm-feed-heading,
    .spm-filter-heading,
    .spm-pricing-title {
        font-size: 19.5px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        font-weight: 800 !important;
        letter-spacing: -0.2px !important;
    }

    .spm-home-header-desc,
    .home-tit p,
    .spm-3d-subtitle {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        margin-bottom: 0 !important;
    }

    /* Quick Search Card */
    .spm-search-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    .spm-search-card-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    .spm-cat-card {
        padding: 12px 8px !important;
    }

    .spm-cat-title {
        font-size: 12.5px !important;
        margin-top: 4px !important;
    }

    .spm-cat-sub {
        font-size: 10px !important;
    }

    /* Stats & Feature Boxes */
    .spm-stat-box {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }

    .spm-stat-num {
        font-size: 21px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    .spm-stat-label {
        font-size: 11px !important;
    }

    .spm-feature-card,
    .spm-step-card {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }

    .spm-feature-title,
    .spm-step-title {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    .spm-feature-desc,
    .spm-step-desc {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* --- 6. Centralized Profile Cards (.card-shaadi-theme) --- */
    .card-shaadi-theme {
        border-radius: 16px !important;
    }

    .card-body-custom {
        padding: 12px 10px 8px !important;
    }

    .card-body-custom h5 {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .card-body-custom h5 a span {
        font-size: 15px !important;
    }

    .badges-indian {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .badges-indian span {
        font-size: 10.5px !important;
        padding: 2.5px 7px !important;
        border-radius: 10px !important;
        line-height: 1.2 !important;
    }

    .profile-card-top-right {
        top: 7px !important;
        right: 7px !important;
    }

    .spm-circle-logo-badge {
        width: 30px !important;
        height: 30px !important;
        border-width: 1.5px !important;
    }

    .spm-card-name-row {
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .spm-card-title {
        font-size: 13.5px !important;
    }

    .spm-card-uid-badge {
        font-size: 9.5px !important;
        padding: 1.5px 5px !important;
        border-radius: 6px !important;
    }

    .profile-id-badge,
    .mangal-badge,
    .marriage-badge,
    .premium-badge-pill {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        border-radius: 12px !important;
    }

    .view-profile-wrapper {
        margin-top: 4px !important;
    }

    .view-profile-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    .profile-actions {
        padding: 6px 8px 10px !important;
        gap: 6px !important;
    }

    .profile-actions button,
    .profile-actions .save-fab,
    .profile-actions .open-chat-btn button {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 13.5px !important;
    }

    /* --- 7. Profile Details Page (`profile_details.php`) --- */
    .spm-pd-wrapper {
        padding: 16px 0 75px !important;
    }

    .spm-pd-hero-card {
        border-radius: 16px !important;
        margin-bottom: 18px !important;
    }

    .spm-pd-info-col {
        padding: 18px 14px !important;
    }

    .spm-pd-name {
        font-size: 20px !important;
        line-height: 1.28 !important;
        font-weight: 800 !important;
    }

    .spm-pd-verified-icon {
        font-size: 17px !important;
    }

    .spm-pd-tagline {
        font-size: 12.5px !important;
        margin-bottom: 12px !important;
    }

    .spm-pd-quick-chips {
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .spm-pd-chip {
        font-size: 11px !important;
        padding: 3.5px 9px !important;
        border-radius: 14px !important;
    }

    .spm-pd-section-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }

    .spm-pd-section-title {
        font-size: 15.5px !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
    }

    .spm-pd-field-label {
        font-size: 11.5px !important;
        color: #64748b !important;
        font-weight: 600 !important;
    }

    .spm-pd-field-val {
        font-size: 13px !important;
        color: #0f172a !important;
        font-weight: 600 !important;
    }

    .spm-pd-about-box {
        padding: 14px !important;
        border-radius: 12px !important;
        margin: 12px 0 !important;
    }

    .spm-pd-about-title {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .spm-pd-about-text {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    .spm-similar-heading {
        font-size: 16.5px !important;
        font-weight: 800 !important;
    }

    .spm-pd-mob-btn {
        font-size: 12px !important;
        height: 38px !important;
        padding: 0 12px !important;
        font-weight: 700 !important;
    }

    /* --- 8. Modals & Popups (#loginModal & Live Search) --- */
    #loginModal .modal-dialog {
        max-width: 92% !important;
        margin: 1rem auto !important;
    }

    #loginModal .modal-content {
        border-radius: 20px !important;
    }

    #loginModal .spm-lrm-header {
        padding: 20px 16px 14px !important;
    }

    #loginModal .spm-lrm-icon-circle {
        width: 48px !important;
        height: 48px !important;
        font-size: 19px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    #loginModal .spm-lrm-title {
        font-size: 16.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
        letter-spacing: normal !important;
    }

    #loginModal .spm-lrm-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    #loginModal .spm-lrm-body {
        padding: 14px 16px 18px !important;
    }

    #loginModal .spm-lrm-benefits {
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    #loginModal .spm-lrm-benefit-item {
        padding: 7px 10px !important;
        font-size: 11.5px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    #loginModal .spm-lrm-benefit-item i {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }

    #loginModal .spm-lrm-btn-login {
        font-size: 13px !important;
        padding: 10px 16px !important;
        border-radius: 30px !important;
    }

    #loginModal .spm-lrm-btn-reg {
        font-size: 12.5px !important;
        padding: 9px 16px !important;
        border-radius: 30px !important;
        margin-top: 8px !important;
    }

    #loginModal .spm-lrm-footer-note {
        font-size: 10.5px !important;
        margin-top: 12px !important;
    }

    /* Live Search Popup */
    .pop-search .spm-search-modal-container {
        padding: 10px !important;
        max-width: 94% !important;
    }

    .spm-search-modal-title {
        font-size: 18px !important;
    }

    .spm-search-box-input {
        font-size: 13px !important;
        height: 44px !important;
        padding-left: 40px !important;
    }

    .spm-search-pill-link {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Filter Bar (.ban-search) Mobile Responsive Grid */
    .ban-search {
        padding: 12px 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    }

    .ban-search ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .ban-search ul li {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ban-search ul li.sr-btn {
        grid-column: span 2 !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .ban-search select,
    .ban-search .chosen-select {
        height: 44px !important;
        font-size: 12.5px !important;
        border-radius: 10px !important;
    }

    .ban-search .spm-search-submit-btn,
    .ban-search ul li input[type="submit"] {
        height: 44px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* SweetAlert Dialogs */
    .swal-modal {
        border-radius: 18px !important;
        width: 90% !important;
        max-width: 360px !important;
        padding: 20px 16px !important;
    }

    .swal-title {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }

    .swal-text {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .swal-button {
        font-size: 12.5px !important;
        padding: 7px 18px !important;
        border-radius: 20px !important;
    }

    /* --- 9. Auth Pages (Login, Register, Step Forms) --- */
    .spm-auth-card {
        border-radius: 18px !important;
    }

    .spm-auth-form-panel {
        padding: 20px 16px !important;
    }

    .spm-auth-header-title,
    .spm-auth-form-title,
    .spm-step-form-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        font-weight: 800 !important;
    }

    .spm-auth-header-desc {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .spm-auth-label,
    .form-label {
        font-size: 12.5px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    .form-control,
    .form-select,
    .spm-auth-input {
        font-size: 13.5px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }

    .spm-auth-btn-submit,
    .spm-step-btn {
        font-size: 13.5px !important;
        padding: 10px 18px !important;
        border-radius: 25px !important;
        font-weight: 700 !important;
    }

    /* Multi-profile selection cards */
    .spm-multiprofile-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .spm-multiprofile-name {
        font-size: 13.5px !important;
    }

    .spm-multiprofile-id-badge {
        font-size: 10px !important;
    }

    /* --- 10. User Dashboard & Settings --- */
    .spm-db-welcome-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .spm-db-welcome-title {
        font-size: 17.5px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }

    .spm-db-welcome-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .spm-stat-card-title {
        font-size: 13px !important;
    }

    .spm-db-sidebar-link {
        font-size: 12.5px !important;
        padding: 8px 12px !important;
    }

    /* --- 11. Membership Plans Page --- */
    .spm-pricing-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .spm-plan-price {
        font-size: 22px !important;
        font-weight: 800 !important;
    }

    .spm-pricing-wrapper .card {
        border-radius: 16px !important;
    }

    .spm-pricing-wrapper ul li {
        font-size: 12px !important;
    }

    /* --- 12. Modern CTA Banner --- */
    .spm-home-cta-banner {
        padding: 24px 16px !important;
        border-radius: 16px !important;
        text-align: center !important;
    }

    .spm-cta-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        margin-bottom: 6px !important;
    }

    .spm-cta-desc {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    /* --- 13. Modern Footer Typography --- */
    .spm-footer-body {
        padding: 30px 0 20px !important;
    }

    .spm-footer-col-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        padding-bottom: 6px !important;
    }

    .spm-footer-brand-desc {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
    }

    .spm-footer-links-list li a {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .spm-footer-contact-item {
        font-size: 12px !important;
    }

    .spm-footer-copy {
        font-size: 11px !important;
    }
}

/* ============================================================================
   EXTRA COMPACT SCREENS (<= 480px / <= 400px e.g. iPhone SE, compact Androids)
   ============================================================================ */
@media screen and (max-width: 480px) {

    h1, .h1 {
        font-size: 20px !important;
        line-height: 1.28 !important;
    }

    h2, .h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    h3, .h3 {
        font-size: 16.5px !important;
        line-height: 1.32 !important;
    }

    h4, .h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    h5, .h5 {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
    }

    h6, .h6 {
        font-size: 12px !important;
    }

    p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .spm-hero-title,
    .ban-tit h1,
    .inn-ban h1,
    .plans-ban h1,
    .ab-ban h1,
    .spm-about-hero-title,
    .spm-hiw-hero-title,
    .all-pro-head h1,
    .matrimony-hero h1,
    .matrimony-hero h2,
    .form-tit h1,
    .spm-contact-hero-title,
    .spm-pwd-hero-title,
    .spm-fav-hero-title,
    .spm-matched-hero-title,
    .spm-notif-hero-title,
    .spm-close-hero-title,
    .spm-privacy-hero-title,
    .spm-filter-hero-title {
        font-size: 19.5px !important;
        line-height: 1.28 !important;
    }

    .spm-home-header-title,
    .home-tit h2,
    .spm-3d-title {
        font-size: 18px !important;
        line-height: 1.28 !important;
    }

    .spm-stat-num {
        font-size: 19px !important;
    }

    .card-body-custom h5 {
        font-size: 14px !important;
    }

    .card-body-custom h5 a span {
        font-size: 14px !important;
    }

    .spm-pd-name {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    #loginModal .spm-lrm-title {
        font-size: 15.5px !important;
        line-height: 1.32 !important;
    }

    #loginModal .spm-lrm-desc {
        font-size: 11.5px !important;
    }

    #loginModal .spm-lrm-btn-login {
        font-size: 12.5px !important;
        padding: 9px 14px !important;
    }

    #loginModal .spm-lrm-btn-reg {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    .spm-cta-title {
        font-size: 17px !important;
    }

    /* Status bar & Action Footer wrapping for compact mobile */
    .spm-card-status-bar {
        padding: 6px 10px !important;
        font-size: 10.5px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .spm-card-status-bar .spm-status-title {
        font-size: 10.5px !important;
    }

    .spm-card-status-bar .spm-status-pill {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .spm-card-action-bar {
        padding: 8px 8px !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .spm-card-action-bar .btn,
    .spm-card-action-bar button {
        font-size: 11px !important;
        padding: 5px 10px !important;
        white-space: nowrap !important;
    }

    .spm-card-action-bar .badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    .profile-actions {
        padding: 5px 6px 8px !important;
        gap: 5px !important;
        justify-content: center !important;
    }

    .profile-actions button,
    .profile-actions .save-fab,
    .profile-actions .open-chat-btn button {
        min-width: 32px !important;
        min-height: 32px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .spm-unlocked-contact-card {
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        word-break: break-word !important;
    }
}