/* WallCity - סגנון ראשי */

:root {
    --wc-primary:   #2563eb;
    --wc-primary-d: #1d4ed8;
    --wc-primary-l: #3b82f6;
    --wc-primary-50:#eff6ff;
    --wc-accent:    #f59e0b;
    --wc-accent-d:  #d97706;
    --wc-success:   #16a34a;
    --wc-danger:    #dc2626;
    --wc-bg:        #f6f7fb;
    --wc-card-bg:   #ffffff;
    --wc-border:    #e6e8ee;
    --wc-border-2:  #eef0f4;
    --wc-text:      #0f172a;
    --wc-text-2:    #1e293b;
    --wc-muted:     #64748b;
    --wc-muted-2:   #94a3b8;

    --wc-radius-sm: 8px;
    --wc-radius:    12px;
    --wc-radius-lg: 18px;

    --wc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --wc-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .06);
    --wc-shadow-h:  0 4px 16px rgba(15, 23, 42, .08), 0 14px 38px rgba(15, 23, 42, .08);
    --wc-shadow-lg: 0 24px 60px -12px rgba(15, 23, 42, .25);
}

* { box-sizing: border-box; }

html, body {
    font-family: 'Rubik', system-ui, -apple-system, sans-serif;
    background: var(--wc-bg);
    color: var(--wc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.01em;
}

h1, h2, h3, h4, h5, h6 { color: var(--wc-text); letter-spacing: -.02em; }

a { color: var(--wc-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--wc-primary-d); }

::selection { background: var(--wc-primary-50); color: var(--wc-primary-d); }

/* ===== Theme bridges (Bootstrap overrides) ===== */
.bg-primary       { background-color: var(--wc-primary) !important; }
.text-primary     { color: var(--wc-primary) !important; }
.text-muted-2     { color: var(--wc-muted) !important; }
.text-danger      { color: var(--wc-danger) !important; }

/* ===== Buttons ===== */
.btn {
    font-weight: 500;
    border-radius: 10px;
    padding: .55rem 1.1rem;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

.btn-primary {
    background-color: var(--wc-primary);
    border-color: var(--wc-primary);
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 8px rgba(37,99,235,.25);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--wc-primary-d);
    border-color: var(--wc-primary-d);
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

.btn-warning {
    background-color: var(--wc-accent);
    border-color: var(--wc-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.btn-warning:hover, .btn-warning:focus {
    background-color: var(--wc-accent-d);
    border-color: var(--wc-accent-d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245,158,11,.4);
}

.btn-outline-secondary {
    color: var(--wc-text-2);
    border-color: var(--wc-border);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: #f3f4f7;
    color: var(--wc-text);
    border-color: #d1d5db;
}

.btn-light {
    background: #fff;
    border-color: var(--wc-border);
    color: var(--wc-text);
}
.btn-light:hover { background: #f3f4f7; }

.rounded-pill { border-radius: 50px !important; }

/* ===== Desktop navbar: דחיפת פריטי המשתמש לקצה הנגדי של הלוגו ===== */
@media (min-width: 992px) {
    .navbar .navbar-collapse {
        flex: 1 1 auto;
    }
    .navbar .navbar-collapse > .navbar-nav {
        margin-inline-start: auto !important;
    }
}

/* ===== Mobile navbar ===== */
@media (max-width: 991.98px) {
    /* ההמבורגר בצד ימין (start ב-RTL), הלוגו ממורכז כמו ב-יד 2 */
    .navbar.bg-primary > .container { position: relative; }
    /* הסרת הקו המפריד בין הנאבבר לרצועת הקטגוריות - הכחול האחיד נמשך ללא חיתוך */
    .navbar.bg-primary { border-bottom: 0; }
    .navbar > .container > .navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        pointer-events: auto;
    }
    .navbar .navbar-collapse {
        background: var(--wc-primary);
        margin: 0;
        padding: 12px 16px 16px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }
    .navbar .navbar-collapse .navbar-nav { gap: 2px; }
    .navbar .navbar-collapse .nav-link {
        padding: 10px 12px;
        border-radius: 8px;
        color: rgba(255,255,255,.92);
        font-weight: 500;
    }
    .navbar .navbar-collapse .nav-link:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }
    .navbar .navbar-collapse .nav-link .fa-fw { color: rgba(255,255,255,.7); }
    .navbar .navbar-collapse hr {
        border-color: rgba(255,255,255,.15);
        opacity: 1;
    }
}

.mobile-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.18);
    margin-bottom: 6px;
}
.mobile-user-card i { font-size: 22px; opacity: .9; }

/* ===== Logo ===== */
.site-logo {
    height: 40px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
    transition: transform .15s ease;
}
.navbar-brand:hover .site-logo { transform: scale(1.04); }

.footer-logo {
    height: 56px;
    width: auto;
    display: block;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 8px;
}
.admin-logo {
    height: 38px;
    width: auto;
}

/* ===== Navbar ===== */
.navbar.sticky-top { z-index: 1040; }
.navbar .dropdown-menu { z-index: 1050; }
.navbar.bg-primary {
    background: var(--wc-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-top: .55rem;
    padding-bottom: .55rem;
    height: 68px;
    min-height: 68px;
}
.navbar.bg-primary .container {
    align-items: center;
    height: 100%;
}
/* במובייל: התפריט הקופץ של ההמבורגר נשלף מחוץ ל-navbar כך שהוא לא משנה את גובהו */
@media (max-width: 991.98px) {
    .navbar.bg-primary { overflow: visible; }
    .navbar.bg-primary .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1041;
        /* התפריט עלול להיות גבוה מהמסך (חשבון עסקי/אדמין) - מגבילים לגובה החלון
           ומאפשרים גלילה פנימית כדי שהפריטים התחתונים לא ייחתכו */
        max-height: calc(100vh - 68px);
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}
/* מונע layout-shift כשמופיע scrollbar */
html { scrollbar-gutter: stable; }

.dropdown-menu {
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow-h);
    padding: .35rem;
    min-width: 200px;
}
.dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-text-2);
    transition: background-color .12s ease, color .12s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--wc-primary-50);
    color: var(--wc-primary-d);
}
.dropdown-menu .dropdown-item.text-danger:hover { background: #fef2f2; color: var(--wc-danger); }
.dropdown-menu .dropdown-divider { border-color: var(--wc-border-2); margin: .35rem 0; }
.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -.02em;
}
.navbar .nav-link { font-weight: 500; }
.navbar .btn-warning { box-shadow: 0 2px 12px rgba(245,158,11,.45); }

/* ===== כפתורי פעולה בנאבבר (צ'אט + התראות) במובייל - בצד הנגדי להמבורגר ===== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto; /* דוחף לצד הנגדי של ההמבורגר */
    flex-shrink: 0;
}

/* ===== כניסה/הרשמה ליד הלוגו (מובייל, אורח) ===== */
.nav-auth-mobile { gap: 8px; }
.nav-auth-link {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 6px 6px;
    white-space: nowrap;
    transition: opacity .15s ease;
}
.nav-auth-link:hover,
.nav-auth-link:focus { color: #fff; opacity: .85; }
.nav-auth-pill {
    color: var(--wc-primary);
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, background-color .15s ease;
}
.nav-auth-pill:hover,
.nav-auth-pill:focus { color: var(--wc-primary-d); background: #fff; }
.nav-auth-pill:active { transform: scale(.96); }
/* מסך זעיר: לצמצם ריווח כדי לא להתנגש בלוגו הממורכז */
@media (max-width: 360px) {
    .nav-auth-mobile { gap: 5px; }
    .nav-auth-link { font-size: 13px; padding: 6px 3px; }
    .nav-auth-pill { font-size: 13px; padding: 7px 11px; }
}

.nav-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255,255,255,.10);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color .15s ease, transform .12s ease;
}
.nav-chat-btn:hover,
.nav-chat-btn:active { background: rgba(255,255,255,.18); color: #fff; }
.nav-chat-btn:active { transform: scale(.96); }
.nav-chat-btn:focus  { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
.nav-chat-btn i { font-size: 18px; line-height: 1; }
.nav-chat-btn .nav-chat-badge {
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 2px 6px;
    line-height: 1.2;
    border: 2px solid var(--wc-primary);
}

/* ===== Custom navbar toggler - מחליף את ברירת המחדל של Bootstrap עם 3 פסים נקיים ===== */
/* רק במובייל - בדסקטופ Bootstrap מסתיר את הכפתור ב-display:none, ואין צורך להתערב. */
@media (max-width: 991.98px) {
    .navbar-dark .navbar-toggler {
        border: 0;
        padding: 0;
        width: 42px;
        height: 42px;
        background: rgba(255,255,255,.10);
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color .15s ease, transform .12s ease;
    }
    .navbar-dark .navbar-toggler:hover  { background: rgba(255,255,255,.18); }
    .navbar-dark .navbar-toggler:active { transform: scale(.96); }
    .navbar-dark .navbar-toggler:focus  { box-shadow: none; outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
    .navbar-dark .navbar-toggler[aria-expanded="true"] { background: rgba(255,255,255,.22); }
    .navbar-dark .navbar-toggler-icon {
        width: 18px;
        height: 14px;
        background-image: none;
        background-color: transparent;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        position: relative;
        border-radius: 1px;
    }
    .navbar-dark .navbar-toggler-icon::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        height: 2px;
        background: #fff;
        transform: translateY(-50%);
        border-radius: 1px;
    }
}

/* ===== Modern navbar search ===== */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 5px 5px 5px 14px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    backdrop-filter: blur(8px);
}

/* ===== Autocomplete dropdown ===== */
.nav-suggest-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 1050;
    background: #fff;
    color: var(--wc-text);
    border: 1px solid var(--wc-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(2,6,23,.22);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
}
.nav-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--wc-text);
    transition: background-color .12s ease;
}
.nav-suggest-item:hover,
.nav-suggest-item.is-active {
    background: var(--wc-primary-50, #eff6ff);
    color: var(--wc-text);
}
.nav-suggest-item .ns-icon {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--wc-primary-d, #1d4ed8);
}
.nav-suggest-item .ns-icon img {
    width: 100%; height: 100%; object-fit: cover;
}
.nav-suggest-item .ns-text { flex: 1; min-width: 0; }
.nav-suggest-item .ns-label {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-suggest-item .ns-meta {
    font-size: 12px;
    color: var(--wc-muted, #6b7280);
    margin-top: 2px;
}
.nav-suggest-empty {
    padding: 14px;
    text-align: center;
    color: var(--wc-muted, #6b7280);
    font-size: 13px;
}
.nav-suggest-all {
    display: block;
    padding: 10px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--wc-border);
    text-align: center;
    font-weight: 600;
    color: var(--wc-primary, #2563eb);
    text-decoration: none;
}
.nav-suggest-all:hover { background: var(--wc-primary-50, #eff6ff); }
.nav-search:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.28);
}
.nav-search:focus-within {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.2), 0 10px 30px rgba(15,23,42,.18);
}
.nav-search:focus-within .nav-search-icon { color: var(--wc-muted); }
.nav-search:focus-within .nav-search-input { color: var(--wc-text); }
.nav-search:focus-within .nav-search-input::placeholder { color: var(--wc-muted-2); }

.nav-search-icon {
    color: rgba(255,255,255,.75);
    font-size: 15px;
    margin-inline-end: 10px;
    transition: color .15s ease;
    flex-shrink: 0;
}

.nav-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 0;
    min-width: 0;
    font-family: inherit;
}
.nav-search-input::placeholder {
    color: rgba(255,255,255,.65);
    font-weight: 400;
}
.nav-search-input::-webkit-search-cancel-button { display: none; }

.nav-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wc-accent);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease;
    flex-shrink: 0;
}
.nav-search-btn:hover {
    background: var(--wc-accent-d);
}
.nav-search-btn:active { transform: translateY(1px); }

.nav-search-kbd {
    background: rgba(255,255,255,.22);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
}
.nav-search:focus-within .nav-search-btn { background: var(--wc-primary); }
.nav-search:focus-within .nav-search-btn:hover { background: var(--wc-primary-d); }

/* Category strip - sticky צמוד ל-navbar */
.category-strip {
    position: sticky;
    top: 68px; /* גובה ה-navbar בדיוק */
    z-index: 1030;
    background: #fff !important;
    min-height: 44px;
}
.category-strip .container { min-height: 28px; }

