/* ICH_Quiz — main stylesheet (extra/global rules) | Készítette: BMSoft1024
   NOTE: the atoms/molecules/organisms partials are linked individually from header.php with
   ?v=assetV (cache-busting). They are NO LONGER @import'd here — @import children inherited the
   immutable 1-year cache with no version, so edits never reached users. */

/* Segmented toggle (e.g. question media: Image / Video) — BMSoft1024 */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-2,rgba(255,255,255,.05));margin:6px 0}
.seg-btn{border:0;background:transparent;color:var(--text,#cdd3e0);padding:7px 16px;border-radius:9px;cursor:pointer;font-weight:600;font-size:.92rem;transition:.15s}
.seg-btn:hover{background:rgba(255,255,255,.06)}
.seg-btn.on{background:var(--primary,#7c5cff);color:#fff}

/* Boolean on/off toggle switch — BMSoft1024, added 2026-07-08 per project-wide UI rule: checkboxes are
   ONLY for selection/multi-select (row picking, bulk-action lists); every true/false SETTING anywhere
   in the app uses this instead. Built on a real <input type="checkbox"> for native keyboard/
   screen-reader semantics, just visually restyled as a track+thumb — never a div-only fake control. */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:var(--surface-2,rgba(255,255,255,.12));border-radius:999px;transition:.18s;pointer-events:none}
.switch-track::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.18s}
.switch input:checked + .switch-track{background:var(--primary,#7c5cff)}
.switch input:checked + .switch-track::before{transform:translateX(18px)}
.switch input:disabled + .switch-track{opacity:.45;cursor:not-allowed}
.switch input:focus-visible + .switch-track{outline:2px solid var(--primary,#7c5cff);outline-offset:2px}
/* A settings row: label text on the left, switch pinned right — the standard layout everywhere a
   boolean setting appears (builder settings panel, bulk-settings modal, profile toggles, admin…). */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}

/* Async-load spinner / loading state — BMSoft1024 */
.ich-loading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.ich-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--primary,#7c5cff);border-radius:50%;animation:ich-spin .7s linear infinite;flex:0 0 auto}
@keyframes ich-spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.10),rgba(255,255,255,.04));background-size:200% 100%;animation:ich-skel 1.2s ease-in-out infinite;border-radius:8px}
@keyframes ich-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Homepage hero logo — BMSoft1024 */
.hero-logo{display:block;margin:0 auto 14px;width:144px;height:144px;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(124,92,255,.45))}
@media(max-width:640px){.hero-logo{width:108px;height:108px}}