/* =============================================
   Mobile Responsive Styles for Public Search Page
   Author: MiniMax Agent
   Date: 2026-01-21
   ============================================= */

/* =============================================
   GLOBAL RESET FOR MOBILE
   ============================================= */
* {
    box-sizing: border-box;
}

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

body.menu-open {
    overflow: hidden !important;
}

/* =============================================
   DESKTOP - Full Width Slider (always active)
   ============================================= */
html body .wrapper.auth .slider.main-slider,
.wrapper.auth .slider.main-slider,
.slider.main-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

html body .wrapper.auth .slider.main-slider .slide,
.wrapper.auth .slider.main-slider .slide,
.slider.main-slider .slide {
    width: 100vw !important;
    max-width: none !important;
    min-height: 300px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

html body .wrapper.auth,
.wrapper.auth {
    position: relative !important;
    overflow-x: visible !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

html body {
    overflow-x: visible !important;
    overflow: visible !important;
}

html body .wrapper.auth .container,
.wrapper.auth .container {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* =============================================
   MOBILE MENU STYLES (Hidden on Desktop by default)
   ============================================= */
/* Hide hamburger button on desktop */
.hamburger-btn {
    display: none !important;
}

/* Hide mobile menu on desktop */
.mobile-menu {
    display: none !important;
}

/* Hide sidebar overlay on desktop */
.sidebar-overlay {
    display: none !important;
}

@media screen and (max-width: 768px) {
    /* Hamburger button - visible only on mobile */
    .hamburger-btn {
        display: flex !important;
    }

    /* Hide original header on mobile - MOVE TO HAMBURGER MENU */
    .header,
    .page-header {
        display: none !important;
    }

    /* Mobile Menu Container */
    .mobile-menu {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #fff !important;
        z-index: 9999 !important;
        flex-direction: column !important;
        padding: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
    }

    /* Menu Header */
    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }

    .mobile-menu-logo img {
        height: 32px !important;
        width: auto !important;
    }

    .mobile-menu-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        color: #333 !important;
    }

    /* Phone Number */
    .mobile-menu-phone {
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
    }

    .mobile-menu-phone a {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Navigation */
    .mobile-menu-nav {
        flex: 1 !important;
        padding: 0 !important;
        overflow-y: auto !important;
    }

    .mobile-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee !important;
        transition: background-color 0.2s !important;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link:active {
        background-color: #f5f5f5 !important;
    }

    .mobile-menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 15px !important;
    }

    .mobile-menu-icon img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Language Switcher */
    .mobile-menu-lang {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        border-top: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }

    .mobile-lang-item {
        font-size: 14px !important;
        color: #999 !important;
        text-decoration: none !important;
        padding: 5px 8px !important;
    }

    .mobile-lang-item.active {
        color: #496D99 !important;
        font-weight: 600 !important;
    }

    .mobile-lang-item:hover {
        color: #496D99 !important;
    }

    .mobile-lang-divider {
        color: #ddd !important;
        margin: 0 5px !important;
    }

    /* Sidebar Overlay */
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .sidebar-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }

    /* Page wrapper adjustment for hamburger button */
    .wrapper.auth {
        padding-top: 60px !important;
    }
}

/* =============================================
   SMARTPHONES - 480px and below
   ============================================= */
