/* ============================================================
   SolveMate — small-screen hardening
   ------------------------------------------------------------
   style.css sets desktop values in fixed px with no mobile
   override: .hero-section h1 is 70px, .experiences-wrapper has
   200px of side padding (more than a phone is wide), and a dozen
   panels are pinned to width:60%.

   Selectors below deliberately mirror the originals so this
   sheet — loaded last — wins on source order. Using bare `h1`
   would lose, because `.hero-section h1` is more specific.
   ============================================================ */

/* ---- every width ---- */

/* Emails, UPI ids, IFSC codes and UUIDs have no spaces, so they push
   their container past the viewport instead of wrapping. */
td, th,
.info-value,
.text-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Images should never exceed their column. */
img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   Tablets and below
   ============================================================ */
@media (max-width: 991.98px) {
    .hero-section {
        padding: 24px 0 12px 0 !important;
    }

    .sol-abt {
        padding: 32px 0 20px 0 !important;
    }

    .grid-sol .ins-grid {
        margin-bottom: 0.5rem;
    }

    /* 200px of side padding leaves nothing on a tablet either. */
    .experiences-wrapper {
        padding: 56px 24px !important;
    }

    .inner-work {
        padding: 48px 24px 40px 24px;
    }

    .off-bg {
        padding: 40px 24px;
    }

    .purchase-card {
        padding: 28px 24px;
    }

    /* Panels pinned to 60% of a desktop canvas are unreadably narrow here. */
    .wallet-balance-card,
    .transactions-section,
    .earnings-hero-card,
    .withdrawals-section,
    .pending-status-card,
    .caution-box,
    .meeting-info-section .info-grid,
    .footer-cta,
    .sol-abt p,
    .sol-come h2,
    .sol-come p,
    .search-bar-wrapper {
        width: 100%;
    }

    /* The chat sidebar is wider than many phones on its own. */
    .chat-sidebar {
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================================
   Phones and small tablets
   ============================================================ */
@media (max-width: 767.98px) {

    /* Profile Header Overlap Fixes */
    .profile-banner {
        height: 110px !important;
    }

    .profile-summary {
        transform: none !important;
        margin-top: -55px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .profile-summary > div.d-flex,
    .profile-summary > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .profile-avatar {
        width: 110px !important;
        height: 110px !important;
        border-width: 4px !important;
        margin-bottom: 8px !important;
    }

    .profile-info {
        margin-left: 0 !important;
        padding-bottom: 0 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .listener-name-large {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-top: 4px !important;
    }

    .profile-tags {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .profile-rating-summary {
        text-align: center !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    .coins-rate {
        justify-content: center !important;
    }

    /* Filter Bar Layout Fix */
    .filter-section {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .filter-section .tags-wrapper {
        width: 100% !important;
    }

    .filter-section #apply-filters-btn,
    .filter-section .filter-btn {
        margin-left: auto !important;
    }

    .hero-section {
        padding: 16px 0 8px 0 !important;
    }

    .sol-abt {
        padding: 20px 0 16px 0 !important;
    }

    /* Headline scale. Fluid so it keeps shrinking toward 320px
       instead of stepping once and overflowing again. */
    .hero-section h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.15;
    }

    .sol-come h2 {
        font-size: clamp(1.5rem, 7vw, 2rem);
        line-height: 1.2;
    }

    .sol-abt h3,
    .work-sec h4 {
        font-size: clamp(1.3rem, 6vw, 1.6rem);
        line-height: 1.25;
    }

    .work-sec p,
    .lead {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Bootstrap display classes beat a bare h1 on specificity, so they
       have to be named explicitly. */
    .display-1 { font-size: clamp(1.9rem, 9vw, 2.75rem); }
    .display-2 { font-size: clamp(1.8rem, 8.5vw, 2.5rem); }
    .display-3 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
    .display-4 { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
    .display-5 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
    .display-6 { font-size: clamp(1.3rem, 6.5vw, 1.7rem); }

    .display-1, .display-2, .display-3,
    .display-4, .display-5, .display-6 {
        line-height: 1.15;
    }

    /* The testimonial card reserves 230px on the left for an avatar that
       is centred above the text at this width. */
    .test-content {
        padding: 24px 20px 28px 20px;
    }

    /* Toolbars of filters/buttons wrap instead of overflowing. */
    .d-flex.gap-2,
    .d-flex.gap-3,
    .btn-toolbar,
    .card-header .d-flex {
        flex-wrap: wrap;
    }

    /* Report date inputs are pinned to 125px inline. */
    .form-control-sm[type="date"] {
        width: auto !important;
        min-width: 8.5rem;
        flex: 1 1 8.5rem;
    }

    .search-box {
        width: 100%;
    }
}


/* ============================================================
   Phones
   ============================================================ */
@media (max-width: 575.98px) {

    .experiences-wrapper {
        padding: 40px 16px !important;
    }

    .inner-work {
        padding: 32px 16px 28px 16px;
    }

    .off-bg,
    .purchase-card {
        padding: 24px 16px;
    }

    /* Wallet Transactions Mobile Hardening */
    .wallet-balance-wrapper,
    .wallet-list-wrapper,
    .wallet-pagination-wrapper,
    .transactions-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wallet-balance-card {
        padding: 16px 14px !important;
    }

    .wallet-balance-card .balance-text {
        font-size: 1.15rem !important;
    }

    /* Cards and modals lose most of their width to padding on a phone. */
    .card-box,
    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    /* Oversized avatars/logos crowd out the content beside them. */
    .profile-avatar,
    .test-img-wrapper {
        width: 120px;
        height: 120px;
    }

    .admin-head img,
    .header-left img,
    .inner-menu img {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
    }

    .inner-menu {
        padding: 8px 14px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .inner-menu .d-flex {
        flex-wrap: nowrap !important;
    }

    .inner-menu .btn-login {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    .small-img  { width: 100px; }
    .medium-img { width: 130px; }
    .large-img  { width: 160px; }

    .shape-1, .shape-2 {
        display: none;   /* decorative only; they overflow at this width */
    }

    /* Table action buttons stack rather than widening the table. */
    .table .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.35rem !important;
    }

    /* A full-width primary action is easier to hit than a shrunken one. */
    .modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .modal-footer > .btn {
        width: 100%;
        margin: 0;
    }

    .search-box {
        border-radius: 50px !important;
        background: #fff;
        border: 1px solid #e0e0e0;
    }

    .search-box .input-group {
        flex-wrap: nowrap !important;
        gap: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .search-box .input-group > .form-control {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding-left: 14px !important;
        padding-right: 8px !important;
        border: none !important;
        background: transparent !important;
    }

    .search-box input::placeholder {
        font-size: 12px !important;
    }

    .search-box .input-group > .btn {
        width: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        border-radius: 50px !important;
        margin: 3px !important;
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 400px) {
    .inner-menu {
        padding: 6px 10px !important;
    }

    .inner-menu img {
        width: 105px !important;
        max-width: 105px !important;
    }

    .inner-menu .btn-login {
        padding: 5px 10px !important;
        font-size: 0.76rem !important;
    }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}