/* ========================================================
   1. בסיס ודסקטופ - מראה כהה (Glassmorphism) 
   ======================================================== */
.hp-search-wrapper { 
    margin: 40px auto; 
    max-width: 1100px; 
    font-family: inherit; 
    direction: rtl;
    width: 100%;
}

.search-main-container {
    display: flex; 
    background: rgba(15, 15, 15, 0.9); 
    backdrop-filter: blur(10px);
    border-radius: 60px; 
    padding: 8px; 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    align-items: center; 
    justify-content: space-between;
}

/* קוביות החיפוש */
.search-box { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    padding: 12px 20px; 
    cursor: pointer; 
    position: relative; 
    color: #fff; 
    border-left: 1px solid rgba(255, 255, 255, 0.1); 
    min-width: 0; 
}

.search-box:last-of-type { border-left: none; }
.search-box:hover { background: rgba(255, 255, 255, 0.08); border-radius: 50px; }

/* טקסט ואייקונים */
.box-icon { margin-left: 12px; font-size: 20px; color: #a6238c; }
.box-content { flex: 1; min-width: 0; text-align: right; }
.box-label { display: block; font-size: 11px; opacity: 0.7; margin-bottom: 2px; white-space: nowrap; }
.box-selected { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* כפתור החיפוש הראשי - גרדיאנט וטקסט לבן */
.submit-search-btn {
    background: linear-gradient(135deg, #a6238c 0%, #d232b5 100%);
    border: none; 
    border-radius: 50px; 
    padding: 0 40px; 
    color: #ffffff !important; 
    font-weight: 800; 
    font-size: 16px; 
    cursor: pointer; 
    transition: 0.3s;
    min-height: 55px; 
    white-space: nowrap;
}

.submit-search-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(166, 35, 140, 0.4); 
}

/* פופאפים */
.search-popup { 
    position: absolute; 
    top: 110%; 
    right: 0; 
    width: 320px; 
    background: #fff; 
    border-radius: 20px; 
    padding: 20px; 
    display: none; 
    z-index: 9999; 
    color: #222; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

.search-popup.active { display: block; animation: popupFade 0.25s ease-out; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.option-item { 
    padding: 10px; 
    border: 1px solid #eee; 
    border-radius: 10px; 
    text-align: center; 
    cursor: pointer; 
    transition: 0.2s; 
    font-size: 13px;
    position: relative;
}

.option-item:hover { background: #f9f9f9; border-color: #a6238c; }

/* פריט לחוץ/נבחר */
.option-item.selected { 
    background: #a6238c !important; 
    color: #fff !important; 
    border-color: #a6238c; 
    font-weight: bold; 
}

.option-item.selected::after {
    content: '✓'; 
    position: absolute; 
    top: 2px; 
    left: 5px; 
    font-size: 10px;
}

/* סליידר */
.range-slider-container { position: relative; height: 40px; margin-top: 10px; }
.slider-track { position: absolute; width: 100%; height: 5px; background: #e0e0e0; top: 50%; transform: translateY(-50%); border-radius: 5px; }
input[type="range"] { position: absolute; width: 100%; appearance: none; background: none; pointer-events: none; margin: 0; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #a6238c; border-radius: 50%; cursor: pointer; pointer-events: all; border: 2px solid #fff; }

.slider-values { display: flex; justify-content: space-between; color: #a6238c; font-weight: bold; margin-top: 10px; font-size: 13px; }
.btn-done { background: #a6238c; color: #fff; border: none; padding: 10px; border-radius: 10px; cursor: pointer; width: 100%; font-weight: bold; margin-top: 15px; }

@keyframes popupFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ========================================================
   2. עיצוב הארכיון - גרסה רחבה, ממורכזת ולבנה
   ======================================================== */
.archive-filter-row {
    width: 100%;
    display: flex;
    justify-content: center; 
    margin-bottom: 40px;
    z-index: 11;
}

.archive-filter-row .hp-search-wrapper {
    margin: 0 auto;
    max-width: 1000px; 
    width: 95%;
}

.archive-filter-row .search-main-container {
    background: #ffffff !important; 
    border: 1px solid #d1d1d1 !important; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important; 
    border-radius: 60px !important;
    padding: 10px 15px !important;
    justify-content: space-around;
}

.archive-filter-row .search-box {
    color: #333 !important; 
    border-left: 1px solid #eee !important;
    padding: 10px 25px !important;
}

.archive-filter-row .box-selected {
    font-size: 15px !important;
    color: #333 !important;
}

.archive-filter-row .box-icon {
    color: #a6238c !important; 
}

.archive-filter-row .submit-search-btn {
    min-height: 50px !important;
    padding: 0 35px !important;
}

/* =========================================
   3. מובייל וטאבלט - תיקון דחיסה וצבעים (FIXED)
   ========================================= */
@media (max-width: 991px) {
    .archive-filter-row .hp-search-wrapper { 
        max-width: 100% !important; 
        margin: 15px auto !important; 
        padding: 0 10px; 

    }

    /* הופכים את הקונטיינר לעמודה ומשחירים אותו גם בטאבלט וגם במובייל */
    .search-main-container,
    .archive-filter-row .search-main-container { 
        flex-direction: column !important; 
        border-radius: 25px !important; 
        padding: 15px !important; 
        background: rgba(15, 15, 15, 0.95) !important; /* תמיד כהה וקריא במובייל/טאבלט */
        border: none !important;
        box-shadow: none !important;
    }
    
    /* סידור התיבות בפנים - מחיקת הקו הצדדי */
    .search-box,
    .archive-filter-row .search-box { 
        border-left: none !important; /* מעלים את הקו הלבן/אפור בצד */
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; 
        width: 100% !important; 
        padding: 15px 10px !important; 
        justify-content: flex-start !important; 
        color: #fff !important; /* טקסט לבן */
    }

    /* הכרחת טקסט לבן בתיבות הארכיון במובייל */
    .archive-filter-row .box-selected,
    .archive-filter-row .box-label {
        color: #fff !important; 
    }
    
    .search-box:last-of-type,
    .archive-filter-row .search-box:last-of-type { 
        border-bottom: none !important; 
    }
    
    .box-content { 
        text-align: right; 
        margin-right: 15px; 
    }
    
    .submit-search-btn,
    .archive-filter-row .submit-search-btn { 
        padding: 15px !important; 
        border-radius: 15px !important; 
        margin-top: 15px !important; 
        width: 100% !important; 
        min-height: 55px !important; 
    }
    
    .search-popup { 
        width: 100% !important; 
        position: fixed !important; 
        top: auto !important; 
        bottom: 0 !important; 
        right: 0 !important; 
        left: 0 !important; 
        border-radius: 25px 25px 0 0 !important; 
        box-shadow: 0 -5px 25px rgba(0,0,0,0.3) !important; 
    }
}