/*
 * Learn English JP — Star Rating Widget v2
 * assets/rating.css
 *
 * Design matches the LEJP activity card system:
 *   – indigo/purple gradient brand (#4f46e5 → #8b5cf6)
 *   – Nunito font, 14px border-radius, soft shadows
 *   – Same surface/border/muted tokens as activities.css
 */

/* ── Portal wrapper ──────────────────────────────────────────────────── */
#ej-rating-portal {
    display: block;          /* explicit fallback: JS removes inline display:none
                                but without this the computed display can be
                                inherited as 'none' in some render paths */
    position: relative;
    z-index: 20;             /* must exceed .lg-shell z-index:10 on lesson pages;
                                portal sits after the shell in DOM order but both
                                share the body stacking context — a lower z-index
                                can make the shell's background paint over the portal */
    padding: 24px 0 8px;
    width: 100%;
    box-sizing: border-box;
    pointer-events: auto;
}

/* ── Shell ───────────────────────────────────────────────────────────── */
.ej-rating {
    position: relative;
    z-index: 2;
    isolation: isolate;      /* create a fresh stacking context so internal
                                z-index values on stars/emoji-btns are scoped
                                and never race against page-level stacking */
    pointer-events: auto;    /* belt-and-braces: overrides any pointer-events:none
                                that a parent template might set on a wide selector */
    font-family: var(--ej-font, 'Nunito', system-ui, sans-serif);
    background: #ffffff;
    border: 1.5px solid var(--lejp-border, #e2e8f0);
    border-radius: var(--lejp-radius, 14px);
    overflow: visible;
    box-shadow: var(--lejp-shadow, 0 4px 24px rgba(0,0,0,.07));
}

/* ── Top gradient accent ─────────────────────────────────────────────── */
.ej-rating::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #8b5cf6, #ec4899);
    border-radius: var(--lejp-radius, 14px) var(--lejp-radius, 14px) 0 0;
}

/* ── Header row: icon + title ────────────────────────────────────────── */
.ej-rating__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 0;
}

.ej-rating__title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--lejp-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

/* ── Inner layout: two columns ───────────────────────────────────────── */
.ej-rating__inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 20px 18px;
    flex-wrap: wrap;
}

/* ── Left: score badge ───────────────────────────────────────────────── */
.ej-rating__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1.5px solid var(--lejp-primary-lt, #eef2ff);
}

.ej-rating__score-big {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    color: var(--lejp-text, #1e293b);
    letter-spacing: -1.5px;
}

.ej-rating__score-big span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lejp-muted, #64748b);
    letter-spacing: 0;
}

.ej-rating__score-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ej-rating__mini-stars {
    display: flex;
    gap: 1px;
    font-size: 0.75rem;
    line-height: 1;
}

.ej-rating__mini-star     { color: #e2e8f0; }
.ej-rating__mini-star--lit { color: #f59e0b; }

.ej-rating__vote-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--lejp-muted, #64748b);
    white-space: nowrap;
}

/* ── Right: interaction area ─────────────────────────────────────────── */
.ej-rating__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ej-rating__label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--lejp-text, #1e293b);
    margin: 0;
}

/* ── Emoji sentiment buttons ─────────────────────────────────────────── */
.ej-rating__sentiment {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    pointer-events: auto;
}

/* On desktop the right column is wide — spread buttons evenly so the
   large empty area to the right of the last button is filled. */
@media (min-width: 520px) {
    .ej-rating__sentiment {
        justify-content: space-between;
        gap: 4px;
    }
    .ej-rating__emoji-btn {
        flex: 1 1 auto;
        max-width: 96px; /* caps button width on very wide columns */
    }
}

.ej-rating__emoji-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--lejp-primary-lt, #eef2ff);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 1.2rem;
    line-height: 1;
    pointer-events: auto;
    position: relative;
    z-index: 4;
    -webkit-user-select: none;
    user-select: none;
}

