/*
 * Search Mobile Fix V2 - ULTRA FORCE OVERRIDE
 * Kasetidea Theme - แก้ปัญหา Input Field หายบนมือถือ
 * Priority: MAXIMUM
 */

/* ============================================
   MOBILE SEARCH FIX - EXTRA SMALL (< 480px)
   ULTRA HIGH SPECIFICITY
   ============================================ */

@media (max-width: 479px) {
    
    /* Remove all potential conflicts */
    body .hero-premium .search-box-premium *,
    body .hero-premium .search-box-premium *::before,
    body .hero-premium .search-box-premium *::after {
        box-sizing: border-box !important;
    }
    
    /* Search Box Container */
    body .hero-premium .search-box-premium {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto 40px !important;
    }
    
    /* Form */
    body .hero-premium .search-box-premium form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Main Search Container - FORCE FLEXBOX */
    body .hero-premium .search-box-premium form > div:first-of-type {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        
        background: white !important;
        border-radius: 40px !important;
        padding: 4px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        
        width: 100% !important;
        min-height: 44px !important;
        
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Icon - FORCE VISIBLE */
    body .hero-premium .search-box-premium form > div:first-of-type > span:first-child,
    body .hero-premium .search-box-premium form > div:first-of-type > *:first-child:not(input):not(button) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        width: auto !important;
        min-width: 28px !important;
        max-width: 35px !important;
        
        padding: 0 6px !important;
        margin: 0 !important;
        
        font-size: 18px !important;
        line-height: 1 !important;
        
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Input Field - FORCE VISIBLE AND FLEXIBLE */
    body .hero-premium .search-box-premium form > div:first-of-type input[type="text"],
    body .hero-premium .search-box-premium form > div:first-of-type input[name="s"],
    body .hero-premium .search-box-premium input[type="text"],
    body .hero-premium .search-box-premium input[name="s"] {
        /* DISPLAY - FORCE VISIBLE */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        
        /* FLEXBOX */
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
        
        /* SIZING */
        min-width: 80px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 36px !important;
        
        /* SPACING */
        padding: 10px 8px !important;
        margin: 0 !important;
        
        /* STYLING */
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        
        /* TEXT */
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #333 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        
        /* POSITION */
        position: relative !important;
        z-index: 2 !important;
        
        /* REMOVE TRANSFORMS */
        transform: none !important;
        
        /* ENSURE IT'S THERE */
        clip: auto !important;
        clip-path: none !important;
    }
    
    /* Placeholder */
    body .hero-premium .search-box-premium input::placeholder {
        color: #999 !important;
        font-size: 12px !important;
        opacity: 0.7 !important;
    }
    
    body .hero-premium .search-box-premium input::-webkit-input-placeholder {
        color: #999 !important;
        font-size: 12px !important;
    }
    
    body .hero-premium .search-box-premium input::-moz-placeholder {
        color: #999 !important;
        font-size: 12px !important;
    }
    
    /* Button - FORCE SIZE AND POSITION */
    body .hero-premium .search-box-premium form > div:first-of-type button[type="submit"],
    body .hero-premium .search-box-premium button[type="submit"] {
        /* DISPLAY */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        
        /* FLEXBOX */
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        /* SIZING */
        min-width: 60px !important;
        max-width: 80px !important;
        width: auto !important;
        height: 36px !important;
        min-height: 36px !important;
        
        /* SPACING */
        padding: 8px 16px !important;
        margin: 0 !important;
        
        /* STYLING */
        background: linear-gradient(135deg, #27AE60, #2ECC71) !important;
        color: white !important;
        border: none !important;
        border-radius: 32px !important;
        box-shadow: none !important;
        
        /* TEXT */
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        
        /* CURSOR */
        cursor: pointer !important;
        
        /* POSITION */
        position: relative !important;
        z-index: 2 !important;
        
        /* REMOVE TRANSFORMS */
        transform: none !important;
    }
    
    /* Quick Search Container */
    body .hero-premium .search-box-premium form > div:last-of-type,
    body .hero-premium .search-box-premium form > div:nth-child(2) {
        margin-top: 12px !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Quick Search Label */
    body .hero-premium .search-box-premium form > div:last-of-type > span:first-child {
        display: block !important;
        color: rgba(255,255,255,0.9) !important;
        font-size: 12px !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    /* Quick Search Tags */
    body .hero-premium .search-box-premium a.quick-search-tag,
    body .hero-premium .search-box-premium form a {
        display: inline-block !important;
        background: rgba(255,255,255,0.25) !important;
        color: white !important;
        padding: 6px 10px !important;
        border-radius: 15px !important;
        text-decoration: none !important;
        margin: 3px 2px !important;
        font-size: 11px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* ============================================
   SMALL MOBILE (480px - 767px)
   ============================================ */

@media (min-width: 480px) and (max-width: 767px) {
    
    body .hero-premium .search-box-premium {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    body .hero-premium .search-box-premium form > div:first-of-type {
        display: flex !important;
        align-items: center !important;
        background: white !important;
        border-radius: 50px !important;
        padding: 4px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
    }
    
    body .hero-premium .search-box-premium form > div:first-of-type > span:first-child {
        padding: 0 12px !important;
        font-size: 20px !important;
    }
    
    body .hero-premium .search-box-premium input[type="text"],
    body .hero-premium .search-box-premium input[name="s"] {
        flex: 1 !important;
        border: none !important;
        padding: 12px 8px !important;
        font-size: 14px !important;
        background: transparent !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    body .hero-premium .search-box-premium button[type="submit"] {
        padding: 12px 22px !important;
        font-size: 14px !important;
        border-radius: 40px !important;
        min-width: 70px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================
   FORCE REMOVE TOGGLE (ทุกขนาดหน้าจอ)
   ============================================ */

.search-toggle,
.toggle-switch,
body .hero-premium .search-box-premium .toggle,
body .hero-premium .search-box-premium label[for*="toggle"],
body .hero-premium .search-box-premium input[type="checkbox"],
input[type="checkbox"][id*="search"],
label[for*="search-toggle"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ============================================
   ENSURE SINGLE ROW LAYOUT
   ============================================ */

body .hero-premium .search-box-premium form > div:first-of-type {
    flex-wrap: nowrap !important;
}

body .hero-premium .search-box-premium form > div:first-of-type > * {
    flex-shrink: 0 !important;
}

body .hero-premium .search-box-premium form > div:first-of-type input {
    flex-shrink: 1 !important;
}

/* ============================================
   FOCUS STATES
   ============================================ */

body .hero-premium .search-box-premium input:focus {
    outline: none !important;
    background: rgba(255,255,255,0.05) !important;
}

body .hero-premium .search-box-premium form > div:first-of-type:focus-within {
    box-shadow: 0 20px 50px rgba(0,0,0,0.25), 
                0 0 0 3px rgba(39, 174, 96, 0.3) !important;
}

/* ============================================
   TOUCH OPTIMIZATION
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    body .hero-premium .search-box-premium button {
        min-height: 44px !important;
        min-width: 80px !important;
    }
}

/* ============================================
   DEBUG MODE - Uncomment เพื่อ debug
   ============================================ */

/*
body .hero-premium .search-box-premium {
    border: 3px solid red !important;
}

body .hero-premium .search-box-premium form > div:first-of-type {
    border: 3px solid blue !important;
}

body .hero-premium .search-box-premium input {
    border: 2px solid green !important;
    background: rgba(0,255,0,0.1) !important;
}

body .hero-premium .search-box-premium button {
    border: 2px solid orange !important;
}
*/