/**
 * NOBAMO Search Autocomplete Styles
 * 
 * @version 2.2.0 - Fix: Mobile double border issue (border + ring overlap)
 * 
 * Opravy:
 * - v2.2.0: Opravené dvojité orámovanie na mobile (border-2 konflikt s ring)
 * - v2.1.0: Mobile dropdown je INLINE pod inputom (nie fixed na spodku - kvôli klávesnici)
 * - Jednotná zelená farba focus (bez konfliktu fialovej)
 * - Odstránené natívne clear button štýly (používame vlastný)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    --search-dropdown-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --search-dropdown-shadow-mobile: 0 10px 40px -5px rgba(0, 0, 0, 0.2);
    --search-item-hover-bg: #f9fafb;
    --search-item-selected-bg: #f0fdf4;
    --search-item-selected-border: #16a34a;
    --search-highlight-bg: #fef08a;
    --search-highlight-text: #854d0e;
    --search-brand-50: #f0fdf4;
    --search-brand-100: #dcfce7;
    --search-brand-500: #22c55e;
    --search-brand-600: #16a34a;
    --search-brand-700: #15803d;
}

/* ============================================
   SEARCH INPUT STYLING (UNIFIED)
   ============================================ */

/* Desktop input */
#q-desktop {
    border-color: #e5e7eb !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#q-desktop:focus {
    border-color: var(--search-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
    outline: none !important;
}

/* Mobile input - FIX v2.2.0: Odstránené dvojité orámovanie */
/* Selector pre oba možné ID: q-mobile (aktuálne) aj mobile-search-input (legacy) */
#q-mobile,
#mobile-search-input {
    /* Reset border na 1px aby sa neprekrývalo s ring */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #e5e7eb !important;
    height: 52px;
    font-size: 16px !important; /* Prevents iOS zoom */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Zabezpečenie že focus ring neprekrýva border */
    background-color: #f9fafb;
}

#q-mobile:focus,
#mobile-search-input:focus {
    /* Použijeme len border zmenu, nie ring */
    border-color: var(--search-brand-500) !important;
    /* Jemnejší shadow namiesto silného ring */
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
    outline: none !important;
    background-color: #fff !important;
}

/* Override Tailwind classes ktoré môžu spôsobovať double border */
#mobile-search-bar input[type="search"].border-2,
#mobile-search-bar input.border-2 {
    border-width: 1px !important;
}

#mobile-search-bar input[type="search"]:focus.focus\:ring-2,
#mobile-search-bar input:focus.focus\:ring-2 {
    --tw-ring-offset-width: 0px !important;
    --tw-ring-width: 0px !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}

/* Override focus:border-brand-500 aby nekonfliktovalo */
#mobile-search-bar input:focus.focus\:border-brand-500 {
    border-color: var(--search-brand-500) !important;
}

/* Skry natívny clear button v search inputoch */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* ============================================
   BASE DROPDOWN
   ============================================ */

#search-dropdown-desktop,
#search-dropdown-mobile {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--search-dropdown-shadow);
    z-index: 9999;
    overflow: hidden;
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}

#search-dropdown-desktop:not(.hidden),
#search-dropdown-mobile:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Custom scrollbar */
#search-dropdown-desktop::-webkit-scrollbar,
#search-dropdown-mobile::-webkit-scrollbar {
    width: 6px;
}

#search-dropdown-desktop::-webkit-scrollbar-track,
#search-dropdown-mobile::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

#search-dropdown-desktop::-webkit-scrollbar-thumb,
#search-dropdown-mobile::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#search-dropdown-desktop::-webkit-scrollbar-thumb:hover,
#search-dropdown-mobile::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================
   DESKTOP DROPDOWN
   ============================================ */

#search-dropdown-desktop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* ============================================
   MOBILE DROPDOWN - INLINE POD INPUTOM
   ============================================ */

