/* Основные стили для страницы логина */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.kc-login-class {
    width: 100%;
    max-width: 400px;
}

.kc-form-card-class {
    border-radius: 16px;
    overflow: hidden;
}

/* Заголовок */
.kc-form-header-class {
    text-align: center;
}

#kc-page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
}

#kc-content-wrapper {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

.kc-oauth-heading {
    font-size: 17px;
    font-weight: 400;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
}

.kc-form-social-account-list-class {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-form-social-account-list-button-class {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    background: white;
    color: #333;
    text-decoration: none;
    font-size: 17.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.kc-form-social-account-list-button-class:hover {
    border-color: #c1c7cd;
    background: #f8f9fa;
}


/* Иконки провайдеров */
.kc-common-logo-idp {
    display: none;
}

/* Вконтакте */
.kc-form-social-account-list-button-class[href*="vk"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%230077ff" d="M31.5 63.5C0 95 0 145.7 0 247V265C0 366.3 0 417 31.5 448.5C63 480 113.7 480 215 480H233C334.3 480 385 480 416.5 448.5C448 417 448 366.3 448 265V247C448 145.7 448 95 416.5 63.5C385 32 334.3 32 233 32H215C113.7 32 63 32 31.5 63.5zM75.6 168.3H126.7C128.4 253.8 166.1 290 196 297.4V168.3H244.2V242C273.7 238.8 304.6 205.2 315.1 168.3H363.3C359.3 187.4 351.5 205.6 340.2 221.6C328.9 237.6 314.5 251.1 297.7 261.2C316.4 270.5 332.9 283.6 346.1 299.8C359.4 315.9 369 334.6 374.5 354.7H321.4C316.6 337.3 306.6 321.6 292.9 309.8C279.1 297.9 262.2 290.4 244.2 288.1V354.7H238.4C136.3 354.7 78 284.7 75.6 168.3z"/></svg>') center/contain no-repeat;
}

/* Яндекс */
.kc-form-social-account-list-button-class[href*="yandex"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 0 24 24"><path fill="%23ef4444" d="m7.083 14.8-4.098 9.2h-2.986l4.5-9.834c-2.114-1.074-3.525-3.018-3.525-6.614-.005-5.034 3.185-7.551 6.979-7.551h3.858v24h-2.582v-9.2h-2.146zm2.147-12.62h-1.378c-2.08 0-4.097 1.378-4.097 5.372 0 3.858 1.847 5.1 4.097 5.1h1.378z"/></svg>') center/contain no-repeat;
    background-size: contain;
}

/* Google */
.kc-form-social-account-list-button-class[href*="google"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="%23FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="%234CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="%231976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>') center/contain no-repeat;
}

/* Apple */
.kc-form-social-account-list-button-class[href*="apple"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 22"><path fill="%23000" d="M17.3382 7.4998C17.2106 7.5988 14.9578 8.8682 14.9578 11.6908C14.9578 14.9556 17.8244 16.1106 17.9102 16.1392C17.897 16.2096 17.4548 17.721 16.3988 19.261C15.4572 20.6162 14.4738 21.9692 12.9778 21.9692C11.4818 21.9692 11.0968 21.1002 9.3698 21.1002C7.6868 21.1002 7.0884 21.9978 5.72 21.9978C4.3516 21.9978 3.3968 20.7438 2.299 19.2038C1.0274 17.3954 0 14.586 0 11.9196C0 7.6428 2.7808 5.3746 5.5176 5.3746C6.9718 5.3746 8.184 6.3294 9.097 6.3294C9.966 6.3294 11.3212 5.3174 12.9756 5.3174C13.6026 5.3174 15.8554 5.3746 17.3382 7.4998ZM12.1902 3.5068C12.8744 2.695 13.3584 1.5686 13.3584 0.4422C13.3584 0.286 13.3452 0.1276 13.3166 0C12.2034 0.0418 10.879 0.7414 10.0804 1.6676C9.4534 2.3804 8.8682 3.5068 8.8682 4.6486C8.8682 4.8202 8.8968 4.9918 8.91 5.0468C8.9804 5.06 9.0948 5.0754 9.2092 5.0754C10.208 5.0754 11.4642 4.4066 12.1902 3.5068Z"/></svg>') center/contain no-repeat;
}

/* Разделитель */
.email-separator {
  display: flex;
  align-items: center;
  margin: 40px 0 10px 0;
  color: #666;
  font-size: 17px;
  justify-content: center;
}

/* Форма email */
.kc-email-step {
    margin-top: 20px;
}

.email-step-text {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin-bottom: 24px;
}

.kc-form-group-class {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-input-class {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    font-size: 17.5px;
    background: white;
    transition: border-color 0.2s ease;
    text-align: center;
}

.kc-input-class:focus {
    outline: none;
    border: 1px solid #ff543d;
}

.kc-input-class::placeholder {
    color: #999;
}

/* Кнопка отправки */
.kc-button-class {
    width: 100%;
    padding: 14px 20px;
    background: #ff543d;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 17.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kc-button-class:hover {
    background: #ff543d99;
}


/* Адаптивность */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .kc-form-header-class,
    #kc-content {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .kc-form-header-class {
        padding-top: 30px;
    }
    
    #kc-content {
        padding-bottom: 30px;
    }
}


/* Стили для отключенных кнопок */
.kc-form-social-account-list-button-disabled-class {
    opacity: 0.6;
    pointer-events: none;
}

#input-error {
  font-size: 15px;
  color: red;
}

#kc-locale {
    display: none;
}

#show-password-btn {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid;
    transform: translate3d(-30px, 15px, 0);
}

#kc-content {
    color: #666666;
    font-size: 17px;
}

.subtitle  {
    display: none;
}

.instruction-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    color: #666666;
    font-size: 17px;
    margin-bottom: 15px;
}

.pf-m-warning {
    font-size: 17px;
}

label[for="otp"],
label[for="code"] {
    display: none;
}

#kc-content-wrapper > p:first-of-type {
    display: none;
}

#kc-attempted-username {
    font-size: 18px;
    font-weight: 400;
    color: #373737;
    text-align: center;
    line-height: 26px;
    display: block;
}

#kc-resend {
    background: transparent!important;
    color: #ff543d!important;
    width: unset!important;
    margin-top: 20px; 
}

#otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.otp-box {
    width: 45px;
    height: 55px;
    font-size: 1.5em;
    text-align: center;
    border: 2px solid var(--pf-global--BorderColor--100, #ccc);
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    background-color: var(--pf-global--BackgroundColor--100, #fff);
}

.otp-box:focus {
    border-color: var(--pf-global--active-color--300, #0066cc);
    box-shadow: 0 0 4px rgba(0, 102, 204, 0.4);
    background-color: #f0f8ff; /* подсветка активного поля */
}

.otp-box.error {
    border-color: #e74c3c;
    animation: shake 0.3s;
    background-color: #fdecea; /* красный фон при ошибке */
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* Прячем кнопку входа, но оставляем её для form.submit() */
/* #kc-login {
    display: none;
} */

.alert-error {
    font-size: 18px;
}

#kc-form-options {
    display: none;
}