/**
 * TTFC User Preferences - Dashboard-style profile area
 * RTL, brand-aligned, accessible.
 */

/* ------------------------------------------------------------------ */
/* HIDE legacy greeting once the dashboard hero is rendered.           */
/* ------------------------------------------------------------------ */
html.ttfc-prefs-dashboard-loaded .profile-container > .profile-header {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* HERO CARD                                                          */
/* ------------------------------------------------------------------ */
.ttfc-prefs-hero {
    direction: rtl;
    font-family: var(--font-family-accent) !important;
    background-color: var(--primary-color-daat, #273B6B) !important;
    color: #ffffff !important;
    border-radius: 16px;
    padding: 1.4rem 1.5rem 1.25rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}

.ttfc-prefs-hero-row {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

.ttfc-prefs-hero-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttfc-prefs-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* האיקון של דעת — ברירת המחדל של האווטאר כשאין למשתמש תמונת פרופיל.
   מוצג בתוך עיגול ה-Hero, ממורכז ובגודל 70×70. */
.ttfc-prefs-hero-avatar .author-icon {
    width: 71px;
    height: 70px;
    flex-shrink: 0;
    display: block;
    margin: auto;
}

.ttfc-prefs-hero-avatar-initials {
    font-size: 2.1rem;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 1;
}

.ttfc-prefs-hero-meta {
    flex: 1;
    min-width: 0;
}

.ttfc-prefs-hero-greeting {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
}

/* השם של המשתמש בתוך הברכה — מודגש ובהיר יותר מהטקסט הרגיל
   של הברכה. דורש !important כדי לעקוף את הכלל הגלובלי של האתר
   ב-_variables_and_globals.css שמגדיר strong כשחור ולא-מודגש. */
.ttfc-prefs-hero-greeting .ttfc-prefs-hero-greeting-name {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ttfc-prefs-hero-name {
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0 0 0.45rem;
    line-height: 1.2;
    word-break: break-word;
}

.ttfc-prefs-hero-meta-list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
}

.ttfc-prefs-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}

.ttfc-prefs-hero-meta-item strong {
    color: #ffffff !important;
    font-weight: 600;
}

.ttfc-prefs-hero-meta-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.ttfc-prefs-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ttfc-prefs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
    line-height: 1.4;
}

/* Quick-action chips on the LEFT side of the hero (in RTL = visual left).   */
/* Stacked vertically on desktop, wrapped row on small screens.              */
.ttfc-prefs-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.15rem;
}

.ttfc-prefs-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    white-space: nowrap;
}

.ttfc-prefs-hero-action:hover,
.ttfc-prefs-hero-action:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
    text-decoration: none;
}

/* "הפיד שלי" — מעוצב כמו תגית הקטגוריה ("כלכלה") שמופיעה
   על תמונות הפוסטים: גלולה מעוגלת, רקע בהיר של המותג,
   טקסט נייבי, ללא גבול. ב-hover מתהפך — נייבי על לבן.
   מבוסס על .posts-grid-square-container .category-tag. */
