/* Extracted from index.html <style> block (previously inline) */
/* --- UX/UI оновлення форм --- */

      /* 1. Контейнер */
      .simple-form {
        padding: 18px 18px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 640px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
      }

      /* Базові правила модалки: скролимо контент, а не всю панель */
      body.modal-open { overflow: hidden; touch-action: none; }

      .modal__panel {
        width: min(720px, calc(100vw - 24px));
        max-height: calc((var(--vh, 1vh) * 100) - 24px);
        display: flex;
        flex-direction: column;
      }

      .modal__header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
      }

      .modal__panel > .simple-form {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* 2 колонки -> 1 колонка на телефонах (бо в HTML це інлайновий grid) */
      @media (max-width: 600px){
        #regModal .simple-form > div[style*="grid-template-columns"],
        #teacherModal .simple-form > div[style*="grid-template-columns"] {
          grid-template-columns: 1fr !important;
          gap: 12px !important;
        }

        /* Потрібний вигляд: ~90vh + закруглення */
        .modal { padding: 8px !important; }
        .modal__panel {
          width: calc(100vw - 16px) !important;
          max-height: calc(var(--vh, 1vh) * 90) !important;
          border-radius: 22px !important;
        }

        .simple-form {
          padding: 16px 14px;
          gap: 18px;
          max-width: 100%;
        }

        /* Компактніші поля на мобілці */
        .form-label { font-size: 13px; }
        .form-control {
          height: 48px;
          border-radius: 14px;
          padding: 0 14px;
        }
        select.form-control {
          background-position: right 16px center;
          background-size: 16px;
          padding-right: 42px;
        }

        /* Телефонний інпут: під радіус полів */
        .iti__flag-container { border-radius: 14px 0 0 14px !important; }
        .iti__selected-flag { border-radius: 14px 0 0 14px !important; }
      }

      /* 2. Група (Лейбл + Поле) */
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        text-align: left;
      }

      /* 3. Лейбли */
      .form-label {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-left: 4px; /* Вирівнювання з текстом в інпуті */
        display: flex;
        align-items: center;
      }
      .form-label span.req {
        color: #E11D48; /* Більш приємний червоний */
        margin-left: 4px;
        font-size: 16px;
        line-height: 1;
      }

      /* 4. Інпути (Базовий стиль) */
      .form-control {
        appearance: none;
        width: 100%;
        height: 56px; /* UX стандарт для тач-скрінів */
        padding: 0 16px;
        font-size: 16px; /* Щоб iOS не зумив сторінку */
        color: #111827;
        background: #fff;
        border: 1px solid #D1D5DB;
        border-radius: 16px; /* Більш заокруглені кути */
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-sizing: border-box;
        line-height: normal;
      }

      .form-control::placeholder {
        color: #9CA3AF;
        opacity: 1;
      }

      /* Ховер та Фокус */
      .form-control:hover {
        border-color: #9CA3AF;
      }

      .form-control:focus {
        border-color: #2563eb;
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); /* Гарне світіння */
        outline: none;
      }

      /* Стан помилки */
      .form-control.is-error {
        border-color: #EF4444;
        background-color: #FEF2F2;
        color: #B91C1C;
      }
      .form-control.is-error:focus {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
      }

      /* 5. Custom Select */
      select.form-control {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 18px;
        padding-right: 48px;
        cursor: pointer;
      }