#search-dropdown-mobile {
    /* INLINE pozícia - dropdown je priamo pod inputom */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    max-height: 60vh;
    overflow-y: auto;
    
    /* Rounded corners */
    border-radius: 0.75rem;
    box-shadow: var(--search-dropdown-shadow-mobile);
}

/* Scroll behavior pre mobile */
#search-dropdown-mobile .search-results {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   HIDE NATIVE CLEAR ON MOBILE
   ============================================ */

#mobile-search-bar input[type="search"]::-webkit-search-cancel-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* ============================================
   PRODUCT ITEMS
   ============================================ */

.search-product {
    position: relative;
}

.search-product::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-product:hover::before {
    opacity: 1;
}

.search-product img {
    transition: transform 0.2s ease;
}

.search-product:hover img {
    transform: scale(1.05);
}

/* Mobile product cards */
.search-product-mobile {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.search-product-mobile:active {
    transform: scale(0.95);
}

/* Line clamp for title */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   CATEGORY & BRAND ITEMS
   ============================================ */

.search-category {
    position: relative;
}

.search-category::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--search-brand-600), var(--search-brand-500));
    border-radius: 3px;
    transition: height 0.2s ease;
}

.search-category:hover::before {
    height: 60%;
}

/* Category/Brand chips (mobile) */
.search-category-chip,
.search-brand-chip {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px; /* Touch target */
}

.search-category-chip:active,
.search-brand-chip:active {
    transform: scale(0.95);
}

/* Brand chips (desktop) */
.search-brand {
    transition: all 0.2s ease;
}

.search-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hide scrollbar but allow scroll */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================
   VIEW ALL LINK
   ============================================ */

.search-view-all {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-view-all::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.search-view-all:hover::before {
    transform: translateX(100%);
}

.search-view-all:active {
    background-color: #e5e7eb;
}

/* ============================================
   KEYBOARD NAVIGATION
   ============================================ */

.bg-green-50 {
    background-color: var(--search-item-selected-bg) !important;
}

[data-search-item]:focus-visible {
    outline: 2px solid var(--search-brand-600);
    outline-offset: -2px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.search-loading,
.search-loading-mobile {
    min-height: 200px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.search-empty {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================
   HIGHLIGHT (matching text)
   ============================================ */

#search-dropdown-desktop mark,
#search-dropdown-mobile mark {
    background-color: var(--search-highlight-bg);
    color: var(--search-highlight-text);
    border-radius: 2px;
    padding: 0 2px;
}

/* ============================================
   MOBILE SEARCH BAR CONTAINER
   ============================================ */

#mobile-search-bar {
    position: relative;
    z-index: 50;
}

#mobile-search-bar .relative {
    position: relative;
}

/* ============================================
   MOBILE SEARCH CLEAR BUTTON
   ============================================ */

#mobile-search-clear {
    /* Reset štýly - čistý button */
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#mobile-search-clear:not(.hidden) {
    display: flex;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    #search-dropdown-desktop,
    #search-dropdown-mobile,
    .search-product,
    .search-product img,
    .search-product-mobile,
    .search-category,
    .search-category-chip,
    .search-brand,
    .search-brand-chip,
    .search-view-all {
        transition: none !important;
        animation: none !important;
    }
    
    #search-dropdown-desktop:not(.hidden),
    #search-dropdown-mobile:not(.hidden) {
        transform: translateY(0) !important;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Touch devices - disable hover effects */
    .search-product:hover::before,
    .search-category:hover::before,
    .search-brand:hover,
    .search-view-all:hover::before {
        opacity: 0;
        transform: none;
    }
    
    /* Ensure touch targets are large enough */
    .search-product,
    .search-product-mobile,
    .search-category,
    [data-search-item] {
        min-height: 44px;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone notch/home indicator)
   ============================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    /* Mobile dropdown bottom padding */
    #search-dropdown-mobile {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #search-dropdown-desktop,
    #search-dropdown-mobile,
    #mobile-search-bar,
    #mobile-search-overlay {
        display: none !important;
    }
}