/* =========================================================
   ShopShop - Site Pastel Theme
   ערכת צבע אישית ל-body של האתר, מנותקת מה-Beta / index.php
   ========================================================= */

/* --- 12 הפסטלים --- */
html[data-site-theme="cyan_soft"] {
    /* תכלת: כחול-שמיים ברור, מופרד מטורקיז */
    --site-theme-bg: #dff4ff;
    --site-theme-border: #0284c7;
    --site-theme-text: #075985;
}
html[data-site-theme="green"] {
    --site-theme-bg: #d4edda;
    --site-theme-border: #15803d;
    --site-theme-text: #166534;
}
html[data-site-theme="yellow"] {
    --site-theme-bg: #fff3cd;
    --site-theme-border: #d97706;
    --site-theme-text: #92400e;
}
html[data-site-theme="pink_red"] {
    --site-theme-bg: #f8d7da;
    --site-theme-border: #dc2626;
    --site-theme-text: #991b1b;
}
html[data-site-theme="gray"] {
    --site-theme-bg: #e2e3e5;
    --site-theme-border: #475569;
    --site-theme-text: #334155;
}
html[data-site-theme="pink_lilac"] {
    --site-theme-bg: #fde2ff;
    --site-theme-border: #a21caf;
    --site-theme-text: #86198f;
}
html[data-site-theme="turquoise"] {
    /* טורקיז: נוטה יותר לירוק/Teal כדי שלא ייראה כמו תכלת */
    --site-theme-bg: #ccfbf1;
    --site-theme-border: #0f766e;
    --site-theme-text: #115e59;
}
html[data-site-theme="rose"] {
    --site-theme-bg: #fce4ec;
    --site-theme-border: #db2777;
    --site-theme-text: #9d174d;
}
html[data-site-theme="lime"] {
    --site-theme-bg: #f1f8e9;
    --site-theme-border: #65a30d;
    --site-theme-text: #3f6212;
}
html[data-site-theme="cream"] {
    --site-theme-bg: #fff8e1;
    --site-theme-border: #ca8a04;
    --site-theme-text: #854d0e;
}
html[data-site-theme="blue"] {
    --site-theme-bg: #e3f2fd;
    --site-theme-border: #2563eb;
    --site-theme-text: #1e40af;
}
html[data-site-theme="lavender"] {
    --site-theme-bg: #ede7f6;
    --site-theme-border: #7c3aed;
    --site-theme-text: #5b21b6;
}

/* הרקע הכללי. לא משנים כרטיסים, טבלאות, טפסים או את שורת ה-Beta. */
html[data-site-theme] body {
    background-color: var(--site-theme-bg) !important;
}

/* המסגרת נשארת סביב חלון האתר גם בזמן גלילה. */
html[data-site-theme] body::before {
    content: "";
    position: fixed;
    inset: 0;
    border: 4px solid var(--site-theme-border);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2147482000;
}

/* נגישות קודמת לערכת הפסטל. */
html[data-site-theme] body.dark-theme::before,
html[data-site-theme] body.high-contrast::before {
    display: none;
}

/* =========================================================
   כפתור פתיחת בורר הפסטל ב-Header
   ========================================================= */
.site-theme-open-btn {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    font-family: inherit;
    background: #f8fafc;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    transition: .18s ease;
    white-space: nowrap;
}
.site-theme-open-btn:hover {
    background: #f3e8ff;
    border-color: #a855f7;
    color: #7e22ce;
}
.nav-menu .site-theme-open-btn.desktop-only { height: 34px; }

/* =========================================================
   חלון בחירת Theme
   ========================================================= */
