@charset "UTF-8";
/* ==========================================================
   form.css — стили форм (поля, кнопки, textarea)
   Кодировка: UTF-8 без BOM
   Подключение в top.php: <link rel="stylesheet" href="/css/form.css">
   ========================================================== */


/* ==========================================================
   ПЕРЕМЕННЫЕ — все цвета и размеры в одном месте.
   Поменял здесь — поменялось везде.
   ========================================================== */
:root {
    --text: #1f2937;                            /* основной цвет текста */
    --placeholder: #9ca3af;                     /* цвет подсказки в поле */
    --border: #e5e7eb;                          /* светлая рамка поля */
    --border-hover: #d1d5db;                    /* рамка при наведении мыши */
    --border-focus: #6366f1;                    /* рамка при клике (индиго) */
    --inset: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* мягкая внутренняя тень */
    --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.18); /* свечение при фокусе */

    --pink: #ec4899;                            /* розовая кнопка (обычная) */
    --pink-hover: #db2777;                      /* розовая кнопка при наведении */
    --pink-active: #be185d;                     /* розовая кнопка при нажатии */

    --yellow: #facc15;                          /* жёлтая кнопка (обычная) */
    --yellow-hover: #eab308;                    /* жёлтая кнопка при наведении */

    --radius: 10px;                             /* скругление углов */
    --speed: 0.2s ease;                         /* скорость анимаций */
}


/* ---------- ТЕКСТОВОЕ ПОЛЕ (input type="text") ---------- */
input[type=text] {
    box-sizing: border-box;                     /* padding не расширяет ширину */
    height: 40px;                               /* высота поля (удобно для пальца) */
    padding: 0 12px;                            /* отступ текста от краёв */
    color: var(--text);                         /* цвет вводимого текста */
    font-size: 15px;                            /* размер шрифта */
    font-family: inherit;                       /* шрифт как на сайте */
    background: #ffffff;                        /* белый фон поля */
    border: 1px solid var(--border);            /* тонкая светлая рамка */
    border-radius: var(--radius);               /* современное скругление */
    box-shadow: var(--inset);                   /* лёгкая тень внутри */
    transition: border-color var(--speed),      /* плавная смена рамки */
                box-shadow var(--speed);        /* плавная смена тени */
}

/* Поле при наведении мыши */
input[type=text]:hover {
    border-color: var(--border-hover);          /* рамка чуть темнее */
}

/* Поле при клике (когда в нём курсор) */
input[type=text]:focus {
    outline: none;                              /* убираем стандартную синюю обводку */
    border-color: var(--border-focus);          /* индиговая рамка */
    box-shadow: var(--focus-ring);              /* мягкое свечение вокруг */
}


/* ---------- ПОЛЕ ПАРОЛЯ (input type="password") ---------- */
input[type=password] {
    box-sizing: border-box;                     /* padding не расширяет ширину */
    height: 40px;                               /* высота поля */
    padding: 0 12px;                            /* отступ текста от краёв */
    color: var(--text);                         /* цвет вводимого текста */
    font-size: 15px;                            /* размер шрифта */
    font-family: inherit;                       /* шрифт как на сайте */
    background: #ffffff;                        /* белый фон */
    border: 1px solid var(--border);            /* тонкая светлая рамка */
    border-radius: var(--radius);               /* скругление углов */
    box-shadow: var(--inset);                   /* лёгкая внутренняя тень */
    transition: border-color var(--speed),      /* плавная смена рамки */
                box-shadow var(--speed);        /* плавная смена тени */
}

/* Поле пароля при наведении мыши */
input[type=password]:hover {
    border-color: var(--border-hover);          /* рамка чуть темнее */
}

/* Поле пароля при клике (когда в нём курсор) */
input[type=password]:focus {
    outline: none;                              /* убираем стандартную обводку */
    border-color: var(--border-focus);          /* индиговая рамка */
    box-shadow: var(--focus-ring);              /* мягкое свечение */
}


/* ---------- КНОПКА (input type="submit") — розовая ---------- */
input[type=submit] {
    display: inline-flex;                       /* чтобы удобно центрировать текст */
    align-items: center;                        /* центрирование по вертикали */
    justify-content: center;                    /* центрирование по горизонтали */
    box-sizing: border-box;                     /* padding не расширяет кнопку */
    min-height: 42px;                           /* высота кнопки */
    padding: 10px 28px;                         /* отступы внутри кнопки */
    color: #ffffff;                             /* белый цвет текста */
    font-size: 15px;                            /* размер шрифта */
    font-family: inherit;                       /* шрифт как на сайте */
    font-weight: 600;                           /* полужирный текст */
    letter-spacing: 0.2px;                      /* лёгкая разрядка букв */
    text-align: center;                         /* текст по центру */
    background: var(--pink);                    /* розовый фон */
    border: 0;                                  /* без рамки */
    border-radius: var(--radius);               /* скругление углов */
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.28); /* мягкая цветная тень */
    cursor: pointer;                            /* курсор "рука" при наведении */
    transition: background-color var(--speed),  /* плавная смена фона */
                box-shadow var(--speed),        /* плавная смена тени */
                transform var(--speed);         /* плавный подъём */
    -webkit-appearance: none;                   /* убираем нативные стили Safari */
    appearance: none;                           /* и остальных браузеров */
}