/* 6. Phone Input Fix (Intl Tel Input) - FINAL FIXED VERSION */
      .iti { 
        width: 100%; 
        display: block; 
      }
      
      /* Робимо контейнер прапорця прозорим і вписуємо його в інпут */
      .iti__flag-container {
        border: none !important;
        background: transparent !important;
        padding: 1px !important; /* Мінімальний відступ */
        border-radius: 16px 0 0 16px !important;
        z-index: 2; /* Щоб був над інпутом */
      }
      
      .iti__selected-flag {
        background: transparent !important;
        border-radius: 16px 0 0 16px !important;
        padding: 0 0 0 16px !important; /* Відступ зліва для самого прапора */
      }

      /* Стиль для коду країни (+380), щоб він виглядав як частина тексту */
      .iti__selected-dial-code {
        color: #111827;
        font-weight: 500;
        font-size: 16px;
        margin-left: 6px; /* Відступ між прапором і кодом */
      }
      
      /* Стрілочка біля прапора */
      .iti__arrow {
        border-top-color: #6B7280 !important;
      }
      .iti__arrow--up {
        border-bottom-color: #6B7280 !important;
      }

      /* ГОЛОВНЕ ВИПРАВЛЕННЯ: Відсуваємо текст, щоб він не налізав на прапор */
      /* Використовуємо !important, бо бібліотека ставить свій стиль inline, який часто помиляється в модалках */
      input.iti__tel-input {
        padding-left: 106px !important; /* Фіксований відступ: Прапор + Код + Пробіл */
      }
      
      /* Коли меню країн відкрито - воно має бути поверх всього */
      .iti__country-list {
        border-radius: 12px;
        border: 1px solid #E5E7EB;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        z-index: 100 !important;
        overflow-x: hidden;
      }

      /* 7. Інфо-блок */
      .info-box {
        background: #EFF6FF; /* Дуже світлий синій */
        border: 1px solid #BFDBFE;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .info-box--teacher {
        background: #FFFBEB;
        border-color: #FDE68A;
      }

      .info-icon {
        background: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        flex-shrink: 0;
      }
      
      .info-content h4 {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 700;
        color: #1e3a8a;
      }
      .info-box--teacher .info-content h4 { color: #92400E; }
      
      .info-content p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #4B5563;
      }

      /* 8. Кнопка */
      .actions .btn {
        height: 56px;
        font-size: 18px;
        font-weight: 700;
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2), 0 2px 4px -1px rgba(37, 99, 235, 0.1);
        transition: transform 0.1s ease, box-shadow 0.2s ease;
      }
      .actions .btn:active {
        transform: translateY(2px);
        box-shadow: none;
      }

/* Utilities moved from inline styles in index.html */
.u-flex-col-center{display:flex; flex-direction:column; align-items:center;}
.u-panel-gray{width: 100%; display:flex; justify-content:center; align-items:center; background-color: var(--gray-200); border-radius: clamp(20px, 2.2vw, 32px); padding: clamp(16px, 2.6vw, 32px); box-sizing: border-box;}
.u-grid-2-20{display:grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.u-pos-rel{position: relative;}
.u-text-left{text-align: left !important;}
.u-mb-8{margin-bottom: 8px;}
.u-mb-16{margin-bottom: 16px;}
.u-mb-32{margin-bottom: 32px;}
.u-mb-48{margin-bottom: 48px;}
.u-mt-12{margin-top: 12px;}
.u-w-10{width: 10%;}
.u-w-30{width: 30%;}
.u-w-90{width: 90%;}
.u-w-80{width: 80%; margin: 0;}
.u-w-100{width: 100%;}
.u-w-60i{width: 60% !important;}
.u-w-60-mt16{width: 60%; margin-top: 16px;}
.u-color-accent2{color: var(--brand-accent-2);}
.u-color-surfaceink{color: var(--surface-ink);}
.u-color-2f333f{color: #2f333f;}
.bg-00b7ff{background-color:#00B7FF;}
.bg-01b58b{background-color:#01B58B;}
.bg-0a84ff{background-color:#0a84ff;}
.bg-1d19b4{background-color:#1D19B4;}
.bg-8043f7{background-color:#8043F7;}
.bg-f06b64{background-color:#F06B64;}
.bg-f18700{background-color:#F18700;}
.bg-ff6496{background-color:#FF6496;}
.bg-ffb200{background-color:#FFB200;}
.btn-bg-primary-white{background-color:#1D19B4; color:#ffffff;}
.btn-outline-warm{background-color:#ffffff; color:#F18700; border:1px solid rgba(255,255,255,.75);}