/* =============================================================================
   Comments Anywhere – Comment Widget & Dialog Styles
============================================================================= */

/* ── Honeypot field – visually hidden from real users ───────────────────── */
.ce-comment-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Trigger button ─────────────────────────────────────────────────────── */
.ce-comment-wrapper {
    display: inline-block;
}

.ce-comment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Always transparent – overrides Elementor's default widget hover bg */
    background: transparent !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1;
    outline: none;
    transition: color 0.2s, transform 0.2s;
    position: relative;
}

.ce-comment-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Icon wrapper – fixed square, size driven by CSS custom properties */
.ce-comment-icon {
    --ce-icon-size: 24px;
    --ce-icon-ratio: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:  calc(var(--ce-icon-size) * var(--ce-icon-ratio));
    height: calc(var(--ce-icon-size) * var(--ce-icon-ratio));
    line-height: 0;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    /* Needed for framed view */
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* Elementor wraps SVG icons in an extra <span> — normalize it */
.ce-comment-icon > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* SVG color via currentColor so Elementor color controls work. */
.ce-comment-icon svg {
    display: block;
    fill: currentColor;
    flex-shrink: 0;
}
.ce-comment-icon svg path,
.ce-comment-icon svg circle,
.ce-comment-icon svg rect,
.ce-comment-icon svg polygon,
.ce-comment-icon svg ellipse {
    fill: currentColor;
}

/* Font icons */
.ce-comment-icon i {
    display: block;
    line-height: 1;
    flex-shrink: 0;
}

/* ── View: Gestapelt (stacked) ───────────────────────────────────────── */
.ce-comment-icon--stacked {
    background-color: #e0e0e0; /* Fallback; overridden by Elementor color control */
}

/* ── View: Umrandet (framed) ─────────────────────────────────────────── */
.ce-comment-icon--framed {
    border-color: currentColor; /* Fallback; overridden by Elementor color control */
}

/* ── Shape: Kreis ────────────────────────────────────────────────────── */
.ce-comment-icon--circle {
    border-radius: 50%;
}

/* ── Shape: Quadrat – no extra rule needed (default = 0 radius) ──────── */

.ce-comment-count {
    font-weight: 500;
    min-width: 1ch;
}

/* Elementor editor: disable pointer events */
.elementor-editor-active .ce-comment-button {
    pointer-events: none;
}

/* ── Dialog container ───────────────────────────────────────────────────── */
.ce-comment-dialog {
    /* CSS custom properties – fallback to global design vars, overridable via Elementor inline styles */
    --ce-accent:               var(--ce-global-accent, #2271b1);
    --ce-dialog-bg:            var(--ce-global-bg, #ffffff);
    --ce-dialog-text:          var(--ce-global-text, #1d2327);
    --ce-dialog-radius:        12px;
    --ce-dialog-width:         360px;
    --ce-submit-bg:            var(--ce-global-accent, #2271b1);
    --ce-submit-hover-bg:      var(--ce-global-accent, #2271b1);
    --ce-submit-text:          #ffffff;
    --ce-submit-hover-text:    #ffffff;
    --ce-submit-radius:        8px;
    --ce-item-bg:              rgba(0, 0, 0, 0.035);
    --ce-item-own-bg:          var(--ce-accent-alpha-07, rgba(34, 113, 177, 0.07));
    --ce-item-reply-bg:        rgba(0, 0, 0, 0.025);
    --ce-reply-border:         rgba(0, 0, 0, 0.1);

    position: absolute;
    width: var(--ce-dialog-width);
    max-width: calc(100vw - 24px);
    background: var(--ce-dialog-bg);
    color: var(--ce-dialog-text);
    border-radius: var(--ce-dialog-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 99990;
    overflow: hidden;
    font-family: inherit;
    border: none;
    animation: ce-dialog-in 0.18s ease;
    transform-origin: top left;
}

@keyframes ce-dialog-in {
    from { opacity: 0; transform: scale(0.96) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.ce-comment-dialog--closing {
    animation: ce-dialog-out 0.18s ease forwards;
    pointer-events: none;
}

@keyframes ce-dialog-out {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.96) translateY(-6px); }
}

/* Mobile: bottom sheet */
.ce-comment-dialog--mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    transform-origin: bottom center;
    animation: ce-slide-up 0.22s ease;
}

@keyframes ce-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ce-comment-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    flex-shrink: 0;
}

.ce-comment-dialog__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.ce-comment-dialog__close {
    background: none !important;
    background-color: transparent !important;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: currentColor;
    opacity: 0.4;
    padding: 2px 4px;
    border-radius: 4px;
    transition: opacity 0.15s;
    font-family: inherit;
}

.ce-comment-dialog__close:hover { opacity: 0.8; }

/* ── Comments area ──────────────────────────────────────────────────────── */
.ce-comment-list-wrap {
    flex-shrink: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.ce-comment-list {
    padding: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Scrollbar */
.ce-comment-list-wrap::-webkit-scrollbar { width: 5px; }
.ce-comment-list-wrap::-webkit-scrollbar-track { background: transparent; }
.ce-comment-list-wrap::-webkit-scrollbar-thumb { background: currentColor; opacity: 0.15; border-radius: 3px; }

.ce-comment-loading,
.ce-comment-empty {
    font-size: 13px;
    color: currentColor;
    opacity: 0.45;
    text-align: center;
    padding: 16px 0 8px;
    margin: 0;
}

.ce-comment-error {
    font-size: 13px;
    color: var(--ce-error-text, #ef4444);
    text-align: center;
    padding: 16px 0 8px;
    margin: 0;
}

/* ── Comment items ──────────────────────────────────────────────────────── */
.ce-comment-item {
    border-radius: 8px;
    background: var(--ce-item-bg, rgba(0, 0, 0, 0.035));
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    border: none;
}

.ce-comment-item--own {
    background: var(--ce-item-own-bg, rgba(34, 113, 177, 0.07));
}

.ce-comment-item--reply {
    margin-left: 18px;
    background: var(--ce-item-reply-bg, rgba(0, 0, 0, 0.025));
    border-left: 3px solid var(--ce-reply-border, rgba(0, 0, 0, 0.1));
    border-radius: 0 8px 8px 0;
}

/* Own reply: use own-bg if set, otherwise fall back to reply-bg */
.ce-comment-item--reply.ce-comment-item--own {
    background: var(--ce-item-own-bg, var(--ce-item-reply-bg, rgba(34, 113, 177, 0.05)));
}

.ce-comment-item__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.ce-comment-item__author {
    font-weight: 600;
    font-size: 12px;
}

.ce-comment-item__date {
    font-size: 11px;
    opacity: 0.5;
}

.ce-comment-item__vis {
    font-size: 11px;
    cursor: help;
}

.ce-comment-item__content {
    word-break: break-word;
    white-space: pre-wrap;
}

.ce-comment-item__admin-reply {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid rgba(245, 158, 11, 0.6);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
}

.ce-comment-item__admin-label {
    display: block;
    font-weight: 700;
    font-size: 11px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.ce-comment-reply-btn {
    background: none !important;
    background-color: transparent !important;
    border: none;
    font-size: 11px;
    color: var(--ce-accent, #2271b1);
    cursor: pointer;
    padding: 4px 0 0;
    font-family: inherit;
    text-decoration: underline;
    display: block;
    transition: opacity 0.15s;
}
.ce-comment-reply-btn:hover { opacity: 0.7; }

/* ── Write trigger + user bar row ───────────────────────────────────────── */
.ce-write-trigger-wrap {
    padding: 10px 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ce-write-trigger-btn {
    background: none !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ce-accent, #2271b1);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    transition: opacity 0.15s;
}
.ce-write-trigger-btn:hover { opacity: 0.75; }

.ce-write-trigger-icon {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
}

/* ── Collapsible form panel ─────────────────────────────────────────────── */
.ce-comment-form-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 16px;
    flex-shrink: 0;
}

.ce-comment-form-panel.is-open {
    max-height: 320px;
    padding: 0 16px 14px;
    overflow: visible;
}

.ce-comment-reply-indicator {
    align-items: center;
    gap: 8px;
    background: var(--ce-accent-alpha-08, rgba(34, 113, 177, 0.08));
    border-left: 3px solid var(--ce-accent, #2271b1);
    border-radius: 0 6px 6px 0;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--ce-accent, #2271b1);
    margin-bottom: 8px;
}

.ce-comment-reply-cancel {
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 11px;
    opacity: 0.6;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    color: inherit;
    margin-left: auto;
}

.ce-comment-textarea {
    width: 100%;
    resize: none;
    border: 1px solid var(--ce-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    color: inherit;
    background: var(--ce-input-bg, rgba(0, 0, 0, 0.03));
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    display: block;
    margin-top: 4px;
}

.ce-comment-textarea:focus {
    outline: none;
    border-color: var(--ce-accent, #2271b1);
    box-shadow: 0 0 0 3px var(--ce-accent-alpha-12, rgba(34, 113, 177, 0.12));
    background: rgba(255, 255, 255, 0.7);
}

.ce-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ce-comment-vis-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    opacity: 0.65;
    flex-shrink: 0;
}

.ce-comment-vis-select {
    border: 1px solid var(--ce-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.ce-comment-submit {
    background: var(--ce-submit-bg, var(--ce-accent, #2271b1));
    color: var(--ce-submit-text, #ffffff);
    border: none;
    border-radius: var(--ce-submit-radius, 8px);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    font-family: inherit;
    white-space: nowrap;
}
.ce-comment-submit:hover:not(:disabled) {
    background: var(--ce-submit-hover-bg, var(--ce-submit-bg, var(--ce-accent, #2271b1)));
    color: var(--ce-submit-hover-text, var(--ce-submit-text, #ffffff));
    opacity: 0.85;
}
.ce-comment-submit:active:not(:disabled) { transform: scale(0.97); }
.ce-comment-submit:disabled              { opacity: 0.55; cursor: not-allowed; }

.ce-comment-form-error {
    background: var(--ce-error-bg, rgba(239, 68, 68, 0.08));
    border-left: 3px solid var(--ce-error-text, #ef4444);
    border-radius: 0 6px 6px 0;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--ce-error-text, #dc2626);
    margin-top: 8px;
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ce-comment-dialog,
    .ce-comment-dialog--closing,
    .ce-comment-dialog--mobile,
    .ce-comment-form-panel {
        animation: none;
        transition: none;
    }
}

/* ── User bar ───────────────────────────────────────────────────────────── */
.ce-comment-user-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ce-dialog-text, #1d2327);
    flex-wrap: wrap;
}
.ce-comment-user-bar__name {
    font-weight: 600;
}
.ce-comment-user-bar__wp-badge {
    font-size: 10px;
    background: #3858e9; /* WordPress brand colour – intentionally fixed */
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
}
.ce-comment-user-bar__logout {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: var(--ce-accent, #2271b1);
    padding: 0;
    text-decoration: underline;
}
.ce-comment-user-bar__account {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ce-dialog-text, #1d2327);
    padding: 4px;
    border-radius: 50%;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .65;
    transition: opacity .15s, background .15s;
}
.ce-comment-user-bar__account:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
}
.ce-comment-user-bar__account--wp {
    color: #3858e9;
    opacity: .8;
}

/* ── Pending badge ──────────────────────────────────────────────────────── */
.ce-comment-item__pending {
    display: inline-block;
    font-size: 10px;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 4px;
}