/* ============================================================================
 * feedback.css — per-page feedback widget (FeedbackWidget.ascx)
 * RTL-safe (logical properties) so ar-SA and en-US both work. Reuses the portal
 * --color-* design tokens where available, with brand fallbacks.
 * ==========================================================================*/
#pf-widget {
    --pf-primary: var(--color-primary, #1EB2BB);
    --pf-border: var(--color-border, #e0e0e0);
    --pf-text: var(--color-text-dark, #333333);
    --pf-muted: var(--color-text-light, #6b6b6b);
    --pf-bg: var(--color-background-light, #f7f9fa);
    box-sizing: border-box;
    margin-block: 2rem 0;
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--color-primary);
    background: #ffffff;
    font-family: var(--font-family, inherit);
    color: var(--pf-text);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

    #pf-widget *,
    #pf-widget *::before,
    #pf-widget *::after {
        box-sizing: border-box;
    }

/* ---- Top bar ------------------------------------------------------------- */
.pf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.pf-question {
    font-size: 1rem;
    font-weight: 400;
}

.pf-vote-buttons {
    display: inline-flex;
    gap: 0.5rem;
}

.pf-counter {
    color: #161616;
    font-size: 1rem;
    margin-inline-start: auto;
    font-weight: 400;
}

.pf-liked-count,
.pf-total-count {
    font-weight: 400;
    color: #161616;
    font-size: 1rem;
}

/* ---- Buttons ------------------------------------------------------------- */
/* .pf-btn {
    min-width: 4.5rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--pf-primary);
    border-radius: 999px;
    background: #ffffff;
    color: var(--pf-primary);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .pf-btn:hover:not(:disabled) {
        background: var(--pf-primary);
        color: #ffffff;
    }

    .pf-btn.pf-active {
        background: var(--pf-primary);
        color: #ffffff;
    }

    .pf-btn:disabled {
        opacity: 0.55;
        cursor: default;
    } */

/* ---- Form ---------------------------------------------------------------- */
.pf-form {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    font-size: 1rem;
    /* border-block-start: 1px solid var(--pf-border); */
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

    .pf-form[hidden],
    .pf-reasons[hidden],
    .pf-other-wrap[hidden],
    .pf-success[hidden],
    .pf-error[hidden] {
        display: none;
    }

.pf-reasons-label {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

    .pf-reasons-label span {
        font-weight: 400;
        color: var(--pf-muted);
        font-size: 1rem;
    }

.pf-reasons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pf-check,
.pf-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
}
.pf-check input[type=checkbox], .pf-radio input[type=radio] {
    height: 1.5rem;
    width: 1.5rem;
}
.pf-check input[type=checkbox] {
    border-radius: 0.25rem;
}
.pf-check input[type=checkbox]:checked, .pf-radio input[type=radio]:checked {
    accent-color: var(--color-primary);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.pf-radio input[type=radio] {
    border-radius: 50%;
}

    .pf-check input:disabled + span {
        color: var(--pf-muted);
    }

/* ---- Other reason textarea ---------------------------------------------- */
.pf-other-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: none !important;

}
.pf-other-wrap:active, .pf-other-wrap:hover, .pf-other-wrap:hover:not(:focus-within){
    border: none !important;
}

.pf-other-text {
    width: 100%;
    border-color: #9da4ae !important;
    border-radius: 0.25rem;
    padding: 0.6rem 0.75rem;
    /* border: 1px solid var(--pf-border); */
    /* border-radius: 8px; */
    font: inherit;
    resize: vertical;
}
/* .pf-other-text:hover, .pf-other-text:focus {
    border-color: #eeeeee;
} */
    .pf-other-text:focus {
        outline: none;
        /* border-color: var(--pf-primary); */
    }

/* ---- Gender -------------------------------------------------------------- */
.pf-gender {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.pf-gender-label {
    font-weight: 600;
}

/* ---- Error --------------------------------------------------------------- */
.pf-error {
    margin: 0;
    color: var(--sw-anchor-error-primary-color, #dc3545);
    font-size: 0.9rem;
}

/* ---- Disclaimer ---------------------------------------------------------- */
.pf-disclaimer {
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    color: #161616;
}

    .pf-disclaimer a {
        color: var(--pf-primary);
        text-decoration: underline;
    }

/* ---- Actions ------------------------------------------------------------- */
.pf-actions {
    display: flex;
    gap: 0.75rem;
}

/* .pf-submit,
.pf-cancel {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--pf-primary);
} */

/* .pf-submit {
    background: var(--pf-primary);
    color: #ffffff;
}

    .pf-submit:hover:not(:disabled) {
        filter: brightness(0.95);
    }

    .pf-submit:disabled {
        opacity: 0.6;
        cursor: default;
    }

.pf-cancel {
    background: #ffffff;
    color: var(--pf-primary);
}

    .pf-cancel:hover {
        background: var(--pf-bg);
    } */

/* ---- Success ------------------------------------------------------------- */
.pf-success {
    margin-block-start: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--pf-bg);
    color: var(--pf-primary);
    font-weight: 600;
}

    .pf-success p {
        margin: 0;
    }

@media (max-width: 640px) {
    .pf-counter {
        margin-inline-start: 0;
        flex-basis: 100%;
    }
}