/**
 * TTFC Comments Manager - Frontend styles
 * RTL, brand-aligned (Figma "דעת - כתבה פנימית"), accessible, responsive.
 *
 * Design tokens come from the theme:
 *   --primary-color-daat          #273B6B  (title, avatar, submit, names)
 *   --secondary-color-daat-bright #F0F0F3  (comment-card background)
 *   --secondary-color-daat        #7183C0  (reply thread connector line)
 *   meta gray                     #707070  (dates, counts, placeholders)
 */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Section wrapper ---------- */
.ttfc-comments-section {
    max-width: 680px;
    margin: 3rem auto;
    padding: 1.5rem 1rem;
    direction: rtl;
    font-family: inherit;
    color: #000;
}

/* ---------- Header ----------
   The section is dir="rtl", so the default text-align (start) already
   places inline children on the right. No explicit text-align needed.
*/
.ttfc-comments-header {
    margin-bottom: 1.5rem;
}

.ttfc-comments-title {
    font-size: 1.875rem;
    margin: 0;
    font-weight: 800;
    color: var(--primary-color-daat, #273B6B);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    line-height: 1.2;
}

.ttfc-comments-count {
    font-size: 1.05rem;
    font-weight: 300;
    color: #707070;
}

/* ---------- Login / guest prompt ---------- */
.ttfc-comment-login-prompt {
    background: var(--secondary-color-daat-bright, #F0F0F3);
    border-radius: 5px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ttfc-comment-login-prompt p {
    margin: 0;
    color: #000;
    line-height: 1.6;
}

.ttfc-comment-login-prompt a {
    color: var(--primary-color-daat, #273B6B);
    text-decoration: underline;
    font-weight: 600;
}

/* ---------- Comment form ---------- */
.ttfc-comment-form {
    display: block;
    margin-bottom: 2.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.ttfc-comment-form.ttfc-sending {
    opacity: 0.6;
    pointer-events: none;
}

/* Avatar slot is hidden in the new design (Figma shows none in the form). */
.ttfc-comment-form-avatar {
    display: none;
}

.ttfc-comment-form-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Textarea + name input – each is its own bordered rectangle, 5px radius. */
.ttfc-comment-input,
.ttfc-comment-name {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #707070;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    color: #000;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ttfc-comment-input {
    min-height: 95px;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    line-height: 1.5;
    resize: vertical;
}

.ttfc-comment-name {
    padding: 0.5rem 0.85rem;
    font-size: 1rem;
}

.ttfc-comment-input::placeholder,
.ttfc-comment-name::placeholder {
    color: #707070;
    font-weight: 300;
    opacity: 1;
}

.ttfc-comment-input:focus,
.ttfc-comment-name:focus {
    outline: none;
    border-color: var(--primary-color-daat, #273B6B);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(39, 59, 107, 0.12);
}

/* ---------- Inline notices (errors / pending) ---------- */
.ttfc-inline-notice {
    padding: 0.6rem 0.85rem;
    border-radius: 5px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ttfc-inline-notice.ttfc-notice-info {
    background: rgba(39, 59, 107, 0.08);
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-inline-notice.ttfc-notice-error {
    background: #fdecec;
    color: #a11212;
}

/* ---------- Form action row (submit + guest note) ----------
   In RTL with source order [note, submit] and the note carrying
   flex: 1, the note fills the right side and pushes the submit button
   to the inline-end (= left in RTL) — matching the Figma. When the user
   is logged in there is no note: justify-content: flex-end keeps the
   button anchored on the left in that case too.
*/
.ttfc-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.ttfc-comment-form-actions .ttfc-comment-guest-note {
    margin: 0;
    color: #707070;
    font-size: 0.95rem;
    font-weight: 300;
    flex: 1 1 auto;
    text-align: start;
}

/* Cancel button removed from the main form per Figma. Kept for reply forms. */
.ttfc-comment-form:not(.ttfc-reply-form) .ttfc-btn-cancel {
    display: none;
}

/* ---------- Buttons ---------- */
.ttfc-btn {
    padding: 0.45rem 1.5rem;
    border-radius: 5px;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s, color 0.2s, filter 0.2s;
    min-height: 35px;
    line-height: 1.2;
}

.ttfc-btn:active { transform: translateY(1px); }

.ttfc-btn-primary {
    background: var(--primary-color-daat, #273B6B);
    color: #fff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
}

.ttfc-btn-primary:hover,
.ttfc-btn-primary:focus-visible { filter: brightness(1.1); outline: none; }
.ttfc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.ttfc-btn-secondary {
    background: transparent;
    color: #707070;
}

.ttfc-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* ---------- Avatars ---------- */
.ttfc-avatar-img,
.ttfc-avatar-initials,
.ttfc-avatar-anon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    object-fit: cover;
    flex-shrink: 0;
}

.ttfc-avatar-initials {
    background-color: var(--primary-color-daat, #273B6B) !important;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    user-select: none;
    letter-spacing: 0.02em;
}

.ttfc-avatar-anon {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    user-select: none;
}

.ttfc-avatar-anon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Comments list ---------- */
.ttfc-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Sequential numbering across every comment (top-level + nested replies),
   matching the Figma "1, 2, 3, 4" labels. The index is assigned by PHP
   on render (and re-assigned by frontend.js when comments are added
   dynamically) via data-ttfc-index — this is more robust than CSS
   counters for our nested + AJAX-mutated DOM. */

.ttfc-no-comments {
    text-align: center;
    padding: 2rem 1rem;
    color: #707070;
    font-style: normal;
}

/* ---------- Comment card ----------
   Top-level (depth-0) comments are their own card with the soft
   --secondary-color-daat-bright background. Nested replies live INSIDE
   the parent card without their own background, indented by the thread
   connector line below.
*/
.ttfc-comment {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    transition: background-color 0.6s, transform 0.3s, opacity 0.3s;
}

.ttfc-comments-list > .ttfc-comment {
    background: rgba(240, 240, 243, 0.34);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    padding: 1.25rem 1.25rem 1rem;
    position: relative;
}

/* The numeric label hangs just outside the card on the inline-start
   side (= right in RTL), aligned with the meta row's gray date text
   — same height as the Figma. */
.ttfc-comments-list > .ttfc-comment::after {
    content: attr(data-ttfc-index);
    position: absolute;
    top: 0rem;
    inset-inline-start: -1.5rem;
    color: var(--primary-color-daat, #273B6B);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
    right: -23px;
}

.ttfc-comment.ttfc-highlight {
    background: #fff9e6;
}

.ttfc-comment.ttfc-removing {
    opacity: 0;
    transform: scale(0.95);
}

.ttfc-comment-inner {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.ttfc-comment-avatar { flex: 0 0 40px; }
.ttfc-comment-body { flex: 1; min-width: 0; }

/* Meta row: name on the right (start in RTL), date next to it. */
.ttfc-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.ttfc-comment-author {
    font-weight: 600;
    color: #000;
    font-size: 1.25rem;
    line-height: 1.15;
}

.ttfc-comment-date {
    font-size: 1rem;
    color: #707070;
    font-weight: 300;
    line-height: 1;
}

/* Backward-compat: hide legacy edited marker if cached HTML still contains it. */
.ttfc-comment-edited { display: none !important; }

.ttfc-comment-content {
    color: #000;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 300;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* ---------- Action buttons (like / reply) ----------
   In RTL, justify-content: flex-start places items at the inline-start
   edge (= right). This aligns "הגב" with the start of the author name
   and comment text, matching the Figma. */
.ttfc-comment-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.ttfc-btn-action {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    color: #707070;
    font-weight: 300;
    transition: background-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

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

.ttfc-btn-action:disabled { opacity: 0.4; cursor: wait; }

.ttfc-btn-like.ttfc-liked {
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-icon {
    flex-shrink: 0;
}

/* ---------- Nested replies ----------
   Inside the parent card. No background of their own. A vertical
   connector line sits on the inline-start (= right in RTL) edge,
   matching the Figma's #7183C0 thread line. The avatar slot keeps
   its width (visibility: hidden) so the reply's text aligns with
   the parent's content — matching the Figma.
*/
.ttfc-comment-replies {
    margin-top: 1.5rem;
    padding-inline-start: 0;
    padding-inline-end: 0.75rem;
    border-inline-start: 1px solid var(--secondary-color-daat, #7183C0);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    right: 63px;
    position: relative;
}

.ttfc-comment-replies > .ttfc-comment {
    background: transparent;
    padding: 0;
    border-radius: 0;
    position: relative;
}

/* Reply numbering sits aligned with the reply's name + date line,
   just outside the connector line on the inline-start side
   (= right in RTL). */
.ttfc-comment-replies > .ttfc-comment::after {
    content: attr(data-ttfc-index);
    position: absolute;
    top: 0.15rem;
    inset-inline-start: -1.5rem;
    color: var(--primary-color-daat, #273B6B);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
}

.ttfc-comment-replies .ttfc-comment-avatar {
    display: none;
}

.ttfc-comment-replies .ttfc-comment-body {
    right: 17px;
    position: relative;
}

/* Legacy depth backgrounds removed in 1.4.0 – the new design uses a
   single card per top-level comment and unified backgrounds for replies. */
.ttfc-comment-depth-1,
.ttfc-comment-depth-2,
.ttfc-comment-depth-3 {
    background: transparent;
}

/* ---------- Reply form (inline, inside a comment) ----------
   Per Figma (Group 7, 487x70): row 1 is a compact textarea (30px tall,
   auto-expands), row 2 is a flex row containing the guest name input
   (flex: 1) on the right and a 90x30 שלחו button on the left.
   Logged-in users see only the submit button in row 2.
   Inputs use a lighter border color and the same drop shadow as cards.
*/
.ttfc-reply-form {
    margin-top: 0.75rem;
    margin-inline-start: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Top-level comment: the reply form is a sibling of .ttfc-comment-inner
   (which is a flex row of avatar + body). To align the form with the body
   column (Figma 487px width, not the full card), push it away from the
   avatar side by avatar width + inner gap. */
.ttfc-comments-list > .ttfc-comment > .ttfc-reply-form {
    margin-inline-start: calc(40px + 0.85rem);
}

/* Nested reply: avatar is hidden and the body is shifted right by 17px –
   keep the reply form aligned with the body. */
.ttfc-comment-replies > .ttfc-comment > .ttfc-reply-form {
    margin-inline-start: 17px;
}

.ttfc-reply-form .ttfc-comment-form-body {
    gap: 0.625rem;
}

.ttfc-reply-form .ttfc-comment-input,
.ttfc-reply-form .ttfc-comment-name {
    border: 1px solid rgba(112, 112, 112, 0.19);
}

.ttfc-reply-form .ttfc-comment-input {
    min-height: 30px;
    padding: 0.3rem 0.85rem;
    font-size: 1rem;
    line-height: 19px;
    resize: vertical;
}

.ttfc-reply-form .ttfc-comment-name {
    min-height: 30px;
    padding: 0.3rem 0.85rem;
    font-size: 1rem;
    line-height: 19px;
}

.ttfc-reply-form .ttfc-comment-form-actions {
    margin-top: 0.625rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ttfc-reply-form .ttfc-comment-form-actions .ttfc-comment-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.ttfc-reply-form .ttfc-comment-form-actions .ttfc-btn-submit {
    flex: 0 0 90px;
    width: 90px;
    min-width: 90px;
    min-height: 30px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 19px;
    border-radius: 4.286px;
    box-shadow: 1.71429px 1.71429px 6.85714px rgba(0, 0, 0, 0.12);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .ttfc-comments-section { padding: 1rem 0.75rem; }
    .ttfc-comments-title { font-size: 1.4rem; }
    .ttfc-comments-list > .ttfc-comment { padding: 1rem 1rem 0.85rem; }
    .ttfc-comment-inner { gap: 0.6rem; }
    .ttfc-avatar-img,
    .ttfc-avatar-initials,
    .ttfc-avatar-anon { width: 36px; height: 36px; }
    .ttfc-comment-avatar { flex: 0 0 36px; }
    .ttfc-comment-author { font-size: 1rem; }
    .ttfc-comment-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 0.6rem; }
    .ttfc-comment-form-actions .ttfc-btn-submit { align-self: flex-end; }
    .ttfc-comment-form-actions .ttfc-comment-guest-note { text-align: start; }

    .ttfc-comments-list > .ttfc-comment > .ttfc-reply-form {
        margin-inline-start: calc(36px + 0.6rem);
    }
    .ttfc-reply-form .ttfc-comment-form-actions { flex-direction: row; align-items: center; }
    .ttfc-reply-form .ttfc-comment-form-actions .ttfc-btn-submit { align-self: auto; }

    /* On narrow screens, no room for the number outside the card —
       move it to the top inline-end (= left in RTL) of the card so it
       doesn't get clipped and doesn't overlap the avatar. */
    .ttfc-comments-list > .ttfc-comment::after {
        top: 0.5rem;
        inset-inline-start: auto;
        inset-inline-end: 0.6rem;
        font-size: 0.9rem;
    }
    .ttfc-comment-replies > .ttfc-comment::after {
        inset-inline-start: auto;
        inset-inline-end: 0;
        font-size: 0.9rem;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ttfc-comment,
    .ttfc-btn,
    .ttfc-btn-action,
    .ttfc-comment-input,
    .ttfc-comment-name { transition: none !important; }
}

/* ---------- High contrast ---------- */
@media (prefers-contrast: more) {
    .ttfc-comments-list > .ttfc-comment { outline: 1px solid #000; }
    .ttfc-comment-input,
    .ttfc-comment-name { border-color: #000; }
    .ttfc-btn-action:hover { outline: 2px solid var(--primary-color-daat, #273B6B); }
}

/* ---------- Register-invite modal (post-comment, guests only) ---------- */
.ttfc-register-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100000;
    direction: rtl;
    animation: ttfc-register-prompt-fade 180ms ease-out;
}

.ttfc-register-prompt-dialog {
    position: relative;
    background: #fff;
    color: #000;
    width: 100%;
    max-width: 440px;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
    font-family: inherit;
    outline: none;
    animation: ttfc-register-prompt-pop 200ms ease-out;
}

.ttfc-register-prompt-close {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #707070;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.ttfc-register-prompt-close:hover,
.ttfc-register-prompt-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
    outline: none;
}

.ttfc-register-prompt-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: var(--secondary-color-daat-bright, #F0F0F3);
    color: var(--primary-color-daat, #273B6B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ttfc-register-prompt-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--primary-color-daat, #273B6B);
}

.ttfc-register-prompt-intro {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.9rem;
    color: #000;
    font-weight: 300;
}

.ttfc-register-prompt-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ttfc-register-prompt-benefits li {
    position: relative;
    padding-inline-start: 1.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #000;
}

.ttfc-register-prompt-benefits li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color-daat, #273B6B);
}

.ttfc-register-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ttfc-register-prompt-cta {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
}

.ttfc-register-prompt-cta:hover,
.ttfc-register-prompt-cta:focus-visible {
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: 0 0 0 3px rgba(39, 59, 107, 0.18);
}

.ttfc-register-prompt-dismiss {
    width: 100%;
}

.ttfc-register-prompt-dontshow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #707070;
    cursor: pointer;
    user-select: none;
}

.ttfc-register-prompt-dontshow input {
    accent-color: var(--primary-color-daat, #273B6B);
}

body.ttfc-register-prompt-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .ttfc-register-prompt-dialog {
        padding: 1.4rem 1.1rem 1rem;
        border-radius: 8px;
    }
    .ttfc-register-prompt-title { font-size: 1.1rem; }
    .ttfc-register-prompt-icon { width: 56px; height: 56px; }
}

@keyframes ttfc-register-prompt-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ttfc-register-prompt-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ttfc-register-prompt-overlay,
    .ttfc-register-prompt-dialog { animation: none !important; }
}

@media (prefers-contrast: more) {
    .ttfc-register-prompt-dialog { border: 2px solid #000; }
    .ttfc-register-prompt-close:focus-visible {
        outline: 2px solid var(--primary-color-daat, #273B6B);
    }
}