/* ============================================================
   BRAIN SKILL — Phase 07: shared look of the platform feedback modals (purchase experience, developer, visitor).
   Scoped to .fbm (an addition to the existing .st-tmodal shell in studio.css): it does not touch the site CSS, the header, the footer or any other page.
   Same identity as the official feedback modal: official logo centred, «منصة Brain Skill» under it, Cairo, RTL, the brand blues, glass cards.
   ============================================================ */
.st-tmodal.fbm {
    max-width: 420px;
    padding: 1.1rem 1.25rem 1rem;
    color: #EAF7FF;
    font-family: Cairo, system-ui, sans-serif;
    direction: rtl;
}
.st-tmodal.fbm .fbm__logo { display: block; width: 84px; height: 84px; margin: 0 auto .1rem; object-fit: contain; }
.st-tmodal.fbm .fbm__brand { text-align: center; margin: 0 0 .5rem; font: 800 .84rem Cairo, sans-serif; color: #9bdcfb; }
.st-tmodal.fbm .fbm__hi { text-align: center; margin: .1rem 0; font: 700 .88rem Cairo, sans-serif; color: #d9efff; overflow-wrap: anywhere; }
.st-tmodal.fbm .fbm__q { text-align: center; margin: .1rem 0 .2rem; font: 800 1.12rem/1.5 Cairo, sans-serif; color: #fff; overflow-wrap: anywhere; }
.st-tmodal.fbm .fbm__ctx { display: flex; justify-content: center; margin: .1rem 0 .55rem; }
.st-tmodal.fbm .fbm__pill { max-width: 100%; border-radius: 999px; padding: .12rem .75rem; font: 700 .76rem Cairo, sans-serif; background: rgba(79, 195, 247, .14); border: 1px solid rgba(155, 220, 251, .28); color: #bfe6fb; overflow-wrap: anywhere; text-align: center; }
.st-tmodal.fbm .fbm__stars { display: flex; justify-content: center; direction: ltr; gap: .1rem; margin: .2rem 0 .6rem; }
.st-tmodal.fbm .fbm__star { background: none; border: 0; padding: 0 .1rem; font-size: 2.1rem; line-height: 1; cursor: pointer; color: rgba(155, 220, 251, .42); transition: color .15s, transform .15s; }
.st-tmodal.fbm .fbm__star:hover { transform: translateY(-1px); }
.st-tmodal.fbm .fbm__star.is-on { color: #F7B844; }
.st-tmodal.fbm .fbm__star:focus-visible, .st-tmodal.fbm .fbm__chip:focus-visible, .st-tmodal.fbm .fbm__btn:focus-visible { outline: 2px solid #4FC3F7; outline-offset: 2px; }
.st-tmodal.fbm .fbm__hint { text-align: center; font-size: .78rem; color: #8fb9d6; margin: 0 0 .5rem; }
.st-tmodal.fbm .fbm__hd { margin: .1rem 0 .45rem; font: 700 .9rem Cairo, sans-serif; color: #EAF7FF; }
.st-tmodal.fbm .fbm__chips { display: flex; flex-wrap: wrap; gap: .38rem; margin-bottom: .6rem; }
.st-tmodal.fbm .fbm__chip { border-radius: 999px; padding: .32rem .7rem; font: 600 .78rem Cairo, sans-serif; cursor: pointer; border: 1px solid rgba(155, 220, 251, .3); background: rgba(255, 255, 255, .06); color: #EAF7FF; text-align: right; }
.st-tmodal.fbm .fbm__chip.is-on { background: linear-gradient(120deg, #4FC3F7, #1685DA); color: #04102E; border-color: transparent; font-weight: 800; box-shadow: 0 0 0 2px rgba(79, 195, 247, .35); }
/* 1.96.0 post-release: a chosen answer must be obvious in EVERY colour scheme and without relying on colour alone: a check mark precedes it. */
.st-tmodal.fbm .fbm__chip.is-on::before { content: "\2713\00a0"; font-weight: 900; }
.st-tmodal.fbm textarea { min-height: 62px; font: 500 .84rem Cairo, sans-serif; }
.st-tmodal.fbm .fbm__count { display: flex; justify-content: space-between; margin: .15rem 0 .4rem; font-size: .7rem; color: #8fb9d6; }
.st-tmodal.fbm .fbm__count span[dir="ltr"] { unicode-bidi: isolate; }
.st-tmodal.fbm .fbm__req { border-radius: 10px; padding: .45rem .65rem; font-size: .76rem; margin: .1rem 0 .5rem; background: rgba(247, 184, 68, .12); border: 1px solid rgba(247, 184, 68, .4); color: #ffe3a8; }
.st-tmodal.fbm .fbm__err { border-radius: 10px; padding: .45rem .65rem; font-size: .78rem; margin: .1rem 0 .5rem; background: rgba(255, 120, 120, .12); border: 1px solid rgba(255, 140, 140, .4); color: #ffd0d0; }
.st-tmodal.fbm .fbm__actions { display: flex; gap: .5rem; margin-top: .3rem; }
.st-tmodal.fbm .fbm__btn { min-height: 40px; border-radius: 10px; padding: 0 .9rem; font: 700 .86rem Cairo, sans-serif; cursor: pointer; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #EAF7FF; }
.st-tmodal.fbm .fbm__btn.is-primary { flex: 1; border: 0; background: linear-gradient(120deg, #4FC3F7, #1685DA); color: #04102E; }
.st-tmodal.fbm .fbm__btn:disabled { opacity: .55; cursor: not-allowed; }
.st-tmodal.fbm .fbm__thanks { text-align: center; padding: 1rem .4rem .6rem; }
.st-tmodal.fbm .fbm__check { width: 56px; height: 56px; border-radius: 50%; margin: .3rem auto .5rem; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(120deg, #4FC3F7, #1685DA); color: #04102E; }
.st-tmodal.fbm .fbm__close { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; }
/* the platform header stays usable under a REQUIRED modal: it only covers the page content, never the navigation */
.st-tmodal__backdrop.fbm-below-header { inset: var(--fbm-header, 0px) 0 0 0; }
@media (max-width: 480px) {
    .st-tmodal.fbm { padding: 1rem .95rem .9rem; }
    .st-tmodal.fbm .fbm__q { font-size: 1.02rem; }
    .st-tmodal.fbm .fbm__star { font-size: 1.9rem; }
}
@media (prefers-color-scheme: light) {
    .st-tmodal.fbm:not(.fbm--dark) { background: linear-gradient(145deg, #ffffff, #f1f6fd 62%, #e5effc); color: #0b1a3a; border-color: #cfdcf0; box-shadow: 0 24px 54px rgba(30, 60, 120, .28); }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__brand { color: #0E4FB0; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__hi { color: #26457d; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__q { color: #0b1a3a; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__pill { background: #e3effd; border-color: #b9d3f3; color: #0E4FB0; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__star { color: #c3d3ea; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__star.is-on { color: #F7B844; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__hint, .st-tmodal.fbm:not(.fbm--dark) .fbm__count { color: #5b6b8a; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__hd { color: #0b1a3a; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__chip { background: #fff; border-color: #bcd0ec; color: #16356b; }
    /* the light-scheme chip rule above is as specific as .is-on and comes later, so it hid the selected state completely: restate it here */
    .st-tmodal.fbm:not(.fbm--dark) .fbm__chip.is-on { background: linear-gradient(120deg, #4FC3F7, #1685DA); color: #04102E; border-color: #1685DA; box-shadow: 0 0 0 2px rgba(22, 133, 218, .28); }
    .st-tmodal.fbm:not(.fbm--dark) textarea { background: #fff; color: #0b1a3a; border-color: #bcd0ec; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__req { background: #fff4dc; border-color: #f0cd86; color: #6b4a06; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__err { background: #ffeceb; border-color: #f0b2ae; color: #7a1c16; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__btn { background: #fff; border-color: #bcd0ec; color: #16356b; }
    .st-tmodal.fbm:not(.fbm--dark) .fbm__btn.is-primary { color: #04102E; }
}
@media (prefers-reduced-motion: reduce) { .fbm__star { transition: none; } }