/* ==========================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   =========================================== */

/* ==========================================
   GLOBAL SVG ICON FIXES FOR MOBILE
   =========================================== */
@media (max-width: 768px) {
    /* Prevent SVGs from becoming too large on mobile */
    svg:not(.logo):not(.hero-svg) {
        max-width: 3rem !important;
        max-height: 3rem !important;
    }
    
    /* Specific icon sizes based on context */
    button svg,
    a svg,
    .btn svg {
        max-width: 1.5rem !important;
        max-height: 1.5rem !important;
    }
    
    /* Very small icons (checkmarks, arrows in lists) */
    li svg,
    .feature-list svg,
    ul li svg {
        max-width: 1rem !important;
        max-height: 1rem !important;
    }
}

/* ==========================================
   SMALL SCREENS (320px - 480px)
   =========================================== */
@media (max-width: 480px) {
    :root {
        --radius: 0.5rem;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
    }

    .container {
        padding: 0 1rem;
    }

    /* Typography */
    h1, .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    h2, .steps-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    p {
        font-size: 0.875rem;
    }

    /* Navigation - Stack vertically */
    nav {
        padding: 1rem 0;
    }

    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }

    nav a {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Hero Section */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .hero-text {
        order: 2;
    }

    .hero-image {
        order: 1;
        min-height: 200px;
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions a, .hero-actions button {
        width: 100%;
        text-align: center;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }

    /* Buttons */
    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        height: auto;
    }

    .btn-hero {
        width: 100%;
        padding: 1rem;
    }

    .btn-outline {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    /* Cards */
    .card {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .step-card {
        padding: 1.5rem 1rem;
    }

    .step-card .text-4xl {
        font-size: 2rem;
    }

    .card p {
        font-size: 0.8125rem;
    }

    /* Grid Layouts */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

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

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

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

    /* Forms */
    input, textarea, select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
        border-radius: 0.375rem;
    }

    label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    /* Tables - Stack on mobile */
    table {
        display: block;
        overflow-x: auto;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid hsl(214.3 31.8% 91.4%);
        border-radius: 0.375rem;
        padding: 1rem;
    }

    td {
        display: block;
        text-align: right;
        padding: 0.5rem 0;
        border: none;
    }

    td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
    }

    /* Modals - Full screen on mobile */
    .modal {
        border-radius: 1rem 1rem 0 0;
        max-height: 90vh;
    }

    /* Reduce margins and padding */
    section {
        padding: 2rem 0;
    }

    section.py-24 {
        padding: 1.5rem 0;
    }

    section.py-16 {
        padding: 1rem 0;
    }

    /* Touch target size (minimum 44px) */
    button, a.btn, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Reduce animation on smaller screens */
    .animate-bounce {
        animation: bounce 1.5s infinite;
    }

    /* Dashboard - Mobile optimized */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Calendar - Responsive */
    .calendar {
        font-size: 0.75rem;
    }

    .calendar-day {
        padding: 0.5rem;
    }
}

/* ==========================================
   MEDIUM SCREENS (481px - 768px)
   =========================================== */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .container {
        padding: 0 1.5rem;
    }

    /* Typography */
    h1, .hero-title {
        font-size: 2rem;
    }

    h2, .steps-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Hero Section */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text {
        order: 2;
    }

    .hero-image {
        order: 1;
        min-height: 250px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Grid Layouts */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

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

    /* Dashboard */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================
   LARGE SCREENS (769px+)
   =========================================== */
@media (min-width: 769px) {
    .container {
        padding: 0 2rem;
    }

    /* Hero Section */
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
    }

    .hero-text {
        order: 1;
    }

    .hero-image {
        order: 2;
        min-height: 400px;
    }

    /* Grid Layouts */
    .stats-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2rem;
    }

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

    /* Dashboard */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    /* Full width buttons back to normal */
    .btn {
        width: auto;
    }
}

/* ==========================================
   EXTRA LARGE SCREENS (1025px+)
   =========================================== */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 3rem;
    }

    /* Hero Section - More dramatic */
    .hero-content {
        gap: 4rem;
    }

    .hero-title {
        font-size: 3rem;
        line-height: 1.1;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .hero-actions {
        flex-direction: row;
        gap: 1rem;
    }

    /* Grid Layouts - Maximum spacing */
    .stats-grid {
        gap: 3rem;
    }

    .steps-grid {
        gap: 2.5rem;
    }
}