@media screen and (max-width: 480px) {
    /* Force full width - prevent overflow */
    .wrapper, .container, .main-wrap, .search-card, .search-form {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Page padding */
    .wrapper.auth {
        padding: 0 !important;
        padding-top: 50px !important;
    }

    .container {
        padding: 0 12px !important;
    }

    /* Full width slider */
    .slider.main-slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    .slider.main-slider .slide {
        width: 100vw !important;
        max-width: none !important;
        min-height: 180px !important;
    }

    /* Adjust container for slider */
    .wrapper.auth {
        padding-top: 190px !important;
    }

    .container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Heading */
    h1.heading-gradient {
        font-size: 16px !important;
        padding: 10px 12px !important;
        text-align: center;
        margin: 0 !important;
    }

    /* White cards - full width with padding */
    .white-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Search card */
    .white-card.search-card {
        padding: 12px !important;
    }

    /* Search rows - stack vertically */
    .search-row {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .search-row-main {
        margin-bottom: 10px !important;
    }

    /* Half width elements become full width */
    .half-width {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Custom multiselect */
    .custom-multiselect.half-width {
        width: 100% !important;
    }

    .custom-multiselect-input {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Form inputs - FIXED: prevent overflow */
    .form-item-input {
        width: 100% !important;
        min-height: 38px !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .form-item-input.half-width {
        width: 100% !important;
    }

    /* Select elements */
    select.form-item-input.half-width {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Date range - 2 columns layout */
    .date-range {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .date-range.half-width {
        width: 100% !important;
    }

    .date-wrapper {
        width: calc(50% - 4px) !important;
        min-width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        box-sizing: border-box !important;
    }

    .date-wrapper.half-width {
        width: calc(50% - 4px) !important;
    }

    .date-wrapper input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .divider-line {
        display: none !important;
    }

    /* Price block */
    .price-block {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .price-block.half-width {
        width: 100% !important;
    }

    .input-currency-wrap {
        width: 100% !important;
    }

    .input-currency-wrap.half-width {
        width: 100% !important;
    }

    /* Purchase block */
    .purchase-block {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .purchase-block.half-width {
        width: 100% !important;
    }

    .purchase-block .half-width {
        width: 100% !important;
    }

    .free-box {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    .free-box.half-width {
        width: 100% !important;
    }

    .checkbox-free {
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }

    .checkbox-free input {
        margin-right: 8px !important;
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }

    .checkbox-free span {
        white-space: nowrap !important;
    }

    /* Controls */
    .search-row.controls {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .search-row.controls .half-width {
        width: 100% !important;
        text-align: center !important;
    }

    .btn-search-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .btn-search-group .btn {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    .search-collapse {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding: 8px !important;
    }

    /* Extended link */
    .extended-link-search {
        text-align: center !important;
        margin: 10px 0 !important;
    }

    /* Search result filter */
    .white-card.search-result-filter {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .search-result-filter-right {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .search-result-text {
        text-align: center !important;
        width: 100% !important;
    }

    /* Result items */
    .white-card.result-item {
        padding: 12px !important;
    }

    .result-content-row {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .result-content-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    .result-content-col.right {
        text-align: left !important;
    }

    .result-tags {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .result-tag {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }

    .result-item-name {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }

    .result-item-nmc {
        font-size: 13px !important;
    }

    .result-item-nmc-sum {
        font-size: 15px !important;
    }

    /* Result timer */
    .result-timer {
        justify-content: flex-start !important;
        margin-top: 8px !important;
    }

    .result-timer-unit {
        font-size: 14px !important;
        padding: 4px 6px !important;
    }

    /* Pagination */
    .pagination-wrap {
        padding: 15px 0 !important;
        width: 100% !important;
    }

    .pagination-inner {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    .pagination-page {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }

    .pagination-arrow {
        width: 32px !important;
        height: 32px !important;
    }

    /* Footer */
    .page-footer {
        padding: 15px 12px !important;
        text-align: center !important;
    }

    .page-footer-in {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* General typography */
    .fs_12 {
        font-size: 10px !important;
    }

    .fs_14 {
        font-size: 11px !important;
    }

    .fs_16 {
        font-size: 13px !important;
    }

    .fs_18 {
        font-size: 15px !important;
    }

    .fs_24 {
        font-size: 17px !important;
    }

    /* Main search button */
    .search-row-main {
        position: relative !important;
    }

    .search-row-main .form-item-input {
        padding-right: 44px !important;
    }

    .main-search-btn {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* =============================================
   TABLETS - 481px to 768px
   ============================================= */
@media screen and (min-width: 481px) and (max-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden !important;
        width: 100%;
        min-width: 100vw;
    }

    /* Force full width */
    .wrapper, .container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Full width slider */
    .slider.main-slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    .slider.main-slider .slide {
        width: 100vw !important;
        max-width: none !important;
        min-height: 220px !important;
    }

    /* Adjust wrapper */
    .wrapper.auth {
        position: relative !important;
        padding: 12px;
        padding-top: 240px;
    }

    .container {
        position: relative !important;
        z-index: 2 !important;
        padding: 0 12px;
        padding-top: 10px !important;
    }

    h1.heading-gradient {
        font-size: 22px !important;
        padding: 16px 12px !important;
    }

    .white-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .search-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .half-width {
        width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
    }

    .search-row-main .half-width {
        width: 100% !important;
    }

    .form-item-input {
        min-height: 36px !important;
    }

    .white-card.result-item {
        padding: 15px !important;
    }

    .result-content-row {
        flex-wrap: wrap !important;
    }

    .result-content-col {
        width: 100% !important;
    }

    .result-content-col.right {
        text-align: left !important;
    }

    .search-result-filter-right {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .pagination-inner {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
@media screen and (max-width: 768px) {
    .form-item-input:focus,
    select:focus,
    input:focus {
        outline: 2px solid #2D9CDB;
        outline-offset: 2px;
    }
}

/* =============================================
   END OF MOBILE RESPONSIVE STYLES
   ============================================= */