/* ═══════════════════════════════════════════ */
/* =====  جستجوی رُژا — اورلی تمام‌صفحه (v2.0)  ===== */
/* ═══════════════════════════════════════════ */

@font-face {
    font-family: 'Tanin';
    src: url('../fonts/W_tanin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* رنگ متن و ضربدر جستجوی هدر → قهوه‌ای + فونت تنین */
.roja-search-form input[type="search"] {
    color: #a8472b !important;
    caret-color: #a8472b !important;
    font-family: 'Tanin', Tahoma, sans-serif !important;
}

/* ===== اورلی ===== */
.roja-sr-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #faf0ea;
    color: #4a3a34;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}
.roja-sr-overlay.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.roja-sr-head {
    position: sticky;
    top: 0;
    background: #faf0ea;
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.roja-sr-back {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #e8a06a, #e0714a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(224,113,74,.35);
    flex-shrink: 0;
    cursor: pointer;
}
.roja-sr-back svg { width: 22px; height: 22px; transform: scaleX(-1); }

.roja-sr-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #f0d3c5;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 6px 16px rgba(200,120,80,.08);
    margin: 0;
}
.roja-sr-box > svg { width: 22px; height: 22px; color: #e0714a; flex-shrink: 0; }
.roja-sr-box input {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 14px;
    color: #a8472b;
    text-align: right;
    font-family: 'Tanin', Tahoma, sans-serif;
    -webkit-appearance: none;
    appearance: none;
}
.roja-sr-box input::-webkit-search-cancel-button,
.roja-sr-box input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.roja-sr-box input::placeholder { color: #c2ada2; font-family: Tahoma, sans-serif; }
.roja-sr-clr { color: #e0714a; font-size: 17px; cursor: pointer; }

.roja-sr-body { flex: 1; overflow-y: auto; padding: 6px 16px 40px; }

.roja-sr-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #5a3a30;
    margin: 22px 0 12px;
}
.roja-sr-sec svg { width: 20px; height: 20px; color: #e0714a; }

.roja-sr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.roja-sr-chip {
    background: #fff;
    border: 1.5px solid #f0d3c5;
    border-radius: 14px;
    padding: 9px 16px;
    font-size: 12.5px;
    color: #6a5248;
    font-weight: 700;
    text-decoration: none;
}
.roja-sr-chip:active { background: #fdf4ee; }

.roja-sr-prod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f4ddd0;
    text-decoration: none;
}
.roja-sr-prod:active { background: #fdf4ee; }
.roja-sr-prod img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #fdf4ee;
    object-fit: cover;
    flex-shrink: 0;
}
.roja-sr-nm { flex: 1; font-size: 12.5px; font-weight: 700; color: #4a3a34; line-height: 1.7; }
.roja-sr-pr { color: #a8472b; font-size: 12px; font-weight: 800; white-space: nowrap; }
.roja-sr-pr del { color: #c2ada2; font-weight: 400; font-size: 11px; }
.roja-sr-all {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: #e0714a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}
.roja-sr-empty { padding: 24px; text-align: center; color: #b39a8f; font-size: 13px; }
.roja-sr-results:not(.show) { display: none; }