@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

.container {
    font-family: 'PT Serif', serif;
    background-color: rgb(237, 237, 237);
}

.top a {
    color: rgb(64, 64, 64);
    text-decoration: none;
    font-size: 32px;
    font-family: 'PT Sans';
    width: 205px;
}

.top {
    display: flex;
    justify-content: space-between; /* разделяем на две группы */
    align-items: center;
    padding: 15px 0px;
    background: #ffffff;
    border-radius: 8px;
    border-bottom: 2px solid #000000;
    height: 100px;
    margin-bottom: 30px;

}

.logo {
    padding-left: 50px;
    max-height: 150px;
    max-width: 150px;
    transition: all 0.5s ease;
}

.logo:hover{
    transform: scale(1.1);
}


.info {
    display: flex;
    gap: 0px;
    padding-left:50px;
    justify-content: space-between; /* равные расстояния */
}

.top .register{
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
}

.search-form {
    display: flex;
    justify-content: center;           /* Ставим в ряд */
    gap: 0;                  /* Убираем промежуток */
    width: 100%;             /* На всю ширину */
    max-width: 50px;        /* Или нужная ширина */
    margin: 0 auto;          /* Центрирование */
}

.search-input {
    flex: 1;                 /* Растягивается на всю доступную ширину */
    padding: 10px 15px;
    border: 2px solid #2d2929;
    border-right: 2px solid #000000;      /* Убираем правую границу */
    border-radius: 30px 0 0 30px;  /* Скругление только слева */
    font-size: 16px;
    outline: none;
}

.search-input:focus {
    border-color: #000000;
}

.search-btn {
    padding: 10px 20px;
    background: #ffffff;
    color: #454e55;
    border: 2px solid #1c1e20;
    border-left: none;       /* Убираем левую границу */
    border-radius: 0 30px 30px 0;  /* Скругление только справа */
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;     /* Текст не переносится */
    font-family: 'PT Serif', serif;
    font-size: 16px;
}

.search-btn:hover {
    background: #ffffff;
    border-color: #464242;
    color:rgb(0, 0, 0);
}

.search-form {
    display: flex;
    justify-content: center;           /* Ставим в ряд */
    gap: 0;                  /* Убираем промежуток */
    width: 100%;             /* На всю ширину */
    max-width: 50px;        /* Или нужная ширина */
    margin: 0 auto;          /* Центрирование */
}

.search-input {
    flex: 1;                 /* Растягивается на всю доступную ширину */
    padding: 10px 15px;
    border: 2px solid #2d2929;
    border-right: 2px solid #000000;      /* Убираем правую границу */
    border-radius: 30px 0 0 30px;  /* Скругление только слева */
    font-size: 16px;
    outline: none;
}

.search-input:focus {
    border-color: #000000;
}

.search-btn {
    padding: 10px 20px;
    background: #ffffff;
    color: #454e55;
    border: 2px solid #1c1e20;
    border-left: none;       /* Убираем левую границу */
    border-radius: 0 30px 30px 0;  /* Скругление только справа */
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;     /* Текст не переносится */
}

.search-btn:hover {
    background: #ffffff;
    border-color: #464242;
    color:rgb(0, 0, 0);
}

.formContainer {
    height:100vh;
    margin-left: 50px;
    color: rgb(64, 64, 64);
}

.inputForms form{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-right: 30px;
}

.inputForms input {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    border-radius: 30px;
    border: 2px solid #000000;
    padding: 5px;
}

.inputForms button {
    font-family: 'PT Serif', serif;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    padding: 14px 42px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    letter-spacing: 1px;
}

.inputForms button:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 5px 15px rgba(57, 57, 57, 0.2);
    transform: scale(1.05);
}

.btn-back {
    display: flex;
    background-color: #000000;
    color:#ffffff;
    border-radius: 30px;
    padding:5px;
    cursor: pointer;
    font-family: 'PT Serif', serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.5s ease;
}

.btn-back:hover {
    background-color: #555;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

.inputForms a {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    color: rgb(64, 64, 64);
}
/* =====================================================
   АДАПТИВНЫЙ ДИЗАЙН — register / login / verify
   ===================================================== */

/* --- Планшет (до 1024px) --- */
@media (max-width: 1024px) {
    .top {
        padding: 12px 24px;
        height: auto;
        flex-wrap: wrap;
        gap: 12px;
    }
    .logo { padding-left: 0; }
    .info { padding-left: 0; gap: 20px; }
    .top a { font-size: 22px; width: auto; }
    .top .register { padding-right: 0; font-size: 22px; }
    .search-form { max-width: 260px; }
    .formContainer { margin-left: 24px; }
}

/* --- Мобильный (до 768px) --- */
@media (max-width: 768px) {
    /* Шапка */
    .top {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        height: auto;
        gap: 10px;
        margin-bottom: 16px;
    }
    .logo { max-height: 56px; max-width: 90px; padding-left: 0; }
    .info { padding-left: 0; gap: 14px; flex-wrap: wrap; }
    .top a { font-size: 17px; width: auto; }
    .top .register { padding-right: 0; font-size: 18px; }
    .search-form { max-width: 100%; width: 100%; }

    /* Контейнер формы */
    .formContainer {
        margin-left: 0;
        padding: 16px;
        height: auto;
        min-height: calc(100vh - 160px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-back { align-self: flex-start; }

    /* Форма */
    .inputForms {
        width: 100%;
        max-width: 420px;
    }
    .inputForms form {
        margin-right: 0;
        margin-top: 16px;
        gap: 20px;
        width: 100%;
        align-items: stretch;
    }
    .inputForms input {
        width: 100%;
        box-sizing: border-box;
        font-size: 15px;
        padding: 10px 18px;
    }
    .inputForms button {
        width: 100%;
        font-size: 16px;
        padding: 14px 0;
        letter-spacing: 0.5px;
    }
    .inputForms p,
    .inputForms a { text-align: center; }

    /* Поля кода верификации */
    .code-inputs { gap: 6px; }
    .code-inputs input {
        width: 40px !important;
        height: 48px !important;
        font-size: 22px !important;
        border-radius: 8px !important;
    }

    /* Заголовки verify */
    .verify-title { font-size: 20px; }
    .verify-sub   { font-size: 14px; }
}

/* --- Маленький мобильный (до 480px) --- */
@media (max-width: 480px) {
    .formContainer { padding: 12px; }
    .code-inputs { gap: 4px; }
    .code-inputs input {
        width: 32px !important;
        height: 42px !important;
        font-size: 18px !important;
        border-radius: 6px !important;
    }
    .inputForms input { font-size: 14px; padding: 9px 14px; }
}