/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet styles */
/* @media (max-width: 992px) {
    .home-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
} */

@media (max-width: 768px) {
    /* Prevent horizontal scroll on body - but allow for side-sliding elements */
    body {
        overflow-x: clip; /* clip instead of hidden allows child overflow */
        max-width: 100vw;
    }
    
    html {
        overflow-x: clip;
    }
    
    /* Constrain all containers */
    .container,
    .home-hero,
    .home-hero-content,
    .home-results {
        max-width: 100%;
        /* overflow-x: hidden; */
    }
    
    /* Adjust spacing for mobile */
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
    }

    .navbar-modern-brand-img{
        max-width: 120px;
    }

    .footer-modern-brand-img{
        max-width: 80px;
    }
    
    /* Buttons - Smaller on mobile */
    .btn-modern {
        padding: 8px 16px;
        font-size: 0.875rem;
        justify-content: center;
    }
    
    .btn-lg-modern {
        padding: 10px 20px;
        font-size: 0.9375rem;
    }
    
    /* Cards */
    .card-modern {
        border-radius: var(--radius-md);
    }
    
    .card-modern-body {
        padding: var(--spacing-md);
    }
    
    /* Modals */
    .modal-modern-content {
        width: 95%;
        max-height: 95vh;
        border-radius: var(--radius-lg);
    }
    
    .modal-modern-header,
    .modal-modern-body,
    .modal-modern-footer {
        padding: var(--spacing-md);
    }
    
    /* Tables */
    .table-modern {
        font-size: var(--font-size-sm);
    }
    
    .table-modern th,
    .table-modern td {
        padding: var(--spacing-sm);
    }
    
    /* Make tables scrollable on mobile */
    .table-modern-container {
        overflow-x: auto;
    }
    
    /* Navbar */
    .navbar-modern {
        padding: 0.75rem 1rem;
    }
    
    .navbar-modern .container {
        flex-wrap: nowrap !important;
        gap: 1rem;
    }
    
    .navbar-modern-brand {
        font-size: 1.125rem !important;
        flex-shrink: 0;
    }
    
    .navbar-modern-nav {
        gap: 0.5rem;
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: 100%;
    }
    
    .navbar-modern-link {
        font-size: 0.8125rem;
        white-space: nowrap;
        padding: 0.375rem 0.5rem;
    }
    
    .navbar-modern .btn-modern {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
        white-space: nowrap;
    }
    
    .navbar-modern .btn-sm-modern {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Tabs */
    .tabs-modern {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-modern {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Pagination */
    .pagination-modern {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Breadcrumbs */
    .breadcrumb-modern {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    
    /* Toast */
    .toast-modern {
        left: var(--spacing-md);
        right: var(--spacing-md);
        bottom: var(--spacing-md);
        min-width: auto;
    }
    
    /* Dropdown */
    .dropdown-modern-menu {
        left: 0;
        right: 0;
        width: 100%;
    }
    
    /* Forms */
    .form-control-modern {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Carousel controls */
    .carousel-modern-control {
        width: 36px;
        height: 36px;
    }
    
    .carousel-modern-control.prev {
        left: var(--spacing-sm);
    }
    
    .carousel-modern-control.next {
        right: var(--spacing-sm);
    }
    
    /* Horizontal tutor card - stack vertically on mobile */
    .card-tutor-modern-horizontal {
        flex-direction: column;
    }
    
    .card-tutor-modern-horizontal .card-tutor-modern-image {
        width: 100%;
        height: 240px;
    }

    /* Side Sliding Mobile - Horizontal scroll for multiple elements */
    .side-sliding-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.75rem !important;
        margin: 0 -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        scrollbar-width: none !important; /* Firefox */
    }
    
    .side-sliding-mobile::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Each child has fixed width and snaps */
    .side-sliding-mobile > * {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: start;
    }
    
    /* For smaller cards, use 75% width */
    .side-sliding-mobile.side-sliding-small > * {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    /* For FAQ items specifically */
    .hp-faq-slider.side-sliding-mobile > .hp-faq-item {
        flex: 0 0 85%;
        max-width: 85%;
        min-width: 280px;
    }
    
    /* For industry cards */
    .hp-industries-grid.side-sliding-mobile > .hp-industry-card {
        flex: 0 0 80%;
        max-width: 80%;
        min-width: 280px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    /* Typography */
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-4xl: 1.875rem;
    }
    
    /* Buttons */
    .btn-modern {
        padding: 10px 20px;
    }
    
    .btn-sm-modern {
        padding: 6px 12px;
    }
    
    /* Cards */
    .card-modern-header,
    .card-modern-body,
    .card-modern-footer {
        padding: var(--spacing-sm);
    }
    
    /* Modals */
    .modal-modern-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-content-modern {
        max-height: 100vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .modal-modern {
        align-items: flex-end;
        padding: 0;
    }
    
    .modal-header-modern,
    .modal-body-modern,
    .modal-footer-modern {
        padding: 1rem;
    }
    
    /* Home Page Mobile Styles */
    .home-hero {
        min-height: auto;
        height: 100vh;
        padding: 5rem 1rem 2rem !important; 
        
    }
    
    .home-hero.search-focused {
        padding: 5.5rem 1rem 2rem !important; /* Extra padding on search page mobile */
    }
    
    .home-hero-content {
        padding: 0 1rem;
    }
    
    .home-hero-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .home-hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .home-search-wrapper {
        padding: 0 1rem;
    }
    
    .home-search-container {
        padding: 8px 8px 8px 16px;
    }
    
    .home-search-icon {
        margin-right: 8px;
    }
    
    .home-search-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .home-search-input {
        font-size: 0.95rem;
        padding: 12px 8px;
    }
    
    .home-search-button {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    /* Horizontal scrollable quick searches */
    .home-quick-searches {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        gap: 8px;
        padding: 0 1rem;
        margin-top: 1rem;
    }
    
    .home-quick-searches::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .home-quick-searches-label {
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-block;
    }
    
    .home-quick-search-link {
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-block;
        padding: 8px 16px;
    }
    
    /* Search Filters Mobile */
    .home-search-filters {
        padding: 0 1rem;
    }
    
    .home-filter-pills {
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    
    .home-filter-pills::-webkit-scrollbar {
        display: none;
    }
    
    .home-filter-pill-content {
        font-size: 0.8125rem;
        padding: 5px 12px;
    }
    
    .home-filter-pill-content svg {
        width: 14px;
        height: 14px;
    }
    
    .home-results {
        padding: 2rem 0;
    }
    
    .home-results-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        /* padding: 0 1rem; */
    }
    
    .home-results-header {
        padding: 0 1rem;
    }
    
    /* Card adjustments for mobile */
    .card-tutor-modern.compact {
        max-width: 100%;
    }
    
    .card-tutor-modern-image {
        height: 200px !important;
    }
    
    .card-tutor-modern-body {
        padding: 1rem !important;
    }
    
    .card-tutor-modern-name {
        font-size: 1.25rem !important;
    }
    
    .card-tutor-modern-footer {
        flex-direction: row !important;
        gap: 1rem;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .card-tutor-modern-footer .btn-modern {
        width: auto !important;
        flex-shrink: 0;
    }
    
    .card-tutor-modern-price {
        flex: 1;
    }

    .listing-content-wrapper{
        padding: 0px !important;
    }

    .listing-hero{
        margin-bottom: 1rem;
    }
    
    /* Footer Mobile Styles */
    .footer-modern {
        padding: 3rem 0 1.5rem;
        margin-top: 3rem;
    }
    
    .footer-modern-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .footer-modern-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-modern-badges {
        justify-content: center;
    }

    /* Provider Dashboard Mobile Styles */
    .get-started-card {
        padding: 2rem 1.5rem;
    }

    .get-started-title {
        font-size: 2rem;
    }

    .bank-alert-card {
        flex-direction: column;
        padding: 1.5rem;
    }

    .bank-alert-icon {
        width: 50px;
        height: 50px;
    }

    .bank-alert-actions {
        flex-direction: column;
    }

    .bank-alert-actions a {
        width: 100%;
        justify-content: center;
    }

    .business-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .business-actions {
        width: 100%;
    }

    .business-actions .btn-modern {
        flex: 1;
    }

    .activity-row {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }

    .activity-status,
    .activity-amount {
        grid-column: 2;
        justify-self: end;
    }

    /* Provider Bookings Mobile Styles */
    .bookings-page {
        padding: 1rem 0;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .controls-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .view-switcher {
        width: 100%;
        justify-content: center;
    }

    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .filter-tab {
        white-space: nowrap;
        flex: 1;
    }

    .bookings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .booking-header {
        flex-direction: column;
        gap: 1rem;
    }

    .booking-badges {
        align-self: flex-start;
    }

    .business-image-container{
        margin-left: 10vw
    }

    /* ========================================
       HOMEPAGE SECTIONS - Mobile
       ======================================== */
    
    /* Categories */
    .hp-categories {
        padding: 2rem 0;
    }

    .hp-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .hp-category-card {
        padding: 1.25rem 0.75rem;
    }

    .hp-category-icon {
        width: 40px;
        height: 40px;
    }

    .hp-category-icon i {
        font-size: 1.25rem;
    }

    .hp-category-name {
        font-size: 0.8125rem;
    }

    /* App Preview */
    .hp-app-preview {
        min-height: auto;
        padding: 2.5rem 0 0;
    }

    .hp-app-preview::before {
        top: -20%;
        left: -30%;
        width: 80%;
    }

    .hp-app-content {
        flex-direction: column;
        min-height: auto;
        text-align: center;
    }

    .hp-app-text {
        width: 100%;
        padding: 0 1.5rem 2rem;
    }

    .hp-app-image {
        position: relative;
        top: auto;
        transform: none;
        width: 100%;
        height: auto;
        justify-content: center;
    }

    .hp-app-image img {
        width: auto;
        height: auto;
        max-height: none;
        max-width: 500px;
        filter: drop-shadow(0 -10px 30px rgba(0,0,0,0.1));
    }

    .hp-app-badge {
        margin-bottom: 1rem;
    }

    .hp-app-title {
        font-size: 1.875rem;
        margin-bottom: 1rem;
    }

    .hp-app-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        max-width: 100%;
    }

    .hp-app-features {
        align-items: center;
    }

    .hp-app-feature {
        font-size: 0.9375rem;
    }

    /* How It Works */
    .hp-how-it-works {
        padding: 2rem 0;
    }

    .hp-section-header {
        margin-bottom: 1.5rem;
    }

    .hp-steps {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .hp-step {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
        max-width: 100%;
        padding: 0.75rem 0;
    }

    .hp-step-number {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.125rem;
        margin: 0;
    }

    .hp-step-content {
        flex: 1;
    }

    .hp-step-title {
        margin-bottom: 0.25rem;
    }

    .hp-step-description {
        font-size: 0.875rem;
    }

    .hp-step-connector {
        display: none;
    }

    /* Business CTA */
    .hp-business-cta {
        padding: 2.5rem 0;
    }

    .hp-business-card {
        padding: 2rem 1.5rem;
    }

    .hp-business-title {
        font-size: 1.5rem;
    }

    .hp-business-stats {
        gap: 1.5rem;
    }

    .hp-stat-number {
        font-size: 1.25rem;
    }

    .hp-business-btn {
        width: 100%;
        justify-content: center;
    }

    /* Trust Section */
    .hp-trust {
        padding: 2rem 0;
    }

    .hp-trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .hp-trust-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .hp-trust-text {
        align-items: center;
    }

    .hp-trust-text strong {
        font-size: 0.8125rem;
    }

    .hp-trust-text span {
        font-size: 0.75rem;
    }

    /* Section Headers */
    .hp-section-title {
        font-size: 1.5rem;
    }

    .hp-section-subtitle {
        font-size: 0.9375rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hp-trust-grid {
        grid-template-columns: 1fr;
    }

    .hp-trust-item {
        flex-direction: row;
        text-align: left;
    }

    .hp-trust-text {
        align-items: flex-start;
    }

    .hp-business-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hp-stat {
        flex: 1;
        min-width: 80px;
    }
}

/* ========================================
   AUTH PAGES - Mobile Responsive
   ======================================== */
@media (max-width: 992px) {
    .auth-split-container {
        flex-direction: column;
    }

    .auth-split-left {
        min-height: auto;
        padding: 2rem 1.5rem;
    }

    .auth-split-title {
        font-size: 1.75rem;
    }

    .auth-split-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .auth-info-box {
        padding: 1rem;
    }

    .auth-social-proof {
        margin-top: 1.5rem;
    }

    .auth-split-right {
        padding: 2rem 1.5rem;
    }

    .auth-form-container {
        max-width: 100%;
    }

    .auth-brand {
        margin-bottom: 2rem;
    }

    .auth-form-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .auth-split-left {
        padding: 1.5rem;
    }

    /* Hide decorative elements on mobile */
    .auth-decoration {
        display: none;
    }

    .auth-welcome-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .auth-welcome-icon svg {
        width: 28px;
        height: 28px;
    }

    .auth-split-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .auth-split-description {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .auth-info-box {
        display: none;
    }

    .auth-social-proof {
        margin-top: 1rem;
    }

    .auth-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .auth-social-text {
        font-size: 0.875rem;
    }

    .auth-split-right {
        padding: 1.5rem;
    }

    .auth-brand {
        margin-bottom: 1.5rem;
    }

    .auth-brand-name {
        font-size: 1.5rem;
    }

    .auth-form-title {
        font-size: 1.375rem;
    }

    .auth-form-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
    }

    .auth-form-group {
        margin-bottom: 1rem;
    }

    .auth-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-submit-btn {
        margin-bottom: 1rem;
    }

    .auth-register-options {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .auth-register-options-3col {
        grid-template-columns: 1fr;
    }

    .auth-option-card {
        padding: 0.875rem;
    }

    .auth-option-icon {
        width: 40px;
        height: 40px;
    }

    .auth-option-text strong {
        font-size: 0.875rem;
    }

    .auth-option-text span {
        font-size: 0.75rem;
    }

    .auth-footer-links {
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .auth-divider-text {
        font-size: 0.875rem;
    }

    .auth-alt-option {
        flex-direction: column;
        gap: 0.25rem;
    }

    .auth-action-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .auth-code-input {
        font-size: 1.5rem;
        letter-spacing: 0.25rem;
    }
}

@media (max-width: 480px) {
    .auth-split-left {
        padding: 1.25rem 1rem;
    }

    .auth-welcome-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 0.75rem;
    }

    .auth-welcome-icon svg {
        width: 24px;
        height: 24px;
    }

    .auth-split-title {
        font-size: 1.25rem;
    }

    .auth-split-description {
        font-size: 0.875rem;
    }

    .auth-split-right {
        padding: 1.25rem 1rem;
    }

    .auth-brand-name {
        font-size: 1.375rem;
    }

    .auth-form-title {
        font-size: 1.25rem;
    }

    .auth-form-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }
}

/* Auth Dropdown Mobile */
@media (max-width: 768px) {
    .auth-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 1rem;
        max-height: 80vh;
        overflow-y: auto;
    }

    .auth-dropdown-header {
        padding: 0.5rem 0.5rem 1rem;
        font-size: 0.875rem;
        text-align: center;
    }

    .auth-dropdown-item {
        padding: 1rem;
    }

    .auth-dropdown-icon {
        width: 48px;
        height: 48px;
    }

    .auth-dropdown-content strong {
        font-size: 1rem;
    }

    .auth-dropdown-content span {
        font-size: 0.875rem;
    }
}

/* ========================================
   CATEGORY PAGE - Mobile Responsive
   ======================================== */
@media (max-width: 1024px) {
    .catpage-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .catpage-hero-stats {
        justify-content: center;
    }

    .catpage-stats-card {
        max-width: 100%;
    }

    .catpage-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .catpage-seo-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .catpage-hero {
        padding: 1.5rem 0 2.5rem;
    }

    .catpage-h1 {
        font-size: 2rem;
    }

    .catpage-subtitle {
        font-size: 1rem;
    }

    .catpage-search-box {
        flex-direction: column;
        padding: 0.5rem;
    }

    .catpage-search-input {
        padding: 0.75rem 1rem;
    }

    .catpage-search-btn {
        width: 100%;
        justify-content: center;
    }

    .catpage-trust {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .catpage-stats-card {
        padding: 1.5rem;
    }

    .catpage-stats-grid {
        gap: 0.75rem;
    }

    .catpage-stat {
        padding: 0.75rem;
    }

    .catpage-stat-value {
        font-size: 1.25rem;
    }

    .catpage-listings {
        padding: 2.5rem 0;
    }

    .catpage-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .catpage-section-title h2 {
        font-size: 1.375rem;
    }

    .catpage-view-all {
        display: none;
    }

    .catpage-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .catpage-mobile-cta {
        display: block;
    }

    .catpage-features {
        padding: 3rem 0;
    }

    .catpage-features-header h2 {
        font-size: 1.5rem;
    }

    .catpage-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .catpage-feature {
        display: flex;
        text-align: left;
        gap: 1rem;
        padding: 1.25rem;
    }

    .catpage-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        margin: 0;
        flex-shrink: 0;
    }

    .catpage-feature h3 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .catpage-feature p {
        font-size: 0.875rem;
    }

    .catpage-seo {
        padding: 3rem 0;
    }

    .catpage-seo-content h2 {
        font-size: 1.375rem;
    }

    .catpage-seo-content h3 {
        font-size: 1.125rem;
    }

    .catpage-faq {
        padding: 1.5rem;
    }

    .catpage-faq h3 {
        font-size: 1.125rem;
    }

    .catpage-faq-question {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .catpage-faq-answer {
        padding: 0 1rem 0.875rem;
    }

    .catpage-faq-answer p {
        font-size: 0.875rem;
    }

    .catpage-cta {
        padding: 2.5rem 0;
    }

    .catpage-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .catpage-cta-content h2 {
        font-size: 1.375rem;
    }

    .catpage-cta-content p {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .catpage-h1 {
        font-size: 1.625rem;
    }

    .catpage-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    .catpage-trust-item {
        font-size: 0.8125rem;
    }

    .catpage-stats-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .catpage-stats-label {
        font-size: 1rem;
    }
}

/* ========================================
   LANDING PAGES - Mobile Responsive
   ======================================== */
@media (max-width: 1024px) {
    .landing-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-intro-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .landing-intro-visual {
        order: -1;
        display: flex;
        justify-content: center;
    }

    .landing-intro-card {
        max-width: 380px;
    }
}

@media (max-width: 768px) {
    .landing-hero {
        padding: 4rem 0;
    }

    .landing-h1 {
        font-size: 2.25rem;
    }

    .landing-subtitle {
        font-size: 1.0625rem;
    }

    .landing-hero-cta {
        flex-direction: column;
    }

    .landing-hero-cta .btn-xl-modern {
        width: 100%;
        justify-content: center;
    }

    .landing-hero-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .landing-hero-stat {
        min-width: 100px;
    }

    .landing-hero-stat-value {
        font-size: 1.5rem;
    }

    .landing-intro {
        padding: 4rem 0;
    }

    .landing-intro-content h2 {
        font-size: 1.75rem;
    }

    .landing-section-header h2 {
        font-size: 1.75rem;
    }

    .landing-categories {
        padding: 4rem 0;
    }

    .landing-categories-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .landing-category-group {
        padding: 1.25rem;
    }

    .landing-benefits {
        padding: 4rem 0;
    }

    .landing-benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .landing-benefit {
        display: flex;
        text-align: left;
        gap: 1rem;
        padding: 1.5rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
    }

    .landing-benefit-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        margin: 0;
        flex-shrink: 0;
    }

    .landing-benefit h3 {
        font-size: 1.0625rem;
        margin-bottom: 0.5rem;
    }

    .landing-benefit p {
        font-size: 0.875rem;
    }

    .landing-steps {
        padding: 4rem 0;
    }

    .landing-steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .landing-step {
        max-width: 100%;
        width: 100%;
    }

    .landing-step-arrow {
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }

    .landing-testimonials {
        padding: 4rem 0;
    }

    .landing-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .landing-testimonial {
        padding: 1.5rem;
    }

    .landing-faq {
        padding: 4rem 0;
    }

    .landing-faq-question {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
    }

    .landing-faq-answer {
        padding: 0 1.25rem 1rem;
    }

    .landing-final-cta {
        padding: 4rem 0;
    }

    .landing-final-cta-box {
        padding: 2.5rem 1.5rem;
    }

    .landing-final-cta-box h2 {
        font-size: 1.75rem;
    }

    .landing-final-cta-box p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .landing-h1 {
        font-size: 1.875rem;
    }

    .landing-badge {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }

    .landing-hero-stat-value {
        font-size: 1.25rem;
    }

    .landing-hero-stat-label {
        font-size: 0.75rem;
    }

    .landing-intro-card {
        padding: 1.25rem;
    }

    .landing-step-number {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

/* ========================================
   COURSES FRIENDLY - Mobile Responsive
   ======================================== */
@media (max-width: 1024px) {
    .teach-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .teach-hero-visual {
        order: -1;
    }

    .teach-hero-card {
        max-width: 480px;
        margin: 0 auto;
    }

    .teach-ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .teach-hero {
        padding: 3rem 0;
    }

    .teach-hero-title {
        font-size: 2.25rem;
    }

    .teach-hero-text {
        font-size: 1.0625rem;
    }

    .teach-hero-btn {
        width: 100%;
        justify-content: center;
    }

    .teach-simple {
        padding: 3rem 0;
    }

    .teach-simple-header h2 {
        font-size: 1.75rem;
    }

    .teach-simple-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .teach-simple-step {
        padding: 2rem 1.5rem;
    }

    .teach-ideas {
        padding: 3rem 0;
    }

    .teach-ideas-header h2 {
        font-size: 1.75rem;
    }

    .teach-ideas-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .teach-idea-group {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .teach-idea-group-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .teach-ideas-note {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .teach-benefits {
        padding: 3rem 0;
    }

    .teach-benefits-header h2 {
        font-size: 1.75rem;
    }

    .teach-benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .teach-benefit-card {
        display: flex;
        text-align: left;
        gap: 1rem;
        padding: 1.5rem;
    }

    .teach-benefit-emoji {
        font-size: 2rem;
        margin-bottom: 0;
    }

    .teach-stories {
        padding: 3rem 0;
    }

    .teach-stories-header h2 {
        font-size: 1.75rem;
    }

    .teach-stories-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .teach-story {
        padding: 1.5rem;
    }

    .teach-faq {
        padding: 3rem 0;
    }

    .teach-faq-header h2 {
        font-size: 1.75rem;
    }

    .teach-faq-question {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }

    .teach-faq-answer {
        padding: 0 1.25rem 1rem;
    }

    .teach-final-cta {
        padding: 3rem 0;
    }

    .teach-final-box {
        padding: 2.5rem 1.5rem;
    }

    .teach-final-box h2 {
        font-size: 1.75rem;
    }

    .teach-final-box > p {
        font-size: 1rem;
    }

    .teach-final-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .teach-hero-title {
        font-size: 1.875rem;
    }

    .teach-hero-eyebrow {
        font-size: 0.8125rem;
    }

    .teach-simple-step-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .teach-idea-group-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .teach-benefit-emoji {
        font-size: 1.75rem;
    }
}

/* ========================================
   HOME PAGE - Provider CTA Mobile
   ======================================== */
@media (max-width: 1024px) {
    .provider-cta-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .home-provider-cta {
        padding: 3rem 0;
    }

    .provider-cta-card {
        flex-direction: column;
        padding: 2rem;
        text-align: center;
    }

    .provider-cta-card::before {
        width: 100%;
        height: 4px;
    }

    .provider-cta-card:hover::before {
        width: 100%;
        height: 6px;
    }

    .provider-cta-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto;
    }

    .provider-cta-features {
        align-items: center;
    }

    .provider-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .provider-cta-card {
        padding: 1.5rem;
    }

    .provider-cta-content h3 {
        font-size: 1.25rem;
    }

    .provider-cta-content > p {
        font-size: 0.9375rem;
    }

    .provider-cta-features li {
        font-size: 0.875rem;
    }
}

@media (max-width: 1024px) {
    .hp-modern-container {
        width: min(980px, 100%);
    }

    .hp-modern-intro-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hp-modern-visual {
        min-height: 360px;
    }

    .hp-modern-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-modern-feature-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hp-modern-intro {
        padding: 46px 0 38px;
    }

    .hp-modern-actions {
        width: 100%;
    }

    .hp-modern-btn {
        width: 100%;
        justify-content: center;
    }

    .hp-modern-proof {
        grid-template-columns: 1fr;
    }

    .hp-modern-category-grid {
        grid-template-columns: 1fr;
    }

    .hp-modern-feature-card {
        padding: 18px;
    }

    .hp-modern-screenshot {
        height: 220px;
    }

    .hp-modern-cta-card {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .hp-modern-cta-actions {
        width: 100%;
        justify-content: stretch;
    }

    .hp-modern-faq-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 6px;
    }

    .hp-modern-faq-grid::-webkit-scrollbar {
        display: none;
    }

    .hp-modern-faq-item {
        flex: 0 0 88% !important;
        max-width: 88% !important;
        scroll-snap-align: start;
    }

    .hp-modern-provider-grid {
        grid-template-columns: 1fr;
    }

    .hp-modern-provider-card {
        grid-template-columns: 1fr;
    }

    .hp-modern-provider-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .hp-modern-container[data-expand-container="widen"],
    [data-expand-container="widen"].hp-modern-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hp-modern-title {
        font-size: 2rem;
    }

    .hp-modern-subtitle {
        font-size: 1rem;
    }

    .hp-modern-feature-stack {
        gap: 14px;
    }

    .hp-modern-feature-card[data-scroll-focus],
    .hp-modern-provider-card[data-scroll-focus] {
        filter: blur(calc((1 - var(--focus, 1)) * 0.6px));
    }

    .pricing-modern-hero {
        padding: 54px 0 34px;
    }

    .pricing-modern-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pricing-modern-hero-actions {
        width: 100%;
    }

    .pricing-modern-hero-actions .hp-modern-btn {
        width: 100%;
        justify-content: center;
    }

    .pricing-modern-hero-proof {
        grid-template-columns: 1fr;
    }

    .pricing-modern-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .pricing-modern-toggle-btn {
        flex: 1;
        text-align: center;
    }

    .pricing-modern-section {
        padding: 28px 0 38px;
    }

    .pricing-modern-card {
        padding: 18px;
    }

    .pricing-modern-compare {
        padding: 34px 0 46px;
    }

    .pricing-modern-faq-grid {
        grid-template-columns: 1fr;
    }

    .pricing-modern-final-card {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .pricing-modern-final-actions {
        width: 100%;
    }

    .pricing-modern-final-actions .hp-modern-btn {
        width: 100%;
        justify-content: center;
    }

    .customer-profile-edit {
        padding: 34px 0 54px;
    }

    .customer-profile-edit-top {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-profile-edit-back {
        width: fit-content;
    }

    .customer-profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .customer-profile-edit-actions {
        justify-content: stretch;
    }

    .customer-profile-edit-save {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .customer-dashboard {
        padding: 34px 0 54px;
    }

    .customer-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-dashboard-header-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .customer-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .customer-dashboard-main {
        grid-template-columns: 1fr;
    }

    .provider-dashboard {
        padding: 34px 0 54px;
    }

    .provider-dashboard .container-dashboard {
        padding: 0;
        min-height: auto;
    }

    .provider-dashboard .business-header {
        flex-direction: column;
        align-items: stretch;
    }

    .provider-dashboard .business-actions {
        width: 100%;
    }

    .provider-dashboard .business-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hp-modern-container {
        padding: 0 16px;
    }

    .hp-modern-title {
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .hp-modern-actions {
        gap: 10px;
    }

    .hp-modern-pill {
        font-size: 0.8125rem;
        padding: 7px 10px;
    }

    .hp-modern-metric,
    .hp-proof-item {
        border-radius: 14px;
    }

    .pricing-modern-title {
        font-size: 1.95rem;
        line-height: 1.08;
    }

    .pricing-modern-subtitle {
        font-size: 1rem;
    }

    .customer-profile-edit-title {
        font-size: 1.65rem;
    }

    .customer-dashboard-title {
        font-size: 1.65rem;
    }
}