/* =========================================================
   EXPERIENCE FEEDBACK MODAL (ISOLATED)
========================================================= */

#experience-feedback .experience-feedback__modal {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;

    padding: 2rem;
    width: 100%;
    max-width: 420px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   HEADER
========================================================= */

.experience-feedback__header {
    text-align: center;
}

.experience-feedback__header h3 {
    font-size: 1.4rem;
    color: #fff;
}

.experience-feedback__header p {
    font-size: 0.9rem;
    color: #999;
}

/* =========================================================
   REASONS (SELECTOR / CHIPS)
========================================================= */

.experience-feedback__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    /* 👇 separation from textarea */
    margin-bottom: 0.5rem;
}

/* base chip */
.experience-feedback__chip {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;

    border: 1px solid #303134;
    background: #202124;
    color: #bdc1c6;

    cursor: pointer;
    font-size: 0.8rem;

    transition: all 0.15s ease;
}

.experience-feedback__chip:hover {
    background: #2a2a2a;
    color: #fff;
    border-color: #5f6368;
}

.experience-feedback__chip.active {
    background: rgba(138,180,248,0.18);
    border-color: #8ab4f8;
    color: #fff;
}

/* =========================================================
   TEXTAREA
========================================================= */

#experience-feedback textarea {
    width: 100%;
    background-color: #212121;
    border: 1px solid #444;

    color: #fff;

    padding: 0.85rem;
    border-radius: 10px;

    resize: vertical;
    min-height: 110px;

    font-family: inherit;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#experience-feedback textarea:focus {
    outline: none;
    border-color: #8ab4f8;
    box-shadow: 0 0 0 3px rgba(138,180,248,0.12);
}

/* =========================================================
   ERROR (NO RED)
========================================================= */

#experience-feedback-error {
    color: #8ab4f8;
    font-size: 0.85rem;
    min-height: 18px;
}

/* =========================================================
   ACTIONS
========================================================= */

.experience-feedback__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* =========================================================
   SELECT (kept for future use, optional)
========================================================= */

.experience-feedback__select {
    width: 100%;
    padding: 0.85rem 1rem;

    background: #202124;
    border: 1px solid #303134;
    border-radius: 10px;

    color: #e0e0e0;

    font-family: inherit;
    font-size: 0.9rem;

    outline: none;
    cursor: pointer;

    transition: all 0.15s ease;
}

.experience-feedback__select:hover {
    border-color: #5f6368;
}

.experience-feedback__select:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 3px rgba(138,180,248,0.12);
}

/* =========================================================
   DISABLED PRIMARY BUTTON STATE
========================================================= */

.experience-feedback__actions .btn-primary:disabled {
    background: rgba(138,180,248,0.08);
    border: 1px solid rgba(138,180,248,0.15);
    color: rgba(255,255,255,0.35);

    cursor: not-allowed;
    opacity: 1;

    box-shadow: none;
}

.experience-feedback__actions .btn-primary:disabled:hover {
    background: rgba(138,180,248,0.08);
    border: 1px solid rgba(138,180,248,0.15);
}

/* =========================================================
   SAFETY: KEEP GLOBAL MODAL BUTTON CONSISTENCY
========================================================= */

.modal-close-btn {
    transition: all 0.2s ease;
}

.experience-feedback__textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#experience-feedback-error {
    font-size: 0.8rem;
    color: #8ab4f8;
    line-height: 1.3;

    min-height: 18px; /* evita jumps cuando aparece/desaparece */
    opacity: 0.9;
}

#experience-feedback-error {
    transition: opacity 0.25s ease;
}