/**
 * Стили для главной страницы входа AlonKi.Ru
 */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.indexFont {
    color: #4E312D;
    font-family: Arial;
    font-size: 11px;
}

.loginBox {
    border: 1px solid #717171;
    font-family: Tahoma;
    color: #4E312D;
    font-size: 11px;
    background-color: transparent;
    background-image: url('../images/emp.gif');
    cursor: pointer;
}

/* Базовые стили для персонажей */
.index-bg-left {
    background-position: left bottom;
}

.index-bg-right {
    background-position: right bottom;
}

/* Мобильная адаптация */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    .indexFont {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .loginBox {
        font-size: 16px !important; /* Предотвращает зум на iOS при фокусе */
        padding: 12px 10px !important;
        width: 90% !important;
        max-width: 300px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.9) !important;
        background-image: none !important;
        border: 2px solid #717171 !important;
    }
    
    .loginBox:focus {
        background-color: rgba(255, 255, 255, 0.95) !important;
        outline: none;
        border-color: #4E312D !important;
    }
    
    /* Адаптация формы входа */
    form[name="auth"] {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        margin-top: -8px !important;
    }
    
    form[name="auth"] table {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto;
    }
    
    form[name="auth"] table td {
        padding: 6px 5px !important;
        display: block;
        width: 100% !important;
    }
    
    form[name="auth"] table tr {
        display: block;
        width: 100%;
        margin-bottom: 3px !important;
    }
    
    form[name="auth"] table tr:first-child td {
        padding-bottom: 5px !important;
    }
    
    /* Адаптация логотипа */
    img[src*="logo2.png"] {
        max-width: 88% !important;
        height: auto !important;
        margin: 5px auto 0px auto !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Контейнер логотипа и контента */
    center[style*="z-index:3"] {
        text-align: center !important;
        padding: 10px;
        padding-top: 5px !important;
        padding-bottom: 80px !important;
        box-sizing: border-box;
    }
    
    /* Адаптация кнопки входа */
    img[src*="v.png"],
    img.login-button-img {
        max-width: 220px !important;
        width: 60% !important;
        min-width: 180px !important;
        height: auto !important;
        cursor: pointer;
        margin: 10px auto !important;
        display: block;
        image-rendering: auto;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -ms-interpolation-mode: bicubic;
    }
    
    /* Альтернативная HTML кнопка */
    .login-button-html {
        max-width: 220px !important;
        width: 60% !important;
        min-width: 180px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%) !important;
        border: 2px solid #8B0000 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        margin: 20px auto !important;
        display: block !important;
        text-align: center !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .login-button-html:hover {
        background: linear-gradient(135deg, #A00000 0%, #FF1744 100%) !important;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4) !important;
        transform: translateY(-2px) !important;
    }
    
    .login-button-html:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Декоративные фоновые изображения - реальные размеры: m.png = 307x576, d.png = 358x574 */
    .index-bg-left,
    .index-bg-right {
        opacity: 0.4 !important;
    }
    
    .index-bg-left {
        background-size: 307px 576px !important;
        background-position: left bottom !important;
    }
    
    .index-bg-right {
        background-size: 358px 574px !important;
        background-position: right bottom !important;
    }
    
    /* Навигационные ссылки */
    .index-links {
        font-size: 12px !important;
        padding: 8px 5px !important;
        line-height: 1.8 !important;
        text-align: center !important;
        display: block !important;
        white-space: normal !important;
        word-spacing: normal !important;
        margin-top: 5px !important;
    }
    
    .index-links-link {
        display: inline !important;
        padding: 4px 2px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1.8 !important;
    }
    
    /* Адаптация футера и форм */
    div[style*="margin-top:20px"][style*="position:relative"] {
        height: auto !important;
        min-height: 60px !important;
        padding: 15px 5px !important;
        position: relative !important;
        margin-top: 20px !important;
    }
    
    div[style*="position:relative"][style*="top:3%"] {
        margin-bottom: 0 !important;
    }
    
    div[style*="position:relative"][style*="top:0"] {
        padding: 5px !important;
        margin-top: -10px !important;
        margin-bottom: 20px !important;
    }
    
    div[style*="bottom:0"] {
        padding: 10px 5px !important;
        min-height: 50px !important;
    }
    
    div[style*="bottom:0"] table {
        width: 100% !important;
    }
    
    div[style*="bottom:0"] i {
        font-size: 10px !important;
        display: block !important;
        margin-top: 8px !important;
        line-height: 1.4;
    }
    
    div[style*="position:fixed"][style*="bottom:0"] {
        z-index: 4 !important;
    }
}

/* Адаптация для очень маленьких экранов */
@media screen and (max-width: 480px) {
    .indexFont {
        font-size: 13px !important;
    }
    
    .loginBox {
        font-size: 16px !important;
        padding: 12px 10px !important;
        width: 95% !important;
        max-width: 280px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        background-image: none !important;
    }
    
    form[name="auth"] table {
        max-width: 280px !important;
    }
    
    img[src*="logo2.png"] {
        max-width: 85% !important;
        margin: 3px auto 5px auto !important;
    }
    
    img[src*="v.png"] {
        max-width: 200px !important;
        min-width: 160px !important;
        width: 55% !important;
        margin: 8px auto !important;
    }
    
    .index-links {
        font-size: 11px !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
        margin-top: 3px !important;
        padding: 3px !important;
    }
    
    .index-links-link {
        display: inline-block !important;
        margin: 0 1px !important;
        padding: 4px 5px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .index-bg-left {
        opacity: 0.3 !important;
        background-size: 250px 470px !important;
    }
    
    .index-bg-right {
        opacity: 0.3 !important;
        background-size: 290px 470px !important;
    }
    
    div[style*="position:fixed"][style*="bottom:0"] {
        padding: 8px 5px !important;
        min-height: 45px !important;
    }
    
    center[style*="z-index:3"] {
        padding-top: 2px !important;
        padding-bottom: 70px !important;
    }
}

/* Портретная ориентация на мобильных */
@media screen and (max-width: 768px) and (orientation: portrait) {
    img[src*="logo2.png"] {
        max-width: 75% !important;
    }
    
    div[style*="position:relative"] {
        top: 2% !important;
    }
}

/* Ландшафтная ориентация на мобильных */
@media screen and (max-width: 768px) and (orientation: landscape) {
    img[src*="logo2.png"] {
        max-width: 50% !important;
    }
    
    div[style*="position:relative"] {
        top: 1% !important;
    }
}