/* TU Comments - Modern Card-Based Design */

:root {
    --tu-comments-primary: #ca4f2e;
    --tu-comments-primary-hover: #b04528;
    --tu-comments-focus: #4A90A4;
    --tu-comments-bg: #ffffff;
    --tu-comments-border: #E5E7EB;
    --tu-comments-text: #1F2937;
    --tu-comments-text-muted: #6B7280;
    --tu-comments-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --tu-comments-radius: 12px;
    --tu-comments-transition: 0.3s ease;
}

/* Container */
.tu-comments {
    width: 100%;
    margin: 24px 0;
    background: var(--tu-comments-bg);
    border-radius: var(--tu-comments-radius);
    box-shadow: var(--tu-comments-shadow);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    box-sizing: border-box;
    /* Safari fixes */
    position: relative;
    clear: both;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.tu-comments *,
.tu-comments *::before,
.tu-comments *::after {
    box-sizing: border-box;
}

/* Header */
.tu-comments__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 541px) {
    .tu-comments__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.tu-comments__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tu-comments-text);
    margin: 0;
    line-height: 1.3;
}

/* Header row - button */
.tu-comments__header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

@media (min-width: 541px) {
    .tu-comments__header-row {
        justify-content: flex-end;
    }
}

.tu-comments__header-row--has-comments {
    justify-content: flex-end;
}

/* Toggle Button */
.tu-comments__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--tu-comments-primary);
    color: white;
    border: 2px solid var(--tu-comments-primary);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tu-comments-transition);
    white-space: nowrap;
}

.tu-comments__toggle-btn:hover {
    background: var(--tu-comments-primary-hover);
    border-color: var(--tu-comments-primary-hover);
    transform: translateY(-1px);
}

.tu-comments__toggle-btn:active {
    transform: translateY(0);
}

.tu-comments__toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--tu-comments-transition);
}

.tu-comments__toggle-btn--expanded {
    background: white;
    color: var(--tu-comments-primary);
    border: 2px solid var(--tu-comments-primary);
}

.tu-comments__toggle-btn--expanded:hover {
    background: rgba(202, 79, 46, 0.05);
    border-color: var(--tu-comments-primary);
}

.tu-comments__toggle-btn--expanded svg {
    transform: rotate(180deg);
}

/* Form Container */
.tu-comments__form-container {
    display: none;
    padding-top: 20px;
    border-top: 1px solid var(--tu-comments-border);
    margin-top: 20px;
    animation: tuCommentsSlideDown 0.3s ease;
}

.tu-comments__form-container--visible {
    display: block;
}

@keyframes tuCommentsSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form */
.tu-comments__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tu-comments__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tu-comments__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tu-comments-text);
}

.tu-comments__input,
.tu-comments__textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tu-comments-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--tu-comments-text);
    transition: border-color var(--tu-comments-transition), box-shadow var(--tu-comments-transition);
    background: #FAFAFA;
}

.tu-comments__input:focus,
.tu-comments__textarea:focus {
    outline: none;
    border-color: var(--tu-comments-focus);
    background: white;
    box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.15);
}

.tu-comments__input::placeholder,
.tu-comments__textarea::placeholder {
    color: #9CA3AF;
}

.tu-comments__textarea {
    min-height: 160px;
    resize: vertical;
}

/* Submit Button - same padding as toggle button */
.tu-comments__submit-btn {
    align-self: flex-start;
    padding: 14px 24px;
    background: var(--tu-comments-primary);
    color: white;
    border: 2px solid var(--tu-comments-primary);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tu-comments-transition);
}

.tu-comments__submit-btn:hover {
    background: var(--tu-comments-primary-hover);
    border-color: var(--tu-comments-primary-hover);
    transform: translateY(-1px);
}

.tu-comments__submit-btn:active {
    transform: translateY(0);
}

.tu-comments__submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* reCAPTCHA notice - very small */
.tu-comments__recaptcha-notice {
    font-size: 0.6em;
    color: #9CA3AF;
    text-align: left;
    line-height: 1.4;
    margin-top: 4px;
}

.tu-comments__recaptcha-notice a {
    color: #9CA3AF;
    text-decoration: underline;
}

.tu-comments__recaptcha-notice a:hover {
    color: var(--tu-comments-primary);
}

/* Messages */
.tu-comments__message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    animation: tuCommentsSlideDown 0.3s ease;
}

.tu-comments__message--success {
    background: #D1FAE5;
    color: #065F46;
}

.tu-comments__message--error {
    background: #FEE2E2;
    color: #991B1B;
}

/* Divider */
.tu-comments__divider {
    height: 1px;
    background: var(--tu-comments-border);
    margin: 20px 0;
}