.ttfc-prefs-hero-action-primary {
    background: #7181BF !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: .9rem;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ttfc-prefs-hero-action-primary:hover,
.ttfc-prefs-hero-action-primary:focus-visible {
    background-color: var(--secondary-color-daat-bright, #F0F0F3) !important;

    color: var(--primary-color-daat, #273B6B) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(113, 129, 191, 0.3);
}

.ttfc-prefs-hero-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

/* בלוקי הסטטיסטיקה — אותו רקע "lunar-eclipse-overlay-content"
   שמופיע על ה-dual-headline-banner: זכוכית-קפואה נייבי שקופה
   עם blur וצל רך לעומק. מבוסס על _lunar-eclipse-overlay.css. */
.ttfc-prefs-hero-stat {
    background: rgba(39, 59, 107, 0.8);
    opacity: 0.9;
    border: 0;
    border-right: 5px solid var(--secondary-color-daat, #7183C0);
    border-radius: 5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 0.7rem 0.5rem 0.55rem;
    text-align: center;
}

.ttfc-prefs-hero-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.ttfc-prefs-hero-stat-label {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

@media (max-width: 900px) {
    .ttfc-prefs-hero-row {
        flex-wrap: wrap;
    }
    .ttfc-prefs-hero-actions {
        flex-direction: row;
        width: 100%;
        margin-top: 0.4rem;
    }
    .ttfc-prefs-hero-action {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .ttfc-prefs-hero {
        padding: 1.1rem 1rem 1rem;
    }
    .ttfc-prefs-hero-avatar {
        width: 64px;
        height: 64px;
    }
    .ttfc-prefs-hero-avatar-initials {
        font-size: 1.6rem;
    }
    .ttfc-prefs-hero-greeting {
        font-size: 0.85rem;
    }
    .ttfc-prefs-hero-name {
        font-size: 1.25rem;
    }
    .ttfc-prefs-hero-meta-list {
        font-size: 0.75rem;
        gap: 0.25rem 0.85rem;
    }
    .ttfc-prefs-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .ttfc-prefs-hero-stat-value {
        font-size: 1.2rem;
    }
}

/* ------------------------------------------------------------------ */
/* SIDEBAR LAYOUT                                                     */
/*                                                                    */
/* The .profile-container becomes a CSS Grid with:                    */
/*   - Hero card spanning both columns                                */
/*   - Sidebar (.profile-tabs) on the right (RTL)                     */
/*   - Active panel content in the main column on the left            */
/*                                                                    */
/* All inactive .profile-tab-content are hidden via display:none.     */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* PRE-PAINT: kill the polls→overview flicker.                        */
/*                                                                    */
/* An inline <script> in <head> reads the URL hash / localStorage     */
/* and stamps `<html data-ttfc-initial-tab="X">` BEFORE the page      */
/* paints. While that attribute is present (i.e. before our JS has    */
/* taken over), force only the chosen panel to show. !important       */
/* defeats the .active class that custom-auth/profile-tabs.js may add */
/* synchronously on its DOMContentLoaded handler (default polls-tab). */
/* Once our profile.js initialises, it removes the attribute so the   */
/* normal `.profile-tab-content { display:none } / .active { ... }`   */
/* rules from _custom-auth.css resume control.                        */
/* ------------------------------------------------------------------ */
html[data-ttfc-initial-tab] .profile-tab-content {
    display: none !important;
}
html[data-ttfc-initial-tab="profile-overview-tab"] #profile-overview-tab,
html[data-ttfc-initial-tab="notifications-tab"]    #notifications-tab,
html[data-ttfc-initial-tab="security-tab"]         #security-tab,
html[data-ttfc-initial-tab="privacy-tab"]          #privacy-tab,
html[data-ttfc-initial-tab="notification-prefs-tab"] #notification-prefs-tab,
html[data-ttfc-initial-tab="linked-accounts-tab"]  #linked-accounts-tab,
html[data-ttfc-initial-tab="details-tab"]          #details-tab,
html[data-ttfc-initial-tab="saved-posts-tab"]      #saved-posts-tab,
html[data-ttfc-initial-tab="read-posts-tab"]       #read-posts-tab,
html[data-ttfc-initial-tab="unread-posts-tab"]    #unread-posts-tab,
html[data-ttfc-initial-tab="favorite-cats-tab"]    #favorite-cats-tab,
html[data-ttfc-initial-tab="feed-tab"]             #feed-tab,
html[data-ttfc-initial-tab="my-comments-tab"]      #my-comments-tab,
html[data-ttfc-initial-tab="replies-to-me-tab"]    #replies-to-me-tab,
html[data-ttfc-initial-tab="contact-admin-tab"]    #contact-admin-tab,
html[data-ttfc-initial-tab="content-report-tab"]   #content-report-tab {
    display: block !important;
}

html.ttfc-prefs-dashboard-loaded .profile-container {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas:
        "hero  hero"
        "sidebar main";
    gap: 1.25rem 1.5rem;
    align-items: start;
    direction: rtl;
}

html.ttfc-prefs-dashboard-loaded .profile-container .ttfc-prefs-hero {
    grid-area: hero;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tabs {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0.6rem;
    font-family: var(--font-family-accent) !important;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.04);
    direction: rtl;
    /* override any horizontal-tab styling from the theme */
    flex-wrap: initial;
    overflow: visible;
    list-style: none;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-content {
    grid-area: main;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-content:not(.active) {
    display: none !important;
}

/* Section header injected by JS between tab buttons */
.profile-tabs-section {
    padding: 0.7rem 0.85rem 0.4rem;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-color, #333);
    opacity: 0.55;
    text-transform: none;
}

.profile-tabs-section:first-child {
    margin-top: 0;
    padding-top: 0.3rem;
}

/* מפריד דק לפני הכפתור התחתון (התנתק) */
.profile-tabs-bottom-spacer {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(39, 59, 107, 0.08);
    height: 0;
    order: 998; /* fallback אם הסידור־ב־JS לא רץ */
}

/* Fallback: גם אם reorderSidebar לא רץ (cache, JS error וכו'), כרטיס
   ה-logout (data-card-kind="logout") תמיד אחרון בסיידבר. החל מ-1.10.0
   הפיד האישי הוא טאב פנימי (feed-tab) ולא יותר link card חיצוני. */
html.ttfc-prefs-dashboard-loaded .profile-container .profile-tabs .profile-tab-button[data-card-kind="logout"] {
    order: 999;
    margin-top: auto;
}

/* Each tab button as a sidebar item */
html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-button {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: start;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-color, #333);
    font-family: var(--font-family-accent) !important;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
    position: relative;
    box-shadow: none;
    transform: none;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-button:hover,
html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-button:focus-visible {
    background: rgba(39, 59, 107, 0.06);
    outline: none;
    transform: none;
    box-shadow: none;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-button.active {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: none;
}

html.ttfc-prefs-dashboard-loaded .profile-container .profile-tab-button.active .ttfc-prefs-menu-card-meta {
    color: rgba(255, 255, 255, 0.78);
}

/* In sidebar layout, the icon is smaller, no background box */
html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent !important;
    color: inherit;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-icon svg {
    width: 20px;
    height: 20px;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-title {
    font-size: 0.95rem;
    font-weight: inherit;
    color: inherit;
    line-height: 1.3;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-color, #333);
    opacity: 0.6;
    line-height: 1.3;
    /* hide meta on sidebar by default to keep it compact */
    display: none;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-arrow {
    display: none;
}

/* Logout link tinted */
html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-logout {
    color: #b00020;
}

html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-logout:hover,
html.ttfc-prefs-dashboard-loaded .ttfc-prefs-menu-card-logout:focus-visible {
    background: rgba(176, 0, 32, 0.08);
}

/* Mobile: collapse sidebar above content */
@media (max-width: 800px) {
    html.ttfc-prefs-dashboard-loaded .profile-container {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "sidebar" "main";
    }

    html.ttfc-prefs-dashboard-loaded .profile-container .profile-tabs {
        position: static;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-hero,
    .profile-tab-button {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Existing per-section styles (saved/cats/comments) – unchanged      */
/* ------------------------------------------------------------------ */
.ttfc-prefs-section {
    direction: rtl;
    font-family: var(--font-family-accent) !important;
}

.ttfc-prefs-section-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ttfc-prefs-section-header h2 {
    margin: 0;
    color: var(--text-color, #333);
}

.ttfc-prefs-section-desc {
    width: 100%;
    margin: 0;
    color: var(--text-color, #333);
    opacity: 0.8;
    font-size: 0.95rem;
    line-height: 1.55;
}

.ttfc-prefs-feed-link {
    /* כחול האתר — אותו `--secondary-color` שמופיע בכל הקישורים הגלובליים
     * (`article a / p a`) ב-_variables_and_globals.css = #1274ac. */
    color: var(--secondary-color, #1274ac);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    /* מבטל את ה-border-bottom הגלובלי של "article a / p a" */
    border-bottom: 0 !important;
    box-shadow: none;
}

.ttfc-prefs-feed-link:hover,
.ttfc-prefs-feed-link:focus-visible {
    color: var(--secondary-color-dark, #005f8c);
    text-decoration: none;
    border-bottom: 0 !important;
    outline: none;
}

.ttfc-prefs-loading {
    color: var(--text-color, #333);
    opacity: 0.7;
    margin: 1rem 0;
}

/* ---------- Saved / read / feed article cards ----------
 * שלושת הקונטיינרים (`#ttfc-prefs-saved-list`, `#ttfc-prefs-read-list`,
 * `.ttfc-prefs-feed-grid` בלשונית "הפיד האישי שלי" + בעמוד /my-feed/)
 * מאמצים את העיצוב הגלובלי של ".article-card-square" מתוך תוסף
 * ttfc-homepage-manager (posts-grid-square block). ה-CSS כאן הוא העתק
 * מקומי של החלקים הרלוונטיים מ-_posts-grid-square.css כך שהעיצוב יעבוד
 * גם בעמוד /profile/ (שם homepage-compiled.css לא נטען).
 *
 * Scope: כל ה-selectors תחת `.ttfc-prefs-saved-list, .ttfc-prefs-feed-grid`
 * כדי לא להתנגש בעמודים אחרים.
 */
.ttfc-prefs-saved-list,
.ttfc-prefs-read-list,
.ttfc-prefs-unread-list,
.ttfc-prefs-feed-grid {
    margin: 0.5rem 0 1rem;
}

/* גריד דינמי (ה-classes/data-columns נוספים בצד server/JS) */
.ttfc-prefs-saved-list.posts-grid-square-container,
.ttfc-prefs-read-list.posts-grid-square-container,
.ttfc-prefs-feed-grid.posts-grid-square-container {
    display: grid;
    gap: 22px;
}

.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="1"],
.ttfc-prefs-read-list.posts-grid-square-container[data-columns="1"],
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="1"] {
    grid-template-columns: 1fr;
}

.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="2"],
.ttfc-prefs-read-list.posts-grid-square-container[data-columns="2"],
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="3"],
.ttfc-prefs-read-list.posts-grid-square-container[data-columns="3"],
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="4"],
.ttfc-prefs-read-list.posts-grid-square-container[data-columns="4"],
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* --- כרטיס --- */
.ttfc-prefs-saved-list .article-card-square,
.ttfc-prefs-read-list .article-card-square,
.ttfc-prefs-feed-grid .article-card-square {
    background: var(--cards-bg-color, #fff);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: auto;
}

.ttfc-prefs-saved-list.subtle-frame .article-card-square,
.ttfc-prefs-feed-grid.subtle-frame .article-card-square {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ttfc-prefs-saved-list.rounded-corners .article-card-square,
.ttfc-prefs-feed-grid.rounded-corners .article-card-square {
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
}

.ttfc-prefs-saved-list.rounded-corners .square-image-container,
.ttfc-prefs-feed-grid.rounded-corners .square-image-container {
    border-radius: 5px 5px 0 0;
}

.ttfc-prefs-saved-list.subtle-frame .article-card-square:hover,
.ttfc-prefs-feed-grid.subtle-frame .article-card-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

/* --- תמונה --- */
.ttfc-prefs-saved-list .square-image-container,
.ttfc-prefs-feed-grid .square-image-container {
    position: relative;
    width: 100%;
    /* יחס רחב יותר לכרטיס בעמודה אחת (תמונה גבוהה לרוחב מלא) */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* אם בעתיד נחזור לכמה עמודות — לתמונות ריבועיות יותר */
.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="2"] .square-image-container,
.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="3"] .square-image-container,
.ttfc-prefs-saved-list.posts-grid-square-container[data-columns="4"] .square-image-container,
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="2"] .square-image-container,
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="3"] .square-image-container,
.ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="4"] .square-image-container {
    aspect-ratio: 3 / 2;
}

.ttfc-prefs-saved-list .square-image-container .image-link,
.ttfc-prefs-feed-grid .square-image-container .image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.ttfc-prefs-saved-list .square-image-container img,
.ttfc-prefs-feed-grid .square-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.ttfc-prefs-saved-list .article-card-square:hover .square-image-container img,
.ttfc-prefs-feed-grid .article-card-square:hover .square-image-container img {
    transform: scale(1.05);
}

/* --- תגית קטגוריה (overlay מעל התמונה) --- */
.ttfc-prefs-saved-list .category-tag,
.ttfc-prefs-feed-grid .category-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7181BF !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 4px 14px;
    border-radius: 20px;
    font-family: var(--font-family-accent) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    position: absolute;
    /* פינה תחתונה-שמאל של התמונה (RTL: inset-inline-start = ימין). 
     * הקלאס נשאר בתוך התמונה כי ה-container עם overflow:hidden. */
    bottom: 16px;
    inset-inline-start: 16px;
    z-index: 10;
    margin: 0;
    min-width: 84px;
    height: auto;
    box-shadow: 0 2px 6px rgba(39, 59, 107, 0.18);
}

.ttfc-prefs-saved-list .category-tag:hover,
.ttfc-prefs-feed-grid .category-tag:hover {
    background: #273B6B !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(113, 129, 191, 0.3);
}

/* --- תוכן הכתבה --- */
.ttfc-prefs-saved-list .article-content,
.ttfc-prefs-feed-grid .article-content {
    background-color: rgb(250 250 251);
    padding: 24px 28px 16px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
}

.ttfc-prefs-saved-list .article-card-square .article-title,
.ttfc-prefs-feed-grid .article-card-square .article-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px 0;
    color: #273B6B;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
}

/* מבטלים את ה-border-bottom הגלובלי של "article a" / "p a" וכו'
 * שאחרת היה יוצר קו דק מתחת לכותרת + מתחת לתמונה ו-category-tag. */
.ttfc-prefs-saved-list .article-card-square a,
.ttfc-prefs-saved-list .article-card-square a:hover,
.ttfc-prefs-saved-list .article-card-square a:focus,
.ttfc-prefs-saved-list .article-card-square a:visited,
.ttfc-prefs-feed-grid .article-card-square a,
.ttfc-prefs-feed-grid .article-card-square a:hover,
.ttfc-prefs-feed-grid .article-card-square a:focus,
.ttfc-prefs-feed-grid .article-card-square a:visited {
    text-decoration: none;
    color: inherit;
    border-bottom: 0 !important;
    box-shadow: none;
}

.ttfc-prefs-saved-list .article-card-square a:hover .article-title,
.ttfc-prefs-feed-grid .article-card-square a:hover .article-title {
    color: var(--primary-color, #7181BF);
}

/* --- מטא (כותב/תאריך/זמן קריאה) --- */
.ttfc-prefs-saved-list .article-meta-container,
.ttfc-prefs-feed-grid .article-meta-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    padding-bottom: 4px;
    border-top: 1.6px solid #7183C0;
    min-height: 22px;
    gap: 12px;
    flex-wrap: wrap;
}

.ttfc-prefs-saved-list .article-card-square .article-meta,
.ttfc-prefs-feed-grid .article-card-square .article-meta {
    font-size: 1.05rem;
    color: #273B6B;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.ttfc-prefs-saved-list .article-meta.author-date,
.ttfc-prefs-feed-grid .article-meta.author-date {
    flex-wrap: wrap;
    white-space: normal;
}

.ttfc-prefs-saved-list .article-meta.reading-time,
.ttfc-prefs-feed-grid .article-meta.reading-time {
    justify-content: flex-end;
    margin-inline-start: auto;
}

.ttfc-prefs-saved-list .article-meta .author,
.ttfc-prefs-feed-grid .article-meta .author {
    font-weight: 700;
    color: #7183C0;
    font-size: 1.05rem;
}

.ttfc-prefs-saved-list .article-meta .date,
.ttfc-prefs-feed-grid .article-meta .date {
    color: #273B6B;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
    position: relative;
}

.ttfc-prefs-saved-list .article-meta .ttfc-reading-time,
.ttfc-prefs-feed-grid .article-meta .ttfc-reading-time {
    color: #273B6B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ttfc-prefs-saved-list .article-meta .ttfc-reading-time .ttfc-reading-time__text,
.ttfc-prefs-feed-grid .article-meta .ttfc-reading-time .ttfc-reading-time__text {
    color: #273B6B;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
}

.ttfc-prefs-saved-list .article-meta .ttfc-reading-time svg,
.ttfc-prefs-feed-grid .article-meta .ttfc-reading-time svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    top: -2px;
}

/* --- כפתור הסרה (overlay מעל התמונה, ימין למעלה ב-RTL) --- */
.ttfc-prefs-saved-list .ttfc-prefs-saved-remove {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-color-daat, #273B6B);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    z-index: 11; /* מעל ה-category-tag */
}

.ttfc-prefs-saved-list .ttfc-prefs-saved-remove:hover,
.ttfc-prefs-saved-list .ttfc-prefs-saved-remove:focus-visible {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    outline: none;
    transform: scale(1.05);
}

/* --- כפתור שמור/הסר ב-feed-card (overlay מעל התמונה, RTL: ימין למעלה) --- */
.ttfc-prefs-feed-grid .ttfc-prefs-card-save {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 2rem;
    height: 2rem;
    min-width: 0;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-color-daat, #273B6B);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    z-index: 11;
}

.ttfc-prefs-feed-grid .ttfc-prefs-card-save:hover,
.ttfc-prefs-feed-grid .ttfc-prefs-card-save:focus-visible {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    outline: none;
    transform: scale(1.05);
}

.ttfc-prefs-feed-grid .ttfc-prefs-card-save.is-saved {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff;
}

/* טקסט "שמור/נשמר" — מוסתר במצב overlay (אייקון בלבד) */
.ttfc-prefs-feed-grid .ttfc-prefs-card-save .ttfc-prefs-btn-text {
    display: none;
}

/* --- רספונסיביות --- */
@media (max-width: 1024px) {
    .ttfc-prefs-saved-list.posts-grid-square-container[data-columns="3"],
    .ttfc-prefs-saved-list.posts-grid-square-container[data-columns="4"],
    .ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="3"],
    .ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ttfc-prefs-saved-list.posts-grid-square-container[data-columns="2"],
    .ttfc-prefs-saved-list.posts-grid-square-container[data-columns="3"],
    .ttfc-prefs-saved-list.posts-grid-square-container[data-columns="4"],
    .ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="2"],
    .ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="3"],
    .ttfc-prefs-feed-grid.posts-grid-square-container[data-columns="4"] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ttfc-prefs-saved-list .article-card-square .article-title,
    .ttfc-prefs-feed-grid .article-card-square .article-title {
        font-size: 1.35rem;
        line-height: 1.3;
        min-height: 0;
    }

    .ttfc-prefs-saved-list .article-content,
    .ttfc-prefs-feed-grid .article-content {
        padding: 20px 18px 12px;
    }

    .ttfc-prefs-saved-list .category-tag,
    .ttfc-prefs-feed-grid .category-tag {
        bottom: 12px;
        inset-inline-start: 12px;
        font-size: 0.9rem;
        padding: 3px 12px;
    }

    .ttfc-prefs-saved-list .article-meta-container,
    .ttfc-prefs-feed-grid .article-meta-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-top: 10px;
    }

    .ttfc-prefs-saved-list .article-meta.reading-time,
    .ttfc-prefs-feed-grid .article-meta.reading-time {
        justify-content: flex-start;
        margin-inline-start: 0;
    }
}

/* תאימות עם prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-saved-list .article-card-square,
    .ttfc-prefs-saved-list .square-image-container img,
    .ttfc-prefs-saved-list .ttfc-prefs-saved-remove,
    .ttfc-prefs-feed-grid .article-card-square,
    .ttfc-prefs-feed-grid .square-image-container img,
    .ttfc-prefs-feed-grid .ttfc-prefs-card-save {
        transition: none !important;
    }

    .ttfc-prefs-saved-list .article-card-square:hover,
    .ttfc-prefs-feed-grid .article-card-square:hover {
        transform: none !important;
    }

    .ttfc-prefs-saved-list .article-card-square:hover .square-image-container img,
    .ttfc-prefs-feed-grid .article-card-square:hover .square-image-container img {
        transform: none !important;
    }
}

.ttfc-prefs-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-color, #333);
    opacity: 0.8;
    background: var(--off-white, #fafafa);
    border: 1px dashed rgba(39, 59, 107, 0.15);
    border-radius: 10px;
}

/* ---------- Pagination ---------- */
.ttfc-prefs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0;
}

.ttfc-prefs-page-btn {
    background: transparent;
    border: 1px solid rgba(39, 59, 107, 0.2);
    color: var(--primary-color-daat, #273B6B);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family-accent) !important;
    transition: background 150ms ease;
}

.ttfc-prefs-page-btn:hover:not(:disabled),
.ttfc-prefs-page-btn:focus-visible {
    background: rgba(39, 59, 107, 0.06);
    outline: none;
}

.ttfc-prefs-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ttfc-prefs-page-info {
    font-size: 0.9rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

/* ---------- Favorite categories grid ---------- */
.ttfc-prefs-cats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.ttfc-prefs-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(39, 59, 107, 0.25);
    background: #fff;
    color: var(--primary-color-daat, #273B6B);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family-accent) !important;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ttfc-prefs-cat-chip:hover,
.ttfc-prefs-cat-chip:focus-visible {
    background: rgba(39, 59, 107, 0.06);
    outline: none;
}

.ttfc-prefs-cat-chip.is-active {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    border-color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-cat-chip.is-active:hover,
.ttfc-prefs-cat-chip.is-active:focus-visible {
    background: #1d2d52;
}

.ttfc-prefs-cat-chip[aria-busy="true"] {
    opacity: 0.6;
    cursor: wait;
}

.ttfc-prefs-cat-count {
    font-size: 0.78rem;
    opacity: 0.75;
    font-weight: 500;
}

/* ---------- Comments lists (my comments + replies to me) ---------- */
.ttfc-prefs-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.5rem 0 1rem;
}

.ttfc-prefs-comment-item {
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.12);
    border-radius: 12px;
    padding: 0.9rem 1rem 0.85rem;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.ttfc-prefs-comment-item:hover {
    border-color: rgba(39, 59, 107, 0.22);
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.06);
}

.ttfc-prefs-comment-item-reply {
    border-inline-start: 3px solid var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-comment-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    font-size: 0.88rem;
}

.ttfc-prefs-comment-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color, #333);
}

.ttfc-prefs-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(39, 59, 107, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ttfc-prefs-comment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ttfc-prefs-comment-avatar-initials {
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
    font-size: 0.95rem;
}

.ttfc-prefs-comment-author-name {
    font-weight: 600;
    color: var(--text-color, #333);
    font-size: 0.92rem;
}

/* The comment card is wrapped in `<article>`, so the global theme rules
   for `article a` (and `a:hover`) want to repaint this link:
   - default state → `--secondary-color` (#1274ac, blue) + border-bottom
   - hover/active  → `--link-hover` (#b22222, deep red) + red underline
   - visited state → browser UA fallback (dark red on Chromium)
   None of these are appropriate for a profile-area card link, so we pin
   the color (and text-decoration color) to the brand navy for every link
   state. `!important` matches the pattern used elsewhere in this file
   (e.g. the saved-posts/feed cards) to defeat the global cascade reliably. */
.ttfc-prefs-comment-post,
.ttfc-prefs-comment-post:link,
.ttfc-prefs-comment-post:visited,
.ttfc-prefs-comment-post:hover,
.ttfc-prefs-comment-post:focus,
.ttfc-prefs-comment-post:focus-visible,
.ttfc-prefs-comment-post:active {
    color: var(--primary-color-daat, #273B6B) !important;
    text-decoration-color: var(--primary-color-daat, #273B6B) !important;
    border-bottom: 0 !important;
}

.ttfc-prefs-comment-post {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-block;
    /* `transform` is animated so the hover state matches the
       translateY(-1px) lift used everywhere else in the personal area
       (hero actions, saved-cards, primary buttons, …). */
    transition: transform 120ms ease;
}

.ttfc-prefs-comment-post:hover,
.ttfc-prefs-comment-post:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

.ttfc-prefs-comment-post-disabled {
    color: var(--text-color, #333);
    opacity: 0.55;
    font-weight: 600;
    font-size: 0.88rem;
}

.ttfc-prefs-comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.ttfc-prefs-comment-badge-pending {
    background: rgba(212, 142, 14, 0.15);
    color: #8a5a06;
}

.ttfc-prefs-comment-quote {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--secondary-color-daat-bright, #F0F0F3);
    border-radius: 8px;
    border-inline-start: 3px solid rgba(39, 59, 107, 0.25);
    font-size: 0.88rem;
    color: var(--text-color, #333);
    opacity: 0.9;
    line-height: 1.5;
}

.ttfc-prefs-comment-quote-label {
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
    margin-inline-end: 0.25rem;
}

.ttfc-prefs-comment-body {
    color: var(--text-color, #333);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.ttfc-prefs-comment-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    margin-top: 0.6rem;
    font-size: 0.83rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-comment-footer time {
    flex-shrink: 0;
}

.ttfc-prefs-comment-likes {
    color: var(--primary-color-daat, #273B6B);
    font-weight: 600;
}

/* Same brand-blue pin as `.ttfc-prefs-comment-post` above — see the
   comment there for why this needs to cover every link state. */
.ttfc-prefs-comment-link,
.ttfc-prefs-comment-link:link,
.ttfc-prefs-comment-link:visited,
.ttfc-prefs-comment-link:hover,
.ttfc-prefs-comment-link:focus,
.ttfc-prefs-comment-link:focus-visible,
.ttfc-prefs-comment-link:active {
    color: var(--primary-color-daat, #273B6B) !important;
    text-decoration-color: var(--primary-color-daat, #273B6B) !important;
    border-bottom: 0 !important;
}

.ttfc-prefs-comment-link {
    margin-inline-start: auto;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    /* Same translateY(-1px) lift used everywhere else in the personal
       area — see `.ttfc-prefs-comment-post` above. */
    transition: transform 120ms ease;
}

.ttfc-prefs-comment-link:hover,
.ttfc-prefs-comment-link:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-saved-card,
    .ttfc-prefs-cat-chip,
    .ttfc-prefs-page-btn,
    .ttfc-prefs-saved-card-remove,
    .ttfc-prefs-comment-item,
    .ttfc-prefs-comment-post,
    .ttfc-prefs-comment-link {
        transition: none;
    }
    .ttfc-prefs-comment-post:hover,
    .ttfc-prefs-comment-post:focus-visible,
    .ttfc-prefs-comment-link:hover,
    .ttfc-prefs-comment-link:focus-visible {
        transform: none;
    }
}

@media (max-width: 600px) {
    .ttfc-prefs-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ttfc-prefs-comment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ttfc-prefs-comment-link {
        margin-inline-start: 0;
    }
}

/* ------------------------------------------------------------------ */
/* OVERVIEW PANEL – pure profile info, no navigation                  */
/* ------------------------------------------------------------------ */

/* _header.css used to target bare `header { position: sticky }`, which
   made in-page profile headers (avatar, badges…) stick while scrolling.
   Reset any ttfc-prefs section header inside the profile shell. */
.profile-container header[class^="ttfc-prefs-"],
.profile-tab-content header[class^="ttfc-prefs-"] {
    position: static;
    top: auto;
    z-index: auto;
    width: auto;
    margin: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    direction: inherit;
}

.ttfc-prefs-overview > h2 {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
}

/* Header row: avatar + name + email + badges */
.ttfc-prefs-overview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: linear-gradient(180deg,
                rgba(39, 59, 107, 0.05) 0%,
                rgba(39, 59, 107, 0.02) 100%);
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 14px;
}

.ttfc-prefs-overview-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--primary-color-daat, #273B6B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.4rem;
    border: 2px solid #fff;
}

.ttfc-prefs-overview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ttfc-prefs-overview-initials {
    line-height: 1;
    letter-spacing: -0.02em;
    user-select: none;
}

.ttfc-prefs-overview-identity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.ttfc-prefs-overview-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
    line-height: 1.2;
}

.ttfc-prefs-overview-email {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-color, #333);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ttfc-prefs-overview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.ttfc-prefs-status-pill-google {
    background: var(--secondary-color-daat, #7183C0);
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .ttfc-prefs-overview-header {
        flex-wrap: wrap;
    }
    .ttfc-prefs-overview-identity {
        width: 100%;
    }
}

.ttfc-prefs-info-block {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 12px;
}

.ttfc-prefs-info-block-title {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color-daat, #273B6B);
    text-transform: none;
}

.ttfc-prefs-info-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ttfc-prefs-info-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(39, 59, 107, 0.06);
}

.ttfc-prefs-info-row:last-child {
    border-bottom: 0;
}

.ttfc-prefs-info-row dt {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color, #333);
    opacity: 0.7;
}

.ttfc-prefs-info-row dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-color, #333);
    word-break: break-word;
}

.ttfc-prefs-info-empty {
    color: var(--text-color, #333);
    opacity: 0.45;
    font-style: italic;
    font-size: 0.9rem;
}

/* Status pill (verified / unverified) */
.ttfc-prefs-status-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.ttfc-prefs-status-pill-verified {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
}

.ttfc-prefs-status-pill-pending {
    background: var(--secondary-color-daat-bright, #F0F0F3);
    color: var(--primary-color-daat, #273B6B);
}

@media (max-width: 600px) {
    .ttfc-prefs-info-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* ------------------------------------------------------------------ */
/* LINKED ACCOUNTS PANEL                                              */
/* ------------------------------------------------------------------ */
.ttfc-prefs-linked-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ttfc-prefs-linked-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 12px;
}

.ttfc-prefs-linked-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(39, 59, 107, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-linked-icon-google {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.ttfc-prefs-linked-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.ttfc-prefs-linked-title {
    font-weight: 700;
    color: var(--text-color, #333);
}

.ttfc-prefs-linked-value {
    font-size: 0.88rem;
    color: var(--text-color, #333);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttfc-prefs-linked-status {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Brand-blue pill — matches the card border + icon background tones
   (rgba(39, 59, 107, …)) so the badge integrates with the rest of the
   linked-account card instead of clashing with a green accent. */
.ttfc-prefs-linked-status-active {
    background: rgba(39, 59, 107, 0.1);
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-linked-status-inactive {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ */
/* SECURITY PANEL                                                     */
/* ------------------------------------------------------------------ */
.ttfc-prefs-security-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

.ttfc-prefs-security-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 12px;
}

.ttfc-prefs-security-row-soon {
    background: rgba(39, 59, 107, 0.02);
    border-style: dashed;
}

.ttfc-prefs-security-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(39, 59, 107, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-security-row-soon .ttfc-prefs-security-row-icon {
    background: rgba(39, 59, 107, 0.04);
    opacity: 0.7;
}

.ttfc-prefs-security-row-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.ttfc-prefs-security-row-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color, #333);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ttfc-prefs-security-row-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-color, #333);
    opacity: 0.78;
}

.ttfc-prefs-security-row-desc a {
    color: var(--primary-color-daat, #273B6B);
    font-weight: 600;
}

.ttfc-prefs-security-row-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ttfc-prefs-security-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.95rem;
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
    white-space: nowrap;
}

.ttfc-prefs-security-cta:hover,
.ttfc-prefs-security-cta:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff !important;
    outline: none;
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.18);
}

.ttfc-prefs-security-cta-secondary {
    color: var(--primary-color-daat, #273B6B);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.4rem 0.5rem;
}

.ttfc-prefs-security-cta-secondary:hover,
.ttfc-prefs-security-cta-secondary:focus-visible {
    text-decoration: underline;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-security-cta-disabled {
    font-size: 0.82rem;
    color: var(--text-color, #333);
    opacity: 0.5;
    white-space: nowrap;
    padding: 0.4rem 0.5rem;
}

.ttfc-prefs-security-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.ttfc-prefs-security-pill-soon {
    background: rgba(39, 59, 107, 0.1);
    color: var(--primary-color-daat, #273B6B);
}

@media (max-width: 600px) {
    .ttfc-prefs-security-row {
        flex-wrap: wrap;
    }
    .ttfc-prefs-security-row-action {
        width: 100%;
        margin-top: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-security-cta {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* COMING-SOON PLACEHOLDER PANEL                                      */
/* ------------------------------------------------------------------ */
.ttfc-prefs-coming-soon {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem;
}

.ttfc-prefs-coming-soon-badge {
    position: absolute;
    inset-inline-start: 1.25rem;
    inset-block-start: 1rem;
    background: rgba(39, 59, 107, 0.08);
    color: var(--primary-color-daat, #273B6B);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

.ttfc-prefs-coming-soon h2 {
    margin: 0.5rem 0 0.4rem;
}

.ttfc-prefs-coming-soon-illustration {
    margin: 1rem auto;
    color: var(--primary-color-daat, #273B6B);
    opacity: 0.35;
}

.ttfc-prefs-coming-soon-note {
    color: var(--text-color, #333);
    opacity: 0.65;
    font-size: 0.92rem;
}

.ttfc-prefs-info-card {
    margin: 1rem 0 0;
    padding: 1rem 1.15rem;
    background: rgba(39, 59, 107, 0.04);
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 10px;
}

.ttfc-prefs-info-card a {
    color: var(--primary-color-daat, #273B6B);
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* NOTIFICATION PREFERENCES FORM                                      */
/* ------------------------------------------------------------------ */
.ttfc-prefs-notif-form {
    margin-top: 1rem;
}

.ttfc-prefs-notif-group {
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 12px;
    padding: 0.5rem 1rem 1rem;
    margin: 0;
    background: #fff;
}

.ttfc-prefs-notif-group + .ttfc-prefs-notif-group {
    margin-top: 1rem;
}

.ttfc-prefs-notif-group legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
    letter-spacing: 0.04em;
}

.ttfc-prefs-notif-group .ttfc-prefs-fieldset-desc {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.82rem;
    color: var(--text-color, #333);
    opacity: 0.75;
    line-height: 1.5;
}

.ttfc-prefs-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(39, 59, 107, 0.06);
    cursor: pointer;
}

.ttfc-prefs-toggle-row:last-child {
    border-bottom: 0;
    padding-bottom: 0.5rem;
}

.ttfc-prefs-toggle-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.ttfc-prefs-toggle-title {
    font-weight: 700;
    color: var(--text-color, #333);
    font-size: 0.98rem;
}

.ttfc-prefs-toggle-desc {
    font-size: 0.85rem;
    color: var(--text-color, #333);
    opacity: 0.7;
    line-height: 1.5;
}

/* iOS-style toggle switch */
.ttfc-prefs-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ttfc-prefs-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ttfc-prefs-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(39, 59, 107, 0.18);
    border-radius: 999px;
    transition: background 150ms ease;
}

.ttfc-prefs-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: inset-inline-start 150ms ease;
}

.ttfc-prefs-toggle-switch input:checked + .ttfc-prefs-toggle-slider {
    background: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-toggle-switch input:checked + .ttfc-prefs-toggle-slider::before {
    inset-inline-start: 22px;
}

.ttfc-prefs-toggle-switch input:focus-visible + .ttfc-prefs-toggle-slider {
    outline: 2px solid var(--primary-color-daat, #273B6B);
    outline-offset: 2px;
}

.ttfc-prefs-notif-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.ttfc-prefs-notif-save-btn {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 1.5rem;
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 150ms ease, transform 120ms ease;
    font-family: var(--font-family-accent) !important;
}

.ttfc-prefs-notif-save-btn:hover,
.ttfc-prefs-notif-save-btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.2);
}

.ttfc-prefs-notif-save-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ttfc-prefs-notif-status {
    font-size: 0.9rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-notif-status.is-success {
    color: var(--secondary-color-daat, #7183C0);
    font-weight: 600;
}

.ttfc-prefs-notif-status.is-error {
    color: #b00020;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-toggle-slider,
    .ttfc-prefs-toggle-slider::before,
    .ttfc-prefs-notif-save-btn {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* PERSONAL DETAILS – view / edit mode                                */
/* ------------------------------------------------------------------ */

.ttfc-prefs-info-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.ttfc-prefs-info-block-header .ttfc-prefs-info-block-title {
    margin: 0;
}

.ttfc-prefs-edit-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(39, 59, 107, 0.25);
    color: var(--primary-color-daat, #273B6B);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family-accent) !important;
    transition: background 150ms ease, border-color 150ms ease;
}

.ttfc-prefs-edit-toggle:hover,
.ttfc-prefs-edit-toggle:focus-visible {
    background: rgba(39, 59, 107, 0.08);
    border-color: var(--primary-color-daat, #273B6B);
    outline: none;
}

/* View / edit mode visibility: only one of the two children of
   .ttfc-prefs-personal is visible at a time, driven by data-mode. */
.ttfc-prefs-personal .ttfc-prefs-personal-form { display: none; }
.ttfc-prefs-personal[data-mode="edit"] .ttfc-prefs-personal-view { display: none; }
.ttfc-prefs-personal[data-mode="edit"] .ttfc-prefs-personal-form { display: block; }
.ttfc-prefs-personal[data-mode="edit"] .ttfc-prefs-edit-open { display: none; }

.ttfc-prefs-personal-form-note {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-color, #333);
    opacity: 0.7;
}

.ttfc-prefs-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
}

@media (max-width: 600px) {
    .ttfc-prefs-form-grid {
        grid-template-columns: 1fr;
    }
}

.ttfc-prefs-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ttfc-prefs-form-field-full {
    grid-column: 1 / -1;
}

.ttfc-prefs-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-form-field input[type="text"],
.ttfc-prefs-form-field input[type="tel"],
.ttfc-prefs-form-field input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.2);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-family: var(--font-family-accent) !important;
    color: var(--text-color, #333);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    direction: ltr;
    text-align: start;
}

/* Hebrew text inputs (names, phone) read RTL even though the wider page
   already is – inputs default to LTR in some browsers. */
.ttfc-prefs-form-field input[type="text"] {
    direction: rtl;
    text-align: right;
}

.ttfc-prefs-form-field input:focus {
    border-color: var(--primary-color-daat, #273B6B);
    box-shadow: 0 0 0 3px rgba(39, 59, 107, 0.15);
    outline: none;
}

.ttfc-prefs-form-field input:invalid {
    border-color: rgba(176, 0, 32, 0.55);
}

.ttfc-prefs-form-hint {
    font-size: 0.8rem;
    color: var(--text-color, #333);
    opacity: 0.6;
}

.ttfc-prefs-form-field-readonly .ttfc-prefs-form-readonly-value {
    padding: 0.55rem 0.7rem;
    background: rgba(39, 59, 107, 0.04);
    border: 1px dashed rgba(39, 59, 107, 0.18);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-personal-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ttfc-prefs-btn-primary,
.ttfc-prefs-btn-secondary {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-family-accent) !important;
    cursor: pointer;
    transition: opacity 150ms ease, transform 120ms ease, background 150ms ease;
}

.ttfc-prefs-btn-primary {
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
}

.ttfc-prefs-btn-primary:hover,
.ttfc-prefs-btn-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.2);
    outline: none;
}

.ttfc-prefs-btn-primary[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ttfc-prefs-btn-secondary {
    background: transparent;
    color: var(--primary-color-daat, #273B6B);
    border: 1px solid rgba(39, 59, 107, 0.25);
}

.ttfc-prefs-btn-secondary:hover,
.ttfc-prefs-btn-secondary:focus-visible {
    background: rgba(39, 59, 107, 0.08);
    outline: none;
}

.ttfc-prefs-personal-form-status {
    font-size: 0.9rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-personal-form-status.is-success {
    color: var(--secondary-color-daat, #7183C0);
    font-weight: 600;
}

.ttfc-prefs-personal-form-status.is-error {
    color: #b00020;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* CONTACT ADMIN — user → management messaging tab                    */
/* ------------------------------------------------------------------ */

.ttfc-prefs-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 12px;
}

.ttfc-prefs-contact-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-color, #333);
    opacity: 0.75;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(39, 59, 107, 0.12);
}

.ttfc-prefs-contact-meta-label {
    font-weight: 700;
}

.ttfc-prefs-contact-form .ttfc-prefs-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}

.ttfc-prefs-contact-form .ttfc-prefs-form-field label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color, #333);
}

.ttfc-prefs-contact-form input[type="text"],
.ttfc-prefs-contact-form input[type="search"],
.ttfc-prefs-contact-form input[type="url"],
.ttfc-prefs-contact-form textarea,
.ttfc-prefs-contact-form select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(39, 59, 107, 0.2);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color, #333);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ttfc-prefs-contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

/* RTL-friendly native select chevron — Hebrew label sits on the right,
   so the indicator should appear on the inline-start (left in RTL). */
.ttfc-prefs-contact-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-start: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23273B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.9rem center;
    background-size: 12px 8px;
    cursor: pointer;
}

[dir="rtl"] .ttfc-prefs-contact-form select,
html[dir="rtl"] .ttfc-prefs-contact-form select {
    background-position: left 0.9rem center;
}

.ttfc-prefs-contact-form input[type="text"]:focus,
.ttfc-prefs-contact-form input[type="search"]:focus,
.ttfc-prefs-contact-form input[type="url"]:focus,
.ttfc-prefs-contact-form textarea:focus,
.ttfc-prefs-contact-form select:focus {
    outline: none;
    border-color: var(--primary-color-daat, #273B6B);
    box-shadow: 0 0 0 3px rgba(39, 59, 107, 0.12);
}

.ttfc-prefs-contact-form input[type="text"].is-invalid,
.ttfc-prefs-contact-form input[type="search"].is-invalid,
.ttfc-prefs-contact-form input[type="url"].is-invalid,
.ttfc-prefs-contact-form textarea.is-invalid,
.ttfc-prefs-contact-form select.is-invalid {
    border-color: #b00020;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.12);
}

/* Divider between the two forms (feedback / article suggestion) inside
   the same /profile/#contact-admin-tab panel. Kept subtle so the two
   forms feel like one section rather than separate cards. */
.ttfc-prefs-contact-divider {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px dashed rgba(39, 59, 107, 0.18);
}

.ttfc-prefs-suggest-form-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-contact-counter {
    position: absolute;
    bottom: 0.5rem;
    inset-inline-start: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-color, #333);
    opacity: 0.55;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 0.3rem;
    border-radius: 4px;
}

.ttfc-prefs-contact-counter.is-warning {
    color: #b06200;
    opacity: 0.9;
}

.ttfc-prefs-contact-counter.is-error {
    color: #b00020;
    opacity: 1;
    font-weight: 600;
}

.ttfc-prefs-contact-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.ttfc-prefs-contact-submit {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.65rem 1.6rem;
    background: var(--primary-color-daat, #273B6B);
    color: #ffffff !important;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 150ms ease, transform 120ms ease, box-shadow 150ms ease;
    font-family: var(--font-family-accent, inherit) !important;
}

.ttfc-prefs-contact-submit:hover,
.ttfc-prefs-contact-submit:focus-visible {
    transform: translateY(-1px);
    outline: none;
    box-shadow: 0 4px 14px rgba(39, 59, 107, 0.2);
}

.ttfc-prefs-contact-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ttfc-prefs-contact-status {
    font-size: 0.9rem;
    color: var(--text-color, #333);
    opacity: 0.85;
}

.ttfc-prefs-contact-status.is-success {
    color: var(--secondary-color-daat, #7183C0);
    font-weight: 600;
}

.ttfc-prefs-contact-status.is-error {
    color: #b00020;
    font-weight: 600;
}

.ttfc-prefs-contact-rate-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-color, #333);
    opacity: 0.6;
}

/* History list */
.ttfc-prefs-contact-history {
    margin-top: 1.75rem;
}

.ttfc-prefs-contact-history-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-prefs-contact-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ttfc-prefs-contact-history-list .ttfc-prefs-loading {
    margin: 0;
    color: var(--text-color, #333);
    opacity: 0.6;
}

.ttfc-prefs-contact-empty {
    margin: 0;
    padding: 1rem;
    background: rgba(39, 59, 107, 0.04);
    border: 1px dashed rgba(39, 59, 107, 0.15);
    border-radius: 8px;
    color: var(--text-color, #333);
    opacity: 0.75;
    font-size: 0.9rem;
}

.ttfc-prefs-contact-history-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid rgba(39, 59, 107, 0.1);
    border-radius: 10px;
}

.ttfc-prefs-contact-history-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Wrapper around the subject + (optional) category chip — keeps the two
   stacked on the right side while the type/status pills float left. */
.ttfc-prefs-contact-history-titles {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ttfc-prefs-contact-history-subject {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-color, #333);
}

/* "קטגוריה: ..." chip rendered only for article_suggestion rows. Subtle
   blue background to match the brand without competing with the status
   pill for attention. */
.ttfc-prefs-contact-history-category {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color-daat, #273B6B);
    background: rgba(39, 59, 107, 0.08);
    padding: 2px 8px;
    border-radius: 999px;
}

.ttfc-prefs-contact-history-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ttfc-prefs-contact-history-status,
.ttfc-prefs-contact-history-type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.ttfc-prefs-contact-history-status.status-new      { background: #d63638; }
.ttfc-prefs-contact-history-status.status-read     { background: #646970; }
.ttfc-prefs-contact-history-status.status-replied  { background: #00a32a; }
.ttfc-prefs-contact-history-status.status-archived { background: #8f8f8f; }

.ttfc-prefs-contact-history-type.type-feedback           { background: var(--primary-color-daat, #273B6B); }
.ttfc-prefs-contact-history-type.type-article_suggestion { background: #0073aa; }
.ttfc-prefs-contact-history-type.type-content_report     { background: #b00020; }

.ttfc-prefs-field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--text-color, #333);
    opacity: 0.7;
}

.ttfc-prefs-post-picker {
    position: relative;
}

.ttfc-prefs-post-picker-search {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23273B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 18px;
}

[dir="rtl"] .ttfc-prefs-post-picker-search,
html[dir="rtl"] .ttfc-prefs-post-picker-search {
    background-position: left 0.75rem center;
}

.ttfc-prefs-post-picker-search::-webkit-search-cancel-button,
.ttfc-prefs-post-picker-search::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.ttfc-prefs-post-picker-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--gray-mild, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

.ttfc-prefs-post-picker-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.4;
}

.ttfc-prefs-post-picker-item:hover,
.ttfc-prefs-post-picker-item:focus {
    background: rgba(39, 59, 107, 0.08);
}

.ttfc-prefs-post-picker-empty {
    padding: 10px 14px;
    color: var(--gray-medium, #666);
    font-size: 0.88rem;
}

.ttfc-prefs-post-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(39, 59, 107, 0.06);
    border: 1px solid rgba(39, 59, 107, 0.15);
    border-radius: 8px;
}

.ttfc-prefs-post-picker-selected-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
}

.ttfc-prefs-post-picker-clear {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--primary-color-daat, #273b6b);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.ttfc-prefs-report-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}

.ttfc-prefs-report-confirm input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.ttfc-prefs-contact-history-body {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-color, #333);
    opacity: 0.85;
    line-height: 1.55;
}

.ttfc-prefs-contact-history-reply {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: rgba(39, 59, 107, 0.06);
    border-inline-start: 3px solid var(--primary-color-daat, #273b6b);
    border-radius: 8px;
}

.ttfc-prefs-contact-history-reply-label {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-color-daat, #273b6b);
}

.ttfc-prefs-contact-history-reply-date {
    font-weight: 400;
    opacity: 0.75;
}

.ttfc-prefs-contact-history-reply-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-color, #333);
    white-space: pre-wrap;
}

.ttfc-prefs-contact-history-date {
    font-size: 0.78rem;
    color: var(--text-color, #333);
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-prefs-contact-submit,
    .ttfc-prefs-contact-form input[type="text"],
    .ttfc-prefs-contact-form input[type="search"],
    .ttfc-prefs-contact-form input[type="url"],
    .ttfc-prefs-contact-form textarea,
    .ttfc-prefs-contact-form select {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* PERSONAL FEED — embedded inside /profile/#feed-tab                  */
/* ------------------------------------------------------------------ */
/* feed.css defines `.ttfc-prefs-feed { max-width:1200px; margin:auto; */
/* padding:1.5rem 1rem 3rem }` which is correct for the standalone     */
/* /my-feed/ page but creates a centered, padded island when embedded  */
/* inside the personal-area's content column. The rules below scope    */
/* a few overrides to the wrapper added by render_feed_tab_panel()     */
/* so the feed fills the panel naturally and the header looks like a   */
/* regular profile section heading.                                    */

.ttfc-prefs-feed-inline-wrap .ttfc-prefs-feed {
    max-width: none;
    margin: 0;
    padding: 0;
}

.ttfc-prefs-feed-inline-wrap .ttfc-prefs-feed-header.profile-section {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    margin-bottom: 1rem;
}

.ttfc-prefs-feed-inline-wrap .ttfc-prefs-feed-header .ttfc-prefs-feed-title {
    font-size: 1.25rem;
}

.ttfc-prefs-feed-inline-wrap .ttfc-prefs-reading-progress.profile-section {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.ttfc-prefs-feed-inline-wrap .ttfc-prefs-feed-grid {
    justify-content: flex-start;
}

@media (max-width: 600px) {
    .ttfc-prefs-feed-inline-wrap .ttfc-prefs-feed-grid {
        justify-content: center;
    }
}