/* ============================================
   SNAPIT RESPONSIVE MASTER STYLES
   Mobile & Laptop Compatibility Fixes
   Covers: Customer Dashboard + Public Pages
   ============================================ */

/* ============================================
   1. SHARED BREAKPOINTS & FOUNDATIONS
   ============================================ */

/* Ensure proper viewport scaling */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    max-width: 100%;
}

/* Touch-friendly minimum sizes */
@media (hover: none) and (pointer: coarse) {
    a, button, .snapit-btn, .tab-link, .spf-nav-link,
    .snapit-action-btn, .spf-card, .snapit-plan-card,
    .snapit-pricing-card, .spf-member-profile-card,
    .profile-item, .meeting-card {
        cursor: default;
    }
    
    /* Disable hover-only effects on touch devices */
    .snapit-plan-card:hover,
    .snapit-pricing-card:hover,
    .profile-item:hover,
    .meeting-card:hover,
    .snapit-member-card:hover,
    .snapit-invitation-card:hover {
        transform: none !important;
    }
}

/* ============================================
   2. CUSTOMER DASHBOARD RESPONSIVE
   ============================================ */

/* ============================================
   2a. Sidebar - Mobile Collapse
   ============================================ */

/* Mobile sidebar overlay */
.spf-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spf-sidebar-overlay.active {
    opacity: 1;
}

/* Mobile sidebar toggle button */
.spf-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1001;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4, #4dd0e1);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 188, 212, 0.4);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.spf-sidebar-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 188, 212, 0.6);
}

.spf-sidebar-toggle svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

/* ============================================
   2b. Dashboard Layout - Responsive
   ============================================ */

/* Large Desktop: >1400px */
@media (min-width: 1401px) {
    .spf-dashboard-layout {
        grid-template-columns: 240px 1fr !important;
        gap: 32px !important;
    }
    
    .spf-dashboard {
        padding: 32px !important;
        max-width: 1600px !important;
    }
}

/* Desktop: 1025px - 1400px */
@media (max-width: 1400px) {
    .spf-dashboard-layout {
        grid-template-columns: 220px 1fr !important;
        gap: 24px !important;
    }
}