.site-theme-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    background: rgba(15, 23, 42, .52);
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}
.site-theme-modal {
    width: min(920px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .24);
    padding: 22px;
    box-sizing: border-box;
}
.site-theme-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 15px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.site-theme-modal-header h3 {
    margin: 0;
    color: #172033;
    font-size: 22px;
}
.site-theme-modal-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}
.site-theme-close {
    border: 0;
    background: #f1f5f9;
    color: #334155;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}
.site-theme-close:hover { background: #e2e8f0; }

.site-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.site-theme-grid,
.site-theme-choice {
    position: relative;
    z-index: 1;
}
.site-theme-choice,
.site-theme-choice * {
    pointer-events: auto;
}

.site-theme-choice {
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 13px;
    padding: 10px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: .16s ease;
    min-width: 0;
}
.site-theme-choice:hover {
    transform: translateY(-1px);
    border-color: #94a3b8;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .07);
}
.site-theme-choice.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.site-theme-preview {
    width: 58px;
    height: 42px;
    border-radius: 9px;
    background: var(--preview-bg);
    border: 3px solid var(--preview-border);
    box-sizing: border-box;
}
.site-theme-choice-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.site-theme-choice-text strong {
    color: var(--preview-text, #334155);
    font-size: 14px;
}
.site-theme-choice-text small {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-theme-check {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    opacity: 0;
    transform: scale(.75);
    transition: .16s ease;
}
.site-theme-choice.is-selected .site-theme-check {
    opacity: 1;
    transform: scale(1);
}

.site-theme-choice-default,
.site-theme-preview-default {
    --preview-bg: #f0f2f5;
    --preview-border: #cbd5e1;
    --preview-text: #334155;
}
.site-theme-preview-cyan_soft { --preview-bg:#dff4ff; --preview-border:#0284c7; --preview-text:#075985; }
.site-theme-preview-green { --preview-bg:#d4edda; --preview-border:#15803d; --preview-text:#166534; }
.site-theme-preview-yellow { --preview-bg:#fff3cd; --preview-border:#d97706; --preview-text:#92400e; }
.site-theme-preview-pink_red { --preview-bg:#f8d7da; --preview-border:#dc2626; --preview-text:#991b1b; }
.site-theme-preview-gray { --preview-bg:#e2e3e5; --preview-border:#475569; --preview-text:#334155; }
.site-theme-preview-pink_lilac { --preview-bg:#fde2ff; --preview-border:#a21caf; --preview-text:#86198f; }
.site-theme-preview-turquoise { --preview-bg:#ccfbf1; --preview-border:#0f766e; --preview-text:#115e59; }
.site-theme-preview-rose { --preview-bg:#fce4ec; --preview-border:#db2777; --preview-text:#9d174d; }
.site-theme-preview-lime { --preview-bg:#f1f8e9; --preview-border:#65a30d; --preview-text:#3f6212; }
.site-theme-preview-cream { --preview-bg:#fff8e1; --preview-border:#ca8a04; --preview-text:#854d0e; }
.site-theme-preview-blue { --preview-bg:#e3f2fd; --preview-border:#2563eb; --preview-text:#1e40af; }
.site-theme-preview-lavender { --preview-bg:#ede7f6; --preview-border:#7c3aed; --preview-text:#5b21b6; }

/* מעבירים את משתני התצוגה מה-preview גם לכרטיס כולו כדי לצבוע את הכותרת. */
.site-theme-choice:has(.site-theme-preview-cyan_soft) { --preview-text:#075985; }
.site-theme-choice:has(.site-theme-preview-green) { --preview-text:#166534; }
.site-theme-choice:has(.site-theme-preview-yellow) { --preview-text:#92400e; }
.site-theme-choice:has(.site-theme-preview-pink_red) { --preview-text:#991b1b; }
.site-theme-choice:has(.site-theme-preview-gray) { --preview-text:#334155; }
.site-theme-choice:has(.site-theme-preview-pink_lilac) { --preview-text:#86198f; }
.site-theme-choice:has(.site-theme-preview-turquoise) { --preview-text:#115e59; }
.site-theme-choice:has(.site-theme-preview-rose) { --preview-text:#9d174d; }
.site-theme-choice:has(.site-theme-preview-lime) { --preview-text:#3f6212; }
.site-theme-choice:has(.site-theme-preview-cream) { --preview-text:#854d0e; }
.site-theme-choice:has(.site-theme-preview-blue) { --preview-text:#1e40af; }
.site-theme-choice:has(.site-theme-preview-lavender) { --preview-text:#5b21b6; }

.site-theme-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #e2e8f0;
    margin-top: 18px;
    padding-top: 15px;
}
.site-theme-footer-actions { display: flex; gap: 8px; }
.site-theme-apply-btn,
.site-theme-cancel-btn {
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
}
.site-theme-apply-btn { background: #2563eb; color: #fff; }
.site-theme-apply-btn:hover { background: #1d4ed8; }
.site-theme-apply-btn:disabled { opacity: .65; cursor: wait; }
.site-theme-cancel-btn { background: #f1f5f9; color: #334155; }
.site-theme-cancel-btn:hover { background: #e2e8f0; }
.site-theme-save-state { color: #64748b; font-size: 12px; font-weight: 800; min-height: 18px; }
.site-theme-save-state.is-ok { color: #15803d; }
.site-theme-save-state.is-error { color: #b91c1c; }

@media (max-width: 900px) {
    .site-theme-open-btn.mobile-nav-link {
        width: 100%;
        border-radius: 10px;
        padding: 10px 12px;
    }
    .site-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    html[data-site-theme] body::before { border-width: 3px; }
    .site-theme-modal-overlay { padding: 8px; align-items: flex-end; }
    .site-theme-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 10px 10px;
        padding: 14px;
    }
    .site-theme-modal-header h3 { font-size: 18px; }
    .site-theme-grid { grid-template-columns: 1fr; }
    .site-theme-choice { grid-template-columns: 52px minmax(0,1fr) 22px; padding: 9px; }
    .site-theme-preview { width: 52px; height: 38px; }
    .site-theme-modal-footer { align-items: stretch; flex-direction: column; }
    .site-theme-footer-actions { width: 100%; }
    .site-theme-footer-actions > button { flex: 1; }
}

@media (max-width: 600px) {
    .site-theme-modal-footer { align-items: stretch; flex-direction: column; }
    .site-theme-footer-actions { width: 100%; flex-wrap: wrap; }
    .site-theme-footer-actions button { flex: 1 1 140px; }
}

/* =========================================================
   v6 - תחולת הפסטל: מעטפת בלבד / כל העמוד
   ========================================================= */

/* ברירת המחדל נשארת בדיוק כמו v5: גוף העמוד + מסגרת בלבד. */
html[data-site-theme][data-site-theme-scope="shell"] {
    --site-theme-surface: #fff;
}

/* במצב "כל העמוד" אנחנו שומרים על אותו פסטל ומרככים אותו מעט
   עבור המשטחים הפנימיים, כדי שטקסטים/כפתורים יישארו קריאים. */
html[data-site-theme][data-site-theme-scope="full"] {
    --site-theme-surface: color-mix(in srgb, var(--site-theme-bg) 72%, #ffffff 28%);
    --site-theme-surface-soft: color-mix(in srgb, var(--site-theme-bg) 52%, #ffffff 48%);
    --site-theme-line-soft: color-mix(in srgb, var(--site-theme-border) 24%, #dbe3ee 76%);
}

html[data-site-theme][data-site-theme-scope="full"] body {
    background-color: var(--site-theme-bg) !important;
}

/* אזורי הממשק הראשיים. הרשימה מכוונת לרכיבי ShopShop החוזרים בין העמודים,
   בלי לגעת בשורת ה-Beta / שורת הצעקה של index.php. */
html[data-site-theme][data-site-theme-scope="full"] :where(
    .main-header,
    .secondary-nav-bar,
    .site-footer,
    .top-bar-header,
    .shopshop-identity-banner,
    .update-widget,
    .category-block,
    .hidden-cat-block,
    .search-filter-card,
    .sidebar,
    .main-content,
    .content-card,
    .content-box,
    .section-card,
    .panel,
    .box,
    .card,
    .product-card,
    .brand-card,
    .series-card,
    .collection-card,
    .forum-card,
    .profile-card,
    .admin-card,
    .stats-card,
    .filters-card,
    .filter-card,
    .results-header,
    .search-dropdown,
    .pagination
) {
    background-color: var(--site-theme-surface) !important;
    border-color: var(--site-theme-line-soft) !important;
}

/* טבלאות מקבלות גוון מעט עדין יותר מהכרטיסים. */
html[data-site-theme][data-site-theme-scope="full"] :where(table, thead, tbody, tfoot, tr, th, td) {
    background-color: var(--site-theme-surface-soft) !important;
    border-color: var(--site-theme-line-soft) !important;
}

/* אזורי קלט נשארים בהירים כדי לא לפגוע בקריאות ובזיהוי של שדות. */
html[data-site-theme][data-site-theme-scope="full"] :where(input, select, textarea, option) {
    background-color: #fff !important;
}

/* שורת הצעקה/Beta נשארת עצמאית לחלוטין גם במצב "כל העמוד". */
html[data-site-theme][data-site-theme-scope="full"] :where(
    .shopshop-beta-notice,
    .shopshop-beta-badge,
    .shopshop-identity-features span
) {
    /* אין כאן background בכוונה: העיצוב המקומי של index.php נשאר הקובע. */
}

/* חלון בחירת הפסטל עצמו לא נצבע בזמן Preview. */
html[data-site-theme][data-site-theme-scope="full"] .site-theme-modal,
html[data-site-theme][data-site-theme-scope="full"] .site-theme-choice,
html[data-site-theme][data-site-theme-scope="full"] .site-theme-scope-choice {
    background: #fff !important;
}

/* --- בקר תחולה בחלון הבחירה --- */
.site-theme-scope-block {
    margin-bottom: 16px;
    padding: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
}
.site-theme-scope-title {
    font-size: 13px;
    font-weight: 900;
    color: #334155;
    margin-bottom: 9px;
}
.site-theme-scope-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.site-theme-scope-choice {
    position: relative;
    min-width: 0;
    border: 2px solid #e2e8f0;
    border-radius: 11px;
    padding: 10px 40px 10px 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: .16s ease;
}
.site-theme-scope-choice:hover {
    border-color: #94a3b8;
    transform: translateY(-1px);
}
.site-theme-scope-choice.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.site-theme-scope-choice strong {
    color: #1e293b;
    font-size: 13px;
}
.site-theme-scope-choice small {
    color: #64748b;
    line-height: 1.45;
    font-size: 11px;
}
.site-theme-scope-check {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) scale(.75);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transition: .16s ease;
}
.site-theme-scope-choice.is-selected .site-theme-scope-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

@media (max-width: 600px) {
    .site-theme-scope-options { grid-template-columns: 1fr; }
}


/* =========================================================
   v8 - השלמת מצב "כל העמוד"
   ========================================================= */

/* דף הבית מכיל מספר בלוקים עם background/gradient מקומי או inline.
   במצב "כל העמוד" גם הם מקבלים את משטח הפסטל, במקום להישאר לבנים. */
html[data-site-theme][data-site-theme-scope="full"] :where(
    .shopshop-identity-banner,
    .update-widget,
    .category-block,
    .hidden-cat-block
) {
    background: var(--site-theme-surface) !important;
    background-color: var(--site-theme-surface) !important;
    border-color: var(--site-theme-line-soft) !important;
}

/* רכיבים פנימיים לבנים שחוזרים בדף הבית. */
html[data-site-theme][data-site-theme-scope="full"] :where(
    .category-header .view-all-link,
    .btn-hide-cat,
    .store-logo-mini
) {
    background-color: var(--site-theme-surface-soft) !important;
    border-color: var(--site-theme-line-soft) !important;
}

/* ה-Beta עצמו נשאר עם הצבע העצמאי שנבחר עבור שורת הצעקה. */
html[data-site-theme][data-site-theme-scope="full"] :where(
    .shopshop-beta-notice,
    .shopshop-beta-badge
) {
    background-color: var(--beta-bg, #f8d7da) !important;
    border-color: var(--beta-border, #dc2626) !important;
    color: var(--beta-text, #991b1b) !important;
}

/* Footer: כשהפסטל צובע גם את ה-Footer, הטקסט חייב להיות כהה וקריא. */
html[data-site-theme][data-site-theme-scope="full"] .site-footer,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-tagline,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-sub-tagline,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .f-link,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-divider,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-bottom-bar,
html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-bottom-bar strong,
html[data-site-theme][data-site-theme-scope="full"] .site-footer span[style*="color: #bdc3c7"],
html[data-site-theme][data-site-theme-scope="full"] .site-footer span[style*="color:#bdc3c7"] {
    color: #111827 !important;
}

html[data-site-theme][data-site-theme-scope="full"] .site-footer .f-link:hover {
    color: #000 !important;
}

html[data-site-theme][data-site-theme-scope="full"] .site-footer .footer-bottom-bar {
    border-top-color: color-mix(in srgb, var(--site-theme-border) 35%, #64748b 65%) !important;
}

/* כפתורי הרשתות עצמם נשארים עם טקסט לבן על הרקע הכחול/ירוק שלהם. */
html[data-site-theme][data-site-theme-scope="full"] .site-footer a[href*="facebook.com"],
html[data-site-theme][data-site-theme-scope="full"] .site-footer a[href*="chat.whatsapp.com"] {
    color: #fff !important;
}