/* 
ONSSALSELF.ONLINE - MOBILE OPTIMIZATION CSS
Enhanced mobile responsiveness and user experience improvements

ISSUES IDENTIFIED AND ADDRESSED:
1. Fixed sidebar width causing horizontal scrolling on mobile
2. Improved form layouts for mobile devices
3. Enhanced table responsiveness 
4. Better button and navigation touch targets
5. Optimized typography for mobile reading
6. Improved iframe content display
7. Enhanced modal dialogs for mobile
8. Better spacing and padding for touch interfaces
*/

/* ===== MOBILE-FIRST APPROACH ===== */

/* Base Mobile Styles (320px+) */
@media screen and (max-width: 480px) {
    
    /* ===== VIEWPORT AND TYPOGRAPHY ===== */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    body {
        font-size: 16px; /* Prevent zoom on iOS */
        line-height: 1.5;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== NAVIGATION IMPROVEMENTS ===== */
    .logo h1 {
        font-size: 18px !important;
        margin: 8px 10px !important;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px;
    }
    
    .navbar-header {
        padding: 5px 15px;
    }
    
    .navbar-toggle {
        margin-right: 10px;
        margin-top: 8px;
        border: 2px solid #fff;
        border-radius: 4px;
        padding: 8px 12px;
        background-color: transparent;
        z-index: 10000 !important;
        position: relative !important;
    }
    
    .navbar-toggle .icon-bar {
        width: 24px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    }
    
    /* Ensure hamburger is visible and clickable on mobile */
    @media (max-width: 991px) {
        .navbar-toggle {
            display: block !important;
            float: right !important;
            margin-right: 15px !important;
            margin-top: 12px !important;
            padding: 12px 15px !important;
            border: 2px solid #ffffff !important;
            background-color: rgba(0, 74, 127, 0.8) !important;
            border-radius: 6px !important;
            z-index: 10000 !important;
            position: relative !important;
            cursor: pointer !important;
            min-width: 50px !important;
            min-height: 44px !important; /* Touch-friendly size */
        }
        
        .navbar-toggle:hover,
        .navbar-toggle:focus {
            background-color: rgba(0, 74, 127, 1) !important;
            border-color: #ffffff !important;
        }
        
        .navbar-toggle .icon-bar {
            background-color: #ffffff !important;
            width: 26px !important;
            height: 4px !important;
            margin: 4px 0 !important;
            display: block !important;
        }
    }
    
    /* ===== SIDEBAR MOBILE OPTIMIZATION ===== */
    .templatemo-sidebar {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 15px;
        background-color: rgba(0, 74, 127, 0.95) !important; /* Changed to brand blue */
        border-radius: 8px;
        transition: all 0.3s ease; /* Smooth collapse animation */
    }
    
    /* Auto-collapse functionality for mobile - moved to @media section below */
    
    .templatemo-sidebar-menu {
        padding: 0;
    }
    
    .templatemo-sidebar-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .templatemo-sidebar-menu li a {
        padding: 15px 20px !important;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ffffff !important; /* Ensure white text */
        text-decoration: none !important;
    }
    
    .templatemo-sidebar-menu li a:hover,
    .templatemo-sidebar-menu li a:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    
    .templatemo-sidebar-menu li.active a {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
    }
    
    .templatemo-sidebar-menu li a i {
        font-size: 18px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
        color: #ffffff !important;
    }
    
    /* Main tab badges - white background with blue text */
    .templatemo-sidebar-menu > li .badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        margin-left: auto;
        background-color: #ffffff !important;
        color: #004A7F !important;
        font-weight: bold;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .templatemo-sidebar-menu .pull-right {
        display: flex;
        align-items: center;
        color: #ffffff !important;
    }
    
    /* Override pull-right color for main tab badges specifically - Admin style */
    body.admin-page .templatemo-sidebar-menu > li .pull-right .badge {
        color: #004A7F !important;
        background-color: #ffffff !important;
    }
    
    /* Verified-user pages - Main tabs: white background with blue text */
    body:not(.admin-page) .templatemo-sidebar-menu > li .pull-right .badge,
    #leads_total_count_badge,
    #wallet_total_count_badge {
        background-color: #ffffff !important;
        color: #004A7F !important;
        font-weight: bold;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    /* Verified-user pages - Sub-tabs: blue background with white text */
    body:not(.admin-page) .templatemo-sidebar-menu .templatemo-submenu .badge {
        background-color: #004A7F !important;
        color: #ffffff !important;
        font-weight: bold;
        border: 1px solid #004A7F;
    }
    
    .templatemo-sidebar-menu .pull-right .caret {
        border-top-color: #ffffff !important;
    }
    
    /* Submenu styling */
    .templatemo-sidebar-menu .templatemo-submenu {
        background-color: rgba(255, 255, 255, 0.95) !important; /* Light background for submenu */
        border-radius: 0 0 8px 8px;
    }
    
    .templatemo-sidebar-menu .templatemo-submenu li a {
        padding-left: 30px !important; /* Reduced from 50px to prevent overlap with counters */
        color: #004A7F !important; /* Blue text on light background */
        font-size: 14px;
        font-weight: 500;
    }
    
    .templatemo-sidebar-menu .templatemo-submenu li a:hover {
        background-color: rgba(0, 74, 127, 0.1) !important;
        color: #003564 !important; /* Darker blue on hover */
    }
    
    .templatemo-sidebar-menu .templatemo-submenu li a i {
        color: #004A7F !important; /* Blue icons in submenu */
    }
    
    /* Sub-tab badges - blue background with white text */
    .templatemo-sidebar-menu .templatemo-submenu .badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        background-color: #004A7F !important;
        color: #ffffff !important;
        font-weight: bold;
        border: 1px solid #004A7F;
        margin-left: auto;
    }
    
    /* ===== CONTENT AREA IMPROVEMENTS ===== */
    .templatemo-content {
        margin: 0 !important;
        padding: 15px 10px !important;
        min-height: calc(100vh - 60px);
    }
    
    .templatemo-content-container {
        margin: 0;
        padding: 0;
    }
    
    .templatemo-content-widget {
        margin: 10px 0;
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* ===== BREADCRUMB OPTIMIZATION ===== */
    .breadcrumb {
        background-color: transparent;
        padding: 8px 0;
        margin-bottom: 15px;
        font-size: 14px;
    }
    
    .breadcrumb li {
        display: inline-block;
    }
    
    /* ===== FORM IMPROVEMENTS ===== */
    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .form-horizontal .control-label {
        text-align: left;
        padding-bottom: 5px;
        padding-top: 0;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 16px;
    }
    
    /* Stack form labels and inputs vertically */
    .form-horizontal .col-sm-3,
    .form-horizontal .col-sm-9,
    .form-horizontal .col-md-3,
    .form-horizontal .col-md-9 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px 15px;
        border-radius: 6px;
        border: 2px solid #ddd;
        transition: border-color 0.3s ease;
    }
    
    .form-control:focus {
        border-color: #004A7F;
        box-shadow: 0 0 0 3px rgba(0, 74, 127, 0.1);
    }
    
    /* Select dropdown improvements */
    select.form-control {
        height: auto;
        padding: 12px 15px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px 12px;
    }
    
    /* Textarea improvements */
    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Radio button improvements */
    .radio-inline {
        display: block !important;
        margin-top: 12px;
        margin-bottom: 12px;
        padding-left: 0 !important;
        font-size: 16px;
        line-height: 1.6;
        min-height: 24px;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    
    .radio-inline input[type="radio"] {
        position: relative !important;
        margin: 0 !important;
        margin-right: 8px !important;
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        top: auto !important;
        left: auto !important;
        transform: scale(0.8);
    }
    
    /* Alternative radio button styling for better mobile experience */
    .form-group .radio-inline {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px 15px !important;
        margin: 8px 0;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    
    .form-group .radio-inline:hover {
        background-color: #e9ecef;
        border-color: #004A7F;
    }
    
    .form-group .radio-inline input[type="radio"]:checked + * {
        font-weight: 600;
        color: #004A7F;
    }
    
    /* ===== BUTTON IMPROVEMENTS ===== */
    .btn {
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 6px;
        border: none;
        transition: all 0.3s ease;
        min-height: 44px; /* iOS touch target */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
    }
    
    .btn-primary {
        background-color: #004A7F;
        color: white;
    }
    
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #003564;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 74, 127, 0.3);
    }
    
    .btn-default {
        background-color: #f8f9fa;
        color: #333;
        border: 2px solid #ddd;
    }
    
    .btn-default:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }
    
    .btn-block {
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* ===== TABLE IMPROVEMENTS ===== */
    .table-responsive {
        border: none;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile-friendly table layout */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }
    
    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-responsive tr {
        border: none;
        background-color: white;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 15px;
    }

    .table-responsive td {
        border: none;
        padding: 8px 0;
        position: relative;
        display: block;
        word-wrap: break-word;
        hyphens: auto;
    }

    .table-responsive th {
        border: none;
        padding: 8px 0;
        font-weight: 600;
        background-color: #f8f9fa;
        margin-bottom: 4px;
        border-radius: 4px;
        padding: 8px 12px;
    }

    .table-responsive td:before {
        content: "";
        display: none;
    }
    
    /* Alternative table style for better mobile display */
    .mobile-table {
        display: block;
        width: 100%;
    }
    
    .mobile-table-row {
        background: white;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #004A7F;
    }
    
    .mobile-table-cell {
        display: flex;
        margin-bottom: 12px;
        align-items: flex-start;
    }
    
    .mobile-table-cell:last-child {
        margin-bottom: 0;
    }
    
    .mobile-table-label {
        font-weight: 600;
        color: #333;
        min-width: 120px;
        font-size: 14px;
        margin-right: 15px;
    }
    
    .mobile-table-value {
        flex: 1;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* ===== MODAL IMPROVEMENTS ===== */
    .modal-dialog {
        margin: 10px;
        width: auto;
        max-width: none;
    }
    
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
    }
    
    .modal-body {
        padding: 20px;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #eee;
    }
    
    .modal-footer .btn {
        margin: 5px;
        flex: 1;
    }
    
    /* ===== IFRAME IMPROVEMENTS ===== */
    iframe[name="content"] {
        width: 100% !important;
        height: calc(100vh - 120px) !important;
        border: none !important;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile iframe when sidebar is collapsed */
    .sidebar-collapsed iframe[name="content"] {
        height: calc(100vh - 80px) !important; /* More height when sidebar hidden */
    }
    
    /* Mobile sidebar - Working with proper toggle */
    @media (max-width: 991px) {
        .navbar-collapse.collapse.templatemo-sidebar,
        .templatemo-sidebar,
        div[class*="templatemo-sidebar"] {
            display: block !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            height: 100vh !important;
            width: 280px !important;
            background-color: rgba(0, 74, 127, 0.95) !important;
            overflow-y: auto !important;
            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.5) !important;
            z-index: 999999 !important;
            border-right: 3px solid #ffffff !important;
            opacity: 1 !important;
            transform: translateX(0) !important; /* Visible by default */
            transition: transform 0.3s ease !important;
            visibility: visible !important;
            max-height: none !important; /* Override Bootstrap collapse */
        }
        
        /* When collapsed - slide out */
        .navbar-collapse.collapse.templatemo-sidebar.mobile-collapsed,
        .templatemo-sidebar.mobile-collapsed {
            transform: translateX(-100%) !important;
        }
        
        /* Override Bootstrap collapse behavior */
        .navbar-collapse.collapse {
            display: block !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }
    
    
    /* ===== UTILITY CLASSES ===== */
    .text-center {
        text-align: center;
    }
    
    .margin-bottom-15 {
        margin-bottom: 15px;
    }
    
    .margin-bottom-30 {
        margin-bottom: 30px;
    }
    
    .padding-15 {
        padding: 15px;
    }
    
    /* Hide desktop-specific elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-specific elements */
    .mobile-only {
        display: block !important;
    }
    
    /* ===== ALERTS AND NOTIFICATIONS ===== */
    .alert {
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.4;
    }
    
    .alert-success {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }
    
    .alert-danger {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }
    
    /* ===== PAGINATION IMPROVEMENTS ===== */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
        margin: 20px 0;
    }
    
    .pagination .btn {
        margin: 5px;
        min-width: 44px;
        height: 44px;
    }
    
    /* ===== SEARCH AND FILTERS ===== */
    .navbar-form {
        padding: 10px 15px;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .navbar-form .form-control {
        border-radius: 20px;
        padding: 8px 15px;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #333;
    }
    
    .navbar-form .form-control::placeholder {
        color: #666;
    }
    
    .navbar-form .btn {
        border-radius: 20px;
        padding: 8px 15px;
        margin-left: 10px;
        font-size: 14px;
        background-color: #ffffff !important;
        color: #004A7F !important;
        border: 2px solid #ffffff;
        font-weight: bold;
    }
    
    .navbar-form .btn:hover {
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #004A7F !important;
        border-color: rgba(255, 255, 255, 0.9);
    }
    
    /* ===== AUTOCOMPLETE IMPROVEMENTS ===== */
    .autocomplete-wrapper {
        position: relative;
    }
    
    .autocomplete-suggestions {
        position: absolute;
        z-index: 1050;
        background: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
        top: 100%;
        margin-top: 2px;
    }
    
    .autocomplete-suggestion {
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    .autocomplete-suggestion:hover {
        background-color: #f8f9fa;
    }
    
    .autocomplete-suggestion:last-child {
        border-bottom: none;
    }
}

/* ===== TABLET STYLES (481px - 768px) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    
    .logo h1 {
        font-size: 20px !important;
        max-width: 400px;
    }
    
    .templatemo-content {
        padding: 20px 15px !important;
    }
    
    /* Ensure badge styling works on tablets too - Admin pages */
    body.admin-page .templatemo-sidebar-menu > li .badge,
    body.admin-page .templatemo-sidebar-menu > li .pull-right .badge {
        background-color: #ffffff !important;
        color: #004A7F !important;
    }
    
    /* Ensure badge styling works on tablets too - User pages main tabs */
    body:not(.admin-page) .templatemo-sidebar-menu > li .badge,
    body:not(.admin-page) .templatemo-sidebar-menu > li .pull-right .badge {
        background-color: #ffffff !important;
        color: #004A7F !important;
    }
    
    /* Ensure badge styling works on tablets too - All sub-tabs (both admin and user) */
    .templatemo-sidebar-menu .templatemo-submenu .badge {
        background-color: #004A7F !important;
        color: #ffffff !important;
    }
    
    .form-horizontal .col-sm-3 {
        width: 30% !important;
        text-align: right;
        padding-right: 15px !important;
    }
    
    .form-horizontal .col-sm-9 {
        width: 70% !important;
    }
    
    .form-horizontal .control-label {
        padding-top: 12px;
        font-size: 14px;
    }
    
    /* Tablet table improvements */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: table;
    }
    
    .table-responsive thead tr {
        position: relative;
        top: auto;
        left: auto;
    }
    
    .table-responsive td {
        padding: 12px 8px;
        position: relative;
        display: table-cell;
        padding-left: 8px;
    }
    
    .table-responsive td:before {
        display: none;
    }
}

/* ===== SMALL DESKTOP STYLES (769px - 991px) ===== */
@media screen and (min-width: 769px) and (max-width: 991px) {
    
    .templatemo-content {
        padding: 25px 20px !important;
    }
    
    .form-horizontal .col-sm-3 {
        width: 25% !important;
    }
    
    .form-horizontal .col-sm-9 {
        width: 75% !important;
    }
    
    .modal-dialog {
        width: 90%;
        max-width: 600px;
        margin: 30px auto;
    }
}

/* ===== TOUCH IMPROVEMENTS FOR ALL MOBILE DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    
    /* Improve touch targets */
    a, button, input, select, textarea, .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Improve focus styles for accessibility */
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: 3px solid #004A7F;
        outline-offset: 2px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    
    .templatemo-sidebar,
    .navbar,
    .btn,
    .modal,
    .pagination {
        display: none !important;
    }
    
    .templatemo-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .table {
        border-collapse: collapse !important;
        width: 100% !important;
    }
    
    .table th,
    .table td {
        border: 1px solid #000 !important;
        padding: 8pt !important;
    }
}

