/* Men's theme override for men.b-set.co.il
 * Loaded from base.html only when request.is_men_site is true.
 * Goal: keep SET's exact layout, only recolor from pink to navy.
 *
 * Palette:
 *   primary       #1e3a5f   (was #dd5b76)
 *   primary hover #152a45   (was #c54961)
 *   accent        #3d5a80   (was #e8739e)
 *   accent hover  #2f4766   (was #d6728a)
 *   page bg       #f4f6f8   (was #f8f1e5)
 */

:root {
    --men-primary: #202d42;        /* dark navy from logo */
    --men-primary-hover: #16202f;  /* darker */
    --men-accent: #6e809d;         /* muted steel blue */
    --men-accent-hover: #566a86;
    --men-bg: #f0f4f8;             /* very light blue-gray */
    --men-on-primary: #ffffff;
}

/* ---------- Page background ---------- */
html, body {
    background-color: var(--men-bg) !important;
}
body[style*="#f8f1e5"],
[style*="background: #f8f1e5"],
[style*="background-color: #f8f1e5"],
[style*="background:#f8f1e5"],
[style*="background-color:#f8f1e5"] {
    background: var(--men-bg) !important;
    background-color: var(--men-bg) !important;
}

/* ---------- Scrollbar ---------- */
* { scrollbar-color: var(--men-primary) var(--men-bg) !important; }
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
.content-wrapper::-webkit-scrollbar-track {
    background: var(--men-bg) !important;
}
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
.content-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    border-color: var(--men-bg) !important;
}

/* ---------- Attribute selectors for inline pink hex ----------
 * These catch the 200+ hardcoded pink references without editing templates.
 * We can't distinguish "color" from "background" in the selector, so we set
 * both — the browser applies whichever the original inline style targeted.
 */

/* Text color use */
[style*="color: #dd5b76"],
[style*="color:#dd5b76"],
[style*="color: #DD5B76"] {
    color: var(--men-primary) !important;
}
[style*="color: #e8739e"],
[style*="color:#e8739e"] {
    color: var(--men-accent) !important;
}
[style*="color: #c54961"],
[style*="color:#c54961"] {
    color: var(--men-primary-hover) !important;
}

/* Background use */
[style*="background: #dd5b76"],
[style*="background:#dd5b76"],
[style*="background-color: #dd5b76"],
[style*="background-color:#dd5b76"] {
    background: var(--men-primary) !important;
    background-color: var(--men-primary) !important;
    color: var(--men-on-primary) !important;
}
[style*="background: #e8739e"],
[style*="background:#e8739e"],
[style*="background-color: #e8739e"],
[style*="background-color:#e8739e"] {
    background: var(--men-accent) !important;
    background-color: var(--men-accent) !important;
}

/* Border color use */
[style*="border-color: #dd5b76"],
[style*="border: 1px solid #dd5b76"],
[style*="border: 2px solid #dd5b76"],
[style*="border-color:#dd5b76"] {
    border-color: var(--men-primary) !important;
}

/* Linear gradients using the pink pair */
[style*="linear-gradient"][style*="#dd5b76"],
[style*="linear-gradient"][style*="#e8739e"],
[style*="linear-gradient"][style*="#DD5B76"] {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    background-image: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    color: var(--men-on-primary) !important;
}

/* Box-shadows with pink tint */
[style*="box-shadow"][style*="rgba(221"] ,
[style*="box-shadow"][style*="rgba(232"] {
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25) !important;
}

/* ---------- Coral / hot-pink used elsewhere (coupons, badges, "לוהט") ----------
 * The site also uses #ff6b6b / #ee5a6f (coral-red) as a secondary attention
 * color — mainly on coupon cards and "hot" badges. On the men's site these
 * fold into the navy palette so the whole page stays on-brand.
 */
[style*="#ff6b6b"],
[style*="#FF6B6B"],
[style*="#ee5a6f"],
[style*="#EE5A6F"] {
    /* Anywhere the color is USED, remap. The specific role (bg vs border vs
       text) is disambiguated by the more targeted rules below. */
}

/* Backgrounds using coral (solid or in gradients) */
[style*="background: #ff6b6b"],
[style*="background:#ff6b6b"],
[style*="background-color: #ff6b6b"],
[style*="background-color:#ff6b6b"],
[style*="linear-gradient"][style*="#ff6b6b"],
[style*="linear-gradient"][style*="#ee5a6f"] {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    background-image: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    background-color: var(--men-primary) !important;
    color: var(--men-on-primary) !important;
}

/* Coral used as a border */
[style*="border: 2px solid #ff6b6b"],
[style*="border: 1px solid #ff6b6b"],
[style*="border-color: #ff6b6b"] {
    border-color: var(--men-primary) !important;
}

/* Coral shadow (rgba(255,107,107, ...)) */
[style*="rgba(255,107,107"],
[style*="rgba(255, 107, 107"] {
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.30) !important;
}

/* Text using coral */
[style*="color: #ff6b6b"],
[style*="color:#ff6b6b"] {
    color: var(--men-primary) !important;
}

/* ---------- The sidebar chrome (.fixed-haader + header_content.html) ---------- */
.fixed-haader {
    background: linear-gradient(180deg, var(--men-primary), var(--men-accent)) !important;
}
.fixed-haader a,
.fixed-haader h2,
.fixed-haader h3,
.fixed-haader span,
.fixed-haader div {
    /* only override where inline pink text existed — attribute selectors above
       already caught most cases; here we ensure white-on-navy remains readable. */
}

