/* ==========================================================================
   سُمو — Feedback page
   Layout and the star rating. Everything else comes from style.css.
   ========================================================================== */

.fb-main { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 112px); }
.fb-shell { max-width: 720px; margin-inline: auto; }

/* ---------------- Header ---------------- */
.fb-head { margin-bottom: clamp(28px, 4vw, 44px); }
.fb-head h1 { font-size: clamp(2.05rem, 4.6vw, 3.3rem); }
.fb-head .lead { margin-top: 10px; font-size: clamp(1.08rem, 1.5vw, 1.22rem); max-width: 52ch; }
.fb-head .lead strong { color: var(--ink); }

/* ---------------- Star rating ---------------- */
.stars { display: flex; align-items: center; gap: 4px; }
.star {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--sand-2);
    transition: transform 0.15s var(--ease), color 0.15s ease;
}
.star:hover { transform: scale(1.12); }
.star:active { transform: scale(0.95); }
.star.on { color: var(--gold); }
.star-note {
    margin-inline-start: 10px;
    min-height: 1em;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--gold-ink);
}