/* =========================================================
   Feedback widget – Egypt eVisa
   Interaction scheme:  default = accent,  hover = primary
   Stars: uncoloured until a rating exists, then coloured (gold)
   ========================================================= */

.fb-wrap {
    /* ---- brand tokens (mapped from your global :root) ---- */
    --fb-primary: var(--red-dark, #a30d1e);
    /* hover / active */
    --fb-secondary: var(--red-light, #e5394d);
    /* link hover */
    --fb-accent: var(--primary-red, #ce1126);
    /* default buttons */
    --fb-tint: var(--bg-light, #f8f9fa);
    --fb-white: var(--bg-primary, #ffffff);
    --fb-border: var(--border-color, #d8d8d8);
    --fb-text: var(--text-dark, #1f2937);
    --fb-text-2: var(--text-dark, #1f2937);
    --fb-muted-c: var(--text-muted, #6b7280);
    --fb-on-dark: var(--text-light, #ffffff);
    --fb-radius: var(--radius-sm, 8px);
    --fb-transition: var(--transition, all 0.3s ease);

    /* ---- FONT SIZES: change these to resize the whole widget ---- */
    --fb-fs-base: 0.875rem;
    /* main text, labels, inputs (14px) */
    --fb-fs-title: 1.05rem;
    /* "How was your experience?" title */
    --fb-fs-small: 0.78rem;
    /* notes, hints, errors             */
    --fb-fs-btn: 0.8rem;
    /* buttons                          */
    --fb-fs-avg-star: 0.9rem;
    /* top bar average stars            */
    --fb-fs-star: 1.6rem;
    /* clickable rating stars           */

    /* ---- STAR COLOURS: change these two to restyle all stars ---- */
    --fb-star-off: #d5dbe3;
    /* uncoloured star (no rating)   */
    --fb-star-on: var(--primary-yellow, #d4af37);
    /* coloured star (rating given)  */

    --fb-error-text: #b91c1c;
    --fb-error-border: #dc2626;
    --fb-success-bg: var(--success-light, #e8f5e9);
    --fb-success-border: var(--success, #2e7d32);
    --fb-success-text: #1b5e20;

    --fb-focus: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 35%, transparent);

    background: var(--fb-white);
    border-bottom: 1px solid var(--fb-primary);
    color: var(--fb-text);
    font-size: var(--fb-fs-base);
    line-height: 1.5;
}

.fb-bar {
    border-top: 1px solid var(--fb-primary);
}

/* First bar gets a light tint so the two bars read as one band */
.fb-bar:first-child {
    background: var(--fb-tint);
}

.fb-panel {
    background: var(--fb-white);
    border-top: 1px solid var(--fb-primary);
}

/* ---------- Text helpers ---------- */
.fb-title {
    font-size: var(--fb-fs-title);
    font-weight: 700;
    color: var(--fb-text);
    line-height: 1.3;
}

.fb-label {
    font-size: var(--fb-fs-base);
    font-weight: 600;
    color: var(--fb-text);
}

.fb-note {
    font-size: var(--fb-fs-small);
    color: var(--fb-text-2);
}

.fb-muted {
    color: var(--fb-muted-c);
}

.fb-hint {
    font-size: var(--fb-fs-small);
}

.fb-error {
    font-size: var(--fb-fs-small);
    color: var(--fb-error-text);
}

.fb-error:empty {
    display: none;
}

/* ---------- Buttons: accent → primary on hover ---------- */
.fb-wrap .btn-primary {
    --bs-btn-bg: var(--fb-accent);
    --bs-btn-border-color: var(--fb-accent);
    --bs-btn-color: var(--fb-on-dark);
    --bs-btn-hover-bg: var(--fb-primary);
    --bs-btn-hover-border-color: var(--fb-primary);
    --bs-btn-hover-color: var(--fb-on-dark);
    --bs-btn-active-bg: var(--fb-primary);
    --bs-btn-active-border-color: var(--fb-primary);
    --bs-btn-active-color: var(--fb-on-dark);
    --bs-btn-disabled-bg: var(--fb-accent);
    --bs-btn-disabled-border-color: var(--fb-accent);
    --bs-btn-disabled-color: var(--fb-on-dark);
    --bs-btn-focus-shadow-rgb: 206, 17, 38;
    --bs-btn-border-radius: var(--fb-radius);
    --bs-btn-font-size: var(--fb-fs-btn);
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-padding-x: 0.9rem;
    font-size: var(--fb-fs-btn);
    font-weight: 600;
    transition: var(--fb-transition);
}

.fb-wrap .btn-primary.btn-sm {
    --bs-btn-font-size: var(--fb-fs-btn);
    --bs-btn-padding-y: 0.28rem;
    --bs-btn-padding-x: 0.75rem;
    min-width: 3.8rem;
}

.fb-wrap .btn-primary:focus-visible {
    box-shadow: var(--fb-focus);
}

/* Selected Yes / No answer */
.fb-wrap [data-answer].is-selected {
    background: var(--fb-primary);
    border-color: var(--fb-primary);
    color: var(--fb-on-dark);
    outline: 2px solid var(--fb-accent);
    outline-offset: 2px;
}

/* Close button */
.fb-close {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--fb-accent);
    border-radius: var(--fb-radius);
    background: var(--fb-accent);
    color: var(--fb-on-dark);
    font-size: var(--fb-fs-btn);
    font-weight: 600;
    white-space: nowrap;
    transition: var(--fb-transition);
}

.fb-close:hover {
    background: var(--fb-primary);
    border-color: var(--fb-primary);
    color: var(--fb-on-dark);
}

.fb-close:focus-visible {
    outline: none;
    box-shadow: var(--fb-focus);
}

/* Links */
.fb-wrap .link-primary {
    color: var(--fb-primary) !important;
    font-weight: 500;
    text-underline-offset: 3px;
}

.fb-wrap .link-primary:hover {
    color: var(--fb-secondary) !important;
}

/* ---------- Average stars (top bar) ---------- */
.fb-avg-stars {
    display: inline-flex;
    gap: 3px;
}

.fb-avg-star {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: var(--fb-fs-avg-star);
}

/* empty star: always uncoloured */
.fb-avg-bg {
    color: var(--fb-star-off) !important;
}

/* coloured part: its width = how much of this star is filled */
.fb-avg-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: var(--fb-star-on) !important;
}

.fb-avg-fill i {
    color: inherit !important;
}

/* ---------- Rating stars (form): uncoloured → coloured on click ---------- */
.fb-wrap .fb-stars {
    display: flex;
    gap: 8px;
    direction: ltr;
    /* 1 → 5 always runs left to right */
}

.fb-wrap .fb-star {
    background: none !important;
    border: 0;
    padding: 0;
    font-size: var(--fb-fs-star);
    line-height: 1;
    cursor: pointer;
    color: var(--fb-star-off) !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
}

.fb-wrap .fb-star i {
    color: inherit !important;
}

/* Hover / focus / press never colour the stars */
.fb-wrap .fb-star:hover,
.fb-wrap .fb-star:focus,
.fb-wrap .fb-star:active {
    color: var(--fb-star-off) !important;
    box-shadow: none;
    outline: none;
}

/* Colour only the stars up to the clicked rating */
.fb-wrap .fb-star.is-active,
.fb-wrap .fb-star.is-active:hover,
.fb-wrap .fb-star.is-active:focus,
.fb-wrap .fb-star.is-active:active {
    color: var(--fb-star-on) !important;
}

/* Keyboard users still get a visible focus ring */
.fb-wrap .fb-star:focus-visible {
    box-shadow: var(--fb-focus);
    border-radius: var(--fb-radius);
}

/* ---------- Form controls ---------- */
.fb-wrap .form-control {
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    background: var(--fb-white);
    color: var(--fb-text);
    font-family: inherit;
    font-size: var(--fb-fs-base);
    padding: 0.45rem 0.7rem;
}

.fb-wrap .form-control:focus {
    border-color: var(--fb-accent);
    box-shadow: var(--fb-focus);
}

.fb-wrap .form-control.is-invalid {
    border-color: var(--fb-error-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-error-border) 25%, transparent);
}

/* Checkboxes / radios */
.fb-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    border: 1.5px solid var(--fb-muted-c);
    background-color: var(--fb-white);
    cursor: pointer;
    transition: var(--fb-transition);
}

.fb-check .form-check-input[type="checkbox"] {
    border-radius: var(--fb-radius);
}

.fb-check .form-check-input:hover {
    border-color: var(--fb-primary);
}

.fb-check .form-check-input:checked {
    background-color: var(--fb-accent);
    border-color: var(--fb-accent);
}

.fb-check .form-check-input:checked:hover {
    background-color: var(--fb-primary);
    border-color: var(--fb-primary);
}

.fb-check .form-check-input:focus {
    border-color: var(--fb-accent);
    box-shadow: var(--fb-focus);
}

.fb-check .form-check-label {
    margin-inline-start: 0.4rem;
    font-size: var(--fb-fs-base);
    font-weight: 500;
    color: var(--fb-text-2);
    cursor: pointer;
}

/* ---------- Success alert ---------- */
.fb-wrap .alert-success {
    background: var(--fb-success-bg);
    border: 1px solid color-mix(in srgb, var(--fb-success-border) 35%, transparent);
    border-inline-start: 4px solid var(--fb-success-border);
    color: var(--fb-success-text);
    border-radius: var(--fb-radius);
    font-size: var(--fb-fs-base);
    padding: 0.6rem 0.9rem;
}

/* ---------- RTL ---------- */
.fb-wrap[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

.fb-wrap[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

.fb-wrap[dir="rtl"] .form-check-inline {
    margin-right: 0;
    margin-left: 1rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .fb-wrap {
        --fb-fs-star: 1.45rem;
    }

    .fb-wrap .btn-primary:not(.btn-sm) {
        width: 100%;
    }
}