/* FILE: /assets/authmodals.css
   Модалка входу/реєстрації MedOnline.
   Дизайн ІДЕНТИЧНИЙ сторінкам /Auth/login + /Auth/signup (assets/auth/css/auth.css):
   ті ж кольори, інпути 46px, зелений CTA + cyan-акцент, focus-ring, show/hide пароля,
   світла/темна тема через body.dark-mode.

   ВАЖЛИВО: усі токени з префіксом --am-* і визначені на .authmodal (НЕ :root),
   щоб НЕ перетирати змінні host-сторінок (krokHub / VideoCourse / articles),
   де ця модалка підключається. Усі селектори теж scoped під .authmodal. */

.authmodal {
  /* ---- design tokens (light) ---- */
  --am-surface:        #ffffff;
  --am-surface-2:      #f0f6f4;
  --am-fg:             #122e2a;
  --am-muted:          #4f6b66;
  --am-border:         #dde8e5;
  --am-primary:        #10b981;
  --am-primary-strong: #0c9f6e;
  --am-on-primary:     #ffffff;
  --am-accent:         #0891b2;
  --am-ring:           rgba(8,145,178,.30);
  --am-danger:         #dc2626;
  --am-danger-bg:      #fef2f2;
  --am-ok:             #10b981;
  --am-ok-bg:          #ecfdf5;

  --am-radius:         14px;
  --am-radius-sm:      10px;
  --am-shadow:         0 10px 30px -12px rgba(13,60,52,.22);
  --am-shadow-card:    0 24px 60px -22px rgba(13,60,52,.40);

  --am-ease:           cubic-bezier(.4,0,.2,1);
  --am-t:              .2s var(--am-ease);

  --am-font-head:      'Ubuntu', system-ui, -apple-system, sans-serif;
  --am-font-body:      'Raleway', system-ui, -apple-system, sans-serif;

  /* ---- overlay ---- */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

body.dark-mode .authmodal {
  --am-surface:        #121e1c;
  --am-surface-2:      #182825;
  --am-fg:             #e9f2f0;
  --am-muted:          #9db4af;
  --am-border:         #243733;
  --am-primary:        #2f9e7b;
  --am-primary-strong: #277f64;
  --am-on-primary:     #ffffff;
  --am-accent:         #5fa6c2;
  --am-ring:           rgba(56,189,248,.38);
  --am-danger:         #f87171;
  --am-danger-bg:      #2a1414;
  --am-ok:             #2f9e7b;
  --am-ok-bg:          #11261f;
  --am-shadow:         0 10px 30px -12px rgba(0,0,0,.55);
  --am-shadow-card:    0 24px 60px -22px rgba(0,0,0,.7);
}

.authmodal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* блокування скролу сторінки під модалкою */
body.authmodal-lock { overflow: hidden; }

.authmodal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7,20,18,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: am-fade .2s var(--am-ease) both;
}
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }

.authmodal__dialog {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(460px, 100%);
  max-width: 460px;
  background: var(--am-surface);
  color: var(--am-fg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-card);
  padding: clamp(20px, 5vw, 34px);
  font-family: var(--am-font-body);
  animation: am-card-in .28s var(--am-ease) both;
}
@keyframes am-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- close ---- */
.authmodal__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--am-muted);
  background: none; border: 0; cursor: pointer;
  border-radius: 9px;
  transition: color var(--am-t), background var(--am-t);
}
.authmodal__close:hover { color: var(--am-fg); background: var(--am-surface-2); }

/* ---- header ---- */
.authmodal__header { margin-bottom: 20px; }

.authmodal__tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--am-surface-2);
  border-radius: var(--am-radius-sm);
  margin-bottom: 18px;
}
.authmodal__tab {
  flex: 1;
  height: 38px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-family: var(--am-font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--am-muted);
  cursor: pointer;
  transition: background var(--am-t), color var(--am-t), box-shadow var(--am-t);
}
.authmodal__tab:hover { color: var(--am-fg); }
.authmodal__tab.is-active {
  background: var(--am-surface);
  color: var(--am-fg);
  box-shadow: 0 1px 4px rgba(13,60,52,.14);
}

.authmodal__title {
  font-family: var(--am-font-head);
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--am-fg);
}
.authmodal__subtitle {
  margin-top: 6px;
  color: var(--am-muted);
  font-size: 14px;
}
.authmodal__subtitle:empty { display: none; }

/* ---- panels (login / signup) ---- */
.authmodal__panel { display: none; }
.authmodal__panel.is-active { display: block; animation: am-fade .2s var(--am-ease) both; }

.authmodal__group { margin-bottom: 16px; }
.authmodal__row { display: flex; gap: 12px; }
.authmodal__row .authmodal__group { flex: 1; min-width: 0; }

.authmodal__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--am-fg);
  margin-bottom: 7px;
  letter-spacing: .1px;
}