.ej-rating__emoji-btn span {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--lejp-primary, #4f46e5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ej-rating__emoji-btn:hover,
.ej-rating__emoji-btn:focus-visible {
    background: var(--lejp-primary-lt, #eef2ff);
    border-color: var(--lejp-primary, #4f46e5);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(79,70,229,.2);
    outline: none;
}

.ej-rating__emoji-btn.is-selected {
    background: var(--lejp-primary, #4f46e5);
    border-color: var(--lejp-primary, #4f46e5);
    box-shadow: 0 4px 12px rgba(79,70,229,.3);
    transform: translateY(-2px);
}

.ej-rating__emoji-btn.is-selected span {
    color: #c7d2fe;
}

.ej-rating--voted .ej-rating__emoji-btn {
    cursor: default;
    pointer-events: none;
}

/* ── Stars + Confirm row ─────────────────────────────────────────────── */
.ej-rating__stars-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ej-rating__stars {
    display: flex;
    gap: 2px;
    pointer-events: auto;
}

.ej-rating__star {
    background: none;
    border: none;
    padding: 1px 3px;
    font-size: 1.5rem;
    line-height: 1;
    color: #e2e8f0;
    cursor: pointer;
    transition: color .1s ease, transform .12s cubic-bezier(.34,1.56,.64,1);
    outline: none;
    position: relative;
    z-index: 4;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
}

.ej-rating__star:focus-visible {
    outline: 2px solid var(--lejp-primary, #4f46e5);
    outline-offset: 2px;
    border-radius: 4px;
}

.ej-rating__stars:not(.ej-rating__stars--voted) .ej-rating__star--hover {
    color: #f59e0b;
    transform: scale(1.25) translateY(-2px);
}

.ej-rating__star--filled {
    color: #f59e0b;
}

.ej-rating__stars--voted .ej-rating__star {
    cursor: default;
    pointer-events: none;
}

.ej-rating--voted .ej-rating__star:not(.ej-rating__star--filled) {
    opacity: 0.3;
}

/* ── Confirm button ──────────────────────────────────────────────────── */
.ej-rating__confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-family: var(--ej-font, 'Nunito', system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    box-shadow: 0 3px 12px rgba(79,70,229,.35);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.ej-rating__confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(79,70,229,.45);
}

.ej-rating__confirm:active {
    transform: translateY(0);
}

.ej-rating__confirm:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.ej-rating__confirm[hidden] { display: none; }

/* ── Voted message ───────────────────────────────────────────────────── */
.ej-rating__voted-msg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 100px;
    padding: 4px 12px;
    white-space: nowrap;
    margin: 0;
}

/* ── Error/feedback ──────────────────────────────────────────────────── */
.ej-rating__feedback {
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 5px 12px;
    display: inline-block;
    margin: 0;
}

.ej-rating__feedback--success { color: #059669; background: #ecfdf5; }
.ej-rating__feedback--error   { color: #e11d48; background: #fff1f2; }

/* ── Summary (hidden DOM anchor for JS star-painting) ────────────────── */
.ej-rating__summary { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ej-rating__inner {
        flex-direction: column;  /* stack left/right panels vertically */
        align-items: stretch;
        padding: 10px 16px 16px;
        gap: 0;
    }
    .ej-rating__left {
        width: 100%;
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 1.5px solid var(--lejp-primary-lt, #eef2ff);
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .ej-rating__right {
        width: 100%;
        gap: 10px;
    }
    .ej-rating__sentiment {
        flex-wrap: nowrap;       /* keep all 5 emoji buttons on one row */
        gap: 4px;
        justify-content: space-between;
    }
    .ej-rating__emoji-btn {
        flex: 1 1 0;             /* each button shares the row equally */
        min-width: 0;
        padding: 7px 4px;
    }
    .ej-rating__emoji-btn span {
        display: none;
    }
    .ej-rating__star {
        font-size: 1.6rem;
        padding: 2px 4px;
    }
}