/* ===== Mobile: שורת חיפוש - באזור התוכן הלבן, לא דביקה לנאבבר ===== */
.mobile-search-bar {
    position: relative;
    background: transparent;
    padding: 14px 14px 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: block;
}
.mobile-search-bar > form { width: 100%; }
.nav-search-mobile {
    padding: 5px 5px 5px 14px;
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
    transition: border-color .15s ease, box-shadow .15s ease;
    backdrop-filter: none;
}
.nav-search-mobile:focus-within {
    border-color: var(--wc-primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 4px 14px rgba(15,23,42,.06);
}
.nav-search-mobile .nav-search-icon {
    color: var(--wc-muted);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 100%;
    margin-inline-end: 6px;
}
.nav-search-mobile .nav-search-input {
    color: var(--wc-text);
    font-size: 14.5px;
    line-height: 1.2;
    padding: 8px 0;
    background: transparent;
}
.nav-search-mobile .nav-search-input::placeholder {
    color: var(--wc-muted-2);
    font-weight: 400;
}
.nav-search-mobile .nav-search-btn {
    padding: 8px 14px;
    min-width: 40px;
    justify-content: center;
    background: var(--wc-primary);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.nav-search-mobile .nav-search-btn:hover,
.nav-search-mobile .nav-search-btn:active { background: var(--wc-primary-d); color: #fff; }
.nav-search-mobile:focus-within .nav-search-btn { background: var(--wc-primary-d); }

.mobile-cats-strip {
    position: sticky;
    top: 128px; /* navbar 68 + mobile-search 60 - נדרס ל-68px כשאין שורת חיפוש (ראו כלל ה-+) */
    z-index: 1032;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 14px;
    background: var(--wc-primary);
    border-bottom: 0;
    box-shadow: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    height: 106px;
    min-height: 106px;
    padding: 10px 12px 8px;
    gap: 4px;
    align-items: flex-start;
    box-sizing: border-box;
    flex-shrink: 0;
}
.mobile-cats-strip::-webkit-scrollbar { display: none; }

/* כשאין שורת חיפוש בין הנאבבר לרצועה (למשל בדף מודעה / דף הבית), היא נדבקת ישר מתחת לנאבבר. */
.navbar + .mobile-cats-strip { top: 68px; }

/* בדף הבית: ה-hero נדבק לרצועה בלי הפסקה */
body.page-home .hero { padding-top: 0; margin-top: -1px; }
body.page-home .hero > .container { padding-top: 56px; }
@media (max-width: 991.98px) {
    body.page-home .hero > .container { padding-top: 32px; }
}

/* עיגולי קטגוריה במובייל (כמו יד2) - עיגול לבן עם אייקון/תמונה ושם מתחת, על רקע כחול */
.mobile-cat-circle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 66px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-cat-circle .mcc-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(2,6,23,.18);
    transition: transform .14s ease, box-shadow .14s ease;
}
.mobile-cat-circle .mcc-img i {
    font-size: 22px;
    color: var(--mcc, var(--wc-primary));
    line-height: 1;
}
.mobile-cat-circle .mcc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mobile-cat-circle .mcc-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    text-align: center;
    max-width: 64px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mobile-cat-circle:active .mcc-img { transform: scale(.93); }
.mobile-cat-circle:hover .mcc-img { box-shadow: 0 6px 16px rgba(2,6,23,.26); }

/* עיגול זירת ההחלפות - מובלט בכתום של המותג */
.mobile-cat-circle-trade .mcc-img {
    background: var(--wc-accent);
    box-shadow: 0 4px 14px rgba(245,158,11,.45);
}
.mobile-cat-circle-trade .mcc-img i { color: #fff; }

.cat-link {
    color: var(--wc-text-2);
    font-weight: 500;
    padding: 4px 6px;
    border-radius: 8px;
    transition: color .12s ease, background-color .12s ease;
}
.cat-link i { color: var(--wc-muted); transition: color .12s ease; }
.cat-link:hover { color: var(--wc-primary); background: var(--wc-primary-50); }
.cat-link:hover i { color: var(--wc-primary); }

/* דסקטופ: צ'יפ זירת ההחלפות מובלט בצבעי המותג */
.cat-link.cat-link-trade {
    background: var(--wc-primary-d);
    color: #fff;
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.cat-link.cat-link-trade i { color: #fff; }
.cat-link.cat-link-trade:hover {
    background: var(--wc-primary);
    color: #fff;
}
.cat-link.cat-link-trade:hover i { color: #fff; }

/* ===== Hero ===== */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 400px at 80% -20%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(800px 300px at 10% 110%, rgba(245,158,11,.18), transparent 60%),
        linear-gradient(135deg, var(--wc-primary-d) 0%, var(--wc-primary) 60%, #3b82f6 100%);
    color: #fff;
    padding: 72px 0 88px;
    border-radius: 0 0 28px 28px;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    opacity: .4;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -.03em; color: #fff; }
.hero .lead { opacity: .92; font-size: 1.05rem; }
.hero .search-box {
    background: #fff;
    padding: 7px;
    border-radius: 50px;
    box-shadow: 0 14px 40px rgba(2, 6, 23, .25);
}
.hero .search-box input.form-control {
    border: 0; box-shadow: none; padding-right: 1.2rem;
    background: transparent;
}
.hero .search-box .btn-primary {
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

/* ===== Hero: split layout - copy + search + stats ===== */
.hero { padding: 88px 0 96px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 56px;
    align-items: center;
}

.hero-copy { text-align: start; }
.hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: 18px;
    color: #fff;
}
.hero-h1-accent {
    color: var(--wc-accent);
    font-weight: 700;
}
.hero-slogan {
    font-weight: 700;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    line-height: 1.4;
    color: #fff;
    margin-bottom: 16px;
}
.hero .lead {
    max-width: 660px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255,255,255,.86);
}

/* Search-bar in hero */
.hero-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 28px;
    background: #fff;
    border-radius: 50px;
    padding: 6px 6px 6px 22px;
    box-shadow: 0 18px 50px rgba(2, 6, 23, .22);
    max-width: 660px;
}
.hero-search-icon {
    color: var(--wc-muted);
    font-size: 1rem;
    margin-inline-end: 10px;
}
.hero-search input[type="search"] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    padding: 12px 4px;
    color: var(--wc-text);
    min-width: 0;
}
.hero-search input::placeholder { color: #94a3b8; }
.hero-search .btn-primary {
    padding: .65rem 1.6rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(37,99,235,.35);
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.hero-cta .btn-warning {
    padding: .85rem 1.8rem;
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(245,158,11,.45);
}
.hero-cta-link {
    color: rgba(255,255,255,.92);
    font-weight: 500;
    text-decoration: none;
    font-size: 14.5px;
    transition: color .15s ease;
}
.hero-cta-link i { font-size: 12px; margin-inline-start: 4px; transition: transform .15s ease; }
.hero-cta-link:hover { color: #fff; }
.hero-cta-link:hover i { transform: translateX(-3px); }

/* Stats panel - אופקי תמיד, מתחת ל-hero grid */
/* ===== Hero visual - בועות קטגוריות מרחפות סביב סמל מרכזי ===== */
/* התמונה מעוגנת לקצה הימני של ה-container (1320px max) במקום של ה-viewport.
   בלי זה - במסכים אולטרא-רחבים (28"+) התמונה "בורחת" שמאלה מהטקסט,
   כי `clamp(20px, 8vw, ...)` מודד מקצה ה-viewport ולא מהתוכן המרכזי. */
.hero-visual {
    position: absolute;
    bottom: 0;
    /* max(20px, (viewport-1280px)/2) = רוחב ה-gutter מצד ה-container, מינימום 20px קצוות. */
    inset-inline-end: max(20px, calc((100vw - 1280px) / 2));
    width: clamp(320px, 32vw, 480px);
    height: 92%;
    z-index: 1;
    pointer-events: none;
}
.hv-center {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    z-index: 3;
}
.hv-center-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 16px 28px rgba(15, 23, 42, .32));
}
.hv-think {
    position: absolute;
    top: -12px;
    inset-inline-end: -10px;
    width: 40px; height: 40px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-primary, #2563eb);
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(2,6,23,.28), 0 0 0 3px rgba(255,255,255,.25);
    z-index: 5;
    animation: hv-think 2.4s ease-in-out infinite;
}
@keyframes hv-think {
    0%, 100% { transform: translateY(0) scale(1);     opacity: .95; }
    50%      { transform: translateY(-5px) scale(1.1); opacity: 1;   }
}
.hv-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 156px; height: 156px;
    border-radius: 28px;
    border: 2px solid rgba(255,255,255,.45);
    z-index: 2;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: hv-ripple 3.6s ease-out infinite;
}
.hv-ring-1 { animation-delay: 0s; }
.hv-ring-2 { animation-delay: -1.2s; }
.hv-ring-3 { animation-delay: -2.4s; }
.hv-card {
    --r: 0deg;
    position: absolute;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .05);
    border-radius: 999px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .05);
    color: var(--wc-text, #0f172a);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    z-index: 4;
    transform: translate3d(0, 0, 0) rotate(var(--r));
    animation: hv-float 7s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.hv-card i {
    color: var(--wc-primary, #2563eb);
    font-size: 14px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wc-primary-50, #eff6ff);
    border-radius: 9px;
}
.hv-card-1 { top: 2%;   right: 26%; --r: -4deg; animation-delay: 0s;    animation-duration: 6.5s; }
.hv-card-2 { top: 8%;   left: 22%;  --r: 3deg;  animation-delay: -1.4s; animation-duration: 7.2s; }
.hv-card-3 { top: 30%;  right: -6%; --r: -2deg; animation-delay: -3s;   animation-duration: 6.8s; }
.hv-card-6 { top: 26%;  left: -6%;  --r: 3deg;  animation-delay: -2.6s; animation-duration: 7s;   }
.hv-card-5 { top: 54%;  left: 0;    --r: -3deg; animation-delay: -4s;   animation-duration: 6.3s; }
.hv-card-4 { top: 56%;  right: 2%;  --r: 4deg;  animation-delay: -2s;   animation-duration: 7.5s; }

@keyframes hv-bob {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes hv-ripple {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: .55; }
    80%  { opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes hv-float {
    0%, 100% { transform: translate3d(0, 0,      0) rotate(var(--r)); }
    50%      { transform: translate3d(0, -10px,  0) rotate(calc(var(--r) + 1.5deg)); }
}

@media (prefers-reduced-motion: reduce) {
    .hv-center { animation: none; }
    .hv-card   { animation: none; }
    .hv-ring   { display: none; }
}

/* Features section - לבן, מתחת ל-hero */
.features-section {
    margin-top: 56px;
    margin-bottom: 56px;
}
.feature-card {
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-lg);
    padding: 28px 24px;
    height: 100%;
    box-shadow: var(--wc-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wc-shadow-h);
    border-color: rgba(37,99,235,.2);
}
.feature-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.feature-icon-blue  { background: #dbeafe; color: #1d4ed8; }
.feature-icon-green { background: #dcfce7; color: #15803d; }
.feature-icon-amber { background: #fef3c7; color: #b45309; }
.feature-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--wc-text);
    letter-spacing: -.01em;
}
.feature-card p {
    color: var(--wc-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 991.98px) {
    .hero { padding: 56px 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-copy { text-align: center; }
    .hero .lead { margin-inline: auto; }
    .hero-search { margin-inline: auto; }
    .hero-cta { justify-content: center; }
    .hero-visual { display: none; }
    .features-section { margin-top: 36px; margin-bottom: 36px; }
    .feature-card { padding: 22px 20px; }
}
@media (max-width: 575.98px) {
    .hero { padding: 44px 0 52px; }
    .hero-search { padding: 5px 5px 5px 16px; }
    .hero-search .btn-primary { padding: .55rem 1.1rem; font-size: .9rem; }
    .hero-cta { gap: 10px; }
    .hero-cta .btn-warning { padding: .65rem 1.3rem; font-size: .95rem; }
    .hero-stats { padding: 12px 6px; }
    .hero-stat-icon { display: none; }
    .hero-stat-num { font-size: 1.3rem; }
    .hero-stat-label { font-size: 11.5px; }
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow);
    background: var(--wc-card-bg);
}

/* קטגוריה */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 22px 12px;
    text-decoration: none;
    color: var(--wc-text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wc-shadow-h);
    border-color: rgba(37,99,235,.35);
    color: var(--wc-primary);
}
.cat-card .icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--wc-primary);
    font-size: 22px;
    margin-bottom: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover .icon {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(37,99,235,.25);
}
.cat-card .name { font-weight: 500; font-size: 14px; text-align: center; }

/* כרטיס מודעה */
.listing-card {
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
    display: flex; flex-direction: column;
    color: inherit;
}
.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wc-shadow-h);
    border-color: rgba(37,99,235,.25);
}
.listing-card .img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: #eef2f7;
    overflow: hidden;
}
.listing-card .img-wrap::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 38%;
    background: linear-gradient(to top, rgba(0,0,0,.12), transparent);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.listing-card:hover .img-wrap::after { opacity: 1; }
.listing-card .img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.listing-card:hover .img-wrap img { transform: scale(1.05); }
.listing-card .badge-featured {
    position: absolute; top: 8px; left: 8px;
    background: var(--wc-accent); color: #fff;
    font-size: 10px; padding: 3px 9px; border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.listing-card .fav-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px;
    background: rgba(255,255,255,.96); border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(15,23,42,.1);
    font-size: 12px;
    transition: color .15s ease, transform .15s ease, background-color .15s ease;
}
.listing-card .fav-btn.active { color: var(--wc-danger); }
.listing-card .fav-btn:hover { color: var(--wc-danger); transform: scale(1.08); }

/* בתצוגת רשת - listing-card הוא flex-column: img למעלה, body באמצע, price למטה */
.listing-card:not(.is-list) {
    display: flex;
    flex-direction: column;
}
.listing-card:not(.is-list) .body { flex: 1; }
.listing-card:not(.is-list) .price { padding: 0 12px 12px; }

.listing-card .body { padding: 10px 12px 8px; display: flex; flex-direction: column; }
.listing-card .title {
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 4px;
    color: var(--wc-text);
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}
.listing-card .price {
    font-weight: 700;
    color: var(--wc-primary);
    font-size: 15.5px;
    letter-spacing: -.01em;
}
.listing-card .meta {
    font-size: 11px;
    color: var(--wc-muted);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.listing-card .meta i { color: var(--wc-muted-2); }

/* ===== List view variant - תצוגת רשימה מקצועית (Yad2-style) ===== */
/* מבנה: [תמונה ימין, גובה מלא] [גוף - title+meta, מרכזי] [מחיר שמאל, מרכזי].
   גובה כרטיס קבוע 132px (כמו ב-Yad2), בלי רווחים מיותרים. */
.listing-card.is-list {
    display: flex;
    flex-direction: row;             /* RTL: img-wrap (1st) בימין, price (3rd) בשמאל */
    align-items: stretch;            /* כל עמודה מקבלת גובה מלא של הכרטיס */
    gap: 14px;
    padding: 10px;
    height: 132px;                   /* גובה קבוע - מבטיח לוק אחיד */
    min-height: 132px;
    border-radius: 12px;
    border: 1px solid var(--wc-border, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
    background: #fff;
}
.listing-card.is-list:hover {
    transform: none;
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .12);
}

/* תמונה - גובה מלא של הכרטיס, רוחב קבוע */
.listing-card.is-list .img-wrap {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: auto;              /* גובה נשלט ע"י הכרטיס, לא ע"י יחס תמונה */
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.listing-card.is-list .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.listing-card.is-list .img-wrap::after { display: none; }
.listing-card.is-list .badge-featured { top: 6px; right: auto; left: 6px; font-size: 10px; padding: 2px 7px; }
/* כפתור לב - בפינה הימנית-עליונה של התמונה (קצה הקלף), הפוך מ-badge "מומלץ" שבפינה השמאלית */
.listing-card.is-list .fav-btn { top: 6px; right: 6px; left: auto; width: 28px; height: 28px; font-size: 12px; }

/* גוף - title + meta, יישור לימין (RTL), מרכזי אנכית */
.listing-card.is-list .body {
    flex: 1;
    padding: 4px 6px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: start;
}
.listing-card.is-list .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    min-height: 0;
    margin-bottom: 0;
    color: var(--wc-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.listing-card.is-list .meta {
    font-size: 13px;
    gap: 14px;
    margin: 0;
    color: var(--wc-muted, #6b7280);
    flex-wrap: nowrap;
    overflow: hidden;
}
.listing-card.is-list .meta i { color: var(--wc-muted-2, #94a3b8); margin-inline-end: 3px; }
.listing-card.is-list .meta span { white-space: nowrap; }

/* מחיר - עמודה שמאלית, מרכזית אנכית, גדול ומודגש */
.listing-card.is-list .price {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 14px 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--wc-text);
    letter-spacing: -.02em;
    direction: ltr;
    white-space: nowrap;
    text-align: start;
    border-inline-start: 1px solid var(--wc-border-2, #f1f5f9); /* קו עדין מפריד עמודה */
    min-width: 130px;
}

/* === מובייל: CSS Grid - תמונה ימין בגובה מלא, body למעלה-שמאל, price למטה-שמאל === */
@media (max-width: 575.98px) {
    .listing-card.is-list {
        display: grid;
        /* ב-RTL הקולונה הראשונה (start) נמצאת בימין. רוצים image בימין → image ראשון. */
        grid-template-columns: 120px 1fr;       /* image | body */
        /* גובה קבוע לשורות - body יקבל מקום בדיוק ל-2 שורות כותרת + מטא,
           price יקבל מקום קבוע. בלי קשר לאורך הכותרת, הכרטיס באותו גובה. */
        grid-template-rows: 1fr 36px;
        grid-template-areas:
            "image body"
            "image price";
        height: 130px;
        min-height: 130px;
        padding: 10px;
        gap: 4px 12px;
        border-radius: 12px;
    }
    .listing-card.is-list .img-wrap {
        grid-area: image;
        width: 120px;
        height: 110px;                          /* גובה תמונה קבוע: 130 - 2×10 padding */
        flex: none;
        border-radius: 10px;
    }
    .listing-card.is-list .body {
        grid-area: body;
        padding: 0;
        gap: 4px;
        justify-content: flex-start;
        min-width: 0;
        overflow: hidden;                       /* מבטיח שתוכן שלא נכנס נחתך, לא נמתח */
    }
    .listing-card.is-list .title {
        font-size: 14.5px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        font-weight: 700;
        /* גובה מובטח של 2 שורות - גם אם הכותרת בשורה אחת, השטח שמור */
        min-height: calc(1.3em * 2);
    }
    .listing-card.is-list .meta {
        font-size: 11.5px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .listing-card.is-list .meta i { font-size: 10px; }
    .listing-card.is-list .price {
        grid-area: price;
        font-size: 17px;
        font-weight: 800;
        padding: 6px 2px 0;
        min-width: 0;
        border-inline-start: 0;
        border-top: 1px solid var(--wc-border-2, #f1f5f9);
        margin-top: 0;
        text-align: start;
        line-height: 1;
    }
}

/* ===== Toggle buttons - תצוגה רשת/רשימה ===== */
.view-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.view-toggle a {
    padding: 7px 14px;
    color: var(--wc-muted, #6b7280);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: background .15s ease, color .15s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle a:hover { background: #f3f4f6; color: var(--wc-text); }
.view-toggle a.active {
    background: var(--wc-primary, #2563eb);
    color: #fff;
}

/* ===== Forms ===== */
.form-label { font-weight: 500; color: var(--wc-text-2); margin-bottom: .35rem; }
.form-control, .form-select {
    border-radius: 10px;
    padding: .6rem .9rem;
    border-color: var(--wc-border);
    background-color: #fff;
    color: var(--wc-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--wc-muted-2); }
.form-control:focus, .form-select:focus {
    border-color: var(--wc-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* OTP */
.otp-input {
    width: 48px; height: 56px;
    text-align: center; font-size: 22px;
    border: 2px solid var(--wc-border); border-radius: 12px;
    margin: 0 4px;
    font-weight: 600;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.otp-input:focus { outline: none; border-color: var(--wc-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.15); transform: translateY(-1px); }

/* ===== Password strength meter ===== */
.pw-strength { margin-top: 6px; }
.pw-strength-bar {
    height: 6px;
    background: var(--wc-border);
    border-radius: 3px;
    overflow: hidden;
}
.pw-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    transition: width .2s ease, background-color .2s ease;
    background: #dc3545;
}
.pw-strength[data-level="2"] .pw-strength-bar span { background: #fd7e14; }
.pw-strength[data-level="3"] .pw-strength-bar span { background: #ffc107; }
.pw-strength[data-level="4"] .pw-strength-bar span { background: #198754; }
.pw-strength-label { margin-top: 2px; }

/* ===== wcConfirm modal (replaces native confirm()) ===== */
.wc-confirm-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.wc-confirm-backdrop.open { opacity: 1; }
.wc-confirm-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px -15px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
    width: 100%; max-width: 440px;
    padding: 28px 24px 22px;
    text-align: center;
    transform: scale(.96) translateY(8px);
    transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.wc-confirm-backdrop.open .wc-confirm-modal { transform: scale(1) translateY(0); }

.wc-confirm-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}
.wc-confirm-danger  .wc-confirm-icon { background: #fee2e2; color: #b91c1c; }
.wc-confirm-warning .wc-confirm-icon { background: #fef3c7; color: #b45309; }
.wc-confirm-success .wc-confirm-icon { background: #dcfce7; color: #15803d; }
.wc-confirm-primary .wc-confirm-icon { background: #dbeafe; color: #1d4ed8; }

.wc-confirm-title {
    font-size: 19px; font-weight: 700;
    color: var(--wc-text, #0f172a);
    margin: 0 0 8px;
}
.wc-confirm-message {
    font-size: 14.5px; line-height: 1.6;
    color: var(--wc-muted, #475569);
    margin: 0 0 22px;
    white-space: pre-wrap;
}
.wc-confirm-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.wc-confirm-actions .btn {
    min-width: 110px;
    padding: 9px 18px;
    border-radius: 10px;
}
.wc-confirm-cancel { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.wc-confirm-cancel:hover { background: #e2e8f0; color: #1e293b; }

@media (max-width: 480px) {
    .wc-confirm-modal { padding: 22px 18px 18px; max-width: 95vw; }
    .wc-confirm-icon { width: 56px; height: 56px; font-size: 24px; }
    .wc-confirm-title { font-size: 17px; }
    .wc-confirm-actions .btn { flex: 1; min-width: 0; }
}

/* ===== HTML legend for Chart.js (admin dashboard) ===== */
.chart-html-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    font-size: 13px;
    color: var(--wc-muted, #64748b);
}
.chl-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chl-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
}
.chl-dot-outline {
    background: transparent !important;
    border: 2px solid;
}

/* ===== FAQ accordion (promote-listing) ===== */
.faq-section {
    max-width: 820px;
    margin-inline: auto;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.08);
}
.faq-item[open] {
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 6px 20px -10px rgba(37,99,235,.25);
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    color: var(--wc-text, #0f172a);
    user-select: none;
    transition: background .12s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }
.faq-item > summary:hover {
    background: #f8fafc;
}
.faq-q {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    line-height: 1.4;
}
.faq-icon {
    color: var(--wc-muted, #94a3b8);
    font-size: 14px;
    transition: transform .25s cubic-bezier(.16,1,.3,1), color .15s ease;
    flex-shrink: 0;
}
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: var(--wc-primary, #2563eb);
}
.faq-a {
    padding: 0 20px 18px;
    color: var(--wc-muted, #475569);
    font-size: 14.5px;
    line-height: 1.7;
    border-top: 1px dashed var(--wc-border, #e5e7eb);
    padding-top: 14px;
    margin-top: 0;
}
.faq-a p {
    margin-bottom: 10px;
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong {
    color: var(--wc-text, #0f172a);
    font-weight: 700;
}

@media (max-width: 576px) {
    .faq-item > summary { padding: 14px 16px; }
    .faq-q { font-size: 14.5px; }
    .faq-a { padding: 12px 16px 16px; font-size: 14px; }
}

/* ===== Promotion credits banner (my-listings) ===== */
.credits-banner {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
    border: 1px solid #bbf7d0;
}
.credits-list { display: flex; flex-direction: column; gap: 10px; }

/* כרטיס קבוצה - אחד לכל סוג חבילה */
.credit-group {
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    display: flex; flex-direction: column; gap: 8px;
}
.credit-group-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.credit-pkg-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    flex-shrink: 0;
}
.credit-pkg-name { font-weight: 700; color: var(--wc-text); font-size: 15px; }
.credit-count-badge {
    background: #1d4ed8;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    line-height: 1.4;
}

.credit-totals {
    font-size: 13.5px;
    color: var(--wc-text, #0f172a);
    background: #f8fafc;
    border-radius: 8px;
    padding: 7px 10px;
}
.credit-totals-label {
    font-weight: 600; color: var(--wc-muted, #475569);
    margin-inline-end: 4px;
}
.credit-totals strong { font-weight: 700; }

.credit-stats {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    font-size: 13px; color: var(--wc-muted, #4b5563);
}
.credit-stats-label {
    font-size: 12.5px; color: var(--wc-muted, #6b7280);
    margin-inline-end: 4px;
}
.credit-stat i {
    color: var(--wc-primary, #2563eb);
    margin-inline-end: 4px;
}
.credit-stat strong {
    color: var(--wc-text); font-weight: 700;
}

.credit-breakdown {
    border-top: 1px dashed var(--wc-border, #e5e7eb);
    padding-top: 6px;
    font-size: 13px;
}
.credit-breakdown summary {
    cursor: pointer; color: var(--wc-primary, #2563eb);
    font-weight: 600; padding: 4px 2px;
    list-style: revert;
}
.credit-breakdown summary:hover { text-decoration: underline; }
.credit-breakdown-list {
    list-style: none; padding: 6px 0 2px; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.credit-breakdown-list li {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 4px 6px; border-radius: 6px; background: #fafbff;
    font-size: 12.5px; color: var(--wc-muted, #475569);
}
.credit-breakdown-list .cb-date { font-weight: 600; color: var(--wc-text); }
.credit-breakdown-list .cb-source { font-style: italic; }
.credit-breakdown-list .cb-next {
    margin-inline-start: auto;
    font-size: 11.5px; font-weight: 700;
    color: #15803d; background: #dcfce7;
    padding: 1px 8px; border-radius: 999px;
}

.credit-apply-form {
    display: flex; gap: 8px; align-items: center;
    border-top: 1px solid var(--wc-border, #e5e7eb);
    padding-top: 10px; margin-top: 2px;
}
.credit-apply-form select { flex: 1; min-width: 0; }

/* ===== Sidebar (filters) ===== */
.filter-sidebar {
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 20px;
    box-shadow: var(--wc-shadow-xs);
}

/* ===== Active-filter chips ===== */
.active-filters { padding: 4px 0; }
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wc-primary-50, #eff6ff);
    color: var(--wc-primary-d, #1d4ed8);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--wc-primary-100, #dbeafe);
    transition: background-color .12s ease, color .12s ease;
}
.active-filter-chip:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
.active-filter-chip i { font-size: 10px; opacity: .8; }

/* ===== City autocomplete dropdown (filter sidebar) ===== */
.city-suggest-dropdown {
    position: absolute;
    inset-inline: 0;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 1100;
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(2,6,23,.18);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.city-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    text-align: start;
    font-size: 13px;
    cursor: pointer;
}
.city-suggest-item:hover { background: var(--wc-primary-50, #eff6ff); }

/* ===== Mobile: סינון מתקפל ===== */
@media (max-width: 991.98px) {
    #filterSidebar { display: none; }
    #filterSidebar.is-open { display: block; margin-bottom: 16px; }
}

/* ===== Listing single (gallery) ===== */
.gallery-main {
    position: relative;
    background: #f1f5f9;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: var(--wc-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    max-height: 480px;
    box-shadow: var(--wc-shadow);
    isolation: isolate;
}
@media (max-width: 575.98px) {
    .gallery-main { aspect-ratio: 4/3; max-height: none; }
}

/* ===== Search results - עסקים תואמים ===== */
.biz-results {
    margin-bottom: 26px;
}
.biz-results-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wc-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.biz-results-title i { color: var(--wc-primary, #2563eb); font-size: 14px; }
.biz-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.biz-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.biz-result-card:hover {
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .12);
    transform: translateY(-1px);
}
.brc-logo {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: #f3f4f6;
}
.brc-logo-initials {
    background: linear-gradient(135deg, var(--wc-primary, #2563eb), var(--wc-primary-d, #1d4ed8));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.brc-body { flex: 1; min-width: 0; }
.brc-name {
    font-weight: 700;
    color: var(--wc-text);
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brc-sub {
    font-size: 12px;
    color: var(--wc-muted, #6b7280);
    margin-top: 3px;
}
.brc-sub i { font-size: 10px; margin-inline-end: 3px; }
.brc-arrow {
    color: var(--wc-muted-2, #94a3b8);
    font-size: 13px;
    transition: transform .15s ease, color .15s ease;
}
.biz-result-card:hover .brc-arrow {
    color: var(--wc-primary, #2563eb);
    transform: translateX(-3px);
}

/* ===== Share card - שיתוף מודעה ===== */
.share-card {
    padding: 18px 20px;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 14px;
}
.share-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wc-text, #0f172a);
}
.share-header i {
    color: var(--wc-primary, #2563eb);
    font-size: 14px;
}
.share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    background: #fff;
    color: var(--wc-text);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    line-height: 1;
}
.share-btn i {
    font-size: 15px;
    width: 16px;
    text-align: center;
}
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(2,6,23,.15);
}
.share-btn:active { transform: translateY(0); }

.share-whatsapp { background: #25d366; color: #fff; }
.share-whatsapp:hover { background: #1ebe5d; color: #fff; }

.share-facebook { background: #1877f2; color: #fff; }
.share-facebook:hover { background: #166fe0; color: #fff; }

.share-x { background: #0f0f0f; color: #fff; }
.share-x:hover { background: #000; color: #fff; }

.share-telegram { background: #229ed9; color: #fff; }
.share-telegram:hover { background: #1d8cc4; color: #fff; }

.share-copy {
    background: #fff;
    color: var(--wc-muted, #6b7280);
    border-color: #d1d5db;
}
.share-copy:hover {
    background: #f3f4f6;
    color: var(--wc-text);
    border-color: #9ca3af;
}
.share-copy.is-copied {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

@media (max-width: 575.98px) {
    .share-card { padding: 14px 12px; }
    .share-buttons { gap: 6px; }
    .share-btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== Listing specs grid - פרטי המודעה (שטוח, בלי מסגרות, סגנון Yad2) ===== */
.listing-specs {
    margin: 18px 0 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.listing-specs-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--wc-text, #0f172a);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.listing-specs-title i {
    color: var(--wc-primary, #2563eb);
    font-size: 13px;
}
.listing-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--wc-border-2);
}
.spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--wc-border-2);
    min-width: 0;
}
/* קו אנכי דק בין שתי העמודות (בצד ההתחלה של העמודה השמאלית) */
.spec-item:nth-child(even) {
    border-inline-start: 1px solid var(--wc-border-2);
    padding-inline-start: 14px;
}
.spec-item:nth-child(odd) {
    padding-inline-end: 14px;
}
/* השורה האחרונה - בלי קו תחתון, סיום נקי */
.spec-item:last-child { border-bottom: 0; }
.spec-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
/* אייקון: רק האייקון בעצמו, בלי בועה צבעונית */
.spec-icon {
    flex: 0 0 auto;
    width: auto; height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--wc-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.spec-body { min-width: 0; flex: 1; }
.spec-label {
    font-size: 12px;
    color: var(--wc-muted, #6b7280);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 3px;
}
.spec-value {
    font-size: 14.5px;
    color: var(--wc-text, #0f172a);
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .listing-specs-grid { grid-template-columns: 1fr; }
    .spec-item:nth-child(even) { border-inline-start: 0; padding-inline-start: 4px; }
    .spec-item:nth-child(odd)  { padding-inline-end: 4px; }
}

/* ===== Seller card (listing sidebar) ===== */
.seller-card {
    padding: 22px;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    /* Sticky עם המשתמש בדסקטופ - מתכווץ עם scroll פנימי אם תוכן ארוך מהמסך */
    position: -webkit-sticky;
    position: sticky;
    top: 160px;  /* navbar 68px + category-strip 44px + רווח 48px */
    z-index: 10;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    /* scrollbar עדין */
    scrollbar-width: thin;
}
.seller-card::-webkit-scrollbar { width: 6px; }
.seller-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .seller-card {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }
}
.seller-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.seller-avatar {
    position: relative;
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: visible;
}
.seller-avatar > img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.10);
    display: block;
}
.seller-avatar-initials {
    background: linear-gradient(135deg, var(--wc-primary, #2563eb), var(--wc-primary-d, #1d4ed8));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.30);
}
.seller-presence {
    position: absolute;
    bottom: 2px;
    inset-inline-end: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #16a34a;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 0 rgba(22,163,74,.6);
    animation: seller-pulse 1.8s ease-out infinite;
}
@keyframes seller-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22,163,74,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0);  }
    100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);  }
}
.seller-info { flex: 1; min-width: 0; }
.seller-name {
    font-weight: 700;
    color: var(--wc-text);
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 4px;
}
.seller-name a { color: inherit; text-decoration: none; }
.seller-name a:hover { color: var(--wc-primary, #2563eb); }
.seller-publisher {
    font-size: 13px;
    color: var(--wc-muted, #6b7280);
    margin: 2px 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.seller-publisher i { color: var(--wc-muted-2, #94a3b8); font-size: 11px; }
.seller-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.seller-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--wc-muted, #6b7280);
}
.seller-meta i { font-size: 10px; }
.seller-dot { color: #cbd5e1; }
.seller-online {
    color: #16a34a;
    font-weight: 600;
}
.seller-online i { color: #16a34a; font-size: 8px; }
.seller-offline {
    color: var(--wc-muted, #6b7280);
}
.seller-offline i { color: #cbd5e1; font-size: 8px; }
.seller-bizlink {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--wc-primary, #2563eb);
    text-decoration: none;
    font-weight: 600;
}
.seller-bizlink:hover { text-decoration: underline; }
.seller-bizlink i { font-size: 10px; margin-inline-start: 2px; }
.seller-divider {
    margin: 16px -6px;
    border: 0;
    border-top: 1px solid var(--wc-border, #e5e7eb);
    opacity: 1;
}

/* ===== כפתור "חזור" במובייל בכותרת - לא בשימוש יותר, נשאר כדי לא לשבור קבצים שייתכן ועדיין מפנים אליו ===== */
.nav-back-btn {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 0;
    background: #fff;
    color: var(--wc-primary-d, #1d4ed8);
    border: 0;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    margin-inline-end: 8px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.nav-back-btn:hover, .nav-back-btn:focus {
    background: #fff;
    color: var(--wc-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.nav-back-btn:active { transform: translateX(2px); }
/* RTL: החץ צריך להצביע ימינה (חזרה) - כבר כך עם fa-arrow-right ב-RTL */

/* ===== Widget עסקאות נדל"ן (Yad2-style) ===== */
.nadlan-widget {
    background: #fff;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.nadlan-head {
    padding: 18px 20px 14px;
    background: linear-gradient(180deg, #fff7ed, #ffffff);
    border-bottom: 1px solid #fed7aa;
}
.nadlan-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #9a3412;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nadlan-title > i { color: #ea580c; }
.nadlan-sub { font-size: 13.5px; color: var(--wc-text); font-weight: 500; }
.nadlan-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--wc-muted, #6b7280);
}
.nadlan-empty > i { color: #cbd5e1; }
.nadlan-table {
    margin: 0;
    font-size: 14px;
}
.nadlan-table thead th {
    background: #f8fafc;
    color: var(--wc-muted, #6b7280);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: none;
    border-bottom: 1px solid var(--wc-border, #e5e7eb);
    padding: 10px 12px;
}
.nadlan-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--wc-border-2, #f1f5f9);
    color: var(--wc-text);
}
.nadlan-table tbody tr:last-child td { border-bottom: 0; }
.nadlan-table tbody tr:hover { background: #fef3c7; }
.nadlan-footer-note {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid var(--wc-border-2, #f1f5f9);
    font-size: 12.5px;
    color: var(--wc-muted, #6b7280);
    text-align: center;
}
@media (max-width: 575.98px) {
    .nadlan-table { font-size: 12.5px; }
    .nadlan-table thead th, .nadlan-table tbody td { padding: 8px 6px; }
}

/* Badge רישיון מתווך - חובה לפי חוק המתווכים במקרקעין (עיצוב עדין, "מאומת" בלי לצרוח) */
.realtor-license-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 12px;
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--wc-text);
    box-shadow: none;
}
.realtor-license-badge > i {
    color: var(--wc-accent);
    font-size: 13px;
}
.realtor-license-badge span {
    font-weight: 600;
    color: var(--wc-text-2);
    letter-spacing: 0;
}
.realtor-license-badge code {
    background: var(--wc-bg);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    color: var(--wc-text);
    border: 0;
    font-variant-numeric: tabular-nums;
    margin-inline-start: 2px;
    letter-spacing: .4px;
}

/* מצב "ללא תמונות" - קומפקטי וברנדד, מחליף את הריבוע השחור הגדול */
.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 38px 20px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--wc-radius-lg);
    color: var(--wc-muted, #6b7280);
    text-align: center;
    min-height: 180px;
}
.gallery-empty .ge-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--wc-primary, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 16px rgba(15,23,42,.08);
    border: 1px solid #e2e8f0;
}
.gallery-empty .ge-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-text, #0f172a);
}
/* רקע מטושטש בוטל - הוחלף במילוי נקי בסגנון יד 2 */
.gallery-bg {
    display: none;
}
.gallery-fg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity .2s ease;
    user-select: none;
}

/* Prev/Next nav buttons */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: opacity .2s ease, background-color .15s ease, transform .15s ease;
    backdrop-filter: blur(6px);
}
.gallery-main:hover .gallery-nav,
.gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover {
    background: rgba(15, 23, 42, .8);
    transform: translateY(-50%) scale(1.06);
}
.gallery-prev { inset-inline-start: 12px; }   /* בצד ההתחלה (ימין ב-RTL) */
.gallery-next { inset-inline-end:   12px; }   /* בצד הסיום (שמאל ב-RTL) */

/* Counter "5 / 10" */
.gallery-counter {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Thumbnails - שורה אופקית עם scroll, ללא wrap */
.gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--wc-border) transparent;
}
.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--wc-border); border-radius: 3px; }

.gallery-thumbs img {
    width: 96px; height: 72px;
    flex: 0 0 96px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .7;
    transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
    user-select: none;
}
.gallery-thumbs img:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumbs img.active {
    border-color: var(--wc-primary);
    opacity: 1;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
}

@media (max-width: 575.98px) {
    .gallery-main { aspect-ratio: 4/3; }
    .gallery-nav { width: 38px; height: 38px; font-size: 15px; opacity: .9; }
    .gallery-thumbs img { width: 78px; height: 60px; flex-basis: 78px; }
}

/* ===== User account pages - בלי מסגרת חיצונית במובייל ===== */
@media (max-width: 767.98px) {
    body.page-profile               .container > .row > [class*="col-"] > .card.p-4,
    body.page-favorites             .container > .row > [class*="col-"] > .card.p-4,
    body.page-notification-settings .container > .row > [class*="col-"] > .card.p-4,
    body.page-sessions              .container > .row > [class*="col-"] > .card.p-4,
    body.page-tickets               .container > .row > [class*="col-"] > .card.p-4,
    body.page-login                 .container > .row > [class*="col-"] > .card.p-4,
    body.page-register              .container > .row > [class*="col-"] > .card.p-4 {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 14px 4px !important;
    }

    /* תמיכה - הפוטר רק מסיח דעת בעמוד שירות. מסתירים במובייל. */
    body.page-tickets .site-footer { display: none; }
}

/* ===== Notifications page - עיצוב נקי ===== */
.notif-shell { padding: 22px 26px; }
.notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--wc-border-2);
}
.notif-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wc-text);
    letter-spacing: -.01em;
}
.notif-title i { color: var(--wc-primary); font-size: 18px; }
.notif-count { font-size: 14px; font-weight: 500; color: var(--wc-muted); }
.notif-markall-btn { font-weight: 600; }

.notif-empty {
    text-align: center;
    padding: 48px 24px 32px;
    color: var(--wc-muted);
}
.notif-empty-art {
    width: 88px; height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--wc-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-muted-2);
    font-size: 34px;
}
.notif-empty-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--wc-text);
    margin: 0 0 6px;
}
.notif-empty-text {
    font-size: 14px;
    color: var(--wc-muted);
    line-height: 1.55;
}

.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 4px;
    border-bottom: 1px solid var(--wc-border-2);
    transition: background-color .12s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.is-unread { background: linear-gradient(90deg, var(--wc-primary-50) 0%, transparent 60%); }
.notif-item:not(.is-unread) .notif-item-title { font-weight: 600; }

.notif-icon {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--wc-primary-50);
    color: var(--wc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.notif-icon.text-success { background: #dcfce7; color: #15803d; }
.notif-icon.text-danger  { background: #fee2e2; color: #b91c1c; }
.notif-icon.text-primary { background: var(--wc-primary-50); color: var(--wc-primary-d); }
.notif-icon.text-muted-2 { background: #f1f5f9; color: var(--wc-muted); }

.notif-body { flex: 1; min-width: 0; }
.notif-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.notif-item-title {
    font-weight: 800;
    font-size: 15px;
    color: var(--wc-text);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.notif-new-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wc-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.notif-time {
    font-size: 12.5px;
    color: var(--wc-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.notif-message {
    color: var(--wc-muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin-top: 4px;
    white-space: pre-line;
}
.notif-markone { margin-top: 6px; }
.notif-markone .btn-link {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.notif-markone .btn-link:hover { text-decoration: underline; }

.notif-footer-note {
    font-size: 12px;
    color: var(--wc-muted-2);
    text-align: center;
    margin-top: 18px;
    opacity: .8;
}

/* מובייל - בלי מסגרת חיצונית, edge-to-edge בתוך הקונטיינר */
@media (max-width: 767.98px) {
    body.page-notifications .notif-shell {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 14px 4px 22px !important;
    }
    body.page-notifications .notif-head {
        padding: 0 8px 12px;
    }
    body.page-notifications .notif-title { font-size: 18px; }
    body.page-notifications .notif-markall-btn {
        font-size: 12.5px;
        padding: 6px 10px;
    }
    body.page-notifications .notif-list { padding: 0 8px; }
    body.page-notifications .notif-item { padding: 14px 0; gap: 12px; }
    body.page-notifications .notif-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
    body.page-notifications .notif-item-title { font-size: 14.5px; }
    body.page-notifications .notif-message { font-size: 13px; }
}

/* ===== Listing page - מובייל בסגנון Yad2 ===== */
@media (max-width: 991.98px) {
    /* מקום לסרגל ה-CTA הדביק בתחתית - רק כשהוא קיים (לא בעלי מודעה / מודעות לא-פעילות) */
    body.page-listing:has(.listing-sticky-cta) { padding-bottom: 122px; }
    body.page-listing main { padding-bottom: 12px; }

    /* הסתרת כרטיס המוכר במלואו במובייל - פרטי המפרסם כבר מופיעים בסרגל הדביק */
    body.page-listing:has(.listing-sticky-cta) .seller-card { display: none; }

    /* פרטי המוכר בסרגל הדביק - לחיצים רק אם זה עסק עם פרופיל עסקי */
    body.page-listing:has(.listing-sticky-cta) .lsc-seller:not(.lsc-seller-link) {
        pointer-events: none;
        cursor: default;
    }
    body.page-listing:has(.listing-sticky-cta) .lsc-seller:not(.lsc-seller-link) .lsc-seller-chev {
        display: none;
    }

    /* breadcrumb לא מוסיף ערך במובייל - אזור עליון יקר */
    body.page-listing > main > .container > nav.small { display: none; }
    body.page-listing > main > .container { padding-top: 0; padding-bottom: 16px; }

    /* גלריה edge-to-edge - שובר את ה-container, בלי מסגרת כרטיס */
    body.page-listing .col-lg-8 > .card:first-of-type {
        width: 100vw;
        margin-inline-start: calc(50% - 50vw);
        margin-top: 0;
        margin-bottom: 14px;
        padding: 0 !important;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    body.page-listing .gallery-main {
        border-radius: 0;
        aspect-ratio: 4/3;
        max-height: 62vh;
        box-shadow: none;
    }
    body.page-listing .gallery-thumbs { display: none; }
    body.page-listing .gallery-counter {
        bottom: 14px;
        inset-inline-end: 14px;
        background: rgba(15,23,42,.72);
        font-size: 12px;
        padding: 5px 11px;
    }
    body.page-listing .gallery-nav { opacity: 1; background: rgba(15,23,42,.5); }

    /* כרטיסי תוכן - מסגרת מוסרת, תצוגה שטוחה ישירות על הרקע */
    body.page-listing .col-lg-8 > .card.p-4,
    body.page-listing .col-lg-8 > .card.share-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 4px !important;
        margin-bottom: 6px;
    }
    body.page-listing .container .card .h3 { font-size: 1.3rem; }
    body.page-listing .container .card .text-primary { font-size: 1.7rem; }
}

/* ===== כפתורים צפים על גלריה (שיתוף + מועדפים) - מובייל בלבד, בסגנון Yad2 ===== */
.gallery-floating-actions {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}
.gfa-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: var(--wc-text);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(15,23,42,.28);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform .12s ease, background-color .15s ease;
}
.gfa-btn:hover  { background: #fff; }
.gfa-btn:active { transform: scale(.94); }
.gfa-fav.is-active i { color: var(--wc-danger); }
.gfa-fav.is-active   { background: #fff; }

/* ===== Blocked users page - מבנה דומה לצ'אט (header + רשימה) ===== */
.bu-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.bu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wc-border-2);
    background: var(--wc-card-bg);
    flex-shrink: 0;
}
.bu-title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--wc-text);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.01em;
}
.bu-title i { font-size: 14px; }
.bu-back-desktop { flex-shrink: 0; }

.bu-intro {
    padding: 14px 18px 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--wc-muted);
    flex-shrink: 0;
}

.blocked-users-list {
    list-style: none;
    padding: 0 16px;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.blocked-user-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wc-border-2);
}
.blocked-user-item:last-child { border-bottom: 0; }
.bu-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--wc-border);
    flex-shrink: 0;
}
.bu-info { flex: 1; min-width: 0; }
.bu-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--wc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bu-meta {
    font-size: 12.5px;
    color: var(--wc-muted);
    margin-top: 2px;
}
.bu-unblock { flex-shrink: 0; font-weight: 600; }
.bu-unblock.is-loading { opacity: .6; pointer-events: none; }

/* Empty state - דומה ל-chat-threads-empty */
.bu-empty {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--wc-muted);
}
.bu-empty-art {
    width: 96px; height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-success);
    font-size: 38px;
    box-shadow: 0 12px 32px rgba(22,163,74,.18);
}
.bu-empty-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--wc-text);
    margin: 0 0 6px;
}
.bu-empty-text {
    font-size: 13.5px;
    color: var(--wc-muted);
    line-height: 1.55;
    max-width: 280px;
    margin: 0 auto;
}

/* בדסקטופ - כרטיס רגיל עם מסגרת, padding נוח */
@media (min-width: 992px) {
    .bu-shell {
        border: 1px solid var(--wc-border);
        border-radius: var(--wc-radius-lg);
        background: var(--wc-card-bg);
        box-shadow: var(--wc-shadow);
        overflow: hidden;
    }
    .bu-head .chat-exit { display: none; }
}

/* ===== קישור דיווח דיסקרטי במובייל (חלופה לכפתור שהיה בכרטיס המוכר) ===== */
.listing-report-mobile {
    text-align: center;
    padding: 10px 0 4px;
    font-size: 13px;
}
.listing-report-mobile a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wc-muted);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}
.listing-report-mobile a:hover,
.listing-report-mobile a:focus { color: var(--wc-danger); background: #fef2f2; }
.listing-report-mobile a i { font-size: 11px; }

/* ===== Sticky bottom CTA bar (Yad2-style) - 2 שורות: מוכר + פעולות ===== */
.listing-sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: rgba(255,255,255,.98);
    border-top: 1px solid var(--wc-border);
    box-shadow: 0 -10px 28px rgba(15,23,42,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* שורה 1 - קישור לכרטיס המוכר המלא */
.lsc-seller {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--wc-text);
    text-decoration: none;
    border-bottom: 1px solid var(--wc-border-2);
    transition: background-color .15s ease;
    min-height: 50px;
}
.lsc-seller:hover, .lsc-seller:active { background: var(--wc-primary-50); color: var(--wc-text); }

.lsc-seller-avatar {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--wc-primary-50);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lsc-seller-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.lsc-seller-avatar-initials {
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-d));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.lsc-seller-presence {
    position: absolute;
    bottom: -1px;
    inset-inline-end: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--wc-success);
    border: 2px solid #fff;
}

.lsc-seller-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lsc-seller-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lsc-seller-biz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: var(--wc-primary-50);
    color: var(--wc-primary-d);
    border-radius: 5px;
    font-size: 9px;
    flex-shrink: 0;
}
.lsc-seller-meta {
    font-size: 11.5px;
    color: var(--wc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsc-seller-online {
    color: var(--wc-success);
    font-weight: 600;
}
.lsc-seller-online i {
    font-size: 7px;
    margin-inline-end: 3px;
    vertical-align: middle;
}
.lsc-seller-chev {
    color: var(--wc-muted-2);
    font-size: 11px;
    flex-shrink: 0;
}

/* גרסה לחיצה (עסקים) - רמז ויזואלי שיש פרופיל ללחוץ עליו */
.lsc-seller-link { cursor: pointer; }
.lsc-seller-link .lsc-seller-chev {
    color: var(--wc-primary);
    font-size: 12px;
    transition: transform .15s ease;
}
.lsc-seller-link:hover .lsc-seller-chev,
.lsc-seller-link:active .lsc-seller-chev {
    transform: translateX(-3px); /* RTL: התקדמות שמאלה */
}
.lsc-seller-link .lsc-seller-link-hint {
    color: var(--wc-primary-d);
    font-weight: 600;
}

/* שורה 2 - כפתורי פעולה */
.lsc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.lsc-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, border-color .15s ease;
    line-height: 1;
    padding: 0 12px;
    white-space: nowrap;
}
.lsc-btn:active { transform: scale(.98); }
.lsc-btn i { font-size: 15px; }

/* כפתור מועדפים - אייקון בלבד, מעוצב פחות בולט */
.lsc-fav {
    flex: 0 0 44px;
    width: 44px;
    background: #fff;
    color: var(--wc-text);
    border-color: var(--wc-border);
    padding: 0;
}
.lsc-fav.is-active { color: var(--wc-danger); border-color: var(--wc-danger); background: #fef2f2; }

/* הודעה - משני */
.lsc-message {
    background: var(--wc-primary-50);
    color: var(--wc-primary-d);
    border-color: var(--wc-primary-50);
}
.lsc-message:hover { background: #e0eaff; color: var(--wc-primary-d); }

/* טלפון - ראשי, ירוק (פעולה הכי "המרה") */
.lsc-phone {
    background: var(--wc-success);
    color: #fff;
    flex: 1.7;
}
.lsc-phone:hover { background: #15803d; color: #fff; }
.lsc-phone.is-disabled,
.lsc-phone[disabled] {
    background: #e2e8f0;
    color: var(--wc-muted);
    cursor: not-allowed;
}

/* ===== PDF Viewer (privacy/terms) ===== */
.pdf-viewer-wrap {
    background: #f3f4f6;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.pdf-viewer {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 480px;
    border: 0;
}
@media (max-width: 575.98px) {
    .pdf-viewer { height: 75vh; min-height: 400px; }
}

/* ===== Gallery Lightbox (fullscreen) ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
    animation: lightbox-fade .18s ease-out;
    touch-action: pan-y;
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    cursor: default;
    animation: lightbox-img-in .2s ease-out;
}
@keyframes lightbox-img-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background-color .15s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }

.lightbox-close {
    top: 16px;
    inset-inline-end: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 20px;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 22px;
}
.lightbox-nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-prev { inset-inline-start: 20px; }
.lightbox-next { inset-inline-end:   20px; }

.lightbox-counter {
    position: absolute;
    top: 20px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

@media (max-width: 575.98px) {
    .lightbox { padding: 50px 12px; }
    .lightbox-nav { width: 42px; height: 42px; font-size: 18px; }
    .lightbox-prev { inset-inline-start: 8px; }
    .lightbox-next { inset-inline-end:   8px; }
    .lightbox-close { width: 40px; height: 40px; font-size: 18px; top: 12px; inset-inline-end: 12px; }
    .lightbox-counter { top: 14px; font-size: 12px; padding: 4px 10px; }
}

/* ===== Avatars ===== */
.avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wc-border); }
.avatar-md { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wc-border); box-shadow: var(--wc-shadow-xs); }

/* אווטר עם ראשי תיבות - כשלמשתמש אין תמונת פרופיל */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-d));
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37,99,235,.25);
    line-height: 1;
}
.avatar-sm.avatar-initials { font-size: 16px; }
.avatar-md.avatar-initials { font-size: 26px; }

/* ===== Avatar upload (profile) ===== */
.avatar-upload {
    position: relative;
    display: inline-block;
    width: 96px;
    height: 96px;
    cursor: pointer;
    flex-shrink: 0;
}
.avatar-upload img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15,23,42,.12);
    transition: transform .15s ease, filter .15s ease;
}
.avatar-upload:hover img { filter: brightness(.92); transform: scale(1.02); }
.avatar-upload-overlay {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
    transition: background-color .15s ease, transform .15s ease;
}
.avatar-upload:hover .avatar-upload-overlay {
    background: var(--wc-primary-d);
    transform: scale(1.06);
}

/* ===== Drag & drop ===== */
.dropzone {
    border: 2px dashed var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 36px 20px;
    text-align: center;
    color: var(--wc-muted);
    cursor: pointer;
    background: #fcfcfd;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dropzone:hover, .dropzone.drag {
    border-color: var(--wc-primary);
    background: var(--wc-primary-50);
    color: var(--wc-primary);
}

/* ===== Brand picker (יצרני רכב) ===== */
.brand-picker { margin-top: 6px; }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
    gap: 10px;
}
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px 10px;
    background: #fff;
    border: 2px solid var(--wc-border, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s ease;
    min-height: 92px;
}
.brand-card:hover {
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 4px 14px rgba(37,99,235,.12);
    transform: translateY(-1px);
}
.brand-card.is-active {
    border-color: var(--wc-primary, #2563eb);
    background: var(--wc-primary-50, #eff6ff);
    box-shadow: 0 4px 14px rgba(37,99,235,.18);
}
.brand-logo {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    position: relative;
}
.brand-logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: grayscale(.1);
    transition: filter .15s ease;
}
.brand-card:hover .brand-logo img,
.brand-card.is-active .brand-logo img { filter: grayscale(0); }
.brand-logo i { font-size: 18px; color: var(--wc-muted, #6b7280); }

/* Fallback letter badge - מוצג רק כשאין img או שה-img נכשל */
.brand-logo-text {
    display: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.02em;
    align-items: center;
    justify-content: center;
    direction: ltr;
}
/* אין img → תמיד מציגים את ה-text */
.brand-logo.has-no-img .brand-logo-text { display: inline-flex; }
/* יש img שנכשל → מסתיר את ה-img ומציג את ה-text */
.brand-logo img[data-failed] { display: none; }
.brand-logo img[data-failed] ~ .brand-logo-text { display: inline-flex; }
.brand-card:hover .brand-logo-text,
.brand-card.is-active .brand-logo-text {
    box-shadow: 0 4px 10px rgba(37,99,235,.35);
}
.brand-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wc-text);
    text-align: center;
    line-height: 1.2;
}
.brand-other { background: linear-gradient(180deg, #fff, #f9fafb); }
.brand-other-input { margin-top: 10px; }

@media (max-width: 575.98px) {
    .brand-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
    .brand-card { padding: 10px 4px 8px; min-height: 80px; }
    .brand-logo { width: 32px; height: 32px; }
    .brand-logo-text { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
    .brand-name { font-size: 11px; }
}

/* ===== Wizard - Create listing (professional layout) ===== */
.wizard-card {
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 40px -10px rgba(15, 23, 42, .08);
    overflow: hidden;
}
.wizard-head {
    padding: 32px 36px 22px;
    background: linear-gradient(180deg, #ffffff, #fafbff);
    border-bottom: 1px solid var(--wc-border-2, #f1f5f9);
}
.wizard-head h1 { letter-spacing: -.01em; font-size: 26px; }
.wizard-head h1 i { margin-inline-end: 8px; }
.wizard-head p { font-size: 15px; margin-top: 6px; }
.wizard-body {
    padding: 32px 36px 36px;
}

/* ===== Mobile-first progress indicator (פס התקדמות פשוט) ===== */
.wizard-progress-mobile {
    display: none;
    padding: 14px 18px 16px;
    background: #fafbff;
    border-bottom: 1px solid var(--wc-border-2, #f1f5f9);
}
.wizard-progress-mobile .wpm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 15px;
}
.wizard-progress-mobile .wpm-step { font-weight: 700; color: var(--wc-primary-d, #1d4ed8); }
.wizard-progress-mobile .wpm-name { font-weight: 600; color: var(--wc-text); }
.wizard-progress-mobile .wpm-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.wizard-progress-mobile .wpm-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wc-primary, #2563eb), #60a5fa);
    border-radius: 999px;
    transition: width .25s ease;
}
@media (max-width: 767.98px) {
    .wizard-progress-mobile { display: block; }
}

/* ===== Stepper ===== */
.wizard-stepper {
    list-style: none;
    margin: 0;
    padding: 22px 32px 20px;
    background: #fafbff;
    border-bottom: 1px solid var(--wc-border-2, #f1f5f9);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
}
.ws-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    text-align: center;
    cursor: default;
    color: var(--wc-muted, #6b7280);
    font-size: 14px;
    line-height: 1.25;
    padding: 4px 8px;
}
.ws-step + .ws-step::before {
    content: '';
    position: absolute;
    top: 18px;
    height: 2px;
    background: var(--wc-border, #e5e7eb);
    inset-inline-end: 50%;
    inset-inline-start: -50%;
    z-index: 0;
}
.ws-circle {
    position: relative;
    z-index: 1;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--wc-border, #e5e7eb);
    color: var(--wc-muted, #6b7280);
    font-weight: 700;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.ws-label { font-weight: 600; color: var(--wc-text); font-size: 14px; }
.ws-label small { display: none; }

.ws-step.is-completed { cursor: pointer; }
.ws-step.is-completed .ws-circle {
    background: var(--wc-success, #16a34a);
    border-color: var(--wc-success, #16a34a);
    color: transparent;
    font-size: 0;
}
.ws-step.is-completed .ws-circle::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: #fff;
}
.ws-step.is-completed .ws-circle > * { display: none; }
.ws-step.is-completed + .ws-step::before { background: var(--wc-success, #16a34a); }

.ws-step.is-current .ws-circle {
    background: var(--wc-primary, #2563eb);
    border-color: var(--wc-primary, #2563eb);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(37,99,235,.18);
}
.ws-step.is-current .ws-label { color: var(--wc-primary-d, #1d4ed8); font-weight: 700; }
.ws-step + .ws-step::before { top: 22px; }

@media (max-width: 767.98px) {
    /* בנייד מסתירים את ה-stepper המלא - מציגים בפס התקדמות פשוט מעליו */
    .wizard-stepper { display: none; }
}

/* ===== Step header ===== */
.step-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--wc-border-2, #f1f5f9);
}
.step-header h2 { letter-spacing: -.01em; color: var(--wc-text); font-size: 22px; }
.step-header p { color: var(--wc-muted, #6b7280); font-size: 14.5px; margin-bottom: 0; }

/* ===== Category picker (כרטיסים + drill-down) ===== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 116px;
    padding: 20px 12px;
    background: #fff;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cat-card:hover {
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .12);
    transform: translateY(-2px);
}
.cat-card-ico {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--wc-primary-50, #eff6ff);
    color: var(--wc-primary, #2563eb);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    transition: background .15s ease, color .15s ease;
}
.cat-card:hover .cat-card-ico { background: var(--wc-primary, #2563eb); color: #fff; }
/* וריאנט תמונה: תמונת קטגוריה מקצועית במקום אייקון */
.cat-card-ico--img {
    width: 60px; height: 60px;
    background: var(--wc-primary-50, #eff6ff);
    overflow: hidden;
    padding: 0;
}
.cat-card-ico--img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.cat-card:hover .cat-card-ico--img { background: var(--wc-primary-50, #eff6ff); }
.cat-card:hover .cat-card-ico--img img { transform: scale(1.06); }
.cat-card-name { font-weight: 600; font-size: 14px; color: var(--wc-text); line-height: 1.25; }
.cat-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 4px 0; margin-bottom: 14px;
    color: var(--wc-primary, #2563eb); font-weight: 600; font-size: 14px; cursor: pointer;
}
.cat-back:hover { color: var(--wc-primary-d, #1d4ed8); }
.cat-sub-title { font-weight: 700; font-size: 17px; color: var(--wc-text); margin-bottom: 14px; }
.cat-selected {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--wc-primary-50, #eff6ff);
    border: 1px solid #c7d7ff;
    border-radius: 12px;
}
.cat-selected-label { color: var(--wc-muted, #64748b); font-size: 14px; }
.cat-selected-name { font-weight: 700; color: var(--wc-primary-d, #1d4ed8); font-size: 15px; }
.cat-change { margin-inline-start: auto; padding: 0; font-weight: 600; }
/* ===== Mobile create-listing wizard - סגנון Yad2: edge-to-edge, חוויה רגועה ונעימה ===== */
@media (max-width: 991.98px) {
    /* בעת פרסום במובייל - הפוטר רק מסיח דעת. מסתירים אותו עד שמסיימים. */
    body.page-create-listing .site-footer { display: none; }
}
@media (max-width: 767.98px) {
    /* בלי מסגרת כרטיס חיצונית - הכל יושב על רקע הדף, בלי שכבה מיותרת */
    .wizard-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .wizard-head {
        padding: 18px 16px 10px;
        background: transparent;
        border-bottom: 0;
        text-align: center;
    }
    .wizard-head h1 { font-size: 20px; margin-bottom: 4px; }
    .wizard-head p   { font-size: 13.5px; margin-top: 0; }

    .wizard-progress-mobile {
        padding: 6px 16px 14px;
        background: transparent;
        border-bottom: 0;
    }
    .wizard-progress-mobile .wpm-row { font-size: 12.5px; margin-bottom: 6px; }
    .wizard-progress-mobile .wpm-bar { height: 6px; }

    .wizard-body { padding: 4px 16px 22px; }

    /* כותרת השלב - ממורכזת, בלי קו תחתון, נראית כמו שאלה ידידותית */
    .step-header {
        text-align: center;
        margin-bottom: 22px;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .step-header h2 { font-size: 19px; margin-bottom: 6px; }
    .step-header p  { font-size: 13.5px; }

    /* כרטיסי קטגוריה - גדולים, מרווחים, עם נשימה כמו ב-Yad2 */
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cat-card {
        min-height: 138px;
        padding: 22px 14px 18px;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
        gap: 12px;
    }
    .cat-card:hover,
    .cat-card:active {
        box-shadow: 0 6px 18px rgba(37,99,235,.18);
    }
    .cat-card-ico {
        width: 64px; height: 64px;
        font-size: 28px;
        border-radius: 16px;
    }
    .cat-card-ico--img { width: 72px; height: 72px; }
    .cat-card-name { font-size: 15px; font-weight: 700; }

    /* כפתור חזרה לקטגוריות - קצת יותר נעים */
    .cat-back {
        font-size: 13.5px;
        margin-bottom: 16px;
    }
    .cat-sub-title { font-size: 16px; margin-bottom: 16px; text-align: center; }

    /* כרטיס הקטגוריה הנבחרת - מותאם לפלאט */
    .cat-selected {
        padding: 12px 14px;
        border-radius: 12px;
    }
}

/* מסכים זעירים (פחות מ-360px) - וריאנט קומפקטי בעיקר לאייקון */
@media (max-width: 359.98px) {
    .cat-card { min-height: 120px; padding: 18px 10px 14px; }
    .cat-card-ico { width: 54px; height: 54px; font-size: 24px; }
    .cat-card-name { font-size: 14px; }
}

/* ===== Form fields inside wizard - מותאם לאנשים מבוגרים ===== */
.wizard-body .form-label.fw-semibold {
    color: var(--wc-text);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.wizard-body .form-control,
.wizard-body .form-select {
    border-color: var(--wc-border, #e5e7eb);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wizard-body .form-control:hover,
.wizard-body .form-select:hover { border-color: #cbd5e1; }
.wizard-body .form-control:focus,
.wizard-body .form-select:focus {
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.wizard-body .form-control-lg,
.wizard-body .form-select-lg {
    font-size: 16.5px;
    padding: .8rem 1.1rem;
    border-radius: 10px;
}
.wizard-body .form-control,
.wizard-body .form-select {
    font-size: 16px;
}
.wizard-body .form-text {
    margin-top: 8px;
    color: var(--wc-muted, #6b7280);
    font-size: 13.5px;
}
.counter-text {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    color: var(--wc-muted-2, #94a3b8);
    font-weight: 500;
}

/* ===== Tip box ===== */
.step-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-inline-start: 3px solid #f59e0b;
    border-radius: 10px;
    padding: 11px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.55;
}
.step-tip > i { color: #d97706; font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.step-tip strong { color: #713f12; }

/* ===== Empty attrs state ===== */
.empty-attrs {
    text-align: center;
    padding: 32px 16px;
    border: 1px dashed var(--wc-border, #e5e7eb);
    border-radius: 12px;
    background: #f9fafb;
    color: var(--wc-muted, #6b7280);
}

/* ===== Price input + presets ===== */
.price-input-wrap { position: relative; }
.price-input-wrap .price-currency {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wc-muted, #6b7280);
    font-weight: 600;
    pointer-events: none;
}
.price-input-wrap input { padding-inline-end: 36px; }

.price-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.price-preset {
    background: #f3f4f6;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wc-text);
    cursor: pointer;
    transition: all .15s ease;
}
.price-preset:hover {
    background: var(--wc-primary-50, #eff6ff);
    border-color: var(--wc-primary, #2563eb);
    color: var(--wc-primary-d, #1d4ed8);
}

/* ===== Price-type / Condition pill grid - מותאם לאנשים מבוגרים ===== */
.price-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.price-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    min-height: 60px;
    border-radius: 14px;
    border: 2px solid var(--wc-border, #e5e7eb);
    background: #fff;
    color: var(--wc-text);
    cursor: pointer;
    font-weight: 600;
    font-size: 15.5px;
    text-align: center;
    transition: all .15s ease;
}
.price-type-pill i { color: var(--wc-muted, #6b7280); font-size: 18px; }
.btn-check:checked + .price-type-pill {
    background: var(--wc-primary-50, #eff6ff);
    border-color: var(--wc-primary, #2563eb);
    color: var(--wc-primary-d, #1d4ed8);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.btn-check:checked + .price-type-pill i { color: var(--wc-primary-d, #1d4ed8); }

/* ===== Review card ===== */
.review-card {
    background: linear-gradient(180deg, #f0f9ff, #ffffff);
    border: 1px solid #bae6fd;
    border-radius: 14px;
    padding: 20px 22px;
    margin-top: 16px;
}
.review-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #075985;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}
.review-head i { color: #0284c7; }
.review-list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    font-size: 15px;
}
.review-list > div { min-width: 0; }
.review-list dt {
    font-weight: 500;
    color: var(--wc-muted, #6b7280);
    font-size: 13px;
    margin-bottom: 3px;
}
.review-list dd {
    margin: 0;
    color: var(--wc-text);
    font-weight: 600;
    word-break: break-word;
}
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .review-list { grid-template-columns: 1fr; }
    .wizard-head, .wizard-body { padding-inline: 18px; }
    .wizard-body { padding-block: 22px; }
}

/* ===== Wizard navigation buttons - בולטים יותר ===== */
.wizard-body [data-step] > .d-flex:last-child {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--wc-border-2, #f1f5f9);
}
.wizard-body .btn-lg {
    padding: .85rem 1.8rem;
    font-size: 16.5px;
    font-weight: 700;
    border-radius: 12px;
    min-height: 52px;
}
.wizard-body [data-next],
.wizard-body button[type="submit"] {
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.wizard-body button[type="submit"] {
    box-shadow: 0 2px 8px rgba(22, 163, 74, .25);
}
.wizard-body [data-prev] {
    color: var(--wc-muted, #6b7280);
}
.wizard-body .btn-primary,
.wizard-body .btn-success {
    box-shadow: 0 2px 6px rgba(37, 99, 235, .18);
}
.wizard-body .btn-success { box-shadow: 0 2px 6px rgba(22, 163, 74, .2); }
.wizard-body .btn-outline-secondary { color: var(--wc-muted, #6b7280); border-color: var(--wc-border, #e5e7eb); }
.wizard-body .btn-outline-secondary:hover { background: #f9fafb; color: var(--wc-text); border-color: #cbd5e1; }
.image-preview { position: relative; }
.image-preview img { border-radius: var(--wc-radius-sm); border: 1px solid var(--wc-border); }
.image-preview .remove {
    position: absolute; top: -8px; left: -8px;
    background: var(--wc-danger); color: #fff; border: 0; border-radius: 50%;
    width: 24px; height: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 6px rgba(220,38,38,.4);
}

/* ===== Alerts ===== */
.alert {
    border-radius: var(--wc-radius);
    border: 1px solid transparent;
    padding: .9rem 1.1rem;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #854d0e; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ===== Badges ===== */
.badge { font-weight: 600; padding: .35em .6em; border-radius: 6px; }

/* ===== Skeleton ===== */
.skeleton {
    background: linear-gradient(90deg, #eef0f4 25%, #f7f8fb 50%, #eef0f4 75%);
    background-size: 200% 100%;
    animation: skl 1.4s infinite;
    border-radius: 8px;
}
@keyframes skl { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ===== Admin ===== */
.admin-wrap { min-height: 100vh; background: #f3f4f7; }

/* Mobile topbar */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #0f172a, #1e293b);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.admin-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
}
.admin-topbar-brand img { height: 28px; }
.admin-topbar .btn-outline-light { border-color: rgba(255,255,255,.3); color: #fff; }

.admin-sidebar {
    background: linear-gradient(180deg, #0f172a, #1e293b);
    color: #cbd5e1;
    padding: 14px 0;
    border-left: 1px solid #0b1220;
}
/* גלילה עצמאית במחשב בלבד (≥ 992px). במובייל Bootstrap.offcanvas-lg מנהל
   position:fixed לבדו - אסור לדרוס. */
@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.15) transparent;
    }
    .admin-sidebar::-webkit-scrollbar { width: 6px; }
    .admin-sidebar::-webkit-scrollbar-track { background: transparent; }
    .admin-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 3px;
    }
    .admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
}

/* Offcanvas overrides for mobile sidebar */
.admin-sidebar.offcanvas-lg {
    background: linear-gradient(180deg, #0f172a, #1e293b);
    color: #cbd5e1;
}
@media (max-width: 991.98px) {
    .admin-sidebar.offcanvas-lg { width: 280px; padding: 0; }
    .admin-sidebar .offcanvas-header { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
}
.admin-sidebar h6 {
    color: #fff;
    padding: 14px 20px 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ===== כותרת קבוצה בתפריט הניהול ===== */
.admin-menu-group {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 14px 20px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.admin-menu-group:first-of-type {
    border-top: 0;
    margin-top: 0;
}

/* ===== Admin menu search ===== */
.admin-search {
    position: relative;
    margin: 6px 14px 10px;
}
.admin-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}
.admin-search-input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px 8px 34px;
    font-size: 13.5px;
    font-family: inherit;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.admin-search-input::placeholder { color: #64748b; }
.admin-search-input:focus {
    outline: 0;
    background: rgba(255,255,255,.1);
    border-color: var(--wc-accent);
    box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.admin-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
}
.admin-menu-empty {
    padding: 14px 18px;
    color: #94a3b8;
    text-align: center;
    font-size: 13px;
}
.admin-menu-empty i { font-size: 22px; margin-bottom: 6px; display: block; }
.admin-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-right: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.admin-sidebar a i { width: 18px; text-align: center; color: #94a3b8; transition: color .15s ease; }
.admin-sidebar a:hover {
    background: rgba(255,255,255,.04);
    color: #fff;
}
.admin-sidebar a:hover i { color: #fff; }
.admin-sidebar a.active {
    background: rgba(245,158,11,.08);
    color: #fff;
    border-right-color: var(--wc-accent);
}
.admin-sidebar a.active i { color: var(--wc-accent); }

.admin-content { padding: 28px; }
.admin-content h1, .admin-content h2 { letter-spacing: -.02em; }

/* ===== Admin header (desktop topbar עם משתמש מחובר) ===== */
.admin-header {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: var(--wc-shadow-xs);
}
.admin-header-greet { line-height: 1.2; }
.admin-header-hello {
    font-size: 12.5px;
    color: var(--wc-muted);
    font-weight: 500;
}
.admin-header-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--wc-text);
    letter-spacing: -.01em;
    margin-top: 2px;
}
.admin-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.admin-header-user:hover {
    background: #f3f5fa;
    border-color: var(--wc-border-2);
}
.admin-header-user[aria-expanded="true"] {
    background: var(--wc-primary-50);
    border-color: rgba(37,99,235,.2);
}
.admin-header-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wc-border-2);
}
.admin-header-info { text-align: end; line-height: 1.2; }
.admin-header-info-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--wc-text);
}
.admin-header-info-role {
    font-size: 11.5px;
    color: var(--wc-muted);
    margin-top: 2px;
}
.admin-header-user i { color: var(--wc-muted); transition: transform .15s ease; }
.admin-header-user[aria-expanded="true"] i { transform: rotate(180deg); color: var(--wc-primary); }

/* ===== Dashboard range selector ===== */
.dashboard-range {
    display: inline-flex;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: 50px;
    padding: 4px;
    box-shadow: var(--wc-shadow-xs);
}
.dashboard-range a {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-muted);
    border-radius: 50px;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.dashboard-range a:hover { color: var(--wc-text); }
.dashboard-range a.active {
    background: var(--wc-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

.stat-card {
    background: #fff;
    border-radius: var(--wc-radius);
    padding: 20px;
    box-shadow: var(--wc-shadow);
    border: 1px solid var(--wc-border-2);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute; inset: 0 auto auto 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--wc-primary), var(--wc-primary-l));
}
.stat-card .value {
    font-size: 30px;
    font-weight: 700;
    color: var(--wc-text);
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 6px;
}
.stat-card .label { color: var(--wc-muted); font-size: 13px; font-weight: 500; }
.stat-card .icon-wrap {
    position: absolute;
    top: 14px; left: 14px;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--wc-primary-50);
    color: var(--wc-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}

/* טבלאות אדמין */
.table {
    --bs-table-bg: #fff;
    border-collapse: separate;
    border-spacing: 0;
}
.table > :not(caption) > * > * { padding: .85rem 1rem; vertical-align: middle; }
.table > thead {
    background: #f8fafc;
    color: var(--wc-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.table > thead th { font-weight: 600; border-bottom: 1px solid var(--wc-border); }
.table > tbody > tr { border-bottom: 1px solid var(--wc-border-2); }
.table > tbody > tr:hover { background: #fafbfd; }

/* ===== Footer ===== */
.site-footer {
    background:
        radial-gradient(900px 280px at 80% -10%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(700px 220px at 10% 110%, rgba(245,158,11,.10), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    color: #cbd5e1;
    padding: 56px 0 0;
    margin-top: 80px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.site-footer .footer-logo {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
}

/* ===== SEO intro text (כמו יד2) ===== */
.site-footer .footer-seo {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-footer .footer-seo-title {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 12px;
}
.site-footer .footer-seo-text {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.9;
    margin: 0;
    max-width: 1000px;
}
@media (max-width: 575.98px) {
    .site-footer .footer-seo { margin-bottom: 28px; padding-bottom: 24px; }
    .site-footer .footer-seo-title { font-size: 15.5px; }
    .site-footer .footer-seo-text { font-size: 13px; line-height: 1.8; }
}

.site-footer .footer-tagline {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 320px;
}

.site-footer .footer-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 8px;
}
.site-footer .footer-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 28px; height: 2px;
    border-radius: 2px;
    background: var(--wc-primary-l);
}

.site-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer .footer-links li { margin-bottom: 8px; }
.site-footer .footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    transition: color .15s ease, transform .15s ease, padding .15s ease;
    display: inline-block;
}
.site-footer .footer-links a:hover {
    color: #fff;
    padding-inline-start: 4px;
}

.site-footer .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer .footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
}
.site-footer .footer-contact i {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: var(--wc-primary-l);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.site-footer .footer-contact a {
    color: #cbd5e1;
    text-decoration: none;
    word-break: break-all;
}
.site-footer .footer-contact a:hover { color: #fff; }

.site-footer .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.site-footer .footer-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.site-footer .footer-social a:hover {
    background: var(--wc-primary);
    color: #fff;
    transform: translateY(-2px);
}

.site-footer .footer-bottom {
    margin-top: 40px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #64748b;
}
.site-footer .footer-bottom-links {
    display: flex;
    gap: 10px;
    align-items: center;
}
.site-footer .footer-bottom-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s ease;
}
.site-footer .footer-bottom-links a:hover { color: #fff; }
.site-footer .footer-bottom-links span { color: #475569; }

@media (max-width: 575.98px) {
    .site-footer { padding: 40px 0 0; margin-top: 48px; }
    .site-footer .footer-bottom { text-align: center; justify-content: center; }
}

/* ===== About page (אודות) ===== */
.page-about main { padding-top: 0 !important; }

.about-hero {
    background:
        radial-gradient(900px 360px at 85% -10%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(700px 280px at 5% 110%, rgba(245,158,11,.12), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    color: #e2e8f0;
    padding: 56px 0 64px;
    text-align: center;
}
.about-breadcrumb {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; color: #94a3b8; margin-bottom: 22px;
}
.about-breadcrumb a { color: #94a3b8; }
.about-breadcrumb a:hover { color: #fff; }
.about-breadcrumb i { font-size: 11px; }
.about-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -.02em;
}
.about-hero-lead {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 600; color: var(--wc-primary-l); margin-bottom: 16px;
}
.about-hero-sub {
    max-width: 760px; margin: 0 auto 28px; color: #cbd5e1;
    font-size: 15.5px; line-height: 1.85;
}
.about-hero-actions {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.about-stats {
    margin-top: -40px; margin-bottom: 8px; position: relative; z-index: 2;
}
.about-stat-card {
    background: #fff; border: 1px solid #eef2f7; border-radius: 18px;
    padding: 26px 18px; text-align: center; height: 100%;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.about-stat-icon {
    font-size: 26px; color: var(--wc-primary);
    background: var(--wc-primary-50); width: 56px; height: 56px;
    border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.about-stat-num {
    font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800;
    color: #0f172a; line-height: 1;
}
.about-stat-label { color: #64748b; font-size: 14px; margin-top: 6px; }

.about-section { padding: 56px 0; }
.about-section-alt { background: #f8fafc; }
.about-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--wc-primary); background: var(--wc-primary-50);
    padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.about-h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800;
    color: #0f172a; margin-bottom: 14px; letter-spacing: -.02em;
}
.about-p { color: #475569; font-size: 15.5px; line-height: 1.9; margin-bottom: 16px; }

.about-mission-card {
    background: #fff; border: 1px solid #eef2f7; border-radius: 20px;
    padding: 28px; box-shadow: 0 12px 30px rgba(15,23,42,.06);
    display: flex; flex-direction: column; gap: 22px;
}
.about-mission-item { display: flex; gap: 16px; align-items: flex-start; }
.about-mission-item i {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    background: var(--wc-primary-50); color: var(--wc-primary);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.about-mission-item h3 { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.about-mission-item p { font-size: 14.5px; color: #64748b; margin: 0; line-height: 1.7; }

.about-feature-card {
    background: #fff; border: 1px solid #eef2f7; border-radius: 18px;
    padding: 28px 24px; height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-feature-card:hover {
    transform: translateY(-4px); border-color: #dbe6fb;
    box-shadow: 0 16px 36px rgba(37,99,235,.12);
}
.about-feature-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-l));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 16px;
}
.about-feature-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.about-feature-text { font-size: 14.5px; color: #64748b; line-height: 1.75; margin: 0; }

.about-cat-chip {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    background: #fff; border: 1px solid #eef2f7; border-radius: 14px;
    padding: 16px 14px; height: 100%; color: #0f172a; font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.about-cat-chip:hover {
    transform: translateY(-3px); color: var(--wc-primary);
    border-color: #dbe6fb; box-shadow: 0 10px 24px rgba(37,99,235,.1);
}
.about-cat-chip i { color: var(--wc-primary); font-size: 18px; }

.about-step {
    text-align: center; padding: 12px 16px; position: relative;
}
.about-step-num {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-l));
    color: #fff; font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; box-shadow: 0 8px 20px rgba(37,99,235,.25);
}
.about-step h3 { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.about-step p { font-size: 14.5px; color: #64748b; line-height: 1.75; margin: 0; }

.about-cta { padding: 20px 0 64px; }
.about-cta-card {
    background:
        radial-gradient(700px 300px at 85% -20%, rgba(245,158,11,.18), transparent 60%),
        linear-gradient(135deg, var(--wc-primary-d), var(--wc-primary));
    color: #fff; border-radius: 24px; padding: 48px 28px; text-align: center;
    box-shadow: 0 20px 48px rgba(37,99,235,.28);
}
.about-cta-title { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.about-cta-text {
    max-width: 620px; margin: 0 auto 26px; font-size: 16px;
    line-height: 1.8; color: rgba(255,255,255,.92);
}
.about-cta-actions {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.about-cta-contact {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
}
.about-cta-contact a { color: #fff; font-weight: 600; }
.about-cta-contact a:hover { color: var(--wc-accent); }

@media (max-width: 575.98px) {
    .about-hero { padding: 36px 0 52px; }
    .about-section { padding: 40px 0; }
    .about-cta-card { padding: 36px 20px; }
}

/* ===== App page (אפליקציה) ===== */
.app-hero-badge {
    width: 76px; height: 76px; margin: 0 auto 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-l));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 36px; box-shadow: 0 12px 30px rgba(37,99,235,.4);
}
.app-installed-note {
    margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(34,197,94,.14); color: #bbf7d0;
    border: 1px solid rgba(34,197,94,.3);
    padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.app-installed-note i { color: #4ade80; }

.app-guide-card {
    background: #fff; border: 1px solid #eef2f7; border-radius: 18px;
    padding: 26px 24px; height: 100%;
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.app-guide-card-featured {
    border-color: #dbe6fb;
    box-shadow: 0 16px 38px rgba(37,99,235,.14);
}
.app-guide-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}
.app-guide-head > i {
    flex-shrink: 0; width: 50px; height: 50px; border-radius: 13px;
    background: var(--wc-primary-50); color: var(--wc-primary);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.app-guide-head h3 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; }
.app-guide-head span { font-size: 13px; color: #94a3b8; }
.app-guide-steps { list-style: none; padding: 0; margin: 0; }
.app-guide-steps li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: #475569; line-height: 1.6;
    margin-bottom: 12px;
}
.app-guide-steps li:last-child { margin-bottom: 0; }
.app-guide-steps strong { color: #0f172a; }
.app-guide-steps i { color: var(--wc-primary); }
.app-step-num {
    flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
    border-radius: 50%; background: var(--wc-primary); color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.app-guide-note {
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #f1f5f9;
    font-size: 12.5px; color: #94a3b8; line-height: 1.6;
}

/* ===== Error page (404) ===== */
.error-page {
    padding: 60px 20px;
}
.error-code {
    font-size: clamp(7rem, 18vw, 12rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-l) 70%, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 1rem;
    text-shadow: 0 8px 30px rgba(37,99,235,.15);
}

/* ===== Chat / Messages ===== */
.chat-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: clamp(540px, 75vh, 760px);
    overflow: hidden;
    border-radius: var(--wc-radius);
}
.chat-shell > * { min-width: 0; min-height: 0; }

.chat-threads {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--wc-border-2);
    background: #fafbfd;
    overflow: hidden;
}
.chat-threads-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wc-border-2);
    background: #fff;
    flex-shrink: 0;
}
.chat-threads-list { flex: 1; overflow-y: auto; min-height: 0; }

.chat-thread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--wc-text);
    border-bottom: 1px solid var(--wc-border-2);
    transition: background-color .12s ease;
}
.chat-thread-item:hover { background: #f3f5fa; color: var(--wc-text); }
.chat-thread-item.is-active { background: #fff; border-right: 3px solid var(--wc-primary); }
.chat-thread-item .min-w-0 { min-width: 0; }

.chat-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wc-border-2);
    background: #fff;
    flex-shrink: 0;
}
.chat-back {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f3f5fa;
    color: var(--wc-text-2);
    text-decoration: none;
    flex-shrink: 0;
}
.chat-back:hover { background: var(--wc-primary-50); color: var(--wc-primary); }

/* תפריט פעולות בהדר השיחה (קבאב) */
.chat-head-menu { flex-shrink: 0; }
.chat-head-menu .chm-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--wc-muted);
    border: 0;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.chat-head-menu .chm-btn:hover,
.chat-head-menu .chm-btn[aria-expanded="true"] {
    background: var(--wc-primary-50);
    color: var(--wc-primary);
}
.chat-head-menu .dropdown-item i {
    margin-inline-end: 8px;
    width: 16px;
    text-align: center;
}

/* ===== כרטיס הקשר השיחה - מודעה/החלפה (סגנון Yad2) ===== */
.chat-context {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--wc-card-bg);
    border-bottom: 1px solid var(--wc-border-2);
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    transition: background-color .12s ease;
}
.chat-context:hover,
.chat-context:active {
    background: var(--wc-primary-50);
    color: inherit;
}
.cc-thumb {
    flex: 0 0 52px;
    width: 52px; height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--wc-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wc-border);
}
.cc-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cc-thumb-empty {
    color: var(--wc-muted-2);
    font-size: 20px;
}
.cc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--wc-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-city {
    font-weight: 500;
    color: var(--wc-muted);
}
.cc-price {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wc-primary-d);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cc-cta {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--wc-border);
    color: var(--wc-text-2);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chat-context:hover .cc-cta,
.chat-context:active .cc-cta {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: #fff;
}

/* באנר חסימה - מעל אזור ההודעות כשהמשתמש חסם את הצד השני */
.chat-blocked-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.chat-blocked-banner i { color: #d97706; flex-shrink: 0; }

.chat-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 18px;
    background: linear-gradient(180deg, #fafbfd 0%, #f4f6fb 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-empty {
    text-align: center;
    color: var(--wc-muted);
    padding: 60px 20px;
    margin: auto 0;
}
/* מצב ריק "עשיר" בסגנון נקי - לפאנל השיחה הראשי */
.chat-empty-hero { max-width: 430px; margin-inline: auto; padding: 48px 28px; }
.chat-empty-art {
    width: 96px; height: 96px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--wc-primary-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--wc-primary);
    font-size: 40px;
}
.chat-empty-title { font-size: 19px; font-weight: 700; color: var(--wc-text); margin: 0 0 8px; }
.chat-empty-text { font-size: 14px; line-height: 1.65; color: var(--wc-muted); margin: 0; }
/* מצב ריק לרשימת השיחות (סיידבר) */
.chat-threads-empty { padding: 44px 22px; text-align: center; color: var(--wc-muted); }
.chat-threads-empty > i {
    display: block;
    font-size: 30px;
    color: var(--wc-muted-2);
    margin-bottom: 12px;
}
.chat-threads-empty .fw-semibold { color: var(--wc-text); margin-bottom: 4px; }

.chat-msg { display: flex; }
.chat-msg.is-me   { justify-content: flex-end; }
.chat-msg.is-them { justify-content: flex-start; }

.chat-bubble {
    max-width: 78%;
    padding: 8px 12px 6px;
    border-radius: 16px;
    line-height: 1.45;
    font-size: 14.5px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    word-break: break-word;
}
.is-me  .chat-bubble {
    background: var(--wc-primary);
    color: #fff;
    border-bottom-right-radius: 6px;
}
.is-them .chat-bubble {
    background: #fff;
    color: var(--wc-text);
    border: 1px solid var(--wc-border-2);
    border-bottom-left-radius: 6px;
}
.chat-text { white-space: pre-wrap; }
.chat-time {
    font-size: 10.5px;
    margin-top: 3px;
    opacity: .75;
    text-align: end;
}
.is-me .chat-time { color: rgba(255,255,255,.85); }
.is-them .chat-time { color: var(--wc-muted); }

/* ===== Presence (online/offline) ===== */
.avatar-with-status {
    position: relative;
    flex-shrink: 0;
}
.presence-dot {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    transition: background-color .2s ease;
}
.presence-dot.is-online  { background: #22c55e; box-shadow: 0 0 0 1px rgba(34,197,94,.3), 0 0 8px rgba(34,197,94,.4); }
.presence-dot.is-offline { background: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 0 6px rgba(239,68,68,.35); }

.presence-label {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 50px;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.presence-label.is-online  { background: #dcfce7; color: #15803d; }
.presence-label.is-offline { background: #f1f5f9; color: #64748b; }

/* שורת נראה-לאחרונה מתחת לשם המוכר (סגנון Yad2) */
.chat-presence-line {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
    color: var(--wc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-presence-line.is-online {
    color: var(--wc-success);
    font-weight: 600;
}

.chat-typing-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--wc-primary);
    font-weight: 500;
}
.chat-typing-indicator.is-visible { display: inline-flex; }
.typing-dots {
    display: inline-flex;
    gap: 3px;
}
.typing-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wc-primary);
    opacity: .35;
    animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--wc-border-2);
    background: #fff;
    flex-shrink: 0;
}
.chat-input .form-control {
    border-radius: 22px;
    border-color: var(--wc-border);
    background: #f7f8fb;
}
.chat-input .form-control:focus {
    background: #fff;
}
.chat-input .btn-send {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* Responsive: כאשר נבחרה שיחה, הרשימה מתחבאת במובייל */
@media (max-width: 991.98px) {
    .chat-shell {
        grid-template-columns: 1fr;
        height: calc(100vh - 220px);
        min-height: 480px;
    }
    .chat-threads { border-left: 0; border-bottom: 1px solid var(--wc-border-2); }
    .chat-threads.is-collapsed-mobile { display: none; }
    .chat-pane.is-empty-mobile { display: none; }
}
@media (min-width: 992px) {
    .chat-back { display: none !important; }
}

/* ===== Mobile chat / blocked-users - מסך מלא, חוויית app-like בסגנון Yad2 ===== */
@media (max-width: 991.98px) {
    /* מסתיר את הנאבבר, רצועת הקטגוריות והפוטר - אזור הצ'אט תופס את כל המסך */
    body.page-messages .navbar,
    body.page-messages .mobile-cats-strip,
    body.page-messages .site-footer,
    body.page-blocked-users .navbar,
    body.page-blocked-users .mobile-cats-strip,
    body.page-blocked-users .site-footer { display: none; }

    /* שרשרת flex מלאה מ-body עד chat-shell - בלי calc, בלי הסתמכות על Bootstrap padding/gutters */
    /* משתמשים ב-100svh (small viewport) כדי להבטיח שתיבת הקלט תמיד נראית, גם כשסרגל הכתובת של הדפדפן מוצג. */
    body.page-messages,
    body.page-blocked-users {
        overflow: hidden;
        height: 100vh;
        height: 100svh;
    }
    body.page-messages > main,
    body.page-blocked-users > main {
        height: 100vh;
        height: 100svh;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
    }
    body.page-messages > main > .container,
    body.page-blocked-users > main > .container {
        flex: 1 1 0;
        min-height: 0;
        padding: 0 !important;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    body.page-messages > main > .container > .row,
    body.page-blocked-users > main > .container > .row {
        flex: 1 1 0;
        min-height: 0;
        margin: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        display: flex;
        flex-direction: column;
    }
    body.page-messages > main > .container > .row > [class*="col-"],
    body.page-blocked-users > main > .container > .row > [class*="col-"] {
        flex: 1 1 0;
        min-height: 0;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
    }
    body.page-messages .chat-shell,
    body.page-blocked-users .bu-shell {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        background: var(--wc-card-bg);
    }
    body.page-messages .chat-threads { background: var(--wc-card-bg); }

    /* בר עליון דק עם הלוגו - שומר על נוכחות המותג */
    .chat-topbar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--wc-primary);
        height: calc(52px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }
    .chat-topbar-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .chat-topbar-logo img {
        height: 36px;
        width: auto;
        display: block;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
        transition: transform .15s ease;
    }
    .chat-topbar-logo:hover img { transform: scale(1.04); }

    /* כפתור יציאה מהצ'אט (חזרה לדף הקודם / לבית) */
    .chat-exit {
        width: 36px; height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--wc-bg);
        color: var(--wc-text-2);
        text-decoration: none;
        flex-shrink: 0;
        transition: background-color .12s ease, color .12s ease;
    }
    .chat-exit:hover,
    .chat-exit:active { background: var(--wc-primary-50); color: var(--wc-primary); }

    /* כותרת השיחות - בולטת ונקייה */
    body.page-messages .chat-threads-head {
        padding: 16px 18px;
        background: var(--wc-card-bg);
        border-bottom: 1px solid var(--wc-border-2);
    }
    body.page-messages .chat-threads-head h5 {
        font-size: 18px;
        letter-spacing: -.01em;
    }
    body.page-messages .chat-threads-head h5 > i {
        color: var(--wc-primary);
        margin-inline-end: 4px;
    }
    body.page-messages .chat-threads-head .btn {
        font-size: 13px;
        padding: 7px 14px;
        font-weight: 700;
    }

    /* פריטי שיחה - touch-friendly עם ריווח נוח */
    body.page-messages .chat-thread-item {
        padding: 14px 18px;
        gap: 14px;
        border-bottom: 1px solid var(--wc-border-2);
        align-items: center;
    }
    body.page-messages .chat-thread-item img.avatar-sm {
        width: 48px;
        height: 48px;
    }
    body.page-messages .chat-thread-item .fw-bold {
        font-size: 15px;
        margin-bottom: 2px;
    }
    body.page-messages .chat-thread-item .small {
        font-size: 13px;
        color: var(--wc-muted);
    }
    body.page-messages .chat-thread-item.is-active {
        background: var(--wc-primary-50);
        border-right: 3px solid var(--wc-primary);
    }
    body.page-messages .chat-thread-item .badge {
        min-width: 22px;
        height: 22px;
        font-size: 11px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    /* כותרת השיחה הפעילה - חזקה יותר */
    body.page-messages .chat-head {
        padding: 12px 16px;
        background: var(--wc-card-bg);
    }

    /* גוף השיחה - רקע יותר נקי */
    body.page-messages .chat-body {
        background: var(--wc-bg);
        padding: 16px 14px;
    }

    /* קלט הודעה - דביק לתחתית עם safe-area */
    body.page-messages .chat-input {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }
}

/* ===== Empty state מורחב לרשימת השיחות - סגנון "היי, הכרת את הצ'אט" של Yad2 ===== */
.chat-threads-empty {
    padding: 56px 24px 40px;
    text-align: center;
    color: var(--wc-muted);
}
.chat-threads-empty .cte-art {
    width: 96px; height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wc-primary-50), #e0eaff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-primary);
    font-size: 38px;
    box-shadow: 0 12px 32px rgba(37,99,235,.18);
}
.chat-threads-empty .cte-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--wc-text);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.chat-threads-empty .cte-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--wc-muted);
    margin: 0 0 22px;
    max-width: 320px;
    margin-inline: auto;
}
.chat-threads-empty .cte-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wc-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(37,99,235,.28);
    transition: background-color .15s ease, transform .12s ease;
}
.chat-threads-empty .cte-cta:hover { background: var(--wc-primary-d); color: #fff; transform: translateY(-1px); }
.chat-threads-empty .cte-cta:active { transform: translateY(0); }
.chat-threads-empty .cte-cta i { font-size: 12.5px; }

/* ===== Tickets thread ===== */
.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 65vh;
    min-height: 200px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--wc-border-2);
    border-radius: var(--wc-radius);
    background: #fcfcfd;
    scroll-behavior: smooth;
}
.ticket-thread::-webkit-scrollbar { width: 8px; }
.ticket-thread::-webkit-scrollbar-track { background: transparent; }
.ticket-thread::-webkit-scrollbar-thumb { background: var(--wc-border); border-radius: 8px; }
.ticket-thread::-webkit-scrollbar-thumb:hover { background: var(--wc-muted-2); }
.ticket-msg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ticket-msg-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--wc-primary-50);
    color: var(--wc-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--wc-border);
}
.ticket-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ticket-msg.is-admin .ticket-msg-avatar {
    background: linear-gradient(135deg, var(--wc-primary), var(--wc-primary-l));
    color: #fff;
    border-color: transparent;
}
.ticket-msg-body {
    flex-grow: 1;
    background: #fafbfd;
    border: 1px solid var(--wc-border-2);
    border-radius: 12px;
    padding: 12px 14px;
}
.ticket-msg.is-admin .ticket-msg-body {
    background: var(--wc-primary-50);
    border-color: rgba(37,99,235,.15);
}
.ticket-msg-meta {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--wc-text-2);
}
.ticket-msg-text {
    color: var(--wc-text);
    font-size: 14.5px;
    line-height: 1.7;
    word-break: break-word;
}

/* ===== Promotion packages ===== */
.package-card {
    --pkg-color: var(--wc-primary);
    position: relative;
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-lg);
    overflow: hidden;
    box-shadow: var(--wc-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.package-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wc-shadow-h);
}
.package-card.is-recommended {
    border-color: var(--pkg-color);
    box-shadow: 0 0 0 2px var(--pkg-color), var(--wc-shadow);
}
.package-ribbon {
    position: absolute;
    top: 14px; inset-inline-end: 14px;
    background: #fff;
    color: var(--pkg-color);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.package-head {
    background: var(--pkg-color);
    padding: 22px 22px 18px;
    color: #fff;
}
.package-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
}
.package-body {
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.package-price {
    text-align: end;
    margin-bottom: 14px;
    color: var(--wc-text);
}
.package-price .price-amount {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--wc-text);
}
.package-price .price-currency {
    font-size: 20px;
    color: var(--wc-text-2);
    margin-inline-start: 2px;
}
.package-desc {
    color: var(--wc-muted);
    font-size: 14px;
    margin-bottom: 14px;
}
.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
}
.package-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--wc-text-2);
    border-bottom: 1px dashed var(--wc-border-2);
}
.package-features li:last-child { border-bottom: 0; }
.package-features i {
    color: var(--pkg-color);
    font-size: 14px;
}
.package-card .btn-primary {
    background-color: var(--pkg-color);
    border-color: var(--pkg-color);
    font-weight: 600;
}
.package-card .btn-primary:hover {
    filter: brightness(.92);
}

/* ===== Category sections on homepage ===== */
.category-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.02em;
}
.category-section-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--wc-primary-50);
    color: var(--wc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.category-section + .category-section {
    border-top: 1px dashed var(--wc-border-2);
    padding-top: 28px;
}

/* ===== Articles ===== */
.article-card {
    display: flex;
    flex-direction: column;
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--wc-text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wc-shadow-h);
    border-color: rgba(37,99,235,.25);
    color: var(--wc-text);
}
.article-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--wc-primary);
    font-size: 48px;
}
.article-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.article-card:hover .article-thumb img { transform: scale(1.04); }
.article-body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex-grow: 1; }
.article-meta {
    font-size: 12px;
    color: var(--wc-muted);
    margin-bottom: 8px;
}
.article-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: var(--wc-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-excerpt {
    font-size: 14px;
    color: var(--wc-muted);
    margin-bottom: 12px;
    line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-link {
    color: var(--wc-primary);
    font-weight: 600;
    font-size: 13px;
    margin-top: auto;
}

/* ===== Contact page ===== */
.contact-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--wc-primary-50);
    color: var(--wc-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

/* ===== Content pages (privacy / terms) ===== */
.content-page h1, .content-page h2, .content-page h3, .content-page h4 {
    font-weight: 700; letter-spacing: -.02em;
    margin-top: 1.8rem; margin-bottom: .8rem;
    color: var(--wc-text);
}
.content-page h2 { font-size: 1.5rem; }
.content-page h3 { font-size: 1.2rem; }
.content-page p { margin-bottom: 1rem; color: var(--wc-text-2); }
.content-page ul, .content-page ol { padding-right: 1.5rem; margin-bottom: 1rem; }
.content-page li { margin-bottom: .4rem; color: var(--wc-text-2); }
.content-page a { text-decoration: underline; }
.content-page strong { color: var(--wc-text); }
.content-page hr { border-color: var(--wc-border-2); margin: 1.6rem 0; }

/* ===== Misc ===== */
.min-vh-50 { min-height: 50vh; }
.fz-13 { font-size: 13px; }
.shadow-sm-soft { box-shadow: var(--wc-shadow-xs); }

/* Section headings */
section > .container > h2,
section > .container > .d-flex > h2 { font-weight: 700; letter-spacing: -.02em; }

/* ===== Wizard (create-listing dots) ===== */
[data-dot] { transition: background-color .2s ease; }
[data-dot].bg-primary { background-color: var(--wc-primary) !important; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .admin-content { padding: 16px 14px; }
    .admin-content h1.h3 { font-size: 1.35rem; }
    .stat-card { padding: 16px; }
    .stat-card .value { font-size: 24px; }
    .card.p-4 { padding: 1.1rem !important; }
    .card.p-2 { padding: .5rem !important; }
    .admin-content .nav-pills { flex-wrap: wrap; gap: 4px; }
    .admin-content .nav-pills .nav-link { padding: .35rem .7rem; font-size: 13px; }
}

/* ===== Media library cards ===== */
.media-card {
    background: #fff;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
    box-shadow: var(--wc-shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.media-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wc-shadow);
    border-color: rgba(37,99,235,.25);
}
.media-thumb {
    aspect-ratio: 1/1;
    background: #f3f5fa;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--wc-muted-2);
    font-size: 36px;
}
.media-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.media-info { padding: 10px 12px 6px; flex-grow: 1; }
.media-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--wc-text-2);
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.media-meta {
    font-size: 11px;
    color: var(--wc-muted-2);
    display: flex; gap: 4px;
    margin-top: 2px;
}
.media-actions {
    display: flex;
    gap: 4px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--wc-border-2);
}
.media-actions .btn { padding: .25rem .5rem; font-size: 12px; flex: 1; }

/* ===== Stacked tables on mobile =====
   הוסיפי class="table-stack" וה-td יצטרכו data-label="…" */
@media (max-width: 767.98px) {
    .table-stack { width: 100%; }
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tbody tr {
        border: 1px solid var(--wc-border);
        border-radius: var(--wc-radius);
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: var(--wc-shadow-xs);
    }
    .table-stack td {
        padding: 6px 0 !important;
        border: 0 !important;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--wc-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .05em;
        min-width: 90px;
    }
    .table-stack td[data-label=""]::before { display: none; }
    .table-stack td.actions {
        justify-content: flex-end;
        border-top: 1px dashed var(--wc-border-2) !important;
        margin-top: 6px;
        padding-top: 10px !important;
    }
    .table-stack td.actions::before { display: none; }
}
@media (max-width: 575.98px) {
    .hero { padding: 44px 0 56px; border-radius: 0 0 20px 20px; }
    .otp-input { width: 40px; height: 48px; font-size: 18px; }
    .listing-card .body { padding: 12px 14px 14px; }
    .listing-card .price { font-size: 16px; }
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
    position: fixed;
    bottom: 22px;
    inset-inline-start: 22px;
    inset-inline-end: 22px;
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow:
        0 30px 70px -12px rgba(15, 23, 42, .40),
        0 0 0 1px rgba(15, 23, 42, .04);
    z-index: 1080;
    transform: translateY(140%);
    opacity: 0;
    transition: transform .42s cubic-bezier(.34, 1.32, .64, 1), opacity .25s ease;
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner .cb-icon {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .35);
}
.cookie-banner .cb-body { flex: 1; min-width: 0; }
.cookie-banner .cb-title {
    font-weight: 700;
    font-size: 17px;
    color: #0f172a;
    margin-bottom: 5px;
    letter-spacing: -.01em;
    line-height: 1.3;
}
.cookie-banner .cb-text {
    font-size: 14.5px;
    color: #334155;
    line-height: 1.6;
}
.cookie-banner .cb-text a {
    color: var(--wc-primary, #2563eb);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 600;
    white-space: nowrap;
}
.cookie-banner .cb-text a:hover { color: var(--wc-primary-d, #1d4ed8); }
.cookie-banner .cb-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cookie-banner .cb-accept,
.cookie-banner .cb-essential {
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.cookie-banner .cb-accept {
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}
.cookie-banner .cb-essential {
    color: #475569;
    border-color: #cbd5e1;
    background: #fff;
}
.cookie-banner .cb-essential:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
}

@media (max-width: 575.98px) {
    .cookie-banner {
        flex-wrap: wrap;
        bottom: 12px;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        padding: 14px 16px;
        gap: 12px;
    }
    .cookie-banner .cb-icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 18px; }
    .cookie-banner .cb-body { flex: 1 1 calc(100% - 60px); }
    .cookie-banner .cb-actions {
        width: 100%;
        justify-content: space-between;
        padding-top: 4px;
        border-top: 1px solid #f1f5f9;
    }
    .cookie-banner .cb-accept,
    .cookie-banner .cb-essential { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner { transition: opacity .2s ease; transform: none; }
}

/* ===== Live traffic widget - אדמין דשבורד ===== */
.live-traffic {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(16,185,129,.08);
}
.live-traffic .lt-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.live-traffic .lt-label {
    font-weight: 700;
    font-size: 15px;
    color: #065f46;
}
.live-traffic .lt-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.live-traffic .lt-center {
    text-align: center;
    padding: 0 16px;
    border-inline-start: 1px solid #d1fae5;
    border-inline-end:   1px solid #d1fae5;
}
.live-traffic .lt-number {
    font-size: 32px;
    font-weight: 800;
    color: #047857;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.live-traffic .lt-unit {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.live-traffic .lt-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.live-traffic .lt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}
.live-traffic .lt-row i { width: 16px; text-align: center; }

/* נקודה פועמת */
.lt-pulse {
    position: relative;
    display: inline-block;
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.lt-pulse > span {
    position: absolute;
    inset: 0;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}
.lt-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #10b981;
    opacity: .55;
    animation: lt-ripple 1.6s ease-out infinite;
}
@keyframes lt-ripple {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(2.6); opacity: 0;   }
}
@media (max-width: 767.98px) {
    .live-traffic { flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
    .live-traffic .lt-center {
        border: 0;
        padding: 0;
        text-align: start;
        flex: 1;
    }
    .live-traffic .lt-right { width: 100%; flex: 0 0 100%; padding-top: 10px; border-top: 1px solid #d1fae5; }
    .live-traffic .lt-number { font-size: 24px; }
}

/* ===== Admin action buttons - אייקון + טקסט בדסקטופ, אייקון בלבד במובייל ===== */
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.adm-btn .adm-btn-text {
    font-size: 12.5px;
    font-weight: 500;
}
@media (max-width: 991.98px) {
    .adm-btn .adm-btn-text { display: none; }
    .adm-btn { gap: 0; }
}

/* ===== My-Listings - תצוגת כרטיסים רספונסיבית ===== */
.ml-list { display: flex; flex-direction: column; gap: 12px; }
.ml-card {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--wc-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .15s ease, transform .15s ease;
}
/* כפתור מחיקה צף בפינה התחתונה (bottom-start = ימין ב-RTL) */
.ml-card-del {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    margin: 0;
}
.ml-card-del .btn {
    width: 34px; height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    border-color: rgba(220, 53, 69, .35);
}
.ml-card-del .btn:hover {
    background: #dc3545;
    color: #fff;
}
.ml-card:hover {
    box-shadow: 0 8px 22px rgba(2,6,23,.08);
    transform: translateY(-1px);
}
.ml-card-img {
    flex: 0 0 110px;
    display: block;
    text-decoration: none;
}
.ml-card-img img {
    width: 110px; height: 88px;
    object-fit: cover;
    border-radius: 10px;
    background: #f3f4f6;
}
.ml-card-body { flex: 1; min-width: 0; }
.ml-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
.ml-card-title {
    font-weight: 700;
    color: var(--wc-text);
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1.35;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ml-card-title:hover { color: var(--wc-primary, #2563eb); }
.ml-card-meta {
    color: var(--wc-muted, #6b7280);
    font-size: 13px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ml-card-price { color: var(--wc-text); font-weight: 700; }
.ml-card-dot { color: #cbd5e1; }
.ml-card-promo {
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    color: #92400e;
    font-size: 12.5px;
    font-weight: 500;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ml-card-promo i { color: #d97706; }
.ml-card-promo strong { color: #78350f; }
.ml-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 140px;
    align-items: stretch;
    align-self: center;
}
.ml-card-actions > .btn,
.ml-card-actions > form { width: 100%; display: block; margin: 0; }
.ml-card-actions > form .btn { width: 100%; }
.ml-btn-label { display: inline; }

@media (max-width: 767.98px) {
    .ml-card {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    .ml-card-img { flex: 0 0 auto; width: 100%; }
    .ml-card-img img { width: 100%; height: 180px; border-radius: 10px; }
    /* במובייל - כפתור מחיקה חוזר לפינה העליונה (מעל התמונה) */
    .ml-card-del {
        top: 10px;
        bottom: auto;
        inset-inline-start: 10px;
        inset-inline-end: auto;
    }
    .ml-card-actions {
        flex-direction: row;
        flex: 0 0 auto;
        width: 100%;
        justify-content: stretch;
        gap: 8px;
    }
    .ml-card-actions > .btn,
    .ml-card-actions > form { flex: 1 1 0; }
    .ml-card-actions > form .btn { width: 100%; white-space: nowrap; }
}
@media (max-width: 380px) {
    .ml-btn-label { display: none; }
}

/* ============================================================
   Auth pages - login, register, forgot/create password
   Split layout: brand panel + form panel
   ============================================================ */
.auth-page {
    min-height: calc(100vh - 60px);
    background: linear-gradient(135deg, #f6f7fb 0%, #eef2ff 50%, #f0f9ff 100%);
    padding: 24px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-container {
    width: 100%;
    max-width: 980px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04), 0 24px 80px -16px rgba(15, 23, 42, .15);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgba(255, 255, 255, .6);
}
@media (min-width: 992px) {
    .auth-container { grid-template-columns: 5fr 4fr; }
}
.auth-container.is-wide { max-width: 1100px; }
.auth-container.is-wide @media (min-width: 992px) { grid-template-columns: 6fr 5fr; }

/* === Brand panel (left in RTL → right side) === */
.auth-brand {
    position: relative;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.18) 0, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.12) 0, transparent 45%),
        linear-gradient(135deg, #2563eb 0%, #1e40af 55%, #1e3a8a 100%);
    color: #fff;
    padding: 48px 40px;
    display: none;
    overflow: hidden;
}
@media (min-width: 992px) {
    .auth-brand { display: flex; flex-direction: column; }
}
.auth-brand::before {
    content: '';
    position: absolute;
    top: -120px;
    inset-inline-end: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    pointer-events: none;
}
.auth-brand::after {
    content: '';
    position: absolute;
    bottom: -160px;
    inset-inline-start: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
.auth-brand-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.auth-brand-logo {
    height: 48px;
    width: auto;
    margin-bottom: 32px;
    background: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.auth-brand-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.auth-brand-subtitle {
    font-size: 15px;
    opacity: .85;
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 380px;
}
.auth-features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.auth-features li i {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .14);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}
.auth-features li strong { font-weight: 600; }
.auth-features li span { display: block; opacity: .8; font-size: 12.5px; margin-top: 1px; }
.auth-brand-footer {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: 12.5px;
    opacity: .7;
    line-height: 1.55;
}

/* === Form panel === */
.auth-form-wrap {
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .auth-form-wrap { padding: 56px 48px; }
}
.auth-form-inner {
    width: 100%;
    max-width: 420px;
}
.auth-container.is-wide .auth-form-inner { max-width: 520px; }
.auth-header {
    margin-bottom: 28px;
}
.auth-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--wc-primary-50, #eff6ff);
    color: var(--wc-primary, #2563eb);
    border-radius: 16px;
    font-size: 22px;
    margin-bottom: 14px;
}
.auth-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--wc-text, #0f172a);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.auth-subtitle {
    color: var(--wc-muted, #64748b);
    font-size: 14.5px;
    margin: 0;
    line-height: 1.55;
}

/* === Field with icon prefix === */
.auth-field { margin-bottom: 16px; }
.auth-field-row { display: grid; gap: 12px; }
@media (min-width: 576px) {
    .auth-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
}
.auth-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wc-text, #0f172a);
    margin-bottom: 6px;
}
.auth-label .req { color: var(--wc-danger, #dc2626); }
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-wrap > i:first-child {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--wc-muted-2, #94a3b8);
    pointer-events: none;
    z-index: 1;
    font-size: 14px;
    transition: color .15s ease;
}
.auth-input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    font-size: 14.5px;
    background: #f8fafc;
    border: 1.5px solid transparent;
    border-radius: 12px;
    color: var(--wc-text, #0f172a);
    transition: all .15s ease;
}
.auth-input:hover {
    background: #f1f5f9;
}
.auth-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--wc-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}
.auth-input-wrap:focus-within > i:first-child {
    color: var(--wc-primary, #2563eb);
}
.auth-input::placeholder { color: #cbd5e1; }
.auth-input[dir="ltr"] { padding-inline-start: 42px; padding-inline-end: 14px; }

/* ===== PWA: floating push + install prompts + toast ===== */
#wc-push-prompt,
#wc-install-prompt {
    position: fixed;
    z-index: 1080;
    inset-inline-end: 16px;
    bottom: 20px;
    width: min(360px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
    padding: 16px 18px 14px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    transform: translateY(120%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    font-family: inherit;
}
/* If both prompts are visible at once - stack the push one above the install one. */
#wc-install-prompt.is-visible ~ #wc-push-prompt,
body:has(#wc-install-prompt.is-visible) #wc-push-prompt {
    bottom: calc(20px + 170px);
}
#wc-push-prompt.is-visible,
#wc-install-prompt.is-visible { transform: translateY(0); opacity: 1; }
#wc-push-prompt.is-loading,
#wc-install-prompt.is-loading  { pointer-events: none; opacity: .7; }
#wc-push-prompt .wc-pp-icon,
#wc-install-prompt .wc-pp-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--wc-primary, #2563eb);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
/* Install prompt - slightly different accent so users distinguish from notifications. */
#wc-install-prompt .wc-pp-icon {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}
#wc-push-prompt .wc-pp-body,
#wc-install-prompt .wc-pp-body { min-width: 0; }
#wc-push-prompt .wc-pp-title,
#wc-install-prompt .wc-pp-title { font-weight: 700; color: #0f172a; margin-bottom: 2px; }
#wc-push-prompt .wc-pp-text,
#wc-install-prompt .wc-pp-text  { font-size: 13.5px; color: #475569; line-height: 1.45; }
#wc-push-prompt .wc-pp-actions,
#wc-install-prompt .wc-pp-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#wc-push-prompt .wc-pp-btn-primary,
#wc-push-prompt .wc-pp-btn-secondary,
#wc-install-prompt .wc-pp-btn-primary,
#wc-install-prompt .wc-pp-btn-secondary {
    border: 0; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
#wc-push-prompt .wc-pp-btn-primary,
#wc-install-prompt .wc-pp-btn-primary {
    background: var(--wc-primary, #2563eb); color: #fff;
}
#wc-push-prompt .wc-pp-btn-primary:hover,
#wc-install-prompt .wc-pp-btn-primary:hover { background: var(--wc-primary-d, #1d4ed8); }
#wc-push-prompt .wc-pp-btn-secondary,
#wc-install-prompt .wc-pp-btn-secondary {
    background: #f1f5f9; color: #475569;
}
#wc-push-prompt .wc-pp-btn-secondary:hover,
#wc-install-prompt .wc-pp-btn-secondary:hover { background: #e2e8f0; }
#wc-push-prompt .wc-pp-close,
#wc-install-prompt .wc-pp-close {
    position: absolute;
    inset-inline-start: 10px;
    top: 8px;
    background: transparent; border: 0;
    font-size: 22px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 4px 8px;
}
#wc-push-prompt .wc-pp-close:hover,
#wc-install-prompt .wc-pp-close:hover { color: #0f172a; }

.wc-toast {
    position: fixed;
    z-index: 1100;
    inset-inline-end: 16px;
    bottom: 20px;
    background: #0f172a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .25);
    font-size: 14px;
    font-weight: 500;
    transform: translateY(80%);
    opacity: 0;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    max-width: calc(100vw - 32px);
}
.wc-toast.is-visible { transform: translateY(0); opacity: 1; }
.wc-toast.is-error   { background: #b91c1c; }
.wc-toast.is-success { background: #15803d; }
.wc-toast.is-info    { background: var(--wc-primary-d); }

/* ===== Connected Devices page ===== */
.device-list { display: flex; flex-direction: column; gap: 12px; }
.device-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--wc-border-2, #e2e8f0);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.device-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, .04); }
.device-card.is-current {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
    border-color: #6ee7b7;
}
.device-card .device-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--wc-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.device-card.is-current .device-icon {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
}
.device-card .device-body { flex: 1; min-width: 0; }
.device-card .device-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.device-card .device-title { font-weight: 700; color: #0f172a; font-size: 14.5px; }
.device-card .device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: #64748b;
}
.device-card .device-meta i { margin-inline-end: 4px; color: #94a3b8; }

@media (max-width: 480px) {
    .device-card { padding: 12px; }
    .device-card .device-icon { width: 42px; height: 42px; font-size: 18px; }
    .device-card .device-title { font-size: 14px; }
    .device-card .device-meta { font-size: 12px; gap: 4px 12px; }
}

/* ===== PWA welcome modal - מוצג בהפעלה ראשונה כאפליקציה ===== */
html.wpw-open { overflow: hidden; }

#wc-pwa-welcome {
    position: fixed;
    inset: 0;
    z-index: 1098;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .3s ease;
    font-family: inherit;
}
#wc-pwa-welcome.is-visible { opacity: 1; }
#wc-pwa-welcome .wpw-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#wc-pwa-welcome .wpw-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-radius: 24px;
    box-shadow: 0 30px 80px -16px rgba(15, 23, 42, .55);
    padding: 36px 26px 22px;
    text-align: center;
    transform: translateY(60px) scale(.93);
    transition: transform .42s cubic-bezier(.22,1.05,.36,1);
}
#wc-pwa-welcome.is-visible .wpw-card { transform: translateY(0) scale(1); }

#wc-pwa-welcome .wpw-close {
    position: absolute;
    inset-inline-start: 14px;
    top: 14px;
    width: 34px; height: 34px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
#wc-pwa-welcome .wpw-close:hover { background: #f1f5f9; color: #0f172a; }

/* === Hero: bell with concentric ringing rings === */
#wc-pwa-welcome .wpw-hero {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
}
#wc-pwa-welcome .wpw-bell {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #78350f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow:
        0 14px 32px -6px rgba(245, 158, 11, .55),
        inset 0 2px 0 rgba(255, 255, 255, .55);
    animation: wpwShake 2.6s ease-in-out infinite;
    transform-origin: 50% 15%;
    z-index: 2;
}
@keyframes wpwShake {
    0%, 92%, 100% { transform: rotate(0); }
    93%           { transform: rotate(-10deg); }
    95%           { transform: rotate(8deg); }
    97%           { transform: rotate(-6deg); }
    99%           { transform: rotate(3deg); }
}
#wc-pwa-welcome .wpw-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(245, 158, 11, .6);
    border-radius: 50%;
    opacity: 0;
    animation: wpwRing 2.6s ease-out infinite;
}
#wc-pwa-welcome .wpw-ring-1 { animation-delay: 0s; }
#wc-pwa-welcome .wpw-ring-2 { animation-delay: .85s; }
#wc-pwa-welcome .wpw-ring-3 { animation-delay: 1.7s; }
@keyframes wpwRing {
    0%   { transform: scale(.55); opacity: .7; }
    100% { transform: scale(1.15); opacity: 0; }
}

#wc-pwa-welcome .wpw-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.25;
}
#wc-pwa-welcome .wpw-sub {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 22px;
}

#wc-pwa-welcome .wpw-benefits {
    list-style: none;
    padding: 14px;
    margin: 0 0 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .08);
}
#wc-pwa-welcome .wpw-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}
#wc-pwa-welcome .wpw-bullet {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--wc-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
#wc-pwa-welcome .wpw-benefits li > div { display: flex; flex-direction: column; min-width: 0; }
#wc-pwa-welcome .wpw-benefits strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
#wc-pwa-welcome .wpw-benefits span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
}

#wc-pwa-welcome .wpw-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#wc-pwa-welcome .wpw-btn-primary,
#wc-pwa-welcome .wpw-btn-secondary {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, transform .1s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#wc-pwa-welcome .wpw-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, .55);
}
#wc-pwa-welcome .wpw-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -6px rgba(37, 99, 235, .6); }
#wc-pwa-welcome .wpw-btn-primary:active { transform: translateY(0); }
#wc-pwa-welcome .wpw-btn-primary:disabled,
#wc-pwa-welcome .wpw-btn-primary.is-loading { opacity: .8; cursor: wait; }
#wc-pwa-welcome .wpw-btn-primary.is-loading i { animation: wpwSpin 1s linear infinite; }
@keyframes wpwSpin { to { transform: rotate(360deg); } }
#wc-pwa-welcome .wpw-btn-secondary {
    background: transparent;
    color: #64748b;
    font-weight: 600;
}
#wc-pwa-welcome .wpw-btn-secondary:hover { background: #f1f5f9; color: #0f172a; }

@media (max-width: 480px) {
    #wc-pwa-welcome { padding: 0; align-items: flex-end; }
    #wc-pwa-welcome .wpw-card {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        padding: 30px 20px 18px;
        transform: translateY(100%);
    }
    #wc-pwa-welcome.is-visible .wpw-card { transform: translateY(0); }
    #wc-pwa-welcome .wpw-hero { width: 110px; height: 110px; }
    #wc-pwa-welcome .wpw-bell { width: 66px; height: 66px; font-size: 28px; }
    #wc-pwa-welcome .wpw-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    #wc-pwa-welcome .wpw-bell { animation: none; }
    #wc-pwa-welcome .wpw-ring { animation: none; opacity: 0; }
}

/* ===== Install walkthrough modal - הסברי התקנה מפורטים ===== */
html.wim-open { overflow: hidden; }

#wc-install-modal {
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .25s ease;
    font-family: inherit;
}
#wc-install-modal.is-visible { opacity: 1; }
#wc-install-modal .wim-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#wc-install-modal .wim-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .55);
    padding: 28px 24px 22px;
    transform: translateY(40px) scale(.97);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
#wc-install-modal.is-visible .wim-card { transform: translateY(0) scale(1); }

#wc-install-modal .wim-close {
    position: absolute;
    inset-inline-start: 14px;
    top: 12px;
    width: 36px; height: 36px;
    background: #f1f5f9;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
#wc-install-modal .wim-close:hover { background: #e2e8f0; color: #0f172a; }

#wc-install-modal .wim-head {
    text-align: center;
    margin-bottom: 22px;
}
#wc-install-modal .wim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--wc-primary, #2563eb);
    font-size: 28px;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .18);
}
#wc-install-modal .wim-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    line-height: 1.25;
}
#wc-install-modal .wim-sub {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

#wc-install-modal .wim-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#wc-install-modal .wim-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    position: relative;
}
#wc-install-modal .wim-step-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--wc-primary, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}
#wc-install-modal .wim-step-body { min-width: 0; flex: 1; }
#wc-install-modal .wim-step-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 14.5px;
    margin-bottom: 3px;
}
#wc-install-modal .wim-step-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

#wc-install-modal .wim-step-visual {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#wc-install-modal .wim-vis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    font-size: 13px;
    color: #1e293b;
}
#wc-install-modal .wim-vis i { color: var(--wc-primary, #2563eb); font-size: 16px; }
#wc-install-modal .wim-vis-label { font-weight: 600; }
#wc-install-modal .wim-vis-dots i { font-size: 18px; color: #64748b; }
#wc-install-modal .wim-vis-ios-row i { color: var(--wc-primary, #2563eb); font-size: 18px; }
#wc-install-modal .wim-vis-ios-share { background: #f0f9ff; border-color: #bae6fd; border-style: solid; }

#wc-install-modal .wim-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#wc-install-modal .wim-btn-primary,
#wc-install-modal .wim-btn-secondary {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#wc-install-modal .wim-btn-primary {
    background: var(--wc-primary, #2563eb);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
}
#wc-install-modal .wim-btn-primary:hover { background: var(--wc-primary-d, #1d4ed8); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, .32); }
#wc-install-modal .wim-btn-primary:active { transform: translateY(0); }
#wc-install-modal .wim-btn-primary:disabled { opacity: .65; cursor: wait; }
#wc-install-modal .wim-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}
#wc-install-modal .wim-btn-secondary:hover { background: #e2e8f0; color: #0f172a; }

#wc-install-modal .wim-footer {
    margin-top: 14px;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 12px;
    line-height: 1.45;
}
#wc-install-modal .wim-footer i { margin-inline-end: 6px; }

@media (max-width: 480px) {
    #wc-install-modal { padding: 0; align-items: flex-end; }
    #wc-install-modal .wim-card {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 22px 22px 0 0;
        padding: 24px 18px 18px;
        transform: translateY(100%);
    }
    #wc-install-modal.is-visible .wim-card { transform: translateY(0); }
    #wc-install-modal .wim-icon { width: 56px; height: 56px; font-size: 24px; }
    #wc-install-modal .wim-title { font-size: 19px; }
}

/* ===== Network status banner - מוצג כשאין חיבור או כשחזר ===== */
.wc-net-banner {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 1090;
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(127, 29, 29, .35);
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .4s ease, box-shadow .4s ease;
    font-family: inherit;
}
.wc-net-banner.is-visible { transform: translateY(0); }
.wc-net-banner.is-online {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    box-shadow: 0 6px 20px rgba(21, 128, 61, .35);
}
.wc-net-banner.is-pulsing { animation: wcNetPulse .6s ease; }
@keyframes wcNetPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(0) scale(1.005); filter: brightness(1.15); }
}
.wc-net-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.wc-net-icon {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
/* Diagonal slash for WiFi-off look - hidden when banner is in "online" state. */
.wc-net-slash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wc-net-slash::before {
    content: '';
    position: absolute;
    top: 50%; left: 8%;
    width: 84%; height: 2.5px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, .9);
    transform: rotate(-45deg);
    transform-origin: center;
    border-radius: 2px;
}
.wc-net-banner.is-online .wc-net-slash { display: none; }
.wc-net-banner.is-online .wc-net-icon i::before { content: "\f164"; } /* fa-thumbs-up swap visual */
.wc-net-msg {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.wc-net-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.wc-net-text {
    display: block;
    font-size: 12.5px;
    opacity: .92;
    margin-top: 1px;
}
.wc-net-retry {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .15s ease, transform .1s ease;
    flex-shrink: 0;
}
.wc-net-retry:hover { background: rgba(255, 255, 255, .22); }
.wc-net-retry:active { transform: scale(.97); }
.wc-net-banner.is-online .wc-net-retry { display: none; }

@media (max-width: 480px) {
    .wc-net-inner { padding: 8px 12px; gap: 10px; }
    .wc-net-icon  { width: 34px; height: 34px; font-size: 14px; }
    .wc-net-title { font-size: 13px; }
    .wc-net-text  { font-size: 11.5px; }
    .wc-net-retry span { display: none; }
    .wc-net-retry { padding: 6px 10px; }
}

/* כשהאתר במצב offline - מנע scroll פיגומי בכותרת */
html.wc-is-offline body { padding-top: 0; }

/* ===== Offline page - מוצג כשניווט נכשל ה-SW נופל ל-/offline ===== */
.offline-page main { padding-block: 24px; }
.offline-wrap {
    min-height: calc(100vh - 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.offline-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 20px 60px -20px rgba(15, 23, 42, .15);
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.offline-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #ef4444 100%);
    background-size: 200% 100%;
    animation: offlineStripe 3s linear infinite;
}
@keyframes offlineStripe {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Illustration - כדור הארץ עם גלים נופלים ו-X */
.offline-illu {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 24px;
}
.offline-globe {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    color: #94a3b8;
    filter: grayscale(.4);
}
.offline-waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.offline-waves span {
    position: absolute;
    inset: 0;
    border: 2.5px solid #cbd5e1;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.3);
    animation: offlineWave 2.4s ease-out infinite;
}
.offline-waves span:nth-child(2) { animation-delay: .8s; }
.offline-waves span:nth-child(3) { animation-delay: 1.6s; }
@keyframes offlineWave {
    0%   { transform: scale(.3); opacity: .8; border-color: #ef4444; }
    100% { transform: scale(1.2); opacity: 0;  border-color: #ef4444; }
}
.offline-x {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 44px; height: 44px;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(239, 68, 68, .45);
    animation: offlinePop .5s cubic-bezier(.18,1.4,.7,1.2) .2s both;
}
@keyframes offlinePop {
    0%   { transform: scale(0) rotate(-90deg); }
    100% { transform: scale(1) rotate(0); }
}

.offline-title {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.offline-sub {
    color: #64748b;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.offline-tips {
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-align: start;
    font-size: 13.5px;
}
.offline-tips li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #475569;
    padding: 6px 0;
}
.offline-tips li + li { border-top: 1px solid #e2e8f0; }
.offline-tips li i {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #fff;
    color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    border: 1px solid #e2e8f0;
}

.offline-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.offline-retry {
    min-width: 200px;
    border-radius: 999px !important;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .25);
    transition: transform .15s ease, box-shadow .2s ease;
}
.offline-retry:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(37, 99, 235, .32); }
.offline-retry:active { transform: translateY(0); }
.offline-retry.is-shaking { animation: offlineShake .4s ease; }
@keyframes offlineShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.offline-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1f5f9;
}
.offline-status.is-online {
    background: #dcfce7;
    color: #166534;
}
.offline-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .25);
    animation: offlineDotPulse 1.4s ease-in-out infinite;
}
.offline-status.is-online .offline-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .25);
}
@keyframes offlineDotPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

.offline-footer {
    margin-top: 6px;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.5;
}
.offline-footer i { margin-inline-end: 6px; }

@media (max-width: 480px) {
    .offline-card  { padding: 28px 20px 22px; border-radius: 16px; }
    .offline-illu  { width: 110px; height: 110px; margin-bottom: 18px; }
    .offline-globe { font-size: 56px; }
    .offline-x     { width: 36px; height: 36px; font-size: 18px; }
    .offline-title { font-size: 22px; }
    .offline-sub   { font-size: 14px; }
}

/* Password toggle button */
.auth-pw-toggle {
    position: absolute;
    inset-inline-end: 10px;
    background: transparent;
    border: 0;
    color: var(--wc-muted-2, #94a3b8);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 2;
    transition: all .15s ease;
}
.auth-pw-toggle:hover {
    color: var(--wc-primary, #2563eb);
    background: var(--wc-primary-50, #eff6ff);
}
.auth-input.has-toggle { padding-inline-end: 44px; }

.auth-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--wc-muted, #64748b);
    line-height: 1.5;
}

/* Account type toggle (private/business) */
.auth-account-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    margin-bottom: 20px;
}
.auth-account-types input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.auth-account-types label {
    text-align: center;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-muted, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-account-types input[type="radio"]:checked + label {
    background: #fff;
    color: var(--wc-primary-d, #1d4ed8);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
}

/* Submit button */
.auth-submit {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    background: var(--wc-primary, #2563eb);
    color: #fff;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, .35);
    margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
    background: var(--wc-primary-d, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(37, 99, 235, .4);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .65; cursor: wait; }

/* Footer links */
.auth-forgot {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--wc-muted, #64748b);
    text-decoration: none;
    margin-top: 14px;
    padding: 4px;
}
.auth-forgot:hover { color: var(--wc-primary, #2563eb); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 20px;
    font-size: 12.5px;
    color: var(--wc-muted-2, #94a3b8);
    font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wc-border, #e6e8ee);
}

.auth-alt {
    text-align: center;
    font-size: 14px;
    color: var(--wc-muted, #64748b);
    margin-top: 4px;
}
.auth-alt a {
    color: var(--wc-primary, #2563eb);
    font-weight: 600;
    text-decoration: none;
}
.auth-alt a:hover { text-decoration: underline; }

/* Terms checkbox */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 18px;
    font-size: 13px;
    color: var(--wc-muted, #64748b);
    line-height: 1.5;
}
.auth-terms input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--wc-primary, #2563eb);
    flex-shrink: 0;
}
.auth-terms a { color: var(--wc-primary, #2563eb); text-decoration: none; font-weight: 600; }
.auth-terms a:hover { text-decoration: underline; }

/* Error/info alerts on auth pages */
.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.5;
}
.auth-alert i { margin-top: 2px; flex-shrink: 0; }
.auth-alert.is-error {
    background: #fef2f2;
    color: #991b1b;
    border-inline-start: 3px solid #dc2626;
}
.auth-alert.is-info {
    background: #eff6ff;
    color: #1e40af;
    border-inline-start: 3px solid #3b82f6;
}
.auth-alert.is-success {
    background: #ecfdf5;
    color: #065f46;
    border-inline-start: 3px solid #16a34a;
}
.auth-alert a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Footer step indicator below auth submit (for 2-step register) */
.auth-step-hint {
    text-align: center;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--wc-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.auth-step-hint i { color: var(--wc-muted-2, #94a3b8); }

/* Mobile compact */
@media (max-width: 575.98px) {
    .auth-page { padding: 12px 8px; }
    .auth-container { border-radius: 18px; }
    .auth-form-wrap { padding: 28px 20px; }
    .auth-title { font-size: 22px; }
    .auth-icon-circle { width: 48px; height: 48px; font-size: 18px; }
}