.authmodal__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 16px;                /* ≥16px — без авто-зуму на iOS */
  font-family: var(--am-font-body);
  color: var(--am-fg);
  background: var(--am-surface);
  border: 1.5px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  transition: border-color var(--am-t), box-shadow var(--am-t), background var(--am-t);
}
.authmodal__input::placeholder { color: var(--am-muted); opacity: .7; }
.authmodal__input:focus {
  outline: none;
  border-color: var(--am-accent);
  box-shadow: 0 0 0 4px var(--am-ring);
}

/* ---- password show/hide ---- */
.authmodal__pw { position: relative; }
.authmodal__pw .authmodal__input { padding-right: 46px; }
.authmodal__pw-toggle {
  position: absolute; top: 0; right: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--am-muted);
  transition: color var(--am-t);
}
.authmodal__pw-toggle:hover { color: var(--am-accent); }
.authmodal__pw-toggle svg { width: 20px; height: 20px; }
.authmodal__pw-toggle .icon-eye-off { display: none; }
.authmodal__pw-toggle.is-shown .icon-eye     { display: none; }
.authmodal__pw-toggle.is-shown .icon-eye-off { display: inline; }

/* ---- actions / buttons ---- */
.authmodal__actions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.authmodal__btn {
  width: 100%;
  height: 48px;
  font-family: var(--am-font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  border: 0;
  border-radius: var(--am-radius-sm);
  cursor: pointer;
  transition: background var(--am-t), border-color var(--am-t), color var(--am-t), transform .06s var(--am-ease);
}
.authmodal__btn:active { transform: translateY(1px); }
.authmodal__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--am-ring); }

.authmodal__btn--primary {
  color: var(--am-on-primary);
  background: var(--am-primary);
}
.authmodal__btn--primary:hover { background: var(--am-primary-strong); }

.authmodal__btn--ghost {
  background: none;
  color: var(--am-accent);
  border: 1.5px solid var(--am-border);
  font-weight: 600;
}
.authmodal__btn--ghost:hover { border-color: var(--am-accent); background: var(--am-surface-2); }

.authmodal__panel.is-loading .authmodal__btn,
.authmodal__btn:disabled { opacity: .6; cursor: default; transform: none; }
.authmodal__panel.is-loading { pointer-events: none; }
.authmodal__panel.is-loading .authmodal__pw-toggle,
.authmodal__panel.is-loading [data-authmodal-switch] { pointer-events: auto; }

/* ---- message (error / ok) ---- */
.authmodal__msg {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--am-radius-sm);
}
.authmodal__msg:empty { display: none; }
.authmodal__msg.is-err {
  padding: 11px 14px;
  color: var(--am-danger);
  background: var(--am-danger-bg);
  border: 1px solid color-mix(in srgb, var(--am-danger) 35%, transparent);
}
.authmodal__msg.is-ok {
  padding: 11px 14px;
  color: var(--am-ok);
  background: var(--am-ok-bg);
  border: 1px solid color-mix(in srgb, var(--am-ok) 35%, transparent);
}

/* ---- custom-select (study dropdowns у формі реєстрації) ---- */
.authmodal .custom-select { position: relative; user-select: none; }
.authmodal .custom-select-btn {
  height: 46px;
  padding: 0 40px 0 14px;
  display: flex; align-items: center;
  font-size: 15px;
  color: var(--am-fg);
  background: var(--am-surface);
  border: 1.5px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  cursor: pointer;
  transition: border-color var(--am-t), box-shadow var(--am-t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.authmodal .custom-select-btn::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--am-muted); border-bottom: 2px solid var(--am-muted);
  transform: rotate(45deg); transition: transform var(--am-t);
}
.authmodal .custom-select.open .custom-select-btn { border-color: var(--am-accent); box-shadow: 0 0 0 4px var(--am-ring); }
.authmodal .custom-select.open .custom-select-btn::after { transform: rotate(-135deg); margin-top: -2px; }
.authmodal .custom-select-options {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  box-shadow: var(--am-shadow);
  max-height: 240px; overflow-y: auto;
  z-index: 50;
  display: none;
}
.authmodal .custom-select.open .custom-select-options { display: block; animation: am-card-in .16s var(--am-ease) both; }
.authmodal .custom-select-option { padding: 11px 14px; font-size: 14.5px; color: var(--am-fg); cursor: pointer; transition: background var(--am-t), color var(--am-t); }
.authmodal .custom-select-option:hover { background: var(--am-surface-2); color: var(--am-accent); }

/* ---- responsive ---- */
@media (max-width: 420px) {
  .authmodal.is-open { padding: 12px 8px; }
  .authmodal__dialog { padding: 20px 16px; border-radius: 12px; }
  .authmodal__row { flex-direction: column; gap: 0; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .authmodal__backdrop,
  .authmodal__dialog,
  .authmodal__panel.is-active,
  .authmodal .custom-select.open .custom-select-options { animation: none; }
  .authmodal * { transition-duration: .01ms !important; }
}