/* Кнопка при наведении мыши */
input[type=submit]:hover {
    background: var(--pink-hover);              /* фон темнее */
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.38); /* тень сильнее */
    transform: translateY(-1px);                /* приподнимается на 1px */
}

/* Кнопка при нажатии */
input[type=submit]:active {
    background: var(--pink-active);             /* фон ещё темнее */
    transform: translateY(0);                   /* возвращается на место */
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.28); /* тень как в обычном */
}

/* Кнопка при фокусе с клавиатуры (Tab) */
input[type=submit]:focus-visible {
    outline: none;                              /* без стандартной обводки */
    box-shadow: var(--focus-ring);              /* индиговое свечение */
}

/* Отключённая кнопка */
input[type=submit]:disabled {
    opacity: 0.55;                              /* полупрозрачная */
    cursor: not-allowed;                        /* курсор "запрещено" */
    transform: none;                            /* без подъёма */
    box-shadow: none;                           /* без тени */
}


/* ---------- КНОПКА (button type="submit") — жёлтая ---------- */
button[type=submit] {
    display: inline-flex;                       /* центрируем текст */
    align-items: center;                        /* по вертикали */
    justify-content: center;                    /* по горизонтали */
    box-sizing: border-box;                     /* padding не расширяет кнопку */
    min-height: 42px;                           /* высота кнопки */
    padding: 10px 28px;                         /* отступы внутри */
    color: #1f2937;                             /* тёмный цвет текста */
    font-size: 15px;                            /* размер шрифта */
    font-family: inherit;                       /* шрифт как на сайте */
    font-weight: 600;                           /* полужирный */
    letter-spacing: 0.3px;                      /* разрядка букв */
    text-transform: uppercase;                  /* ВСЕ БУКВЫ ЗАГЛАВНЫЕ */
    text-align: center;                         /* текст по центру */
    background: var(--yellow);                  /* жёлтый фон */
    border: 0;                                  /* без рамки */
    border-radius: var(--radius);               /* скругление углов */
    box-shadow: 0 2px 8px rgba(250, 204, 21, 0.35); /* мягкая жёлтая тень */
    cursor: pointer;                            /* курсор "рука" */
    transition: background-color var(--speed),  /* плавная смена фона */
                box-shadow var(--speed),        /* плавная смена тени */
                transform var(--speed);         /* плавный подъём */
    -webkit-appearance: none;                   /* без нативных стилей Safari */
    appearance: none;                           /* без нативных стилей других */
}

/* Кнопка при наведении мыши */
button[type=submit]:hover {
    background: var(--yellow-hover);            /* фон темнее */
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45); /* тень сильнее */
    transform: translateY(-1px);                /* лёгкий подъём */
}

/* Кнопка при нажатии */
button[type=submit]:active {
    transform: translateY(0);                   /* возвращается на место */
}

/* Кнопка при фокусе с клавиатуры (Tab) */
button[type=submit]:focus-visible {
    outline: none;                              /* без стандартной обводки */
    box-shadow: var(--focus-ring);              /* индиговое свечение */
}

/* Отключённая кнопка */
button[type=submit]:disabled {
    opacity: 0.55;                              /* полупрозрачная */
    cursor: not-allowed;                        /* курсор "запрещено" */
    transform: none;                            /* без подъёма */
    box-shadow: none;                           /* без тени */
}


/* ---------- МНОГОСТРОЧНОЕ ПОЛЕ (textarea) ---------- */
textarea {
    box-sizing: border-box;                     /* padding не расширяет поле */
    width: 100%;                                /* на всю ширину контейнера */
    min-height: 100px;                          /* минимальная высота */
    padding: 12px 14px;                         /* внутренние отступы */
    color: var(--text);                         /* цвет текста */
    font-family: inherit;                       /* шрифт как на сайте */
    font-size: 15px;                            /* размер шрифта */
    line-height: 1.5;                           /* межстрочный интервал */
    background: #ffffff;                        /* белый фон */
    border: 1px solid var(--border);            /* светлая рамка */
    border-radius: var(--radius);               /* скругление углов */
    box-shadow: var(--inset);                   /* лёгкая тень внутри */
    resize: vertical;                           /* тянуть только вниз */
    transition: border-color var(--speed),      /* плавная смена рамки */
                box-shadow var(--speed);        /* плавная смена тени */
}

/* Textarea при наведении мыши */
textarea:hover {
    border-color: var(--border-hover);          /* рамка чуть темнее */
}

/* Textarea при клике (когда в нём курсор) */
textarea:focus {
    outline: none;                              /* убираем стандартную обводку */
    border-color: var(--border-focus);          /* индиговая рамка */
    box-shadow: var(--focus-ring);              /* мягкое свечение вокруг */
}

/* Цвет подсказки внутри полей */
input::placeholder,
textarea::placeholder {
    color: var(--placeholder);                  /* серый ненавязчивый цвет */
    opacity: 1;                                 /* Firefox иначе делает бледнее */
}


/* ==========================================================
   МОБИЛЬНАЯ ВЕРСИЯ — экраны до 560px.
   Кнопки растягиваются на всю ширину, поля чуть выше.
   ========================================================== */
@media (max-width: 560px) {
    input[type=submit],
    button[type=submit] {
        width: 100%;                            /* кнопка на всю ширину */
        padding: 12px 20px;                     /* чуть больше по высоте */
    }

    input[type=text],
    input[type=password] {
        height: 46px;                           /* удобнее попадать пальцем */
    }
}