/*
 * HP-Zen Fluent Support account compatibility layer.
 * Scoped to WooCommerce account pages so Fluent Support keeps portal behavior
 * while inheriting the HP-Zen v1.3 compatibility tokens.
 */

.hp-zen-account #fluent_support_client_app,
.hp-zen-account .fs_client_portal {
    --fs-primary: var(--hp-zen-globals-accent, #f1d18a);
    --fs-primary-dark: #d8b66a;
    --fs-primary-hover: #f6dda4;
    --fs-white: var(--hp-zen-compatibility-surface-bg, rgba(255, 255, 255, 0.05));
    --fs-black: var(--hp-zen-globals-text-primary, #f6f1e8);
    --fs-text-strong: var(--hp-zen-globals-text-primary, #f6f1e8);
    --fs-text-sub: var(--hp-zen-globals-text-muted, rgba(245, 241, 232, 0.88));
    --fs-text-light: var(--hp-zen-globals-text-soft, rgba(246, 241, 232, 0.72));
    --fs-text-lighter: rgba(246, 241, 232, 0.56);
    --fs-text-muted: var(--hp-zen-globals-text-soft, rgba(246, 241, 232, 0.72));
    --fs-text-dark: var(--hp-zen-globals-text-primary, #f6f1e8);
    --fs-text-inactive: rgba(246, 241, 232, 0.58);
    --fs-text-heading: var(--hp-zen-globals-text-heading, #faf6ed);
    --fs-text-label: var(--hp-zen-globals-text-muted, rgba(245, 241, 232, 0.88));
    --fs-inline-btn-text: var(--hp-zen-globals-text-soft, rgba(246, 241, 232, 0.72));
    --fs-border-soft: rgba(255, 255, 255, 0.08);
    --fs-border-soft-rgb: 255, 255, 255;
    --fs-border-light: rgba(255, 255, 255, 0.08);
    --fs-border-lighter: rgba(255, 255, 255, 0.12);
    --fs-border-input: rgba(255, 255, 255, 0.12);
    --fs-border-input-hover: rgba(241, 209, 138, 0.42);
    --fs-border-focus: var(--hp-zen-globals-accent, #f1d18a);
    --fs-bg-weak: rgba(255, 255, 255, 0.06);
    --fs-bg-light: rgba(255, 255, 255, 0.04);
    --fs-bg-lighter: rgba(255, 255, 255, 0.10);
    --fs-bg-white: var(--hp-zen-compatibility-surface-bg, rgba(255, 255, 255, 0.05));
    --fs-bg-disabled: rgba(255, 255, 255, 0.04);
    --fs-bg-hover: rgba(255, 255, 255, 0.10);
    --fs-bg-rgb-weak: 255, 255, 255;
    --fs-status-success: #6ad994;
    --fs-status-success-bg: rgba(72, 185, 113, 0.16);
    --fs-status-info: var(--hp-zen-globals-accent, #f1d18a);
    --fs-status-info-bg: var(--hp-zen-compatibility-accent-soft, rgba(241, 209, 138, 0.16));
    --fs-status-error: #ff9b8b;
    --fs-status-error-bg: rgba(255, 130, 112, 0.15);
    --fs-status-warning: #f4c971;
    --fs-status-inactive: rgba(246, 241, 232, 0.62);
    --fs-link: var(--hp-zen-globals-accent, #f1d18a);
    --fs-link-hover: #f6dda4;
    --fs-icon: rgba(246, 241, 232, 0.68);
    --fs-icon-light: rgba(246, 241, 232, 0.52);
    --fs-btn-primary: linear-gradient(rgba(244, 242, 236, 0.97), rgba(186, 183, 176, 0.92));
    --fs-btn-primary-hover: linear-gradient(rgba(250, 247, 239, 0.98), rgba(210, 202, 188, 0.94));
    --fs-btn-text: #1d1d1b;
    --fs-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --fs-shadow-md: var(--hp-zen-compatibility-surface-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
    --fs-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
    font-family: var(--hp-zen-globals-font-family-base, "Poppins", sans-serif);
}

.hp-zen-account #fluent_support_client_app {
    width: 100%;
}

.hp-zen-account .fs_client_portal a {
    color: var(--hp-zen-globals-accent, #f1d18a);
}

.hp-zen-account .fs_client_portal .fs_tickets_container {
    border: var(--hp-zen-compatibility-surface-border, 1px solid rgba(255, 255, 255, 0.06));
    border-radius: 24px;
    background: var(--hp-zen-compatibility-surface-bg, rgba(255, 255, 255, 0.05));
    box-shadow: var(--hp-zen-compatibility-surface-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
}

.hp-zen-account .fs_client_portal .fs_ticket_header,
.hp-zen-account .fs_client_portal .fs_tk_subject,
.hp-zen-account .fs_client_portal .fs_ticket_actions,
.hp-zen-account .fs_client_portal .fs_tickets_table,
.hp-zen-account .fs_client_portal .fs_ticket_threads_container,
.hp-zen-account .fs_client_portal .fs_ticket_thread,
.hp-zen-account .fs_client_portal .fs_conversion_starter {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
}

.hp-zen-account .fs_client_portal .fs_ticket_subject,
.hp-zen-account .fs_client_portal .fs_ticket_number,
.hp-zen-account .fs_client_portal .fs_thread_name,
.hp-zen-account .fs_client_portal .fs_thread_body,
.hp-zen-account .fs_client_portal .fs_thread_body p,
.hp-zen-account .fs_client_portal .fs_ticket_reply_box h3 {
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
}

.hp-zen-account .fs_client_portal .fs_ticket_refresh_btn,
.hp-zen-account .fs_client_portal .fs_close_ticket,
.hp-zen-account .fs_client_portal .fs_tk_thread,
.hp-zen-account .fs_client_portal .el-button {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hp-zen-globals-text-muted, rgba(245, 241, 232, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hp-zen-account .fs_client_portal .fs_ticket_refresh_btn:hover,
.hp-zen-account .fs_client_portal .fs_ticket_refresh_btn:focus-visible,
.hp-zen-account .fs_client_portal .fs_close_ticket:hover,
.hp-zen-account .fs_client_portal .fs_close_ticket:focus-visible,
.hp-zen-account .fs_client_portal .el-button:hover,
.hp-zen-account .fs_client_portal .el-button:focus-visible {
    border-color: rgba(241, 209, 138, 0.36);
    background: rgba(255, 255, 255, 0.10);
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
}

.hp-zen-account .fs_client_portal .fs_customer_response_actions .fs_reply_btn {
    border-color: rgba(255, 255, 255, 0.10);
    background: linear-gradient(rgba(244, 242, 236, 0.97), rgba(186, 183, 176, 0.92));
    color: #1d1d1b;
}

.hp-zen-account .fs_client_portal .fs_customer_response_actions .fs_reply_btn:hover,
.hp-zen-account .fs_client_portal .fs_customer_response_actions .fs_reply_btn:focus-visible {
    background: linear-gradient(rgba(250, 247, 239, 0.98), rgba(210, 202, 188, 0.94));
    color: #151513;
}

.hp-zen-account .fs_client_portal .fs_customer_response_actions p,
.hp-zen-account .fs_client_portal .fs_back_button,
.hp-zen-account .fs_client_portal .fs_back_btn,
.hp-zen-account .fs_client_portal .fs_thread_actions {
    color: var(--hp-zen-globals-text-soft, rgba(246, 241, 232, 0.72));
}

.hp-zen-account .fs_client_portal .fs_status_badge,
.hp-zen-account .fs_client_portal .fs_thread_ribbon,
.hp-zen-account .fs_client_portal .fs_thread_ribbon_customer {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.07);
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
}

.hp-zen-account .fs_client_portal .fs_status_badge.active,
.hp-zen-account .fs_client_portal .fs_status_badge.open,
.hp-zen-account .fs_client_portal .fs_status_badge.new {
    background: rgba(72, 185, 113, 0.16);
    color: #8ae3a5;
}

.hp-zen-account .fs_client_portal .fs_ticket_alert .el-alert,
.hp-zen-account .fs_client_portal .fs_ticket_closed_alert {
    border: 1px solid rgba(241, 209, 138, 0.14);
    background: var(--hp-zen-compatibility-accent-soft, rgba(241, 209, 138, 0.16));
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
}

.hp-zen-account .fs_client_portal .fs_ticket_alert .el-alert__title,
.hp-zen-account .fs_client_portal .fs_ticket_alert .el-alert__close-btn,
.hp-zen-account .fs_client_portal .fs_ticket_alert .el-icon {
    color: currentColor;
}

.hp-zen-account .fs_client_portal .fs_ticket_reply_text,
.hp-zen-account .fs_client_portal textarea,
.hp-zen-account .fs_client_portal input:not([type="checkbox"]):not([type="radio"]),
.hp-zen-account .fs_client_portal .el-input__wrapper,
.hp-zen-account .fs_client_portal .el-select__wrapper,
.hp-zen-account .fs_client_portal .el-textarea__inner,
.hp-zen-account .fs_client_portal .wp-editor-container {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hp-zen-globals-text-primary, #f6f1e8);
    box-shadow: none;
}

.hp-zen-account .fs_client_portal .fs_ticket_reply_text::placeholder,
.hp-zen-account .fs_client_portal textarea::placeholder,
.hp-zen-account .fs_client_portal input::placeholder {
    color: rgba(246, 241, 232, 0.48);
}

.hp-zen-account .fs_client_portal .fs_ticket_reply_text:focus,
.hp-zen-account .fs_client_portal textarea:focus,
.hp-zen-account .fs_client_portal input:focus,
.hp-zen-account .fs_client_portal .el-input__wrapper:focus-within,
.hp-zen-account .fs_client_portal .el-select__wrapper:focus-within,
.hp-zen-account .fs_client_portal .el-textarea__inner:focus {
    border-color: rgba(241, 209, 138, 0.42);
    outline: none;
}

.hp-zen-account .fs_client_portal .mce-container-body,
.hp-zen-account .fs_client_portal .mce-panel,
.hp-zen-account .fs_client_portal .mce-edit-area,
.hp-zen-account .fs_client_portal .mce-statusbar {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--hp-zen-globals-text-primary, #f6f1e8) !important;
}

.hp-zen-account .fs_client_portal .el-table,
.hp-zen-account .fs_client_portal .el-table__inner-wrapper,
.hp-zen-account .fs_client_portal .el-table__header-wrapper,
.hp-zen-account .fs_client_portal .el-table__body-wrapper,
.hp-zen-account .fs_client_portal .el-table tr,
.hp-zen-account .fs_client_portal .el-table th,
.hp-zen-account .fs_client_portal .el-table td {
    background: transparent !important;
    color: var(--hp-zen-globals-text-primary, #f6f1e8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.hp-zen-account .fs_client_portal .el-table__row:hover > td {
    background: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 782px) {
    .hp-zen-account .woocommerce-MyAccount-content > :where(div, form, table, section) {
        padding: 14px;
        border-radius: 22px;
    }

    .hp-zen-account .fs_client_portal .fs_tickets_container {
        border-radius: 20px;
    }

    .hp-zen-account .fs_client_portal .fs_tk_subject,
    .hp-zen-account .fs_client_portal .fs_ticket_actions {
        padding: 16px;
    }
}