/* =============================================================================
   Motion 1.6 — the interaction patterns of Animate UI (animate-ui.com), rebuilt
   in plain CSS + a little JS (app.js) because the site runs without React:
   sliding highlight on menus, animated tab indicator, spring switches, checkboxes
   and radios, pop-in dropdown, button press + ripple, smooth accordions, toasts.
   Everything is switched off for people who ask for reduced motion.
   ============================================================================= */
:root {
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --mhl-bg: rgba(29, 44, 107, .07);
}
[data-mode="dark"] { --mhl-bg: rgba(255, 255, 255, .08); }

/* ---- Sliding highlight (menus, sidebars, tabs) ------------------------------ */
[data-mhl] { isolation: isolate; }
.mhl { position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; background: var(--mhl-bg); opacity: 0; pointer-events: none;
  transition: transform .38s var(--ease-out), width .38s var(--ease-out), height .38s var(--ease-out), opacity .2s ease; }
.mhl.is-on { opacity: 1; }
.mhl--line { height: 3px !important; border-radius: 3px; background: var(--saffron, #E3A52B); opacity: 1; }
.admin .sidebar .mhl { background: rgba(255, 255, 255, .09); border-radius: 10px; }
.umenu__panel .mhl { border-radius: 12px; }
.has-mhl > a:not([aria-current="page"]):hover, .has-mhl > form .umenu__out:hover, .has-mhl > form .acc-logout:hover { background-color: transparent; }

/* ---- Icon micro-animations (hover) ------------------------------------------ */
@keyframes ico-pop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.14) rotate(-8deg); } 70% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ico-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.site-header .nav a:hover .ico, .acc-nav a:hover .ico, .admin .sidebar a:hover .ico, .foot a:hover .ico, .btn:hover > .glyph:first-child { animation: ico-pop .55s var(--ease-out); }
a:hover .ico [href="#i-bell"], .htool:hover .glyph { transform-origin: 50% 10%; }
.htool--mode:hover .glyph { animation: ico-pop .55s var(--ease-out); }

/* ---- Dropdown (user menu) pops in, items cascade ---------------------------- */
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes item-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.umenu[open] .umenu__panel { transform-origin: top right; animation: pop-in .26s var(--ease-out); }
[dir="rtl"] .umenu[open] .umenu__panel { transform-origin: top left; }
.umenu[open] .umenu__panel > a, .umenu[open] .umenu__panel > form { animation: item-in .32s var(--ease-out) both; }
.umenu[open] .umenu__panel > :nth-child(2) { animation-delay: .03s; } .umenu[open] .umenu__panel > :nth-child(3) { animation-delay: .06s; }
.umenu[open] .umenu__panel > :nth-child(4) { animation-delay: .09s; } .umenu[open] .umenu__panel > :nth-child(5) { animation-delay: .12s; }
.umenu[open] .umenu__panel > :nth-child(6) { animation-delay: .15s; } .umenu[open] .umenu__panel > :nth-child(n+7) { animation-delay: .18s; }
.site-header .nav.is-open { animation: pop-in .28s var(--ease-out); }
.site-header .nav.is-open > a { animation: item-in .34s var(--ease-out) both; }
.site-header .nav.is-open > a:nth-child(2) { animation-delay: .04s; } .site-header .nav.is-open > a:nth-child(3) { animation-delay: .08s; }
.site-header .nav.is-open > a:nth-child(4) { animation-delay: .12s; } .site-header .nav.is-open > a:nth-child(n+5) { animation-delay: .16s; }

/* ---- Buttons: press + ripple ------------------------------------------------- */
.btn, .sso__btn, .htool, .hauth__login, .opt__box, .wa__fab { -webkit-tap-highlight-color: transparent; }
.btn { position: relative; overflow: hidden; transition: transform .18s var(--ease-spring), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:active, .sso__btn:active, .htool:active, .hauth__login:active { transform: scale(.965); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: ripple .6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---- Switch: spring thumb that stretches while pressed ---------------------- */
.switch i { transition: background-color .25s ease; }
.switch i::after { transition: inset-inline-start .38s var(--ease-spring), width .2s var(--ease-out); }
.switch:active i::after { width: 26px; }
.switch input:checked + i::after { inset-inline-start: 21px; }
.switch:active input:checked + i::after { inset-inline-start: 15px; }
.switch input:focus-visible + i { outline: 3px solid var(--focus, #3D5BD9); outline-offset: 2px; }

/* ---- Checkboxes with an animated tick --------------------------------------- */
.check input[type="checkbox"], .form input[type="checkbox"]:not(.switch input), .admin td input[type="checkbox"], .admin th input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin: .15rem 0 0; border: 1.5px solid #AEB4C8; border-radius: 6px; background: var(--surface, #fff) center / 0 no-repeat;
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
  transition: background-color .2s ease, border-color .2s ease, background-size .32s var(--ease-spring), box-shadow .2s ease;
}
.check input[type="checkbox"]:hover, .form input[type="checkbox"]:hover { border-color: var(--lapis); }
.check input[type="checkbox"]:checked, .form input[type="checkbox"]:checked, .admin td input[type="checkbox"]:checked, .admin th input[type="checkbox"]:checked {
  border-color: var(--lapis); background-color: var(--lapis); background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check input[type="checkbox"]:focus-visible, .form input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(61, 91, 217, .25); }
.check input[type="checkbox"]:active { transform: scale(.9); }
[data-mode="dark"] .check input[type="checkbox"]:checked, [data-mode="dark"] .form input[type="checkbox"]:checked { background-color: #6C80EA; border-color: #6C80EA; }

/* ---- Accordions (FAQ, rules) open smoothly ---------------------------------- */
@keyframes acc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: acc-open .32s var(--ease-out); }
details > summary::after { transition: transform .3s var(--ease-spring); }
details[open] > summary::after { transform: rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
  details[open]::details-content { height: auto; }
}

/* ---- Toast-style messages ---------------------------------------------------- */
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.flashes .alert { position: relative; animation: toast-in .4s var(--ease-out) both; padding-inline-end: 2.6rem; overflow: hidden; }
.flashes .alert + .alert { animation-delay: .08s; }
.alert__x { position: absolute; top: 50%; inset-inline-end: .5rem; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .6; cursor: pointer; font-size: 1.15rem; line-height: 1; }
.alert__x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.alert__timer { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .25; transform-origin: left; animation: toast-timer 7s linear forwards; }
[dir="rtl"] .alert__timer { transform-origin: right; }
@keyframes toast-timer { to { transform: scaleX(0); } }
.alert.is-leaving { transition: opacity .3s ease, transform .3s ease, max-height .35s ease .1s, margin .35s ease .1s, padding .35s ease .1s; opacity: 0; transform: translateY(-6px); max-height: 0 !important; margin: 0; padding-block: 0; }

/* ---- Cards lift, inputs glow -------------------------------------------------- */
.card, .pro-card, .g-card, .s-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
input, select, textarea { transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease; }

/* ---- In-view reveal for sections (added by app.js) --------------------------- */
.reveal-up { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-up { opacity: 1; transform: none; }
  .mhl { display: none; }
}