/* Sorting Options - Dropdown */
.tu-comments__sorting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--tu-comments-border);
}

.tu-comments__sorting-label {
    font-size: 13px;
    color: var(--tu-comments-text-muted);
    font-weight: 500;
}

.tu-comments__sort-select {
    display: block !important;
    padding: 8px 32px 8px 12px;
    background: white;
    border: 1px solid var(--tu-comments-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tu-comments-text);
    cursor: pointer;
    transition: all var(--tu-comments-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 140px;
}

/* Hide jQuery UI selectmenu replacement */
.tu-comments .ui-selectmenu-button,
.tu-comments .ui-selectmenu-menu,
.tu-comments .ui-selectmenu-text,
.tu-comments + .ui-selectmenu-button,
.tu-comments + .ui-selectmenu-menu,
.tu-comments__sorting .ui-selectmenu-button,
.tu-comments__sorting > span,
#tu-comments-sort-button {
    display: none !important;
}

.tu-comments__sort-select:hover {
    border-color: #9CA3AF;
}

.tu-comments__sort-select:focus {
    outline: none;
    border-color: var(--tu-comments-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.15);
}

/* Comments List */
.tu-comments__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Single Comment Item - more padding */
.tu-comments__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tu-comments-border);
    background: transparent;
    transition: background var(--tu-comments-transition);
    /* Safari fix - ensure proper containment */
    position: relative;
}

.tu-comments__item:hover {
    background: #FAFAFA;
}

.tu-comments__item:last-child {
    border-bottom: none;
}

.tu-comments__item:first-child {
    margin-top: 16px;
}

.tu-comments__item-content {
    flex: 1;
    min-width: 0;
}

.tu-comments__item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tu-comments__item-author {
    font-size: 15px;
    font-weight: 700;
    color: var(--tu-comments-text);
}

.tu-comments__item-date {
    font-size: 13px;
    color: var(--tu-comments-text-muted);
}

.tu-comments__item-text {
    font-size: 1em;
    line-height: 1.7;
    color: var(--tu-comments-text);
}

.tu-comments__item-text p {
    margin: 0;
}

/* Comment Actions (reply, voting) */
.tu-comments__item-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

/* Reply Button */
.tu-comments__reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    min-height: 38px;
    background: #fff;
    border: 1.6px solid var(--tu-comments-primary);
    color: var(--tu-comments-primary);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tu-comments-transition);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tu-comments__reply-btn:hover,
.tu-comments__reply-btn:focus-visible,
.tu-comments__reply-btn--expanded {
    color: #fff;
    background: var(--tu-comments-primary);
    box-shadow: 0 2px 8px rgba(202, 79, 46, 0.25);
}

.tu-comments__reply-btn svg {
    width: 15px;
    height: 15px;
}

/* Voting */
.tu-comments__voting {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tu-comments__vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: var(--tu-comments-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--tu-comments-transition);
    border-radius: 4px;
}

.tu-comments__vote-btn:hover {
    background: #F3F4F6;
}

.tu-comments__vote-btn svg {
    width: 18px;
    height: 18px;
}

.tu-comments__vote-btn--up:hover,
.tu-comments__vote-btn--up.tu-comments__vote-btn--active {
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
}

.tu-comments__vote-btn--down:hover,
.tu-comments__vote-btn--down.tu-comments__vote-btn--active {
    color: #6B7280;
    background: #F3F4F6;
}