/* ==========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   =========================================== */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .hero-image {
        min-height: 300px;
    }

    section.py-24 {
        padding: 1.5rem 0;
    }
}

/* ==========================================
   TABLET LANDSCAPE (768px - 1024px, landscape)
   =========================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    h1, .hero-title {
        font-size: 2.25rem;
    }

    .steps-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-actions {
        flex-direction: row;
        gap: 1rem;
    }

    .hero-actions a, .hero-actions button {
        width: auto;
        flex: 1;
    }
}

/* ==========================================
   TOUCH DEVICE IMPROVEMENTS
   =========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets on touch devices */
    button, a.btn, a[role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 48px;
        min-width: 48px;
        padding: 0.75rem 1.5rem;
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .card:hover,
    .step-card:hover {
        transform: none;
    }

    /* Keep active state */
    .btn:active,
    .btn:focus {
        transform: scale(0.98);
    }

    /* Remove slow animations on touch */
    @media (prefers-reduced-motion: no-preference) {
        transition-duration: 0.2s !important;
        animation-duration: 0.3s !important;
    }
}

/* ==========================================
   HIGH DPI / RETINA DISPLAYS
   =========================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Thinner borders on high DPI */
    .card, .btn {
        border-width: 0.5px;
    }

    /* Slightly sharper shadows */
    .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* ==========================================
   DARK MODE ADJUSTMENTS FOR MOBILE
   =========================================== */
@media (prefers-color-scheme: dark) {
    /* Increase contrast for better readability */
    body {
        background-color: hsl(222.2 84% 4.9%);
    }

    .card {
        background-color: hsl(222.2 84% 5.5%);
    }

    /* More prominent borders in dark mode */
    .card {
        border-color: hsl(217.2 32.6% 25%);
    }
}

/* ==========================================
   PRINT STYLES
   =========================================== */
@media print {
    /* Hide interactive elements when printing */
    .btn, .hero-actions, nav, footer, .sidebar {
        display: none;
    }

    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .card {
        page-break-inside: avoid;
        border: 1px solid #000;
    }
}

/* ==========================================
   ACCESSIBILITY IMPROVEMENTS FOR MOBILE
   =========================================== */

/* Increase clickable area for form controls */
@media (max-width: 768px) {
    /* Focus indicators for keyboard navigation */
    *:focus-visible {
        outline: 3px solid hsl(152 60% 40%);
        outline-offset: 2px;
    }

    /* High contrast mode support */
    @media (prefers-contrast: more) {
        .btn, .card {
            border-width: 2px;
        }
    }
}

/* ==========================================
   BOOTSTRAP SPECIFIC OVERRIDES FOR MOBILE
   =========================================== */

/* Mobile-optimized Bootstrap alerts */
@media (max-width: 768px) {
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .alert-dismissible .btn-close {
        padding: 0.5rem;
    }
}

/* ==========================================
   HEADER (MOBILE) FIXES
   - Remove white line under header
   - Ensure hamburger stays visible (not full-width)
   =========================================== */
@media (max-width: 768px) {
    /* Remove the thin "white line" caused by generic .nav border styles */
    nav.nav {
        border-bottom: 0 !important;
    }

    /* Hamburger button: keep it icon-sized and transparent */
    nav.nav .mobile-menu-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        padding: 0.5rem !important;
    }

    nav.nav .mobile-menu-button svg {
        display: block;
    }

    /* When the mobile menu opens, don't show a top border line */
    #mobile-menu-content {
        border-top: 0 !important;
    }
}

/* Bootstrap modals - Full screen on mobile */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
    }
    
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Bootstrap form controls - Better mobile experience */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 0.75rem;
        height: auto;
        min-height: 44px;
    }
    
    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .form-check {
        min-height: 1.5rem;
        padding-left: 2rem;
    }
    
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
        margin-left: -2rem;
    }
}

/* Bootstrap buttons - Better touch targets */
@media (max-width: 768px) {
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
        min-height: 44px;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        min-height: 36px;
    }
    
    .btn-lg {
        padding: 1rem 2rem;
        font-size: 1.125rem;
        min-height: 52px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group > .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem;
    }
}