/* ===== REGISTRATION PAGE MOBILE OPTIMIZATION ===== */
@media screen and (max-width: 768px) {

    /* Registration form container */
    .templatemo-signin-form {
        margin: 10px !important;
        padding: 20px 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    .templatemo-content-wrapper {
        padding: 10px !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .templatemo-content {
        width: 100% !important;
        max-width: 500px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Registration form title */
    .templatemo-signin-form h1 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
        color: #004A7F !important;
        font-weight: 600 !important;
    }

    /* Form groups spacing */
    .templatemo-signin-form .form-group {
        margin-bottom: 20px !important;
    }

    /* Labels */
    .templatemo-signin-form .control-label {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* Input fields */
    .templatemo-signin-form .form-control {
        height: 50px !important;
        font-size: 16px !important;
        padding: 12px 15px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        background-color: #fff !important;
        transition: all 0.3s ease !important;
    }

    .templatemo-signin-form .form-control:focus {
        border-color: #004A7F !important;
        box-shadow: 0 0 0 3px rgba(0, 74, 127, 0.1) !important;
        outline: none !important;
    }

    /* Select dropdowns */
    .templatemo-signin-form select.form-control {
        height: 50px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 16px !important;
        padding-right: 45px !important;
    }

    /* Checkboxes */
    .templatemo-signin-form .checkbox {
        margin-bottom: 15px !important;
    }

    .templatemo-signin-form .checkbox label {
        display: flex !important;
        align-items: flex-start !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding-left: 0 !important;
        cursor: pointer !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        gap: 0 !important; /* Remove any default gap */
    }

    .templatemo-signin-form .checkbox label span,
    .templatemo-signin-form .checkbox label > *:not(input) {
        flex: 1 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Privacy Policy links within checkbox labels */
    .templatemo-signin-form .checkbox label a {
        color: #004A7F !important;
        text-decoration: underline !important;
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .templatemo-signin-form .checkbox label a:hover,
    .templatemo-signin-form .checkbox label a:focus {
        color: #003366 !important;
        text-decoration: underline !important;
    }

    .templatemo-signin-form .checkbox input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-right: 20px !important;
        margin-top: 3px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    /* Submit button */
    .templatemo-signin-form .btn-primary {
        width: 100% !important;
        height: 55px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        background: linear-gradient(135deg, #004A7F 0%, #0066CC 100%) !important;
        color: white !important;
        margin-top: 10px !important;
        transition: all 0.3s ease !important;
        touch-action: manipulation !important;
    }

    .templatemo-signin-form .btn-primary:hover,
    .templatemo-signin-form .btn-primary:focus {
        background: linear-gradient(135deg, #003D6B 0%, #0052A3 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(0, 74, 127, 0.3) !important;
    }

    .templatemo-signin-form .btn-primary:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 5px rgba(0, 74, 127, 0.2) !important;
    }

    /* Login link */
    .templatemo-signin-form a {
        display: block !important;
        text-align: center !important;
        margin-top: 20px !important;
        color: #004A7F !important;
        text-decoration: none !important;
        font-size: 16px !important;
    }

    .templatemo-signin-form a:hover {
        text-decoration: underline !important;
    }

    /* Alert messages */
    .templatemo-signin-form .alert {
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .templatemo-signin-form .alert-danger {
        background-color: #f8d7da !important;
        border-color: #f5c2c7 !important;
        color: #842029 !important;
    }

    .templatemo-signin-form .alert-success {
        background-color: #d1edff !important;
        border-color: #b8daff !important;
        color: #004085 !important;
    }

    /* Privacy notice */
    .templatemo-signin-form p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #6c757d !important;
        margin-top: 15px !important;
    }

    .templatemo-signin-form p a {
        display: inline !important;
        margin: 0 !important;
        color: #004A7F !important;
        text-decoration: underline !important;
    }

    /* Footer Privacy Policy links */
    div[style*="background-color: #f8f9fa"] a,
    div[style*="padding: 20px"] a {
        color: #004A7F !important;
        text-decoration: underline !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
}

/* ===== REGISTRATION PAGE SMALL MOBILE OPTIMIZATION (480px and below) ===== */
@media screen and (max-width: 480px) {

    .templatemo-signin-form {
        margin: 5px !important;
        padding: 15px 10px !important;
    }

    .templatemo-signin-form h1 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }

    .templatemo-signin-form .form-control {
        height: 48px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    .templatemo-signin-form .btn-primary {
        height: 50px !important;
        font-size: 16px !important;
    }

    .templatemo-signin-form .checkbox label {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Privacy Policy links within checkbox labels */
    .templatemo-signin-form .checkbox label a {
        color: #004A7F !important;
        text-decoration: underline !important;
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .templatemo-signin-form .checkbox label a:hover,
    .templatemo-signin-form .checkbox label a:focus {
        color: #003366 !important;
        text-decoration: underline !important;
    }

    .templatemo-signin-form .checkbox input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin-right: 18px !important;
        margin-top: 2px !important;
    }

    /* Footer Privacy Policy links */
    div[style*="background-color: #f8f9fa"] a,
    div[style*="padding: 20px"] a {
        color: #004A7F !important;
        text-decoration: underline !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
}