:root {
    --primary-color: #ff8c00;
    /* Orange */
    --primary-hover: #e07b00;
    --secondary-color: #f8f9fa;
    /* Light Gray Background */
    --text-color: #333;
    --border-color: #ddd;
    --white: #ffffff;
    --success: #28a745;
    --danger: #dc3545;
}

/* Global Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body,
input,
select,
textarea,
button {
    font-family: "Noto Sans", "Roboto", "Inter", "Open Sans", "Noto Serif Lao", "Noto Sans Lao Looped", "Phetsarath", serif;
    background-color: var(--secondary-color);
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
}

.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Header */
.main-header {
    background: #ffcc80;
    /* Light Orange Background matching 111sim */
    background: linear-gradient(to bottom, #ffdb99, #ffcc80);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-icon {
    background: #ff6b00;
    /* Darker Orange Icon BG */
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #cc5500;
    /* Text Color */
}

/* Navigation */
.nav-menu {
    display: flex;
    gap: 5px;
    align-items: center;
}

.nav-link {
    color: #444;
    /* Darker text for readability on orange */
    font-size: 1.0rem;
    /* Smaller font to fit all items */
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: #d35400;
    background: rgba(255, 255, 255, 0.4);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 4px;
    top: 100%;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--primary-color);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Login Button */
.btn-login-nav {
    background: #e65100;
    color: white;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-login-nav:hover {
    background: #bf360c;
    color: white;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: #e65100;
    cursor: pointer;
}

/* Hide mobile-only elements on desktop */
.nav-icon {
    display: none;
}

.mobile-login-container {
    display: none;
}

@media (max-width: 1100px) {

    /* Breakpoint for detailed menu (Mobile Sidebar) */
    .nav-menu {
        display: block;
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background-color: #ffffff !important;
        /* Solid white */
        padding: 0;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
        z-index: 2000;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        opacity: 1 !important;
        /* Ensure no transparency */
    }

    .nav-menu.active {
        left: 0;
        /* Slide in */
    }

    /* Style Nav Links in Sidebar */
    .nav-link {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
        text-align: left;
        color: #333;
        font-size: 1rem;
        background-color: #ffffff;
        /* White background */
    }

    .nav-link:hover {
        background: #f9f9f9;
        color: var(--primary-color);
    }

    /* Icons */
    .nav-icon {
        display: inline-block;
        /* Show on mobile */
        width: 25px;
        /* Fixed width for alignment */
        text-align: center;
        margin-right: 15px;
        color: #718096;
        /* Grey icon color */
    }

    .nav-link:hover .nav-icon {
        color: var(--primary-color);
    }

    /* Dropdowns in Sidebar */
    .dropdown {
        width: 100%;
        display: block;
    }

    /* Make dropdown content relative/static in sidebar to push content down */
    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        border-left: none;
        background: #fcfcfc;
        display: none;
        /* JS or Hover needed? Hover doesn't work well on mobile. */
        padding-left: 0;
    }

    /* Show dropdown content when parent is active? Or always? 
       For simplicity, let's make it show on hover (which means tap on mobile usually works) or just always show for now? 
       Or better: make the parent link toggle it. But 'nav-link' has href.
       For now, let's force display block for simplicity or rely on existing hover rule.
       Existing rule: .dropdown:hover .dropdown-content { display: block; } 
       On mobile 'hover' is sticky.
    */

    .dropdown-content a {
        padding-left: 60px;
        /* Indent sub-menus */
        font-size: 0.9rem;
        border-bottom: 1px solid #f5f5f5;
    }

    /* Mobile Login Button */
    .mobile-login-container {
        display: block !important;
        /* Show on mobile */
        border-bottom: 1px solid #ddd;
    }

    /* Hide Desktop Actions */
    .desktop-actions {
        display: none !important;
    }

    .mobile-toggle {
        display: block;
    }

    .btn-login-nav {
        /* Redundant rule but kept for safety */
        display: none;
    }

    /* Sidebar Header (with title and close button) */
    .sidebar-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    /* Sidebar Overlay - Only covers area OUTSIDE the sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 280px;
        /* Start from where sidebar ends */
        width: calc(100vw - 280px);
        /* Only cover area outside sidebar */
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* Search Section */
.search-section {
    background: #fff;
    margin: 20px auto;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-title {
    text-align: center;
    color: #4a5568;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

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

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.form-control:focus {
    border-color: var(--primary-color);
    outline: none;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.position-boxes {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 1rem 0;
}

.pos-box {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 2px solid #ff9800;
    /* Safety Orange */
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #e65100;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pos-box:focus {
    border-color: #e65100;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
    outline: none;
}

.btn-search {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    transition: background 0.2s;
}

.btn-search:hover {
    background: var(--primary-hover);
}

/* Number Table */
.number-table-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.number-table {
    width: 100%;
    border-collapse: collapse;
}

.number-table th {
    background-color: #f1f1f1;
    color: #555;
    padding: 12px;
    text-align: center;
    /* Centered headers */
    font-weight: 600;
    font-size: 0.9rem !important;
}

.number-table td {
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 0.9rem !important;
}

/* Center the sequence column (first column) */
.number-table td:first-child {
    text-align: center;
    font-weight: bold;
    color: #888;
}

/* Phone Number Column (2nd column) */
.number-table td:nth-child(2) {
    font-size: 1.05rem !important;
    font-weight: 700;
}

/* Ensure other columns like phone number are aligned properly. The screenshot showed them left aligned. Usually center is fine for this table. Let's set th to center as requested. 
Wait, if I set th to center, the corresponding td should likely be centered too for alignment, except maybe phone number.
Let's try centering everything, it usually looks cleaner for data tables with badges. */
.number-table td,
.number-table th {
    text-align: center;
    white-space: nowrap !important;
}

.number-display {
    font-size: 1.05rem;
    /* Increased from 1rem */
    font-weight: bold;
    color: #333;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.price-tag {
    color: #d32f2f;
    font-weight: bold;
    font-size: 0.9rem;
    /* Increased from 0.95rem */
}

.badge-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    /* Increased size */
}

.sim-type-text {
    font-size: 0.9rem;
    /* Increased size */
    color: #4a5568;
}

.group-text {
    font-size: 1.05rem;
    /* Match SIM type size */
    color: #333;
    /* Slightly darker for better readability */
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-buy {
    background-color: var(--primary-color);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Soft UI Buttons */
.btn-meaning {
    background-color: #e0f2fe;
    /* Light Blue */
    color: #0284c7;
    /* Dark Blue */
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    border: none;
    text-decoration: none;
}

.btn-meaning:hover {
    background-color: #bae6fd;
    transform: translateY(-1px);
}

.status-buy {
    display: inline-block;
    background: var(--primary-color);
    /* Solid Orange */
    color: #fff;
    /* White Text */
    padding: 6px 20px;
    border-radius: 8px;
    /* Keep rounded corners, no pill */
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(255, 140, 0, 0.2);
}

.status-buy:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(255, 140, 0, 0.3);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: #fefefe;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px;
    position: relative;
    overflow: hidden;
}

.modal-header {
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #4a5568;
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    padding: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;
    font-size: 1rem;
}

.detail-row:last-of-type {
    border-bottom: none;
}

.detail-label {
    color: #718096;
    font-weight: 500;
}

.detail-value {
    font-weight: 600;
    color: #2d3748;
    text-align: right;
}

.number-value {
    font-size: 1.4rem;
    color: #333;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.price-value {
    font-size: 1.2rem;
    color: #d32f2f;
    font-weight: 700;
}

/* Contact Actions */
.contact-actions {
    margin-top: 20px;
    background: #FF6B00;
    /* Orange Background matching screenshot */
    padding: 15px;
    text-align: center;
    border-radius: 0 0 15px 15px;
    /* Rounded bottom */
    margin: 20px -20px -20px -20px;
    /* Stretch to edges */
}

.contact-title {
    color: white;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.contact-buttons-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.contact-btn {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.contact-btn:hover {
    transform: scale(1.1);
}

.btn-whatsapp {
    color: #25D366;
}

.btn-call {
    color: #4CAF50;
}

.btn-messenger {
    color: #0084FF;
}

.btn-line {
    color: #00C300;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Breadcrumb Navigation */
.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #64748b;
    font-family: 'Noto Sans Lao Looped', sans-serif;
}

.breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb .separator {
    margin: 0 12px;
    color: #cbd5e1;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.breadcrumb .current {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filter Bar */
.filter-bar {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.filter-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
}

.filter-group {
    flex: 1;
}

.filter-group label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.filter-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select.compact {
    width: 100%;
}

.filter-group.narrow {
    flex: 0.7;
    max-width: 100px;
}

.filter-group.wide {
    flex: 1.3;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.filter-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn:hover {
    background: #e65c00;
    transform: translateY(-1px);
}

.filter-reset {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-reset:hover {
    background: #e2e8f0;
    color: #334155;
}

.filter-count {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #64748b;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.filter-count strong {
    color: var(--primary-color);
    font-weight: 700;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }

    .filter-bar {
        padding: 15px;
        /* Reduced padding */
    }

    .filter-form {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .filter-form>.filter-group {
        width: 100% !important;
    }

    .filter-bar,
    .filter-group {
        width: 100%;
        display: block !important;
        /* Ensure they are visible */
    }

    .search-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
        row-gap: 5px !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Search Input Full Width */
    .filter-form .filter-search-group {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Last item full width if odd count */
    .search-grid>.multiselect-container:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .multiselect-container {
        width: 100%;
    }

    .multiselect-btn {
        width: 100%;
        text-align: left;
        padding: 12px;
    }

    .split-layout {
        flex-direction: column;
        align-items: stretch !important;
    }

    .left-col,
    .right-col {
        width: 100% !important;
        margin: 0 !important;
    }

    .position-boxes {
        justify-content: space-between;
    }

    .pos-box {
        width: 100%;
        /* Auto width to fit flex */
        min-width: 0;
    }

    .filter-actions {
        flex-direction: row;
        width: 100%;
        gap: 15px;
    }

    /* Hide labels on mobile (user wants them inside the select box) */
    .filter-group label {
        display: none !important;
    }

    /* Force Forecast Form Stacking */
    #forecastForm .form-group>div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    #forecastForm .form-control,
    #forecastForm .btn-search,
    #prefixSwitch {
        width: 100% !important;
        flex: auto !important;
    }

    #prefixSwitch {
        justify-content: center;
    }

    /* Strict Full Width Rules for Mobile Filters */
    .filter-group.narrow,
    .filter-group.wide,
    .filter-group {
        max-width: none !important;
        width: 100% !important;
        flex: none !important;
    }

    /* Table Optimizations for Mobile */
    .number-table th,
    .number-table td {
        padding: 10px 5px;
        /* Compact padding */
        font-size: 0.85rem !important;
        /* Smaller text */
    }

    .number-display {
        font-size: 0.95rem;
        /* Slightly smaller */
    }

    .price-tag {
        font-size: 0.9rem;
    }

    .badge-category,
    .sim-type-text {
        font-size: 0.8rem;
        padding: 2px 8px;
    }

    .status-buy {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {

    /* 1 Column Filter for Small Phones */
    .filter-form {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .search-grid {
        grid-template-columns: 1fr !important;
    }

    .filter-actions {
        flex-direction: column;
        /* Stack reset/search buttons */
    }

    .filter-btn,
    .filter-reset {
        width: 100%;
        justify-content: center;
    }

    /* Even smaller table text if needed */
    .number-table th,
    .number-table td {
        padding: 8px 3px;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {

    .filter-input,
    .filter-select,
    .filter-select.compact {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        /* Ensure padding doesn't overflow */
    }
}


/* Filter Row Layout */
.filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 0;
}

.filter-row .filter-group {
    flex: 0 0 auto;
}

/* Search Input */
.filter-search-group {
    flex: 0 0 auto;
    max-width: 200px;
    margin-bottom: 0;
}

.filter-input {
    width: 160px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #f8fafc;
    color: #334155;
    transition: all 0.2s;
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
    background: #fff;
}

.filter-input::placeholder {
    color: #94a3b8;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    align-items: flex-end;
    min-width: auto !important;
    flex: 0 !important;
}

@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }

    .filter-row .filter-group {
        width: 100%;
    }

    .filter-actions {
        width: 100%;
    }
}

/* Check Number Mobile Layout */
@media (max-width: 768px) {
    .check-form-row {
        flex-direction: column !important;
        align-items: stretch !important;
        /* Force children to full width */
        width: 100% !important;
    }

    .check-form-row .form-control {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .check-form-row .btn-search {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* Mobile Keypad Stacking */
@media (max-width: 768px) {
    .mobile-keypad-stack {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .mobile-keypad-stack .mode-toggles {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;
    }

    .mobile-keypad-stack .mode-toggles button {
        flex: 1 !important;
    }

    /* Separator hide on mobile stack */
    .mobile-keypad-stack>div[style*="border-left"] {
        display: none !important;
    }

    .mobile-keypad-stack .keypad-row {
        width: 100% !important;
        justify-content: space-between !important;
        margin-top: 10px !important;
        gap: 5px !important;
        display: flex !important;
    }

    .mobile-keypad-stack .btn-num {
        flex: 1 !important;
        height: 48px !important;
        /* Taller touch targets */
        width: auto !important;
        /* Allow flex to size */
        padding: 0 !important;
        font-size: 1.2rem !important;
        min-width: 0 !important;
        /* Allow shrinking */
    }

    /* Reduce Prefix Button Width on Mobile */
    #prefixBtn {
        width: 60px !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }
}

/* Responsive Title Text */
@media (max-width: 768px) {
    .text-desktop {
        display: none !important;
    }

    .text-mobile {
        display: inline !important;
    }
}

/* Mobile Slider Adjustment */
@media (max-width: 768px) {
    .main-slider {
        display: none !important;
    }
}

/* Gradient Text Animation */
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-text-anim {
    background: linear-gradient(90deg, #ff0000, #0000ff, #800080, #ff0000);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-move 3s ease infinite;
    font-weight: bold;
    /* Ensure text is bold for better visibility */
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
}

/* Mobile Spacing Optimizations */
@media (max-width: 576px) {
    .search-section {
        padding: 1rem 1rem !important;
        margin: 10px auto !important;
    }

    .search-title {
        margin-bottom: 0.5rem !important;
        font-size: 1.25rem !important;
        margin-top: 0 !important;
    }

    .form-group {
        margin-bottom: 0.5rem !important;
    }

    .position-boxes {
        margin: 0.5rem 0 1rem 0 !important;
    }

    /* Reduce bootstrap spacing utility if present on red text */
    .mb-2 {
        margin-bottom: 0.25rem !important;
    }

    /* Compact the form control height slightly */
    .form-control {
        padding: 8px !important;
    }
}


/* Mobile Table Scroll Fix - Separate Header */
.number-table-container {
    overflow-x: unset !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Mobile Search Spacing Reductions (Tighter) */
@media (max-width: 576px) {

    /* Reduce gap between columns */
    .search-section .split-layout {
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    /* Reduce gap below 'Insert Numbers' label */
    .search-section .left-col label {
        margin-bottom: 2px !important;
    }

    /* Reduce gap below 'Like/Dislike' label */
    .search-section .right-col label {
        margin-bottom: 2px !important;
    }

    /* Reduce gap between Toggle Buttons and Keypad */
    .like-dislike-container {
        gap: 5px !important;
    }

    /* Compact Search Input margin */
    .search-section .form-group {
        margin-bottom: 10px !important;
    }
}