/* Larger screens - restore button width */
@media (min-width: 769px) {
    .btn {
        width: auto;
        margin-bottom: 0;
    }
    
    .btn-group {
        flex-direction: row;
    }
    
    .btn-group > .btn {
        margin-bottom: 0;
    }
}

/* Bootstrap cards - Mobile optimized */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
        border-radius: 0.75rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    .card-footer {
        padding: 0.75rem 1rem;
    }
    
    .card-title {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    .card-text {
        font-size: 0.875rem;
    }
}

/* Bootstrap navigation - Mobile improvements */
@media (max-width: 992px) {
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.125rem;
    }
    
    .navbar-toggler {
        padding: 0.5rem;
        font-size: 1rem;
        border-radius: 0.375rem;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
    }
    
    .navbar-nav {
        gap: 0.5rem;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
}

/* Bootstrap pagination - Mobile friendly */
@media (max-width: 576px) {
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .pagination-lg .page-link {
        padding: 0.75rem 1rem;
    }
    
    .pagination-sm .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        min-width: 32px;
        min-height: 32px;
    }
}

/* Bootstrap breadcrumb - Mobile scrollable */
@media (max-width: 768px) {
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .breadcrumb-item {
        white-space: nowrap;
    }
}

/* Bootstrap list group - Mobile optimized */
@media (max-width: 768px) {
    .list-group-item {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
    }
    
    .list-group-item-action {
        min-height: 44px;
    }
}