.tu-comments__vote-count {
    font-size: 13px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.tu-comments__vote-count--positive {
    color: #10B981;
}

.tu-comments__vote-count--negative {
    color: #9CA3AF;
    font-weight: 500;
}

/* @mention on flattened deep replies (they share depth-1's single indent) */
.tu-comments__mention {
    color: #2ea3b4;
    font-weight: 800;
    text-decoration: none;
}
.tu-comments__mention:hover {
    text-decoration: underline;
}

/* Collapsed replies + "Prikaži još …" toggle */
.tu-comments__item--collapsed {
    display: none;
}
.tu-comments__showmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 8px 4px;
    background: none;
    border: 0;
    color: var(--tu-comments-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}
.tu-comments__showmore svg {
    width: 15px;
    height: 15px;
}
.tu-comments__showmore:hover {
    text-decoration: underline;
}

/* Reply Form */
.tu-comments__reply-form-container {
    display: none;
    margin-top: 16px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 8px;
    animation: tuCommentsSlideDown 0.3s ease;
}

.tu-comments__reply-form-container--visible {
    display: block;
}

.tu-comments__reply-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tu-comments__reply-form .tu-comments__input,
.tu-comments__reply-form .tu-comments__textarea {
    background: white;
}

.tu-comments__reply-form .tu-comments__textarea {
    min-height: 160px;
}

/* Nested reply compose form breaks out to the full thread width (aligned to the clay
   border) so it isn't cramped by the reply indent. Replies flatten to ONE level, so the
   inset is fixed: desktop item content sits 28px past the border-inner + 12px item pad. */
.tu-comments__replies .tu-comments__reply-form-container {
    margin-left: -28px;
    margin-right: -12px;
}

.tu-comments__reply-form .tu-comments__submit-btn {
    padding: 10px 20px;
    font-size: 14px;
}

/* Nested Replies */
.tu-comments__replies {
    margin-top: 16px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 3px solid var(--tu-comments-primary);
    background: rgba(202, 79, 46, 0.02);
    border-radius: 0 8px 8px 0;
}

.tu-comments__replies .tu-comments__item {
    padding: 16px 12px;
    margin: 0;
    background: transparent;
}

.tu-comments__replies .tu-comments__item:hover {
    background: rgba(202, 79, 46, 0.04);
}

.tu-comments__replies .tu-comments__item:first-child {
    margin-top: 0;
    padding-top: 16px;
}

.tu-comments__replies .tu-comments__item:last-child {
    padding-bottom: 16px;
    border-bottom: none;
}

/* No depth cap on replies — every comment (at any flatten depth) can be replied to;
   deeper replies flatten to one indent with an @mention. */

/* Empty state */
.tu-comments__empty {
    text-align: center;
    color: var(--tu-comments-text-muted);
    font-size: 14px;
    padding: 24px 0;
}

/* Mobile Responsive */
@media (max-width: 540px) {
    .tu-comments {
        margin: 16px 0;
        padding: 16px;
        border-radius: 8px;
    }

    .tu-comments__header {
        text-align: center;
    }

    .tu-comments__title {
        font-size: 18px;
    }

    .tu-comments__header-row {
        justify-content: center;
    }

    .tu-comments__header-row--has-comments {
        justify-content: center;
    }

    .tu-comments__toggle-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .tu-comments__input,
    .tu-comments__textarea {
        padding: 10px 12px;
        font-size: 14px;
    }

    .tu-comments__submit-btn {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        align-self: center;
    }

    .tu-comments__item {
        padding: 20px 12px;
        margin: 0;
    }

    .tu-comments__item:first-child {
        margin-top: 12px;
    }

    .tu-comments__item-author {
        font-size: 14px;
    }

    .tu-comments__item-date {
        font-size: 12px;
    }

    .tu-comments__item-text {
        font-size: 0.95em;
    }

    .tu-comments__item-actions {
        gap: 16px;
        padding-top: 10px;
    }

    .tu-comments__replies {
        margin-left: 8px;
        padding-left: 12px;
    }

    /* Smaller mobile inset (margin 8 + border 3 + padding 12 + item 12) */
    .tu-comments__replies .tu-comments__reply-form-container {
        margin-left: -24px;
    }
}

/* Animation for new comments */
.tu-comments__item--new {
    animation: tuCommentsHighlight 2s ease;
}

@keyframes tuCommentsHighlight {
    0% {
        background: rgba(202, 79, 46, 0.15);
    }
    100% {
        background: transparent;
    }
}

/* Prevent ads from appearing inside comment section */
.tu-comments ins.adsbygoogle,
.tu-comments .adsbygoogle,
.tu-comments [data-ad-slot],
.tu-comments iframe[id^="google_ads"],
.tu-comments iframe[id^="aswift"],
.tu-comments .google-auto-placed,
.tu-comments .ap_container,
.tu-comments > ins,
.tu-comments > div > ins {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* ---- Post-submit confirmation + reply-notification email capture (Phase 4b) ---- */
.tu-comments__posted {
    padding: 16px;
    border: 1px solid #dcefe2;
    background: #f2fbf5;
    border-radius: 10px;
    margin: 6px 0;
}
.tu-comments__posted-msg {
    font-weight: 700;
    color: #1a7f37;
    font-size: 15px;
    line-height: 1.4;
}
.tu-comments__notify {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d9efe0;
}
.tu-comments__notify-label {
    display: block;
    font-size: 13.5px;
    color: #42464d;
    margin-bottom: 8px;
}
.tu-comments__notify-row {
    display: flex;
    gap: 8px;
}
.tu-comments__notify-email {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d0d5da;
    border-radius: 8px;
    font-size: 14px;
}
.tu-comments__notify-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--tu-comments-primary, #ca4f2e);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s;
}
.tu-comments__notify-btn:hover { filter: brightness(.93); }
.tu-comments__notify-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 480px) {
    .tu-comments__notify-row { flex-direction: column; }
    .tu-comments__notify-btn { width: 100%; }
}