/* Common button classes across templates */
.btn-primary, .btn-pink, .btn-set, .primary-btn,
.header-item, .header-item-active,
.book-recommendation-btn, .subscribe-btn {
    background-color: var(--men-primary) !important;
    border-color: var(--men-primary) !important;
    color: var(--men-on-primary) !important;
}
.btn-primary:hover, .btn-pink:hover, .btn-set:hover, .primary-btn:hover,
.header-item:hover, .book-recommendation-btn:hover, .subscribe-btn:hover {
    background-color: var(--men-primary-hover) !important;
    border-color: var(--men-primary-hover) !important;
}

/* ---------- Class-based overrides for pink styles declared in <style> blocks
 *            (attribute selectors can't reach those). ---------- */

/* Page header pill ("המלצות" / "לוח מכירות" etc.) */
.page-title-center,
.page-title-section {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.3) !important;
}

/* Filter tags (recommendations, sets, etc.) */
.filter-tag-new,
.filter-tag {
    border-color: rgba(30, 58, 95, 0.2) !important;
}
.filter-tag-new:hover,
.filter-tag-new.active,
.filter-tag:hover,
.filter-tag.active {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    border-color: var(--men-primary) !important;
    box-shadow: 0 3px 10px rgba(30, 58, 95, 0.3) !important;
    color: #fff !important;
}

/* Global search + support buttons on the top header */
.global-search i { color: var(--men-primary) !important; }
.global-search input {
    border-color: rgba(30, 58, 95, 0.3) !important;
}
.global-search input:focus {
    border-color: var(--men-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12) !important;
}
.global-search-btn,
.support-chat-btn,
.mobile-search-btn {
    background: linear-gradient(135deg, var(--men-primary), var(--men-accent)) !important;
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.3) !important;
    color: #fff !important;
}
.global-search-btn:hover,
.support-chat-btn:hover,
.mobile-search-btn:hover {
    background: linear-gradient(135deg, var(--men-primary-hover), var(--men-accent-hover)) !important;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4) !important;
    color: #fff !important;
}

/* Notification bell etc. */
.notifications-header,
.notifications-footer a,
.back-section, a.back-section,
.search-fields-group h4 i {
    color: var(--men-primary) !important;
}

/* Floating action button "+ הוסף פריט" on the marketplace */
.action-btn,
a.action-btn {
    background: var(--men-primary) !important;
    background-color: var(--men-primary) !important;
    border-color: var(--men-primary) !important;
    color: #fff !important;
}
.action-btn:hover,
a.action-btn:hover {
    background: var(--men-primary-hover) !important;
    background-color: var(--men-primary-hover) !important;
    border-color: var(--men-primary-hover) !important;
    color: #fff !important;
}

/* "למסירה חינם" pill uses a distinct pastel pink palette
   (#fce4ec/#f8bbd0/#f48fb1/#c2185b). Fold into a soft navy variant. */
[style*="#fce4ec"],
[style*="#FCE4EC"] {
    background: linear-gradient(135deg, rgba(30,58,95,0.10), rgba(110,128,157,0.15)) !important;
    background-image: linear-gradient(135deg, rgba(30,58,95,0.10), rgba(110,128,157,0.15)) !important;
    border-color: var(--men-accent) !important;
    color: var(--men-primary) !important;
}
[style*="#f48fb1"], [style*="#F48FB1"] { border-color: var(--men-accent) !important; }
[style*="#c2185b"], [style*="#C2185B"] { color: var(--men-primary) !important; }

/* Dropdown selector wrapper on marketplace (dates / cities) */
.marketplace-filter-wrapper button,
.filter-dropdown-btn,
.custom-select-btn {
    border-color: rgba(30,58,95,0.2) !important;
    color: var(--men-primary) !important;
}

/* Native <select> options need explicit contrast — inheriting the pink
   text color from the parent (which we swap to navy) can render very faint
   on some browsers. Force full-opacity dark text on white background so the
   opened list is readable. */
select#cityFilter,
select#dateFilter,
select.filter-tag-new {
    color: var(--men-primary) !important;
}
select#cityFilter option,
select#dateFilter option,
select.filter-tag-new option {
    color: #0d1b2a !important;
    background: #ffffff !important;
    font-weight: 500 !important;
}
select#cityFilter option:checked,
select#dateFilter option:checked,
select.filter-tag-new option:checked {
    background: var(--men-primary) !important;
    color: #ffffff !important;
}

/* Links */
a { color: var(--men-primary); }
a:hover { color: var(--men-primary-hover); }

/* Custom nav icons on the men's sidebar. Sit inside .nav-item > .icon which is
   normally a Font Awesome glyph. Larger than a glyph — these are illustrated
   PNGs and read better at 56px. */
.men-nav-icon {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.nav-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* When a men-nav-icon is inside, let the box grow to fit the image */
    min-height: 56px;
    margin-bottom: 6px !important;
}
@media (max-width: 992px) {
    .men-nav-icon { width: 46px; height: 46px; }
    .nav-item .icon { min-height: 46px; }
}
@media (max-width: 600px) {
    .men-nav-icon { width: 40px; height: 40px; }
    .nav-item .icon { min-height: 40px; }
}

/* Hero titles (home10 uses inline styles caught above; safety-net class rules) */
.hero-title, .section-title-pink, .section-title {
    color: var(--men-primary) !important;
}

/* Badges / pills that used pink */
.badge-pink, .pink-pill, .tag-pink {
    background: var(--men-primary) !important;
    color: var(--men-on-primary) !important;
}

/* ---------- Favicon swap (browser tab icon) ---------- */
/* Handled by the link tag in base.html title block if needed */