/* Bootstrap accordion - Mobile friendly */
@media (max-width: 768px) {
    .accordion-button {
        padding: 1rem;
        font-size: 0.9375rem;
        min-height: 44px;
    }
    
    .accordion-body {
        padding: 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================
   EARNINGS HISTORY PAGE - MOBILE OPTIMIZATION
   =========================================== */
@media (max-width: 768px) {
    /* Header section improvements */
    .earnings-history-header {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .earnings-history-header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .earnings-history-header p {
        font-size: 0.875rem !important;
    }
    
    .earnings-history-header .total-earnings-display {
        margin-top: 1rem;
        text-align: center !important;
    }
    
    .earnings-history-header .total-earnings-display .text-2xl {
        font-size: 1rem !important;
    }
    
    .earnings-history-header .total-earnings-display .text-4xl {
        font-size: 2rem !important;
    }
    
    /* Summary cards - Stack vertically */
    .earnings-summary-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .earnings-summary-card {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
    
    .earnings-summary-card .icon-container {
        padding: 0.625rem !important;
    }
    
    /* CRITICAL FIX: Summary card icons - proper sizing */
    .earnings-summary-card .icon-container svg,
    .earnings-summary-card svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        max-width: 1.5rem !important;
        max-height: 1.5rem !important;
    }
    
    .earnings-summary-card .stat-label {
        font-size: 0.75rem !important;
    }
    
    .earnings-summary-card .stat-value {
        font-size: 1.5rem !important;
    }
    
    .earnings-summary-card .stat-subtext {
        font-size: 0.75rem !important;
    }
    
    /* Payment history table - Card-based layout */
    .payment-history-wrapper {
        border-radius: 0.75rem !important;
        overflow: hidden !important;
        margin-bottom: 1.5rem !important;
    }
    
    .payment-history-wrapper .table-header {
        padding: 0.75rem 1rem !important;
    }
    
    .payment-history-wrapper h2 {
        font-size: 1rem !important;
    }
    
    /* Hide table, show card-based layout */
    .payment-history-table {
        display: none !important;
    }
    
    /* Mobile card layout for payment history */
    .payment-history-mobile {
        display: block !important;
        padding: 0.5rem !important;
    }
    
    .payment-history-item {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .payment-history-item:last-child {
        margin-bottom: 0;
    }
    
    .payment-history-item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .payment-history-item-date {
        font-size: 0.75rem;
        color: #6b7280;
        font-weight: 500;
    }
    
    .payment-history-item-amount {
        font-size: 1.125rem;
        font-weight: 700;
        color: #10b981;
    }
    
    .payment-history-item-amount.zero {
        color: #9ca3af;
    }
    
    .payment-history-item-description {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .payment-history-item-details {
        font-size: 0.75rem;
        color: #6b7280;
        margin-bottom: 0.5rem;
    }
    
    .payment-history-item-details div {
        margin-bottom: 0.25rem;
    }
    
    .payment-history-item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f3f4f6;
    }
    
    .payment-history-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
    }
    
    .payment-history-status-badge.status-paid {
        background-color: #d1fae5;
        color: #065f46;
    }
    
    .payment-history-status-badge.status-pending {
        background-color: #fef3c7;
        color: #92400e;
    }
    
    .payment-history-status-badge.status-overdue {
        background-color: #fee2e2;
        color: #991b1b;
    }
    
    .payment-history-status-badge.status-default {
        background-color: #f3f4f6;
        color: #374151;
    }
    
    .payment-history-action-link {
        font-size: 0.8125rem;
        color: #6366f1;
        text-decoration: none;
        font-weight: 500;
    }
    
    .payment-history-action-link:hover {
        color: #4f46e5;
        text-decoration: underline;
    }
    
    .payment-history-empty {
        text-align: center;
        padding: 2rem 1rem;
        color: #9ca3af;
        font-size: 0.875rem;
    }
}

/* Tablet adjustments for earnings history */
@media (min-width: 481px) and (max-width: 768px) {
    .earnings-summary-cards {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .earnings-history-header .total-earnings-display {
        text-align: right !important;
    }
}

/* Desktop - Show normal table, hide mobile cards */
@media (min-width: 769px) {
    .payment-history-mobile {
        display: none !important;
    }
    
    .payment-history-table {
        display: table !important;
    }
}

/* ==========================================
   CREDIT BALANCE PAGE - MOBILE OPTIMIZATION
   =========================================== */
@media (max-width: 768px) {
    /* Page header improvements */
    .credit-balance-header h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    .credit-balance-header p {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Grid layout - stack vertically */
    .credit-balance-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Credit card improvements */
    .credit-balance-card {
        margin-bottom: 1.5rem;
    }
    
    .credit-balance-card-header {
        padding: 1.25rem !important;
    }
    
    .credit-balance-amount {
        font-size: 2.5rem !important;
    }
    
    /* CRITICAL FIX: All SVG icons in credit card header - proper sizing */
    .credit-balance-card-header svg {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        max-width: 2rem !important;
        max-height: 2rem !important;
    }
    
    .credit-balance-card-body {
        padding: 1rem !important;
    }
    
    .credit-balance-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Session pricing items */
    .session-pricing-item {
        padding: 0.75rem 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* Purchase button */
    .purchase-credits-btn {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* CRITICAL FIX: Arrow icon in purchase button */
    .purchase-credits-btn svg {
        width: 1rem !important;
        height: 1rem !important;
        min-width: 1rem !important;
        min-height: 1rem !important;
        max-width: 1rem !important;
        max-height: 1rem !important;
        margin-left: 0.5rem !important;
        margin-right: -0.25rem !important;
    }
    
    /* Transaction history container */
    .transaction-history-container {
        border-radius: 0.75rem !important;
    }
    
    .transaction-history-header {
        padding: 1rem !important;
    }
    
    .transaction-history-header h3 {
        font-size: 1.125rem !important;
    }
    
    .transaction-history-header p {
        font-size: 0.8125rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* Hide desktop table, show mobile cards */
    .transaction-table-desktop {
        display: none !important;
    }
    
    .transaction-table-mobile {
        display: block !important;
        padding: 0.75rem !important;
    }
    
    /* Transaction card items */
    .transaction-item-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .transaction-item-card:last-child {
        margin-bottom: 0;
    }
    
    .transaction-item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .transaction-date-time {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }
    
    .transaction-date {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1f2937;
    }
    
    .transaction-time {
        font-size: 0.75rem;
        color: #9ca3af;
    }
    
    .transaction-amount {
        font-size: 1.25rem;
        font-weight: 700;
    }
    
    .transaction-amount.positive {
        color: #10b981;
    }
    
    .transaction-amount.negative {
        color: #ef4444;
    }
    
    .transaction-item-body {
        margin-bottom: 0.75rem;
    }
    
    .transaction-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
        background-color: #dbeafe;
        color: #1e40af;
        margin-bottom: 0.5rem;
    }
    
    .transaction-description {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.25rem;
    }
    
    .transaction-details {
        font-size: 0.75rem;
        color: #6b7280;
    }
    
    .transaction-details div {
        margin-bottom: 0.125rem;
    }
    
    /* Pagination footer */
    .transaction-footer {
        padding: 0.75rem 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    .transaction-footer-text {
        font-size: 0.8125rem !important;
        text-align: center;
    }
    
    .transaction-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .transaction-footer-buttons button {
        flex: 1;
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
        min-height: 44px;
    }
    
    /* Empty state */
    .transaction-empty-state {
        padding: 2rem 1rem !important;
        text-align: center;
    }
    
    .transaction-empty-state svg {
        height: 3rem !important;
        width: 3rem !important;
        margin: 0 auto 0.5rem;
    }
    
    .transaction-empty-state p {
        font-size: 0.875rem !important;
    }
}

/* Tablet adjustments for credit balance */
@media (min-width: 481px) and (max-width: 768px) {
    .credit-balance-grid {
        grid-template-columns: 1fr !important;
    }
    
    .transaction-footer {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

/* Desktop - Show table, hide mobile cards */
@media (min-width: 769px) {
    .transaction-table-mobile {
        display: none !important;
    }
    
    .transaction-table-desktop {
        display: block !important;
    }
}

/* ==========================================
   SUBSCRIPTION PLANS PAGE - MOBILE OPTIMIZATION
   =========================================== */
@media (max-width: 768px) {
    /* Page header improvements */
    .subscription-plans-page h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
        margin-bottom: 0.75rem !important;
    }
    
    .subscription-plans-page h2 {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }
    
    /* Plan cards grid */
    .subscription-plans-grid {
        gap: 1rem !important;
        padding: 0 0.75rem !important;
    }
    
    /* Individual plan cards */
    .plan-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem;
    }
    
    .plan-card h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .plan-card .plan-price {
        font-size: 2rem !important;
    }
    
    .plan-card .plan-price-period {
        font-size: 0.875rem !important;
    }
    
    /* CRITICAL FIX: Checkmark icons - force small size */
    .plan-card ul li svg,
    .plan-card .feature-list svg,
    ul li svg[viewBox="0 0 20 20"],
    svg.text-green-500 {
        width: 1rem !important;
        height: 1rem !important;
        min-width: 1rem !important;
        min-height: 1rem !important;
        max-width: 1rem !important;
        max-height: 1rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Feature list items */
    .plan-card ul {
        margin-bottom: 1.5rem !important;
        gap: 0.5rem !important;
    }
    
    .plan-card ul li {
        font-size: 0.875rem !important;
        line-height: 1.4;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .plan-card ul li span {
        flex: 1;
        margin-left: 0.25rem;
    }
    
    /* Subscribe button */
    .plan-card .subscribe-btn,
    .subscribe-btn {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* Badge (Most Popular) */
    .plan-card .badge-popular {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.625rem !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
    
    /* Active subscription notice */
    .active-subscription-notice {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Extra small screens (< 375px) */
@media (max-width: 374px) {
    .plan-card {
        padding: 1rem !important;
    }
    
    .plan-card h3 {
        font-size: 1.125rem !important;
    }
    
    .plan-card .plan-price {
        font-size: 1.75rem !important;
    }
    
    /* Even smaller icons for very small screens */
    .plan-card ul li svg,
    ul li svg[viewBox="0 0 20 20"] {
        width: 0.875rem !important;
        height: 0.875rem !important;
        min-width: 0.875rem !important;
        min-height: 0.875rem !important;
        max-width: 0.875rem !important;
        max-height: 0.875rem !important;
    }
    
    .plan-card ul li {
        font-size: 0.8125rem !important;
    }
}

/* ==========================================
   RESPONSIVE IMAGES AND MEDIA - COMPREHENSIVE
   =========================================== */

/* Universal image fixes (allow natural sizing on desktop) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Specific image containers (natural on desktop, forced on mobile) */
.hero-image,
.split-image,
.gallery-item {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile: force full responsive */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .hero-image,
    .split-image,
    .gallery-item,
    .testimonial img,
    .card img,
    .teacher-avatar,
    [class*="avatar"],
    [class*="image"] {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}

/* Prevent images from breaking layout */
picture,
figure {
    max-width: 100%;
    display: block;
}

picture img,
figure img {
    width: 100%;
    height: auto;
}

/* Video and iframe responsive */
iframe,
video,
embed,
object {
    max-width: 100% !important;
    height: auto !important;
}

/* Responsive video containers */
.video-container,
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe,
.embed-container iframe,
.video-container object,
.embed-container object,
.video-container embed,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Background images should not overflow */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
}

@media (max-width: 768px) {
    .img-fluid {
        width: 100%;
    }
    
    /* Force responsive images on mobile */
    img,
    picture,
    svg {
        max-width: 100% !important;
    }
}

/* ==========================================
   OVERFLOW AND SCROLLING FIXES - ENHANCED
   =========================================== */

/* Universal overflow prevention */
html {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Prevent all containers from causing horizontal scroll */
* {
    box-sizing: border-box;
}

*:not(html):not(body):not(.row):not([class*="col-"]) {
    max-width: 100%;
}

/* Container fixes (do NOT force full-width on desktop) */
.container,
.container-fluid,
[class*="container"] {
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
}

/* Grid system fixes */
.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

[class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Section containers (mobile only; desktop needs natural overflow/layout) */
@media (max-width: 768px) {
    section,
    main,
    article,
    div {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Prevent text from causing overflow */
p, h1, h2, h3, h4, h5, h6, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Prevent pre and code blocks from overflowing */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Extra safety for mobile */
    body, html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure no element can cause horizontal scroll */
    * {
        max-width: 100vw;
    }
    
    /* Allow specific elements */
    html,
    body {
        max-width: 100vw !important;
    }
}

/* ==========================================
   SPACING ADJUSTMENTS FOR MOBILE
   =========================================== */
@media (max-width: 768px) {
    /* Reduce large spacing */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .my-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Ensure proper spacing in Bootstrap grid */
    .row {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    
    [class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ==========================================
   TEXT SIZE ADJUSTMENTS FOR MOBILE
   =========================================== */
@media (max-width: 768px) {
    h1, .h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    h4, .h4 {
        font-size: 1.125rem;
        line-height: 1.4;
    }
    
    h5, .h5 {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    h6, .h6 {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    .display-1 {
        font-size: 3rem;
    }
    
    .display-2 {
        font-size: 2.5rem;
    }
    
    .display-3 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* ==========================================
   MOBILE / TABLET MENU IMPROVEMENTS
   =========================================== */
/* Mobile/tablet menu: closed by default, full-width when open */
@media (max-width: 1023px) {
    nav.nav {
        padding-bottom: 0 !important;
    }
    /* Closed state: fully hidden, no height, no padding */
    .mobile-menu-dropdown#mobile-menu-content {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        visibility: hidden;
        transition: max-height 0.35s ease-out, visibility 0s linear 0.35s;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-padding-top: 0.5rem;
        scroll-padding-bottom: 0.5rem;
    }
    /* Open state: only when .mobile-menu-open is added by hamburger click */
    .mobile-menu-dropdown.mobile-menu-open#mobile-menu-content {
        max-height: 85vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 1rem !important;
        visibility: visible;
        transition: max-height 0.35s ease-out, visibility 0s linear 0s;
        background-color: rgba(2, 169, 202, 0.98) !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    #mobile-menu-content a,
    #mobile-menu-content .block {
        -webkit-tap-highlight-color: transparent;
    }

    /* Healthy dimensions: compact menu links and language dropdown */
    .mobile-menu-link {
        display: block;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
        line-height: 1.4;
        min-height: 40px;
        color: white;
        text-decoration: none;
        transition: color 0.2s, background-color 0.2s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .mobile-menu-link:hover {
        color: #e8de21;
    }
    .mobile-menu-link.mobile-menu-cta {
        margin-top: 0.5rem;
        text-align: center;
        background-color: #e8de21;
        color: #222;
        font-weight: 600;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .mobile-menu-link.mobile-menu-cta:hover {
        background-color: #ffef5c;
        color: #222;
    }
    .mobile-menu-block {
        display: block;
    }
    .mobile-menu-select {
        display: block;
        width: auto;
        max-width: 160px;
        padding: 0.375rem 0.625rem;
        font-size: 0.875rem;
        line-height: 1.4;
        min-height: 36px;
        background-color: white;
        color: #1f2937;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 0.375rem;
        -webkit-tap-highlight-color: transparent;
    }
}
@media (min-width: 1024px) {
    .mobile-menu-dropdown#mobile-menu-content {
        display: none !important;
    }
}

@media (max-width: 992px) {
    /* Better spacing for Bootstrap nav items when used */
    .navbar-nav .nav-item {
        margin-bottom: 0.25rem;
    }
    
    .navbar-nav .nav-link {
        display: block;
        width: 100%;
    }
}