/* Tablet Landscape: 769px - 1024px */
@media (max-width: 1024px) {
    .spf-dashboard-layout {
        grid-template-columns: 200px 1fr !important;
        gap: 20px !important;
    }
    
    .spf-dashboard-sidebar {
        width: 200px !important;
    }
    
    .spf-nav-link {
        padding: 0 24px !important;
        height: 44px !important;
    }
    
    .spf-nav-link span {
        font-size: 12px !important;
    }
    
    .spf-nav-link svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .spf-dashboard-header {
        padding: 20px 24px !important;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .spf-header-left h1 {
        font-size: 24px !important;
    }
    
    /* Card padding reduction */
    .spf-card {
        padding: 24px !important;
    }
    
    /* Stats grid - 2 columns */
    .spf-stats-grid,
    .analytics-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Profile cards grid */
    .profiles-grid,
    .spf-cards-grid,
    .snapit-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

/* Tablet/Mobile: <=768px */
@media (max-width: 768px) {
    /* Dashboard container */
    .spf-dashboard {
        padding: 16px !important;
        margin: 0 !important;
    }
    
    /* Switch sidebar to overlay */
    .spf-dashboard-layout {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .spf-dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        border-radius: 0 !important;
        z-index: 1000 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.1) !important;
        border: none !important;
    }
    
    .spf-dashboard-sidebar.open {
        left: 0 !important;
    }
    
    /* Show overlay when sidebar is open */
    .spf-sidebar-overlay.active {
        display: block !important;
    }
    
    /* Show sidebar toggle button */
    .spf-sidebar-toggle {
        display: flex !important;
    }
    
    /* Hide sidebar by default on mobile */
    .spf-dashboard-sidebar {
        overflow-y: auto !important;
    }
    
    .spf-sidebar-nav {
        padding-top: 16px !important;
    }
    
    .spf-nav-link {
        height: 48px !important;
        padding: 0 24px !important;
    }
    
    .spf-nav-link span {
        font-size: 14px !important;
    }
    
    /* Dashboard header */
    .spf-dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px 20px !important;
        gap: 12px !important;
    }
    
    .spf-header-left h1 {
        font-size: 22px !important;
    }
    
    .spf-header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .spf-user-profile {
        padding: 4px 12px 4px 4px !important;
        gap: 8px !important;
    }
    
    .spf-user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .spf-user-name {
        font-size: 13px !important;
    }
    
    .spf-user-email {
        display: none !important;
    }
    
    /* Cards */
    .spf-card {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .spf-card-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    .spf-card-title {
        font-size: 16px !important;
    }
    
    /* Stats - single column */
    .spf-stats-grid,
    .analytics-stats-grid,
    .spf-performance-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    /* Single column for small screens */
    .snapit-profile-card-inner {
        flex-direction: column !important;
    }
    
    .snapit-profile-qr-section {
        width: 100% !important;
    }
    
    /* Tables - horizontal scroll */
    .spf-table-wrapper,
    .contacts-table-wrapper,
    .visitors-table,
    .snapit-table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .spf-table-wrapper table,
    .contacts-table-wrapper table,
    .visitors-table table,
    .snapit-table {
        min-width: 600px !important;
    }
    
    /* Meeting cards */
    .meeting-header {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .meeting-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .meeting-footer .snapit-btn {
        width: 100% !important;
    }
    
    /* Profile cards grid */
    .profiles-grid,
    .spf-cards-grid,
    .snapit-cards-grid,
    .profile-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .profile-item-header {
        height: 140px !important;
    }
    
    .profile-item-header img {
        width: 90px !important;
        height: 90px !important;
    }
    
    .profile-item-body {
        padding: 16px !important;
    }
    
    .profile-item-footer {
        flex-direction: column !important;
        padding: 12px 16px !important;
    }
    
    .profile-item-footer .snapit-btn {
        width: 100% !important;
    }
    
    /* Members grid */
    .snapit-members-grid,
    .spf-members-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Team info */
    .snapit-team-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* Invite form */
    .snapit-invite-form {
        flex-direction: column !important;
    }
    
    .snapit-invite-form .snapit-btn {
        width: 100% !important;
    }
    
    /* Invitation cards */
    .snapit-invitation-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .snapit-invitation-actions {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .snapit-invitation-actions .snapit-btn {
        width: 100% !important;
    }
    
    /* Settings page */
    .snapit-settings-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .snapit-settings-sidebar {
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }
    
    .snapit-settings-nav-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .snapit-settings-actions {
        flex-direction: column !important;
    }
    
    .snapit-settings-actions .snapit-btn {
        width: 100% !important;
    }
    
    /* Plan header */
    .plan-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* Account type selection */
    .account-type-grid-modern {
        grid-template-columns: 1fr !important;
    }
    
    /* Plan grid */
    .plan-grid-modern {
        grid-template-columns: 1fr !important;
    }
    
    /* Quantities grid */
    .quantities-grid-modern {
        grid-template-columns: 1fr !important;
    }
    
    /* Progress steps */
    .purchase-steps-modern {
        padding: 24px 20px !important;
    }
    
    .step-modern .step-info {
        display: none !important;
    }
    
    .step-marker {
        width: 36px !important;
        height: 36px !important;
    }
    
    .steps-progress {
        left: 20px !important;
        right: 20px !important;
    }
    
    .purchase-content-modern {
        padding: 24px 20px !important;
    }
    
    /* Form rows */
    .registration-form-modern .form-row-modern,
    .snapit-form-row-2,
    .spf-form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Upgrade modal */
    .snapit-upgrade-modal-content {
        width: 95% !important;
        padding: 24px !important;
        margin: 16px !important;
    }
    
    .snapit-upgrade-modal-actions {
        flex-direction: column !important;
    }
    
    .snapit-upgrade-modal-actions .snapit-btn {
        width: 100% !important;
    }
    
    /* Notifications dropdown */
    .spf-notifications-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    /* Member filter */
    .spf-search-filter {
        flex-direction: column !important;
    }
    
    .spf-search-input,
    .spf-filter-dropdown {
        width: 100% !important;
    }
    
    /* Quick actions */
    .spf-quick-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .spf-quick-actions .spf-quick-btn,
    .spf-quick-actions .spf-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    .profile-card-actions {
        flex-direction: column !important;
    }
    
    .spf-quick-action-btn {
        flex: 1 1 auto !important;
        min-width: auto !important;
    }
    
    .profile-card-actions .snapit-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Member profile cards */
    .spf-member-profile-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
    
    .spf-member-avatar img {
        width: 64px !important;
        height: 64px !important;
    }
    
    .spf-member-info {
        text-align: center !important;
    }
    
    .spf-member-details {
        white-space: normal !important;
    }
    
    .spf-member-badge {
        margin-top: 8px !important;
    }
}

/* Small Mobile: <=480px */
@media (max-width: 480px) {
    .spf-dashboard {
        padding: 12px !important;
    }
    
    .spf-dashboard-header {
        padding: 12px 16px !important;
    }
    
    .spf-header-left h1 {
        font-size: 18px !important;
    }
    
    .spf-card {
        padding: 16px !important;
    }
    
    .spf-stats-grid,
    .analytics-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .stat-value {
        font-size: 1.75rem !important;
    }
    
    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }
    
    .stat-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .spf-nav-link {
        height: 44px !important;
        padding: 0 20px !important;
    }
    
    .spf-nav-link span {
        font-size: 13px !important;
    }
    
    .spf-nav-link svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .spf-sidebar-toggle {
        width: 48px !important;
        height: 48px !important;
        bottom: 16px !important;
        left: 16px !important;
    }
    
    .spf-card-title {
        font-size: 15px !important;
    }
    
    .spf-user-name {
        font-size: 12px !important;
    }
    
    .spf-user-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Make all buttons full-width on very small screens */
    .spf-card .snapit-btn:not(.snapit-btn-small) {
        width: 100% !important;
    }
    
    /* Plan cards */
    .snapit-plan-card {
        min-height: auto !important;
        padding: 20px !important;
    }
    
    .snapit-plan-header {
        min-height: auto !important;
    }
    
    .snapit-plan-popular {
        transform: scale(1) !important;
    }
    
    .snapit-plan-popular:hover {
        transform: translateY(-8px) scale(1) !important;
    }
    
    /* Modals */
    .snapit-modal-content,
    .spf-modal-content {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
    }
    
    /* Member cards */
    .snapit-member-card {
        padding: 16px !important;
    }
    
    .meetings-grid {
        grid-template-columns: 1fr !important;
    }
    
    .meeting-card {
        padding: 0 !important;
    }
    
    .meeting-body {
        padding: 16px !important;
    }
    
    .meeting-body h3 {
        font-size: 1rem !important;
    }
    
    /* Activity feed */
    .spf-activity-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    
    .spf-activity-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .spf-activity-title {
        font-size: 12px !important;
    }
}

/* ============================================
   3. PUBLIC PAGES RESPONSIVE
   ============================================ */

/* ============================================
   3a. Home Page - Hero Section
   ============================================ */

@media (max-width: 1200px) {
    .snapit-hero-card-container {
        right: 3% !important;
        transform: translateY(-50%) scale(0.85) !important;
    }
    
    .snapit-hero-content {
        max-width: 500px !important;
    }
    
    .snapit-hero-title {
        font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
    }
}

@media (max-width: 968px) {
    .snapit-home-hero {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 80px 24px 60px !important;
        min-height: auto !important;
    }
    
    .snapit-hero-content {
        max-width: 100% !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    .snapit-hero-card-container {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 40px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .snapit-pvc-card {
        width: 280px !important;
        height: 176px !important;
    }
    
    .snapit-hero-title {
        font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
    }
    
    .snapit-hero-subtitle {
        font-size: 1rem !important;
    }
    
    .snapit-hero-cta {
        justify-content: center !important;
    }
    
    .snapit-hero-orb-1,
    .snapit-hero-orb-2 {
        width: 250px !important;
        height: 250px !important;
    }
}

@media (max-width: 768px) {
    .snapit-home-hero {
        padding: 60px 16px 40px !important;
    }
    
    .snapit-hero-title {
        font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    }
    
    .snapit-hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }
    
    .snapit-hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .snapit-hero-cta .snapit-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    .snapit-hero-badge {
        font-size: 12px !important;
        padding: 8px 16px !important;
        margin-top: 20px !important;
    }
    
    .snapit-pvc-card {
        width: 240px !important;
        height: 152px !important;
    }
    
    .snapit-pvc-card-content {
        padding: 20px !important;
    }
    
    .snapit-card-logo {
        font-size: 18px !important;
    }
    
    .snapit-card-name {
        font-size: 16px !important;
    }
    
    .snapit-card-chip {
        bottom: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .snapit-home-hero {
        padding: 40px 12px 32px !important;
    }
    
    .snapit-hero-title {
        font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    }
    
    .snapit-hero-subtitle {
        font-size: 0.85rem !important;
    }
    
    .snapit-hero-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    .snapit-pvc-card {
        width: 200px !important;
        height: 126px !important;
    }
    
    .snapit-pvc-card-content {
        padding: 16px !important;
    }
    
    .snapit-card-logo {
        font-size: 14px !important;
    }
    
    .snapit-card-name {
        font-size: 13px !important;
    }
    
    .snapit-card-title {
        font-size: 11px !important;
    }
    
    .snapit-card-chip {
        bottom: 16px !important;
        right: 16px !important;
        width: 30px !important;
        height: 22px !important;
    }
}

/* ============================================
   3b. Product Section (Home Page)
   ============================================ */

@media (max-width: 968px) {
    .snapit-product-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 40px !important;
    }
    
    .snapit-product-content {
        order: 2 !important;
    }
    
    .snapit-product-mockup {
        order: 1 !important;
    }
    
    .snapit-mockup-phone {
        width: 220px !important;
        height: 440px !important;
    }
}

@media (max-width: 768px) {
    .snapit-product-section {
        padding: 60px 16px !important;
    }
    
    .snapit-product-container {
        gap: 30px !important;
    }
    
    .snapit-product-content h2 {
        font-size: 1.5rem !important;
    }
    
    .snapit-product-content p {
        font-size: 0.9rem !important;
    }
    
    .snapit-mockup-bg {
        width: 250px !important;
        height: 250px !important;
    }
    
    .snapit-mockup-phone {
        width: 180px !important;
        height: 360px !important;
        border-radius: 30px !important;
        padding: 8px !important;
    }
    
    .snapit-mockup-screen {
        border-radius: 24px !important;
    }
}

/* ============================================
   3c. Features Grid (Home Page)
   ============================================ */

@media (max-width: 1024px) {
    .snapit-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .snapit-section {
        padding: 40px 16px !important;
    }
    
    .snapit-features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .snapit-feature-card {
        padding: 28px 24px !important;
    }
    
    .snapit-feature-title {
        font-size: 1.2rem !important;
    }
    
    .snapit-feature-desc {
        font-size: 0.9rem !important;
    }
    
    .snapit-section-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: 24px !important;
    }
}

/* ============================================
   3d. Benefits Section (Home Page)
   ============================================ */

@media (max-width: 768px) {
    .snapit-benefits-section {
        padding: 40px 16px !important;
    }
    
    .snapit-benefit-row {
        margin-bottom: 40px !important;
        gap: 30px !important;
    }
    
    .snapit-benefit-content h3 {
        font-size: 1.4rem !important;
    }
    
    .snapit-benefit-content p {
        font-size: 0.9rem !important;
    }
    
    .snapit-benefit-list li {
        font-size: 0.85rem !important;
        padding: 8px 0 !important;
    }
    
    .snapit-benefit-visual-card {
        padding: 30px 20px !important;
        min-height: 280px !important;
    }
    
    .snapit-benefit-badge {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
}

/* ============================================
   3e. Stats Section (Home Page)
   ============================================ */

@media (max-width: 768px) {
    .snapit-stats-section {
        padding: 32px 16px !important;
    }
    
    .snapit-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    
    .snapit-stat-number {
        font-size: 2.5rem !important;
    }
    
    .snapit-stat-label {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .snapit-stat-number {
        font-size: 2rem !important;
    }
    
    .snapit-stat-label {
        font-size: 0.85rem !important;
    }
}

/* ============================================
   3f. Products Grid (Home Page)
   ============================================ */

@media (max-width: 1024px) {
    .snapit-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .snapit-products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .snapit-products-section {
        padding: 40px 16px !important;
    }
    
    .snapit-product-content {
        padding: 16px !important;
    }
    
    .snapit-product-title {
        font-size: 1.1rem !important;
    }
    
    .snapit-product-footer {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    
    .snapit-product-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    .snapit-product-pricing {
        justify-content: center !important;
    }
}

/* ============================================
   3g. Pricing Section (Home Page)
   ============================================ */

@media (max-width: 1200px) {
    .snapit-pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .snapit-pricing-section {
        padding: 40px 16px !important;
    }
    
    .snapit-pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .snapit-pricing-card {
        padding: 24px 20px !important;
    }
    
    .snapit-pricing-card h3 {
        font-size: 1.3rem !important;
    }
    
    .snapit-pricing-price {
        font-size: 2.2rem !important;
    }
    
    .snapit-pricing-card.featured {
        transform: scale(1) !important;
    }
    
    .snapit-pricing-card.featured:hover {
        transform: translateY(-8px) scale(1) !important;
    }
    
    .snapit-section-subtitle {
        font-size: 1rem !important;
        margin: 12px auto 32px !important;
    }
}

/* ============================================
   3h. Testimonials Section (Home Page)
   ============================================ */

@media (max-width: 768px) {
    .snapit-testimonials-section {
        padding: 40px 16px !important;
    }
    
    .snapit-testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .snapit-testimonial-card {
        padding: 24px !important;
    }
    
    .snapit-testimonial-text {
        font-size: 0.95rem !important;
    }
}

/* ============================================
   3i. CTA Section (Home Page)
   ============================================ */

@media (max-width: 768px) {
    .snapit-cta-section {
        padding: 40px 16px !important;
    }
    
    .snapit-cta-section h2 {
        font-size: 1.5rem !important;
    }
    
    .snapit-cta-section p {
        font-size: 1rem !important;
        margin: 16px auto 32px !important;
    }
    
    .snapit-cta-section .snapit-btn {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* ============================================
   4. FLOATING CARD (Desktop Only)
   ============================================ */

@media (max-width: 1024px) {
    .snapit-floating-card-container {
        display: none !important;
    }
}

/* ============================================
   5. AUTH PAGES ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    .snapit-form-container {
        padding: 16px !important;
    }
}

/* ============================================
   6. PURCHASE FLOW MODERN ENHANCEMENTS
   ============================================ */

@media (max-width: 1024px) {
    .account-type-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .plan-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .purchase-flow-wrapper {
        border-radius: 12px !important;
    }
    
    .step-header h2 {
        font-size: 1.5rem !important;
    }
    
    .step-description {
        font-size: 0.95rem !important;
    }
    
    .card-label-modern {
        padding: 24px !important;
    }
    
    .account-type-card-modern h3 {
        font-size: 1.3rem !important;
    }
    
    .snapit-modern-btn {
        width: 100% !important;
    }
    
    .step-navigation-modern {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .btn-modern {
        width: 100% !important;
    }
    
    .price-summary-panel-modern {
        padding: 24px !important;
    }
    
    .card-material-selection-modern {
        padding: 20px !important;
    }
    
    .material-content-modern {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ============================================
   7. PROFILE PAGES ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    .snapit-profile-container {
        padding-bottom: 100px !important;
    }
    
    .snapit-section-title {
        font-size: 1.3rem !important;
    }
    
    .snapit-media-grid {
        grid-template-columns: 1fr !important;
    }
    
    .snapit-media-section {
        padding: 16px !important;
        margin: 16px 0 !important;
    }
}

/* ============================================
   8. SHOP PAGE RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .snapit-shop-grid,
    .wc-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .snapit-shop-grid,
    .wc-products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .snapit-product-card,
    .wc-product-card {
        margin: 0 !important;
    }
}

/* ============================================
   9. MEMBERSHIP PLANS PAGE ENHANCEMENTS
   ============================================ */

@media (max-width: 1200px) {
    .snapit-plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .snapit-plans-group {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .snapit-membership-plans {
        padding: 16px !important;
    }
    
    .snapit-plans-grid,
    .snapit-plans-group {
        grid-template-columns: 1fr !important;
    }
    
    .snapit-plans-header h2 {
        font-size: 1.8rem !important;
    }
    
    .snapit-plan-card {
        min-height: auto !important;
        padding: 20px !important;
    }
    
    .snapit-plan-header {
        min-height: auto !important;
    }
    
    .snapit-plan-popular {
        transform: scale(1) !important;
    }
}

/* ============================================
   10. DESIGN SYSTEM UTILITIES OVERRIDES
   ============================================ */

@media (max-width: 768px) {
    .snapit-grid {
        grid-template-columns: 1fr !important;
    }
    
    .snapit-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .snapit-flex-between {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .snapit-container {
        padding: var(--spacing-4) !important;
    }
}