/**
 * Webtron Docs Feedback Styles
 * Helpfulness feedback widget
 */

/* Feedback Container */
.webtron-docs-feedback {
    margin-top: 48px;
    padding: 24px;
    background: var(--docs-feedback-bg, #f9fafb);
    border: 1px solid var(--docs-feedback-border, #e5e7eb);
    border-radius: 12px;
    max-width: 400px;
    /* Let container hug content - hidden elements don't affect height */
    height: auto;
}

/* Hidden states - ensure no height contribution */
.webtron-docs-feedback-comment[style*="display: none"],
.webtron-docs-feedback-success[style*="display: none"] {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

/* Question Row */
.webtron-docs-feedback-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.webtron-docs-feedback-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--docs-feedback-text, #111827);
}

/* Buttons */
.webtron-docs-feedback-buttons {
    display: flex;
    gap: 10px;
}

.webtron-docs-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--docs-feedback-btn-border, #e5e7eb);
    border-radius: 8px;
    background: var(--docs-feedback-btn-bg, #fff);
    color: var(--docs-feedback-btn-text, #374151);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hide errant br tags injected by WordPress */
.webtron-docs-feedback-btn br {
    display: none;
}

.webtron-docs-feedback-btn:hover {
    border-color: var(--docs-feedback-btn-hover-border, #d1d5db);
    background: var(--docs-feedback-btn-hover-bg, #f3f4f6);
}

.webtron-docs-feedback-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--docs-feedback-btn-focus-shadow, rgba(59, 130, 246, 0.2));
}

.webtron-docs-feedback-yes:hover,
.webtron-docs-feedback-yes.selected {
    border-color: var(--docs-feedback-yes-border, #10b981);
    background: var(--docs-feedback-yes-bg, #ecfdf5);
    color: var(--docs-feedback-yes-text, #059669);
}

.webtron-docs-feedback-no:hover,
.webtron-docs-feedback-no.selected {
    border-color: var(--docs-feedback-no-border, #ef4444);
    background: var(--docs-feedback-no-bg, #fef2f2);
    color: var(--docs-feedback-no-text, #dc2626);
}

.webtron-docs-feedback-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Thanks message */
.webtron-docs-feedback-thanks {
    color: var(--docs-feedback-thanks, #059669);
    font-weight: 500;
}

/* Comment Form */
.webtron-docs-feedback-comment {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--docs-feedback-divider, #e5e7eb);
}

.webtron-docs-feedback-comment label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--docs-feedback-label, #374151);
    margin-bottom: 8px;
}

.webtron-docs-feedback-comment textarea {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 1px solid var(--docs-feedback-textarea-border, #e5e7eb);
    border-radius: 8px;
    background: var(--docs-feedback-textarea-bg, #fff);
    color: var(--docs-feedback-textarea-text, #111827);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.webtron-docs-feedback-comment textarea:focus {
    outline: none;
    border-color: var(--docs-feedback-textarea-focus, #3b82f6);
    box-shadow: 0 0 0 3px var(--docs-feedback-textarea-shadow, rgba(59, 130, 246, 0.15));
}

.webtron-docs-feedback-comment textarea::placeholder {
    color: var(--docs-feedback-placeholder, #9ca3af);
}

.webtron-docs-feedback-submit {
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    background: var(--docs-feedback-submit-bg, #3b82f6);
    color: var(--docs-feedback-submit-text, #fff);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.webtron-docs-feedback-submit:hover {
    background: var(--docs-feedback-submit-hover, #2563eb);
}

.webtron-docs-feedback-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success State */
.webtron-docs-feedback-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: var(--docs-feedback-success-text, #059669);
    font-weight: 500;
}

.webtron-docs-feedback-success svg {
    color: var(--docs-feedback-success-icon, #10b981);
}

/* Stats */
.webtron-docs-feedback-stats {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--docs-feedback-divider, #e5e7eb);
    font-size: 13px;
    color: var(--docs-feedback-stats, #6b7280);
    text-align: center;
}

/* Voted State */
.webtron-docs-feedback-question.voted .webtron-docs-feedback-buttons {
    display: none;
}

/* Animation */
@keyframes webtron-feedback-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.webtron-docs-feedback-success,
.webtron-docs-feedback-comment {
    animation: webtron-feedback-fade-in 0.3s ease;
}

/* Responsive */
@media screen and (max-width: 640px) {
    .webtron-docs-feedback {
        padding: 16px;
    }

    .webtron-docs-feedback-question {
        flex-direction: column;
        align-items: flex-start;
    }

    .webtron-docs-feedback-buttons {
        width: 100%;
    }

    .webtron-docs-feedback-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   DARK MODE
   ============================================ */
body.dark-mode .webtron-docs-feedback,
body.body_dark .webtron-docs-feedback {
    --docs-feedback-bg: #1f2937;
    --docs-feedback-border: #374151;
    --docs-feedback-text: #f9fafb;
    --docs-feedback-btn-border: #4b5563;
    --docs-feedback-btn-bg: #374151;
    --docs-feedback-btn-text: #e5e7eb;
    --docs-feedback-btn-hover-border: #6b7280;
    --docs-feedback-btn-hover-bg: #4b5563;
    --docs-feedback-btn-focus-shadow: rgba(59, 130, 246, 0.3);
    --docs-feedback-yes-border: #10b981;
    --docs-feedback-yes-bg: rgba(16, 185, 129, 0.15);
    --docs-feedback-yes-text: #34d399;
    --docs-feedback-no-border: #ef4444;
    --docs-feedback-no-bg: rgba(239, 68, 68, 0.15);
    --docs-feedback-no-text: #f87171;
    --docs-feedback-thanks: #34d399;
    --docs-feedback-divider: #374151;
    --docs-feedback-label: #d1d5db;
    --docs-feedback-textarea-border: #4b5563;
    --docs-feedback-textarea-bg: #374151;
    --docs-feedback-textarea-text: #f9fafb;
    --docs-feedback-textarea-focus: #60a5fa;
    --docs-feedback-textarea-shadow: rgba(59, 130, 246, 0.25);
    --docs-feedback-placeholder: #9ca3af;
    --docs-feedback-submit-bg: #3b82f6;
    --docs-feedback-submit-text: #fff;
    --docs-feedback-submit-hover: #2563eb;
    --docs-feedback-success-text: #34d399;
    --docs-feedback-success-icon: #10b981;
    --docs-feedback-stats: #9ca3af;
}