/* ========================================
   TABLET 7" SEARCH BAR FIX
   ========================================
   แก้ไขปัญหา search bar หายไปบน Tablet 7" (600-800px)
   ======================================== */

/* === Tablet 7" Portrait (600-800px) === */
@media (min-width: 600px) and (max-width: 800px) {
    /* Ensure header layout is visible */
    .main-header-wrapper-v2 {
        min-height: auto !important;
        padding: 0.75rem 0 !important;
    }
    
    /* Force header layout to column */
    .header-layout-v2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        padding: 0 0.75rem !important;
    }
    
    /* Ensure header-center is visible and full width */
    .header-center-v2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        justify-content: center !important;
    }
    
    /* Ensure search container is visible */
    .search-container-v2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* MODERN REDESIGN: Beautiful Search Bar with Circular Button */
    .search-bar-v2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 54px !important;
        border-radius: 54px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 3px solid transparent !important;
        background-clip: padding-box !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 
            0 4px 20px rgba(52, 152, 219, 0.12),
            0 2px 8px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .search-bar-v2::before {
        content: '' !important;
        position: absolute !important;
        inset: -3px !important;
        background: linear-gradient(135deg, #3498db, #2ecc71, #9b59b6, #e74c3c, #3498db) !important;
        background-size: 400% 400% !important;
        border-radius: 54px !important;
        z-index: -1 !important;
        animation: borderGlow 8s ease infinite !important;
        opacity: 0 !important;
        transition: opacity 0.4s ease !important;
    }
    
    .search-bar-v2:hover::before,
    .search-bar-v2:focus-within::before {
        opacity: 1 !important;
    }
    
    @keyframes borderGlow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    .search-bar-v2:hover {
        transform: translateY(-2px) !important;
        box-shadow: 
            0 8px 30px rgba(52, 152, 219, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    .search-bar-v2:focus-within {
        box-shadow: 
            0 0 0 4px rgba(52, 152, 219, 0.15),
            0 8px 30px rgba(52, 152, 219, 0.3) !important;
    }
    
    /* Beautiful Search Input */
    #search-input-main-v2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 1.5rem !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        color: #2c3e50 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        letter-spacing: 0.3px !important;
    }
    
    #search-input-main-v2::placeholder {
        color: #95a5a6 !important;
        font-weight: 400 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* STUNNING Circular Search Button with Gradient */
    #search-button-main-v2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin: 3px !important;
        box-shadow: 
            0 4px 15px rgba(102, 126, 234, 0.4),
            0 2px 8px rgba(118, 75, 162, 0.3) !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    #search-button-main-v2::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.6s, height 0.6s !important;
    }
    
    #search-button-main-v2:hover {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
        transform: scale(1.2) rotate(360deg) !important;
        box-shadow: 
            0 8px 30px rgba(240, 147, 251, 0.5),
            0 4px 15px rgba(245, 87, 108, 0.4),
            0 0 0 8px rgba(240, 147, 251, 0.1) !important;
    }
    
    #search-button-main-v2:hover::before {
        width: 100% !important;
        height: 100% !important;
    }
    
    #search-button-main-v2:active {
        transform: scale(0.85) rotate(360deg) !important;
        box-shadow: 
            0 2px 10px rgba(240, 147, 251, 0.4) !important;
    }
    
    #search-button-main-v2 i {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 1.3rem !important;
        color: white !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        position: relative !important;
        z-index: 1 !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
    }
    
    #search-button-main-v2:hover i {
        transform: scale(1.2) rotate(-360deg) !important;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) !important;
    }
    
    /* Hide category select on tablet for more space */
    .category-select-v2 {
        display: none !important;
    }
    
    /* Header left section */
    .header-left-v2 {
        width: 100% !important;
        justify-content: space-between !important;
        order: 1 !important;
    }
    
    /* Header right section */
    .header-right-v2 {
        width: 100% !important;
        justify-content: center !important;
        order: 3 !important;
    }
    
    /* User menu adjustments */
    .user-menu-v2 {
        gap: 0.75rem !important;
    }
    
    .login-btn-v2 span {
        display: none !important;
    }
    
    .cart-text-v2 {
        display: none !important;
    }
}

/* === Tablet Landscape and smaller tablets (481-768px) === */
@media (min-width: 481px) and (max-width: 768px) {
    /* Force search visibility */
    .header-center-v2,
    .search-container-v2,
    .search-bar-v2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #search-button-main-v2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* === Small Tablet Fix (500-700px) === */
@media (min-width: 500px) and (max-width: 700px) {
    .header-layout-v2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    
    .header-center-v2 {
        display: flex !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .search-bar-v2 {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
    }
    
    #search-button-main-v2 {
        display: flex !important;
        padding: 0.5rem 1rem !important;
        min-width: 45px !important;
    }
}

/* === Force search button visibility for ALL tablet sizes === */
@media (max-width: 991px) and (min-width: 481px) {
    #search-button-main-v2,
    #search-button-main {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .search-bar-v2,
    .search-bar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    .header-center-v2,
    .header-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
}

/* === Override any inline styles that might hide search === */
.search-bar-v2[style*="display: none"],
.search-bar-v2[style*="visibility: hidden"],
.search-bar-v2[style*="opacity: 0"],
#search-button-main-v2[style*="display: none"],
#search-button-main-v2[style*="visibility: hidden"],
#search-button-main-v2[style*="opacity: 0"],
.header-center-v2[style*="display: none"],
.header-center-v2[style*="visibility: hidden"],
.header-center-v2[style*="opacity: 0"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}