/* auth-modal.css — общая модалка авторизации/регистрации для всех 5 калькуляторов.
   Извлечено из page-natal.php (строки 873-1019). Используется парой с assets/js/auth-modal.js. */
    /* ===== Inline-модалка авторизации (igl) — стиль 1:1 с AuthModal кабинета ===== */
    .igl-modal {
      position: fixed; inset: 0; z-index: 99999;
      display: flex; align-items: center; justify-content: center; padding: 16px;
      background: rgba(20, 22, 40, .5); backdrop-filter: blur(3px);
      animation: iglIn .2s ease;
    }
    @keyframes iglIn  { from { opacity: 0 } to { opacity: 1 } }
    @keyframes iglOut { from { opacity: 1 } to { opacity: 0 } }
    .igl-modal.is-closing { animation: iglOut .2s ease forwards; }
    .igl-modal.is-closing .igl-card { animation: iglCardOut .2s ease forwards; }
    @keyframes iglCardOut { from { transform: scale(1); opacity: 1 } to { transform: scale(.985); opacity: 0 } }
    .igl-card {
      max-width: 480px; width: 100%; background: #fff; border-radius: 22px;
      padding: 36px 40px 28px; box-shadow: 0 30px 80px -20px rgba(28,25,23,.35);
      position: relative;
    }
    /* Handle (drag-полоска сверху) — только в мобильной версии */
    .igl-handle-zone { display: none; }
    .igl-handle { width: 4rem; height: 4px; background: rgba(20,22,40,.18); border-radius: 2px; }

    /* ===== Мобильная версия: bottom-sheet, как .lb-sheet эталон ===== */
    @media (max-width: 820px) {
      .igl-modal {
        align-items: flex-end; justify-content: center; padding: 0;
        animation: iglOverlayIn .35s ease;
      }
      @keyframes iglOverlayIn  { from { background: rgba(20,22,40,0) } to { background: rgba(20,22,40,.5) } }
      @keyframes iglOverlayOut { from { background: rgba(20,22,40,.5) } to { background: rgba(20,22,40,0) } }
      .igl-modal.is-closing { animation: iglOverlayOut .35s ease forwards; }
      .igl-card {
        max-width: none; width: 100%; max-height: calc(100dvh - 2rem);
        border-radius: 2.4rem 2.4rem 0 0; padding: 0 2rem 2rem;
        box-shadow: 0 -8px 30px rgba(0,0,0,.12);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        animation: iglSlideUp .35s cubic-bezier(.2,.7,.3,1);
      }
      @keyframes iglSlideUp   { from { transform: translateY(100%) } to { transform: translateY(0) } }
      @keyframes iglSlideDown { from { transform: translateY(0) }   to { transform: translateY(100%) } }
      .igl-modal.is-closing .igl-card { animation: iglSlideDown .35s cubic-bezier(.2,.7,.3,1) forwards; opacity: 1; }
      .igl-handle-zone {
        display: flex; justify-content: center; align-items: center;
        padding: 1rem 0 .6rem; position: sticky; top: 0;
        background: #fff; z-index: 2; margin: 0 -2rem;
      }
      .igl-close { top: 18px; right: 12px; }
    }
    .igl-close {
      position: absolute; top: 14px; right: 16px; background: none; border: 0;
      font-size: 28px; line-height: 1; color: #a8a29e; cursor: pointer; padding: 4px 8px;
      transition: color .12s;
    }
    .igl-close:hover { color: #1c1917; }
    .igl-title {
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      font-size: 26px; font-weight: 700; color: #1c1917; margin: 4px 0 10px;
      letter-spacing: -.012em; line-height: 1.2;
    }
    .igl-text {
      font-size: 15.5px; color: #57534e; line-height: 1.55; margin: 0 0 26px;
    }
    @media (max-width: 820px) { .igl-text { font-size: 15px; } }
    .igl-form > * + * { margin-top: 16px; }
    .igl-row { display: block; }
    .igl-label {
      display: block; font-size: 14px; font-weight: 500; color: #44403c; margin-bottom: 6px;
    }
    .igl-input {
      width: 100%; box-sizing: border-box; padding: 16px 18px;
      /* font-size 16px — критично для iOS Safari: при меньшем значении при focus
         автоматически зумит viewport, что бесит на тапе по полю. */
      border: 1px solid #e7e5e4; border-radius: 12px; font-size: 16px;
      background: #faf6ee; color: #1c1917; outline: 0;
      transition: border-color .15s, box-shadow .15s; font-family: inherit;
    }
    .igl-input:focus {
      border-color: #d6d3d1; box-shadow: 0 0 0 3px rgba(28,25,23,.10); background: #fff;
    }
    .igl-input::placeholder { color: #a8a29e; }
    /* Поле пароля с глазиком справа */
    .igl-pwd-wrap { position: relative; }
    .igl-pwd-input, .igl-pwd-input-r { padding-right: 48px !important; }
    .igl-pwd-toggle, .igl-pwd-toggle-r {
      position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
      width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: 0; color: #a8a29e; cursor: pointer; border-radius: 8px;
      transition: color .12s, background .12s;
    }
    .igl-pwd-toggle:hover, .igl-pwd-toggle-r:hover { color: #44403c; background: rgba(28,25,23,.05); }
    .igl-pwd-toggle:focus-visible, .igl-pwd-toggle-r:focus-visible { outline: 2px solid #b03a48; outline-offset: 2px; }
    /* Кастомный чекбокс — точно как .ig-checkbox в кабинете */
    .igl-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 14px; color: #57534e; }
    .igl-check-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
    .igl-check-box {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #d6d3d1; background: #fff;
      transition: background .15s, border-color .15s; flex-shrink: 0;
    }
    .igl-check-box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
    .igl-check-input:checked + .igl-check-box { background: #b03a48; border-color: #b03a48; }
    .igl-check-input:checked + .igl-check-box svg { opacity: 1; transform: scale(1); }
    /* Группа согласий регистрации — три чекбокса в столбик, выровнены по верху */
    .igl-consents { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
    .igl-check.igl-check--sm { font-size: 13px; align-items: flex-start; gap: 8px; color: #44403c; }
    .igl-check.igl-check--sm .igl-check-box { margin-top: 1px; }
    .igl-err {
      font-size: 14px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
      border-radius: 12px; padding: 10px 14px;
    }
    .igl-ok {
      font-size: 14px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0;
      border-radius: 12px; padding: 12px 14px; line-height: 1.45;
    }
    /* Главная кнопка — оранжевая как логотип Irina Grit ($orange #f0865f) */
    .igl-btn-primary {
      width: 100%; padding: 14px 20px; background: #f0865f; color: #fff; border: 0;
      border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
      transition: background .15s, transform .12s; box-shadow: 0 6px 18px -6px rgba(240,134,95,.55);
      font-family: inherit;
    }
    .igl-btn-primary:hover:not(:disabled) { background: #e4724a; }
    .igl-btn-primary:active:not(:disabled) { transform: translateY(1px); }
    .igl-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
    .igl-divider {
      position: relative; display: flex; justify-content: center; padding: 4px 0;
    }
    .igl-divider::before {
      content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e7e5e4;
    }
    .igl-divider span {
      position: relative; background: #fff; padding: 0 14px;
      font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #a8a29e;
    }
    .igl-oauth { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .igl-oauth-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 6px; border: 1px solid #e7e5e4; border-radius: 12px;
      text-decoration: none; color: #44403c; font-size: 12px; font-weight: 600;
      transition: border-color .15s; background: #fff;
    }
    /* Hover: только border меняется на доминирующий цвет сервиса; фон/текст без изменений */
    .igl-oauth-btn[data-provider="yandex"]:hover { border-color: #FC3F1D; }
    .igl-oauth-btn[data-provider="mailru"]:hover { border-color: #005FF9; }
    .igl-oauth-btn[data-provider="google"]:hover { border-color: #4285F4; }
    .igl-foot-line { text-align: center; font-size: 14px; color: #78716c; margin: 8px 0 0; }
    .igl-foot-line + .igl-foot-line { margin-top: 4px; }
    .igl-link { color: #b03a48; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
    .igl-link:hover { text-decoration: underline; }
    .igl-link:disabled { color: #a8a29e; cursor: not-allowed; text-decoration: none; }

    /* Step 2: ввод 5-значного кода подтверждения email */
    .igl-verify-sub { font-size: 14.5px; color: #57534e; line-height: 1.5; margin: 0 0 18px; }
    .igl-verify-email { color: #1c1917; }
    .igl-code-row {
      display: flex; gap: 10px; justify-content: space-between;
      width: 100%; margin: 4px 0 22px;
    }
    .igl-code-input {
      flex: 1 1 0; min-width: 0;
      height: 64px;
      text-align: center;
      font-size: 28px; font-weight: 700;
      color: #1c1917;
      border: 2px solid #c5482e;
      border-radius: 12px;
      background: #fff;
      box-sizing: border-box;
      outline: none;
      padding: 0;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .igl-code-input:hover { background: #fff8f5; }
    .igl-code-input:focus { border-color: #a33825; box-shadow: 0 0 0 4px rgba(197,72,46,.18); }
    .igl-code-input:disabled { opacity: .6; }
    @media (max-width: 480px) {
      .igl-code-row { gap: 8px; }
      .igl-code-input { height: 60px; font-size: 24px; }
    }
    .igl-form-verify .igl-btn-primary { margin-bottom: 8px; }
    .igl-verify-foot {
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      margin-top: 24px !important;
    }
    .igl-verify-foot .igl-link { font-size: 13px; }