/* ============================================= */
/* === SITE_STYLE.CSS === */
/* ============================================= */


/* ============================================= */
/* === BASE.HTML === */
/* ============================================= */


/* Космические элементы одежды для фона */
.base-space-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.space-clothes {
    position: absolute;
    font-size: 40px;
    filter: drop-shadow(0 0 15px currentColor);
    animation: floatClothesCategories 15s ease-in-out infinite;
    opacity: 0.3;
    z-index: -1;
}

.space-clothes-1 {
    top: 15%; left: 5%;
    animation-delay: 0s;
    color: #FF6B6B;
}
.space-clothes-2 {
    top: 20%; right: 10%;
    animation-delay: 2s;
    color: #4ECDC4;
}
.space-clothes-3 {
    bottom: 25%; left: 15%;
    animation-delay: 4s;
    color: #FFD166;
    opacity: 0.26;
    transform: scale(1.2) !important;
}
.space-clothes-4 {
    bottom: 20%; right: 20%;
    animation-delay: 6s;
    color: #06D6A0;
}
.space-clothes-5 {
    top: 50%; left: 80%;
    animation-delay: 8s;
    color: #118AB2;
    opacity: 0.2;
    transform: scale(0.7) !important;
}
.space-clothes-6 {
    top: 80%; left: 50%;
    animation-delay: 10s;
    color: #9B5DE5;
    opacity: 0.15;
    transform: scale(0.7) !important;
}

@keyframes floatClothesCategories {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-30px) rotate(15deg) scale(1.2);
    }
    50% {
        transform: translateY(-15px) rotate(-8deg) scale(1.1);
    }
    75% {
        transform: translateY(-25px) rotate(-12deg) scale(1.15);
    }
}


/* ===== ОСНОВНЫЕ СТИЛИ BASE.HTML ===== */

/* FIX: Предотвращение смещения из-за скролла */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

body {
    padding-right: calc(100vw - 100%);
    padding-bottom: 100px !important;
    overflow-x: hidden;
}

/* ВЕРХНЯЯ ПАНЕЛЬ - ФИКСИРОВАННАЯ */
.base-top-bar {
    height: 80px !important;
    background: linear-gradient(135deg,
        rgba(0, 4, 40, 0.95) 0%,
        rgba(0, 15, 60, 0.95) 100%) !important;
    border-bottom: 2px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5) !important;
    padding: 0 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important; /* ФИКСИРОВАННАЯ */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* ЛОГОТИП - ЛЕВАЯ ЧАСТЬ */
.base-logo-left {
    display: flex;
    align-items: center;
    gap: 40px; /* Измени с 20px на 30px-40px */
    flex-shrink: 0;
    margin-left: 0px;
}

/* КОСМИЧЕСКИЙ ЛОГОТИП */
.base-cosmic-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.9) 0%,
        rgba(118, 75, 162, 0.9) 50%,
        rgba(102, 126, 234, 0.9) 100%);
    border-radius: 15px;
    transition: all 0.5s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0 25px rgba(102, 126, 234, 0.8),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    min-width: 280px;
}

.base-cosmic-logo-link:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        #FF6B6B, #FFD166, #06D6A0, #118AB2, #9B5DE5);
    z-index: -1;
    border-radius: 17px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.base-cosmic-logo-link:hover:before {
    opacity: 0.7;
}

.base-cosmic-logo-link:hover {
    transform: translateY(-5px);
    box-shadow:
        0 15px 35px rgba(102, 126, 234, 1),
        inset 0 0 25px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
}

/* АНИМИРОВАННАЯ ПЛАНЕТА */
.base-logo-planet {
    width: 60px;
    height: 60px;
    position: relative;
    margin-right: 20px;
}

.base-planet-core {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%,
        #FF6B6B 0%,
        #FFD166 25%,
        #06D6A0 50%,
        #118AB2 75%,
        #9B5DE5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: base-planet-rotate 15s linear infinite;
    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(102, 126, 234, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes base-planet-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.base-planet-clothes {
    font-size: 28px;
    animation: base-clothes-bounce 3s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 10px currentColor);
}

@keyframes base-clothes-bounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(15deg); }
    75% { transform: scale(1.1) rotate(-10deg); }
}

/* ЛЕТАЮЩИЕ ЗВЕЗДЫ */
.base-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.base-logo-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: base-star-orbit linear infinite;
    box-shadow: 0 0 10px white;
}

.base-logo-star:nth-child(1) { width: 3px; height: 3px; top: 10%; left: 10%; animation-duration: 8s; }
.base-logo-star:nth-child(2) { width: 4px; height: 4px; top: 30%; left: 80%; animation-duration: 10s; }
.base-logo-star:nth-child(3) { width: 2px; height: 2px; top: 70%; left: 20%; animation-duration: 12s; }
.base-logo-star:nth-child(4) { width: 5px; height: 5px; top: 85%; left: 60%; animation-duration: 14s; }
.base-logo-star:nth-child(5) { width: 3px; height: 3px; top: 40%; left: 40%; animation-duration: 16s; }

@keyframes base-star-orbit {
    0% { transform: rotate(0deg) translateX(45px) rotate(0deg); opacity: 0.3; }
    50% { opacity: 1; transform: rotate(180deg) translateX(45px) rotate(-180deg); }
    100% { transform: rotate(360deg) translateX(45px) rotate(-360deg); opacity: 0.3; }
}

/* ПУЛЬСИРУЮЩИЕ КОЛЬЦА */
.base-planet-rings {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

.base-logo-ring {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: base-ring-pulse 3s ease-in-out infinite;
}

.base-logo-ring:nth-child(1) { animation-delay: 0s; border-color: rgba(255, 107, 107, 0.5); }
.base-logo-ring:nth-child(2) { animation-delay: 1s; border-color: rgba(255, 209, 102, 0.5); }
.base-logo-ring:nth-child(3) { animation-delay: 2s; border-color: rgba(6, 214, 160, 0.5); }

@keyframes base-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ТЕКСТ ЛОГОТИПА */
.base-logo-text {
    display: flex;
    flex-direction: column;
}

.base-logo-main-name {
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(45deg,
        #FF6B6B 0%,
        #FFD166 33%,
        #06D6A0 66%,
        #667eea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: base-rainbow-shift 8s ease infinite;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes base-rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.base-logo-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* КНОПКИ НАВИГАЦИИ ВЕРХНЕЙ ПАНЕЛИ (на 20% меньше) */
.base-top-nav-buttons {
    display: flex;
    gap: 20px;
}

.base-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px; /* Уменьшено */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    font-size: 16px; /* Уменьшено */
    font-weight: 600;
    min-width: 130px; /* На 20% меньше (было 170px) */
    height: 48px; /* Высота как у поиска */
    backdrop-filter: blur(5px);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}


.base-nav-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: 0.5s;
}

.base-nav-btn:hover:before {
    left: 100%;
}


.base-nav-btn:hover {
    background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.8) 0%,
        rgba(118, 75, 162, 0.8) 100%);
    transform: translateY(-5px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 10px 25px rgba(102, 126, 234, 0.5),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.base-nav-btn i {
    font-size: 16px; /* Уменьшено */
    color: #FFD166;
}

/* Кнопка "Сдать в аренду" с подсказкой для неавторизованных */
.base-rent-btn {
    position: relative;
}

.base-rent-btn-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 300px;
    width: max-content;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.base-rent-btn-tooltip:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.base-rent-btn:hover .base-rent-btn-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ПОИСК В ЦЕНТРЕ */
.base-center-quick_search {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 30px;
}

.base-quick_search-form {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.5);
    overflow: hidden;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    height: 48px;
    width: 100%; /* Растягивается на всю ширину родителя */
    margin: 0; /* Убираем лишние отступы */
}

.base-quick_search-input {
    flex: 1;
    padding: 0 20px;
    border: none;
    background: transparent;
    color: white;
    font-size: 16px;
    outline: none;
    height: 100%;
}

.base-quick_search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.base-quick_search-btn {
    padding: 0 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


.base-quick_search-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}

/* ПРАВАЯ ЧАСТЬ - КНОПКИ ПОЛЬЗОВАТЕЛЯ */
.base-user-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    margin-right: 20px;
}


/* КНОПКА КОРЗИНЫ */
.base-cart-icon-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 60px;
    margin-right: 15px;
}

.base-cart-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 18px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}


.base-cart-icon-circle:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: 0.5s;
}

.base-cart-icon-circle:hover:before {
    left: 100%;
}

.base-cart-icon-circle:hover {
    transform: translateY(-3px) scale(1.1);
    color: white;
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.base-cart-icon-circle .fa-shopping-cart {
    font-size: 24px;
}


.base-cart-badge {
    position: absolute;
    top: -4px;
    right: -18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
    z-index: 100;
}

.base-cart-label {
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Статичная, не двигается при наведении */
}

/* Подсказка для корзины неавторизованных */
.base-cart-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: max-content;
    max-width: 250px;
    text-align: center;
}

.base-cart-tooltip:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.base-cart-icon-btn:hover .base-cart-tooltip {
    opacity: 1;
    visibility: visible;
}

/* КНОПКА ВХОДА/ПРОФИЛЯ */
.base-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
    position: relative;
    height: 48px; /* Высота как у поиска */
    min-width: 110px; /* На 20% меньше (было 140px) */
    font-size: 16px; /* Уменьшено */
    position: relative;
    overflow: hidden;
}


.base-auth-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: 0.5s;
}

.base-auth-btn:hover:before {
    left: 100%;
}


/* Для кнопки Войти - красноватый цвет */
.base-login-btn {
    background: linear-gradient(135deg, #dc3545, #c82333); /* Красноватый */
    color: white;
}

.base-login-btn:hover {
    background: linear-gradient(135deg, #bd2130, #a71e2a);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.4);
}

/* Для кнопки Профиль - оригинальный цвет */
.base-profile-btn {
    background: linear-gradient(135deg, #4ECDC4, #44A08D);
    color: white;
}

.base-profile-btn:hover {
    background: linear-gradient(135deg, #3dbdb4, #349084);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(78, 205, 196, 0.4);
}

/* Подсказка для профиля */
.base-profile-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: max-content;
}

.base-profile-tooltip:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.base-profile-btn:hover .base-profile-tooltip {
    opacity: 1;
    visibility: visible;
}

/* НИЖНЯЯ ПАНЕЛЬ - ФИКСИРОВАННАЯ */
.base-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    background: linear-gradient(135deg,
        rgba(0, 4, 40, 0.95) 0%,
        rgba(0, 15, 60, 0.95) 100%);
    border-top: 2px solid rgba(102, 126, 234, 0.5);
    z-index: 1000 !important;
    backdrop-filter: blur(15px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    display: flex !important;
    align-items: center !important;
}

.base-footer-content {
    width: 100%;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ЛОГОТИП В ФУТЕРЕ (независимый от копирайта) */
.base-footer-logo-container {
    position: absolute;
    left: 50px; /* Вы можете регулировать это значение */
    display: flex;
    align-items: center;
}

.base-footer-logo {
    width: 60px;
    height: 60px;
    position: relative;
}


.base-cosmic-logo-link1:hover:before {
    opacity: 0.7;
}

.base-cosmic-logo-link1:hover {
    transform: translateY(-5px);
    box-shadow:
        0 15px 35px rgba(102, 126, 234, 1),
        inset 0 0 25px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
}


.base-footer-planet-core {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%,
        #FF6B6B 0%,
        #FFD166 25%,
        #06D6A0 50%,
        #118AB2 75%,
        #9B5DE5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: base-footer-planet-rotate 20s linear infinite reverse;
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.4),
        0 0 35px rgba(102, 126, 234, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes base-footer-planet-rotate {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.base-footer-clothes {
    font-size: 28px;
    animation: base-footer-clothes-spin 5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 1);
    filter: drop-shadow(0 0 15px currentColor);
}

@keyframes base-footer-clothes-spin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    33% { transform: scale(1.2) rotate(120deg); }
    66% { transform: scale(1.1) rotate(240deg); }
}

.base-footer-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.base-footer-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: base-footer-star-orbit linear infinite;
    box-shadow: 0 0 12px white;
}

.base-footer-star:nth-child(1) { width: 4px; height: 4px; top: 20%; left: 20%; animation-duration: 15s; }
.base-footer-star:nth-child(2) { width: 5px; height: 5px; top: 70%; left: 70%; animation-duration: 18s; }
.base-footer-star:nth-child(3) { width: 3px; height: 3px; top: 40%; left: 80%; animation-duration: 12s; }
.base-footer-star:nth-child(4) { width: 4px; height: 4px; top: 80%; left: 30%; animation-duration: 20s; }
.base-footer-star:nth-child(5) { width: 3px; height: 3px; top: 10%; left: 60%; animation-duration: 25s; }

@keyframes base-footer-star-orbit {
    0% { transform: rotate(0deg) translateX(45px) rotate(0deg); opacity: 0.4; }
    50% { opacity: 1; transform: rotate(180deg) translateX(45px) rotate(-180deg); }
    100% { transform: rotate(360deg) translateX(45px) rotate(-360deg); opacity: 0.4; }
}

.base-footer-planet-rings {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

.base-footer-ring {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: base-footer-ring-pulse 4s ease-in-out infinite;
}

.base-footer-ring:nth-child(1) { animation-delay: 0.5s; border-color: rgba(255, 107, 107, 0.6); }
.base-footer-ring:nth-child(2) { animation-delay: 1.5s; border-color: rgba(255, 209, 102, 0.6); }
.base-footer-ring:nth-child(3) { animation-delay: 2.5s; border-color: rgba(6, 214, 160, 0.6); }

@keyframes base-footer-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* КОПИРАЙТ В ФУТЕРЕ */
.base-footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow:
        inset 0 0 20px rgba(102, 126, 234, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.3);
    min-width: 350px;
    margin: 0 140px;
}

.base-copyright-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.base-copyright-year {
    color: #FFD166;
    font-weight: bold;
}

.base-copyright-name {
    color: #667eea;
    font-weight: bold;
}

/* НАВИГАЦИЯ В ФУТЕРЕ */
.base-footer-nav {
    display: flex;
    gap: 25px;
    margin-left: 0; /* Убери auto */
    margin-right: 120px;
}

.base-footer-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.4s ease;
    min-width: 80px;
    position: relative;
    overflow: hidden;
}


.base-footer-nav-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: 0.5s;
}

.base-footer-nav-link:hover:before {
    left: 100%;
}


.base-footer-nav-link:hover {
    color: white;
    background: rgba(102, 126, 234, 0.2);
    transform: translateY(-5px);
}

.base-footer-nav-link i {
    font-size: 20px;
    margin-bottom: 5px;
    color: #FFD166;
}

.base-footer-nav-link span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.base-footer-nav-link:hover:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    animation: base-link-pulse 1.5s infinite;
}

@keyframes base-link-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* МЕРЦАЮЩИЕ ЗВЕЗДЫ НА ПАНЕЛЯХ */
.base-panel-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.base-panel-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: base-panel-star-twinkle 3s ease-in-out infinite;
    box-shadow: 0 0 6px white;
}

.base-top-panel-star {
    animation-delay: calc(var(--delay, 0) * 0.3s);
}

.base-bottom-panel-star {
    animation-delay: calc(var(--delay, 0) * 0.4s);
}

@keyframes base-panel-star-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ОСНОВНОЙ КОНТЕНТ */
main {
    padding-top: 100px;
    padding-bottom: 90px;
    min-height: calc(100vh - 190px);
}

/* CSS переменная для регулировки положения логотипа в футере */
:root {
    --footer-logo-left: 15px;
}


/* === Общий стиль страницы === */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 50px; /* Отступ сверху под верхним блоком */
    padding-bottom: 50px; /* Отступ снизу под нижним блоком */
    background-color: rgba(0, 0, 0, 0.9);
}

/* Цвет фона страницы */
.page-background {
    background-color: rgba(0, 0, 0, 0.9);
}





/* ============================================= */
/* === HOME.HTML === */
/* ============================================= */

/* === Стили для 'космической' главной страницы === */

.space-container {
    max-width: 1200px;
    margin: 80px auto 40px;
    padding: 0 20px;
}

/* Герой-секция */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 80px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-content {
    flex: 1;
}


.hero-title {
    font-size: 48px;
    color: white;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.highlight {
    margin-top: 0px;
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(45deg,
        #FF6B6B 0%,
        #FFD166 33%,
        #06D6A0 66%,
        #667eea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: base-rainbow-shift 6s ease infinite;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    filter:
        drop-shadow(0 0 5px currentColor)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

@keyframes base-rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.highlight:hover {
    filter:
        drop-shadow(0 0 25px currentColor)
        drop-shadow(0 0 60px rgba(255, 255, 255, 0.6));
    z-index: 10;
}


.hero-subtitle {
    font-size: 24px;
    color: #ffd166;
    margin-bottom: 30px;
    font-weight: 300;
}

.hero-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.hero-btn {
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.primary-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.secondary-btn {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* === Элементы одежды  === */

/* Контейнер для плавающих элементов */
.hero-illustration {
    flex: 0 0 500px; /* Увеличиваем ширину для 12 элементов */
    position: relative;
    height: 350px;
    z-index: 1;
}

/* Базовый стиль для плавающих элементов */
.floating-clothes-element {
    position: absolute;
    font-size: 40px;
    filter:
        drop-shadow(0 0 15px currentColor)
        drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
    animation: floatClothesHome 12s ease-in-out infinite; /* Увеличили с 8s до 12s */
    z-index: 1;
    transition: all 0.3s ease;
}

/* Эффект свечения при наведении */
.floating-clothes-element:hover {
    filter:
        drop-shadow(0 0 25px currentColor)
        drop-shadow(0 0 50px rgba(255, 255, 255, 0.5));
    transform: scale(1.5);
    z-index: 10;
}

/* Анимация для элементов одежды на главной странице */
@keyframes floatClothesHome {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-50px) rotate(15deg) scale(0.6);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-30px) rotate(-8deg) scale(0.4);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-45px) rotate(-12deg) scale(1.32);
        opacity: 0.95;
    }
}

/* Позиционирование 12 элементов с разными задержками */
/* РЕГУЛИРОВКА СКОРОСТИ: меняйте animation-delay и animation-duration */

.clothes-1 {
    top: 10%; left: 5%;
    animation-delay: 0s;
    color: #FF6B6B;
    font-size: 45px;
}
.clothes-2 {
    top: 15%; right: 10%;
    animation-delay: 1s;
    color: #4ECDC4;
    font-size: 55px;
    animation-duration: 14s; /* Индивидуальная настройка */
}
.clothes-3 {
    bottom: 25%; left: 15%;
    animation-delay: 2s;
    color: #FFD166;
    font-size: 40px;
}
.clothes-4 {
    bottom: 20%; right: 20%;
    animation-delay: 3s;
    color: #06D6A0;
    font-size: 50px;
    animation-duration: 13s;
}
.clothes-5 {
    top: 35%; left: 28%;
    animation-delay: 0.5s;
    color: #118AB2;
    font-size: 32px;
}
.clothes-6 {
    top: 81%; right: 12%;
    animation-delay: 1.5s;
    color: #9B5DE5;
    font-size: 58px;
    animation-duration: 16s; /* Самый медленный */
}
.clothes-7 {
    top: 20%; left: 65%;
    animation-delay: 2.5s;
    color: #F15BB5;
    font-size: 38px;
}
.clothes-8 {
    bottom: 35%; right: 8%;
    animation-delay: 3.5s;
    color: #00BBF9;
    font-size: 48px;
    animation-duration: 11s; /* Быстрее других */
}
.clothes-9 {
    top: 85%; left: 18%;
    animation-delay: 4s;
    color: #00F5D4;
    font-size: 44px;
}
.clothes-10 {
    top: 12%; right: 52%;
    animation-delay: 4.5s;
    color: #FF9E00;
    font-size: 52px;
    animation-duration: 15s;
}
.clothes-11 {
    bottom: 10%; left: 55%;
    animation-delay: 5s;
    color: #9D4EDD;
    font-size: 30px;
}
.clothes-12 {
    top: 45%; left: 50%;
    animation-delay: 5.5s;
    color: #FF0054;
    font-size: 65px;
}

/* Секция особенностей */
.features-section1 {
    margin-bottom: 80px;
}

.section-title {
    text-align: center;
    font-size: 36px;
    color: white;
    margin-bottom: 50px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    margin: 20px auto;
    border-radius: 2px;
}

.features-grid1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card1 {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.feature-card1:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.5);
}

.feature-icon1 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    color: white;
}

.feature-card1 h3 {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
}

.feature-card1 p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* CTA секция */
.cta-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-content h2 {
    color: white;
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.cta-btn {
    padding: 15px 40px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cta-btn:not(.outline) {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.cta-btn.outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.cta-btn.outline:hover {
    background: rgba(255, 255, 255, 0.1);
}


/* === Стили для кастомной подсказки === */

/* Контейнер для кнопки с подсказкой */
.create-ad-tooltip {
    position: relative;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea, #764ba2, #667eea);
    background-size: 200% 200%;
    animation: gradient-pulse 3s ease infinite;
}

/* Кастомная подсказка */
.create-ad-tooltip::after {
    content: "Чтобы разместить объявление, необходимо войти в систему.";
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
    width: max-content;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Стрелка подсказки */
.create-ad-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

/* Эффект при наведении на кнопку */
.create-ad-tooltip:hover::after,
.create-ad-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Анимация пульсирующего градиента */
@keyframes gradient-pulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Эффект при наведении на кнопку с подсказкой */
.create-ad-tooltip:hover {
    animation: none;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
}

/* Анимация для появления подсказки */
@keyframes tooltip-appear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Применяем анимацию к подсказке при появлении */
.create-ad-tooltip:hover::after {
    animation: tooltip-appear 0.3s ease forwards;
}



/* ============================================= */
/* === LOGIN.HTML === */
/* ============================================= */


/* Основной контейнер страницы */
.login-page-container {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}


/* Заголовок страницы */
.login-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.login-page-title {
    color: white;
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.login-page-title i {
    color: #667eea;
    font-size: 2.5rem;
}

.login-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Контейнер с двумя колонками */
.login-content-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Левая колонка - информация */
.login-info-sidebar {
    flex: 0 0 380px;
    margin-top: 50px;
}

/* Карточка информации */
.login-info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.login-info-card:hover {
    transform: translateY(-5px);
}

.login-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.login-info-header i {
    font-size: 28px;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-info-header h2 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
}

/* Список преимуществ */
.login-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.login-feature-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(102, 126, 234, 0.2);
    transform: translateX(5px);
}

.login-feature-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-feature-icon i {
    font-size: 22px;
    color: white;
}

.login-feature-content {
    flex: 1;
}

.login-feature-content h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.login-feature-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Блок безопасности */
.login-security-info {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #20c997;
}

.login-security-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.login-security-header i {
    font-size: 24px;
    color: #20c997;
}

.login-security-header h3 {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.login-security-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Правая колонка - форма */
.login-form-section {
    flex: 0 0 45%;
    min-width: 0;
    margin-top: -50px;
}

/* Карточка формы */
.login-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    height: 100%;
}

/* Заголовок формы */
.login-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-form-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.login-form-avatar i {
    font-size: 40px;
    color: white;
}

.login-form-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.login-form-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* Сообщение об ошибке */
.login-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: login-error-appear 0.3s ease;
}

@keyframes login-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.login-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
    flex: 1;
}


/* Сообщение об ошибке для проверки username */
.login-username-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 12px 15px;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    color: #FF6B6B;
    font-size: 0.95rem;
    animation: loginErrorSlideIn 0.3s ease;
}

.login-username-error i {
    font-size: 16px;
    flex-shrink: 0;
}

@keyframes loginErrorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Форма */
.login-auth-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Поля формы */
.login-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-field-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.login-field-label i {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.login-input-wrapper {
    position: relative;
}

.login-text-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8) !important; /* Черный фон */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9) !important; /* Светлый текст */
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.login-text-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Светлый placeholder */
}

.login-text-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    color: white !important;
}

.login-input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 0 0 12px 12px;
}

.login-input-focused .login-input-focus-border {
    transform: scaleX(1);
}

.login-field-error {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-field-error::before {
    content: '⚠';
    font-size: 14px;
}

/* Дополнительные опции */
.login-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.login-remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.login-remember-me input[type="checkbox"] {
    display: none;
}

.login-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.login-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.login-remember-me input[type="checkbox"]:checked + .login-checkbox-custom {
    background: #667eea;
    border-color: #667eea;
}

.login-remember-me input[type="checkbox"]:checked + .login-checkbox-custom::after {
    opacity: 1;
}

.login-remember-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.login-forgot-password {
    color: #667eea;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
}

.login-forgot-password:hover {
    color: white;
    background: rgba(102, 126, 234, 0.1);
}

/* Кнопка входа */
.login-submit-button {
    position: relative;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
    overflow: hidden;
}

.login-submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.login-submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.login-submit-button:hover::before {
    left: 100%;
}

.login-submit-button:active {
    transform: translateY(-1px);
}

.login-button-icon {
    font-size: 18px;
}

.login-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.login-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: login-button-spin 0.8s linear infinite;
}

@keyframes login-button-spin {
    to { transform: rotate(360deg); }
}

.login-button-loading .login-button-loader {
    display: block;
}

.login-button-loading .login-button-text {
    opacity: 0.7;
}

.login-button-active {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a) !important;
}

/* Разделитель */
.login-form-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    gap: 15px;
}

.login-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.login-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Кнопка регистрации */
.login-register-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.login-register-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.login-register-icon {
    font-size: 18px;
    color: #f093fb;
}

.login-register-text {
    color: white;
}


/* Адаптивность */
@media (max-width: 1200px) {
    .login-content-wrapper {
        flex-direction: column;
    }

    .login-info-sidebar {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .login-page-container {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .login-page-title {
        font-size: 2.2rem;
    }

    .login-page-subtitle {
        font-size: 1rem;
    }

    .login-form-card {
        padding: 30px 20px;
    }

    .login-info-card,
    .login-security-info {
        padding: 20px;
    }

    .login-feature-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    .login-feature-icon {
        margin: 0 auto;
    }

    .login-form-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .login-forgot-password {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .login-page-title {
        font-size: 1.8rem;
    }

    .login-page-title i {
        font-size: 1.8rem;
    }

    .login-form-header {
        margin-bottom: 30px;
    }

    .login-form-avatar {
        width: 60px;
        height: 60px;
    }

    .login-form-avatar i {
        font-size: 30px;
    }

    .login-form-title {
        font-size: 1.5rem;
    }

    .login-text-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .login-submit-button,
    .login-register-button {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}


/* ============================================= */
/* === LOGGED_OUT.HTML === */
/* ============================================= */

.logout-body-page {
    min-height: 70vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.logout-content {
    max-width: 500px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

/* Основной контейнер */
.logout-confirm-container {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    padding: 60px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(220, 53, 69, 0.3);
    text-align: center;
}

/* Иконка выхода */
.logout-icon {
    font-size: 80px;
    color: #dc3545;
    margin-bottom: 10px;
    animation: logout-pulse 2s ease-in-out infinite;
}

@keyframes logout-pulse {
    0% {
        transform: scale(1);
        color: #dc3545;
    }
    50% {
        transform: scale(1.1);
        color: #c82333;
    }
    100% {
        transform: scale(1);
        color: #dc3545;
    }
}

/* Заголовок */
.logout-title {
    font-size: 28px;
    color: white;
    margin-bottom: 15px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Сообщение */
.logout-message {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 35px;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Форма */
.logout-form {
    width: 100%;
    align-items: center;
    text-align: center;
}

/* Контейнер кнопок */
.logout-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* Кнопка подтверждения выхода */
.logout-confirm-btn {
    position: relative;
    width: 100%;
    padding: 15px 25px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}

.logout-confirm-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.logout-confirm-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
    background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
}

.logout-confirm-btn:hover::before {
    left: 100%;
}

.logout-confirm-btn:active {
    transform: translateY(-1px);
}

/* Кнопка отмены */
.logout-cancel-btn {
    position: relative;
    width: 100%;
    padding: 15px 25px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
}

.logout-cancel-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.logout-cancel-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(108, 117, 125, 0.3);
    background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
}

.logout-cancel-btn:hover::before {
    left: 100%;
}

.logout-cancel-btn:active {
    transform: translateY(-1px);
}

/* Информационный блок */
.logout-info {
    margin-top: 30px;
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 4px solid #6c757d;
    max-width: 333px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.logout-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.logout-info i {
    color: #6c757d;
    font-size: 16px;
}


/* Адаптивность */
@media (max-width: 768px) {
    .logout-confirm-container {
        width: 90%;
        max-width: 500px;
        padding: 30px 20px;
        height: auto;
        min-height: 450px;
    }

    .logout-icon {
        font-size: 60px;
        margin-bottom: 25px;
    }

    .logout-title {
        font-size: 24px;
    }

    .logout-message {
        font-size: 16px;
    }

    .logout-confirm-btn,
    .logout-cancel-btn {
        font-size: 16px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .logout-confirm-container {
        width: 95%;
        padding: 25px 15px;
    }

    .logout-icon {
        font-size: 50px;
        margin-bottom: 20px;
    }

    .logout-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .logout-message {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .logout-buttons {
        gap: 15px;
    }

    .logout-info {
        padding: 12px 15px;
        margin-top: 20px;
    }

    .logout-info p {
        font-size: 13px;
    }
}


/* ============================================= */
/* === REGISTER.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.register-page-container {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}

/* Заголовок страницы */
.register-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.register-page-title {
    color: white;
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.register-page-title i {
    color: #9B5DE5;
    font-size: 2.5rem;
}

.register-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Контейнер с двумя колонками */
.register-content-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Левая колонка - информация */
.register-info-sidebar {
    flex: 0 0 380px;
    margin-top: 50px;
}

/* Карточка информации */
.register-info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.register-info-card:hover {
    transform: translateY(-5px);
}

.register-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.register-info-header i {
    font-size: 28px;
    color: #9B5DE5;
    background: rgba(155, 93, 229, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-info-header h2 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
}

/* Список преимуществ */
.register-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.register-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.register-feature-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(155, 93, 229, 0.2);
    transform: translateX(5px);
}

.register-feature-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-feature-icon i {
    font-size: 22px;
    color: white;
}

.register-feature-content {
    flex: 1;
}

.register-feature-content h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.register-feature-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Блок безопасности */
.register-security-info {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #20c997;
}

.register-security-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.register-security-header i {
    font-size: 24px;
    color: #20c997;
}

.register-security-header h3 {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.register-security-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Правая колонка - форма */
.register-form-section {
    flex: 0 0 45%;
    min-width: 0;
    margin-top: -50px;
}

/* Карточка формы */
.register-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    height: 100%;
}

/* Заголовок формы */
.register-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.register-form-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(155, 93, 229, 0.3);
}

.register-form-avatar i {
    font-size: 40px;
    color: white;
}

.register-form-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.register-form-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* Сообщение об ошибке */
.register-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: register-error-appear 0.3s ease;
}

@keyframes register-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.register-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.register-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
    flex: 1;
}

/* Форма */
.register-auth-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Поля формы */
.register-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.register-field-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.register-field-label i {
    color: #9B5DE5;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.register-input-wrapper {
    position: relative;
}

.register-text-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8) !important; /* Черный фон */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9) !important; /* Светлый текст */
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.register-text-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Светлый placeholder */
}

.register-text-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #9B5DE5 !important;
    box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.2) !important;
    color: white !important;
}

.register-input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #9B5DE5, #F15BB5);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 0 0 12px 12px;
}

.register-input-focused .register-input-focus-border {
    transform: scaleX(1);
}

.register-field-error {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.register-field-error::before {
    content: '⚠';
    font-size: 14px;
}

.register-password-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.register-password-hint i {
    color: #9B5DE5;
    font-size: 14px;
}

/* Согласие с условиями */
.register-form-options {
    margin-top: 10px;
}

.register-agree-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.register-agree-terms input[type="checkbox"] {
    display: none;
}

.register-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.register-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.register-agree-terms input[type="checkbox"]:checked + .register-checkbox-custom {
    background: #9B5DE5;
    border-color: #9B5DE5;
}

.register-agree-terms input[type="checkbox"]:checked + .register-checkbox-custom::after {
    opacity: 1;
}

.register-terms-link {
    color: #9B5DE5;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.register-terms-link:hover {
    color: #F15BB5;
    border-bottom-color: #F15BB5;
}

/* Кнопка регистрации */
.register-submit-button {
    position: relative;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
    overflow: hidden;
}

.register-submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.register-submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(155, 93, 229, 0.4);
}

.register-submit-button:hover::before {
    left: 100%;
}

.register-submit-button:active {
    transform: translateY(-1px);
}

.register-button-icon {
    font-size: 18px;
}

.register-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.register-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: register-button-spin 0.8s linear infinite;
}

@keyframes register-button-spin {
    to { transform: rotate(360deg); }
}

.register-button-loading .register-button-loader {
    display: block;
}

.register-button-loading .register-button-text {
    opacity: 0.7;
}

.register-button-active {
    background: linear-gradient(135deg, #8a4fd4, #e04a9f) !important;
}



/* Адаптивность */
@media (max-width: 1200px) {
    .register-content-wrapper {
        flex-direction: column;
    }

    .register-info-sidebar {
        flex: none;
        width: 100%;
        margin-top: 0;
    }

    .register-form-section {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .register-page-container {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .register-page-title {
        font-size: 2.2rem;
    }

    .register-page-subtitle {
        font-size: 1rem;
    }

    .register-form-card {
        padding: 30px 20px;
    }

    .register-info-card,
    .register-security-info {
        padding: 20px;
    }

    .register-feature-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    .register-feature-icon {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .register-page-title {
        font-size: 1.8rem;
    }

    .register-page-title i {
        font-size: 1.8rem;
    }

    .register-form-header {
        margin-bottom: 30px;
    }

    .register-form-avatar {
        width: 60px;
        height: 60px;
    }

    .register-form-avatar i {
        font-size: 30px;
    }

    .register-form-title {
        font-size: 1.5rem;
    }

    .register-text-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .register-submit-button,
    .register-login-button {
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    .register-agree-terms {
        font-size: 0.85rem;
    }
}


/* === Блок с ошибками валидации === */
.form-error-container {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
}

.error-message {
    color: #D8000C;
    background-color: #FFD2D2;
    border: 1px solid #D8000C;
    border-radius: 5px;
    padding: 8px;
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: bold;
}


/* ============================================= */
/* === TERMS.HTML === */
/* ============================================= */

.terms-page-container {
    max-width: 1200px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 100vh;
}


/* Заголовок страницы */
.terms-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-page-title {
    color: white;
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.terms-page-title i {
    color: #667eea;
    font-size: 2.3rem;
}

.terms-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0 0 20px 0;
    max-width: 600px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.terms-last-updated {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.3); /* Изменено для Safari */
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-last-updated i {
    color: #FFD166;
}

/* Контейнер с условиями */
.terms-content-container {
    margin-bottom: 50px;
}

.terms-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}


/* Оглавление */
.terms-toc {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.terms-toc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
    border-radius: 15px;
}

.terms-toc h3 {
    color: white;
    font-size: 1.3rem;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-toc h3 i {
    color: #667eea;
}

.terms-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.terms-toc-list li {
    margin-bottom: 8px;
}

.terms-toc-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: block;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.terms-toc-list a:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(5px);
}

/* Разделы условий */
.terms-sections {
    margin-bottom: 40px;
}

.terms-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terms-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.terms-section-title {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-section-number {
    color: #667eea;
    font-weight: bold;
    font-size: 1.8rem;
    min-width: 30px;
}

.terms-section-content {
    color: rgba(255, 255, 255, 0.9); /* Более светлый для читаемости */
    line-height: 1.7;
    font-size: 1.05rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Для лучшей читаемости */
}

.terms-section-content p {
    margin-bottom: 15px;
}

.terms-section-content p:last-child {
    margin-bottom: 0;
}

.terms-section-content strong {
    color: white;
    font-weight: 600;
}

.terms-contact-info {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.terms-contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
    border-radius: 12px;
}

.terms-contact-info p {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.terms-contact-info p:last-child {
    margin-bottom: 0;
}

.terms-contact-info i {
    color: #667eea;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Кнопки действий */
.terms-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-agree-btn {
    padding: 15px 35px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 250px;
}

.terms-agree-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.terms-back-btn {
    padding: 15px 35px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 250px;
    position: relative;
    overflow: hidden;
}

.terms-back-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
}

.terms-back-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}



/* Адаптивность */
@media (max-width: 768px) {
    .terms-page-container {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .terms-page-title {
        font-size: 2rem;
    }

    .terms-card {
        padding: 25px 20px;
    }

    .terms-toc-list {
        grid-template-columns: 1fr;
    }

    .terms-actions {
        flex-direction: column;
        gap: 15px;
    }

    .terms-agree-btn,
    .terms-back-btn {
        width: 100%;
        min-width: auto;
    }

    .terms-section-title {
        font-size: 1.3rem;
    }

    .terms-section-content {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .terms-page-title {
        font-size: 1.6rem;
    }

    .terms-page-subtitle {
        font-size: 1rem;
    }

    .terms-section-title {
        font-size: 1.2rem;
    }

    .terms-agree-btn,
    .terms-back-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
}


/* ============================================= */
/* === CREATE_AD.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.create-ad-page-container {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}

/* Заголовок страницы */
.create-ad-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.create-ad-page-title {
    color: white;
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.create-ad-page-title i {
    color: #FF9E00;
    font-size: 2.5rem;
}

.create-ad-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Контейнер с двумя колонками */
.create-ad-content-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Левая колонка - информация */
.create-ad-info-sidebar {
    flex: 0 0 380px;
    margin-top: 50px;
}

/* Карточка информации */
.create-ad-info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.create-ad-info-card:hover {
    transform: translateY(-5px);
}

.create-ad-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 158, 0, 0.3);
}

.create-ad-info-header i {
    font-size: 28px;
    color: #FF9E00;
    background: rgba(255, 158, 0, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-ad-info-header h2 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
}

/* Список советов */
.create-ad-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.create-ad-tip-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.create-ad-tip-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 158, 0, 0.2);
    transform: translateX(5px);
}

.create-ad-tip-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF9E00, #FFB74D);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-ad-tip-icon i {
    font-size: 22px;
    color: white;
}

.create-ad-tip-content {
    flex: 1;
}

.create-ad-tip-content h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.create-ad-tip-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Блок информации */
.create-ad-notice-info {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #FF6B6B;
}

.create-ad-notice-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.create-ad-notice-header i {
    font-size: 24px;
    color: #FF6B6B;
}

.create-ad-notice-header h3 {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.create-ad-notice-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Правая колонка - форма */
.create-ad-form-section {
    flex: 0 0 45%;
    min-width: 0;
    margin-top: -50px;
}

/* Карточка формы */
.create-ad-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    height: 100%;
}

/* Заголовок формы */
.create-ad-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.create-ad-form-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #FF9E00, #FFB74D);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(255, 158, 0, 0.3);
}

.create-ad-form-avatar i {
    font-size: 40px;
    color: white;
}

.create-ad-form-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.create-ad-form-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* Сообщение об ошибке */
.create-ad-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: create-ad-error-appear 0.3s ease;
}

@keyframes create-ad-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.create-ad-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.create-ad-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
    flex: 1;
}

/* Форма */
.create-ad-auth-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Поля формы */
.create-ad-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.create-ad-field-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.create-ad-field-label i {
    color: #FF9E00;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.create-ad-input-wrapper {
    position: relative;
}

/* Текстовые поля ввода */
.create-ad-text-input,
.create-ad-textarea-input,
.create-ad-price-input,
.create-ad-select-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.create-ad-text-input::placeholder,
.create-ad-textarea-input::placeholder,
.create-ad-price-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.create-ad-text-input:focus,
.create-ad-textarea-input:focus,
.create-ad-price-input:focus,
.create-ad-select-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #FF9E00 !important;
    box-shadow: 0 0 0 3px rgba(255, 158, 0, 0.2) !important;
    color: white !important;
}

/* Специальные стили для textarea */
.create-ad-textarea-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.create-ad-textarea-counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-align: right;
    margin-top: 5px;
}

/* Специальные стили для select */
.create-ad-select-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FF9E00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
    cursor: pointer;
    padding-right: 45px;
}

.create-ad-select-input option {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px;
}

/* Контейнер для цены */
.create-ad-price-container {
    display: flex;
    align-items: center;
    position: relative;
}

.create-ad-currency {
    position: absolute;
    left: 20px;
    color: #FF9E00;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 1;
}

.create-ad-price-input {
    padding-left: 40px !important;
}

/* Загрузка файла */
.create-ad-file-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.create-ad-file-wrapper {
    position: relative;
}

.create-ad-file-input {
    display: none;
}

.create-ad-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.create-ad-file-label:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #FF9E00;
    border-style: solid;
    color: white;
}

.create-ad-file-label i {
    font-size: 40px;
    color: #FF9E00;
}

.create-ad-file-text {
    font-size: 1.1rem;
    font-weight: 600;
}

.create-ad-file-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Превью изображения */
.create-ad-file-preview {
    min-height: 100px;
}

.create-ad-preview-image {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.create-ad-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-ad-preview-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.create-ad-preview-remove:hover {
    background: rgba(255, 107, 107, 0.9);
    transform: scale(1.1);
}

/* Подсказка для контактов */
.create-ad-contact-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-ad-contact-hint i {
    color: #FF9E00;
    font-size: 14px;
}

/* Граница фокуса */
.create-ad-input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF9E00, #FFB74D);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 0 0 12px 12px;
}

.create-ad-input-focused .create-ad-input-focus-border {
    transform: scaleX(1);
}

/* Ошибки полей */
.create-ad-field-error {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-ad-field-error::before {
    content: '⚠';
    font-size: 14px;
}

/* Кнопка создания */
.create-ad-submit-button {
    position: relative;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #FF9E00, #FFB74D);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
    overflow: hidden;
}

.create-ad-submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.create-ad-submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 158, 0, 0.4);
}

.create-ad-submit-button:hover::before {
    left: 100%;
}

.create-ad-submit-button:active {
    transform: translateY(-1px);
}

.create-ad-button-icon {
    font-size: 18px;
}

.create-ad-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.create-ad-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: create-ad-button-spin 0.8s linear infinite;
}

@keyframes create-ad-button-spin {
    to { transform: rotate(360deg); }
}

.create-ad-button-loading .create-ad-button-loader {
    display: block;
}

.create-ad-button-loading .create-ad-button-text {
    opacity: 0.7;
}

.create-ad-button-active {
    background: linear-gradient(135deg, #E68E00, #E6A429) !important;
}





/* Адаптивность */
@media (max-width: 1200px) {
    .create-ad-content-wrapper {
        flex-direction: column;
    }

    .create-ad-info-sidebar {
        flex: none;
        width: 100%;
        margin-top: 0;
    }

    .create-ad-form-section {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .create-ad-page-container {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .create-ad-page-title {
        font-size: 2.2rem;
    }

    .create-ad-page-subtitle {
        font-size: 1rem;
    }

    .create-ad-form-card {
        padding: 30px 20px;
    }

    .create-ad-info-card,
    .create-ad-notice-info {
        padding: 20px;
    }

    .create-ad-tip-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    .create-ad-tip-icon {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .create-ad-page-title {
        font-size: 1.8rem;
    }

    .create-ad-page-title i {
        font-size: 1.8rem;
    }

    .create-ad-form-header {
        margin-bottom: 30px;
    }

    .create-ad-form-avatar {
        width: 60px;
        height: 60px;
    }

    .create-ad-form-avatar i {
        font-size: 30px;
    }

    .create-ad-form-title {
        font-size: 1.5rem;
    }

    .create-ad-text-input,
    .create-ad-textarea-input,
    .create-ad-price-input,
    .create-ad-select-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .create-ad-submit-button {
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    .create-ad-file-label {
        padding: 20px 15px;
    }

    .create-ad-file-label i {
        font-size: 30px;
    }
}


/* ============================================= */
/* === APPROVE_AD.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.approve-ad-page {
    max-width: 1600px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}

/* Заголовок страницы */
.approve-ad-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.approve-ad-page-title {
    color: white;
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.approve-ad-page-title i {
    color: #20c997;
    font-size: 2.5rem;
}

.approve-ad-page-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Карточка модерации */
.approve-ad-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    margin-bottom: 50px;
}

/* Заголовок модерации */
.approve-ad-header {
    text-align: center;
    margin-bottom: 40px;
}

.approve-ad-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #20c997, #00b894);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(32, 201, 151, 0.3);
}

.approve-ad-avatar i {
    font-size: 40px;
    color: white;
}

.approve-ad-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.approve-ad-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0 0 20px 0;
}

.approve-ad-info strong {
    color: #FFD166;
    font-weight: 700;
}

/* Контейнер таблицы */
.approve-ad-table-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    overflow-x: auto;
}

/* Таблица объявлений */
.approve-ad-table {
    width: 100%;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.9);
}

.approve-ad-table thead {
    background: rgba(102, 126, 234, 0.15);
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.approve-ad-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.approve-ad-table th i {
    color: #667eea;
    margin-right: 8px;
    font-size: 0.9rem;
}

.approve-ad-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.approve-ad-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.approve-ad-table td {
    padding: 15px 12px;
    vertical-align: middle;
}

/* Чекбокс */
.approve-ad-checkbox {
    text-align: center;
    width: 40px;
}

.approve-ad-checkbox-input {
    display: none;
}

.approve-ad-checkbox-label {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
}

.approve-ad-checkbox-label:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.approve-ad-checkbox-input:checked + .approve-ad-checkbox-label {
    background: #667eea;
    border-color: #667eea;
}

.approve-ad-checkbox-input:checked + .approve-ad-checkbox-label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Изображение */
.approve-ad-image-cell {
    width: 80px;
}

.approve-ad-image-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.approve-ad-image-wrapper:hover {
    border-color: #667eea;
    transform: scale(1.05);
}

.approve-ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.approve-ad-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.approve-ad-image-wrapper:hover .approve-ad-image-overlay {
    opacity: 1;
}

.approve-ad-image-overlay i {
    color: white;
    font-size: 18px;
}

.approve-ad-no-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.approve-ad-no-image i {
    font-size: 20px;
    margin-bottom: 5px;
}

.approve-ad-no-image span {
    font-size: 10px;
    text-align: center;
}

/* Заголовок объявления */
.approve-ad-title-cell {
    min-width: 150px;
}

.approve-ad-title-cell strong {
    color: white;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 5px;
}

.approve-ad-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.approve-ad-category-tag {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.approve-ad-category-more {
    background: rgba(255, 209, 102, 0.2);
    color: #FFD166;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Цена */
.approve-ad-price {
    width: 100px;
    text-align: center;
}

.approve-ad-price-value {
    color: #06D6A0;
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
}

.approve-ad-price small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* Описание */
.approve-ad-description-cell {
    max-width: 200px;
    position: relative;
}

.approve-ad-description-text {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.4;
}

.approve-ad-description-full {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 300px;
    max-width: 300px;
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.approve-ad-description-cell:hover .approve-ad-description-full {
    display: block;
}

/* Автор */
.approve-ad-author {
    width: 120px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

/* Местоположение */
.approve-ad-location {
    width: 120px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* Контакты */
.approve-ad-contacts {
    max-width: 150px;
    position: relative;
}

.approve-ad-contact-text {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.approve-ad-contact-full {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 250px;
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.approve-ad-contacts:hover .approve-ad-contact-full {
    display: block;
}

/* Контейнер действий */
.approve-ad-actions-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.approve-ad-selection-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-count {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

.approve-ad-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Кнопки действий */
.approve-ad-approve-btn,
.approve-ad-delete-btn,
.approve-ad-select-all-btn {
    padding: 12px 25px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
    min-width: 150px;
}

.approve-ad-approve-btn {
    background: linear-gradient(135deg, #20c997, #00b894);
    color: white;
}

.approve-ad-approve-btn:hover {
    background: linear-gradient(135deg, #1db68a, #00a07f);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(32, 201, 151, 0.4);
}

.approve-ad-delete-btn {
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
    color: white;
}

.approve-ad-delete-btn:hover {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
}

.approve-ad-select-all-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.approve-ad-select-all-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    border-color: rgba(102, 126, 234, 0.5);
}

/* Состояние без объявлений */
.approve-ad-empty {
    text-align: center;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.approve-ad-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #20c997, #00b894);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(32, 201, 151, 0.3);
}

.approve-ad-empty-icon i {
    font-size: 40px;
    color: white;
}

.approve-ad-empty h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.approve-ad-empty p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.approve-ad-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0s ease;
    transform: translateY(0px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.approve-ad-home-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* Модальное окно изображения */
.approve-ad-image-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding-top: 60px;
}

.approve-ad-image-modal-content {
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
}

.approve-ad-image-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2001;
}

.approve-ad-image-modal-close:hover {
    color: #FF6B6B;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .approve-ad-table-container {
        overflow-x: auto;
    }

    .approve-ad-table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .approve-ad-page {
        margin: 80px 15px 40px;
        padding: 0;
    }

    .approve-ad-card {
        padding: 30px 20px;
    }

    .approve-ad-page-title {
        font-size: 2.2rem;
    }

    .approve-ad-page-subtitle {
        font-size: 1rem;
    }

    .approve-ad-avatar {
        width: 60px;
        height: 60px;
    }

    .approve-ad-avatar i {
        font-size: 30px;
    }

    .approve-ad-title {
        font-size: 1.5rem;
    }

    .approve-ad-actions-container {
        flex-direction: column;
        text-align: center;
    }

    .approve-ad-selection-info {
        justify-content: center;
    }

    .approve-ad-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .approve-ad-page-title {
        font-size: 1.8rem;
    }

    .approve-ad-page-title i {
        font-size: 1.8rem;
    }

    .approve-ad-approve-btn,
    .approve-ad-delete-btn,
    .approve-ad-select-all-btn {
        min-width: 100%;
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .approve-ad-buttons {
        width: 100%;
    }

    .approve-ad-empty {
        padding: 40px 20px;
    }

    .approve-ad-empty-icon {
        width: 60px;
        height: 60px;
    }

    .approve-ad-empty-icon i {
        font-size: 30px;
    }

    .approve-ad-empty h3 {
        font-size: 1.3rem;
    }
}


/* ============================================= */
/* === SUCCESS.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.success-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}

/* Хлебные крошки */
.success-breadcrumbs {
    padding: 0 0 25px 0;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-breadcrumbs a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 6px;
}

.success-breadcrumbs a:hover {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.1);
}

.success-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.5);
}

.success-breadcrumb-current {
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

/* Основной контент */
.success-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.success-container {
    width: 800px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.success-header {
    margin-bottom: 40px;
}

.success-icon1 {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 40px rgba(40, 167, 69, 0.5),
        inset 0 0 40px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.success-icon1::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    animation: success-icon-pulse 2s ease-in-out infinite;
}

@keyframes success-icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

@keyframes success-icon-bounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(10deg);
    }
    75% {
        transform: scale(1.05) rotate(-10deg);
    }
}

.success-icon1 i {
    font-size: 70px;
    color: white;
}

.success-title {
    color: white;
    font-size: 2.3rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #28a745, #20c997, #06D6A0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: success-title-shift 3s ease infinite;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes success-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.success-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Основное сообщение */
.success-message {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: success-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.success-status-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.success-status-icon i {
    font-size: 35px;
    color: white;
}

.success-status-message {
    color: white;
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.success-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 25px 0;
    max-width: 600px;
    margin: 0 auto 25px auto;
}

.success-moderation-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.success-moderation-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
}

.success-moderation-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.success-moderation-item i {
    color: #FFD166;
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.success-moderation-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.success-moderation-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.success-moderation-content strong {
    color: #FFD166;
}

/* Что происходит дальше */
.success-next-steps {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: success-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.success-next-steps-title {
    color: white;
    font-size: 1.6rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.success-next-steps-title i {
    color: #4ECDC4;
    font-size: 2rem;
}

.success-timeline {
    position: relative;
    padding: 20px 0;
}

.success-timeline::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 1px;
}

.success-timeline-step {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
}

@keyframes success-step-slide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.success-step-animate {
    animation: success-step-slide 0.6s ease forwards;
}

.success-timeline-step:last-child {
    margin-bottom: 0;
}

.success-step-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    border: 3px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.success-step-content {
    flex: 1;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.success-step-content:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(5px);
}

.success-step-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.success-step-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

/* Советы */
.success-tips {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: success-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.success-tips-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.success-tips-header i {
    color: #FFD166;
    font-size: 2rem;
}

.success-tips-header h3 {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

.success-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.success-tip-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes success-tip-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-tip-animate {
    animation: success-tip-appear 0.5s ease forwards;
}

.success-tip-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.success-tip-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.success-tip-icon i {
    font-size: 28px;
    color: white;
}

.success-tip-card h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.success-tip-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки действий */
.success-actions {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: success-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.btn-create-another,
.btn-go-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.btn-create-another {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-create-another::before,
.btn-go-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.btn-create-another:hover::before,
.btn-go-home:hover::before {
    left: 100%;
}

.btn-create-another:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

.btn-go-home {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
}

.btn-go-home:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.success-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.success-actions-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 15px;
}

.success-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.success-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Дополнительная информация */
.success-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: success-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.success-notification-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 20px;
    align-items: center;
    text-align: left;
}

.success-notification-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-notification-icon i {
    font-size: 24px;
    color: white;
}

.success-notification-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.success-notification-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.success-help-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.success-help-info h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.success-help-info h4 i {
    color: #4ECDC4;
}

.success-help-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.success-help-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.success-help-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

/* Анимации */
@keyframes success-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект конфетти */
.success-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.success-confetti-piece {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: success-confetti-fall linear forwards;
}

@keyframes success-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Эффект летящих элементов одежды */
.success-clothes-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.success-flying-clothes {
    position: absolute;
    top: -50px;
    font-size: 40px;
    opacity: 0;
    animation: success-clothes-fly linear forwards;
    pointer-events: none;
    user-select: none;
}

@keyframes success-clothes-fly {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .success-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .success-container {
        width: 100%;
        padding: 30px 20px;
    }

    .success-title {
        font-size: 1.8rem;
    }

    .success-subtitle {
        font-size: 1.1rem;
    }

    .success-moderation-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .success-tips-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .success-timeline::before {
        left: 25px;
    }

    .success-timeline-step {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .success-step-content {
        text-align: center;
    }

    .btn-create-another,
    .btn-go-home {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .success-icon1 {
        width: 100px;
        height: 100px;
    }

    .success-icon1 i {
        font-size: 60px;
    }

    .success-title {
        font-size: 1.6rem;
    }

    .success-subtitle {
        font-size: 1rem;
    }

    .success-status-message {
        font-size: 1.2rem;
    }

    .success-description {
        font-size: 0.95rem;
    }

    .success-notification-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .success-notification-content {
        text-align: center;
    }
}


/* ============================================= */
/* === SEARCH.HTML === */
/* ============================================= */


/* Основной контейнер страницы */
.search-page {
    max-width: 1600px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}

/* Заголовок поиска */
.search-header {
    text-align: center;
    margin-bottom: 40px;
}

.search-title {
    color: white;
    font-size: 36px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.search-title i {
    color: #667eea;
}

.search-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Контейнер поиска */
.search-container {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

/* Левая панель - форма поиска */
.search-sidebar {
    flex: 0 0 350px;
}

.search-card {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

.search-card h2 {
    color: white;
    font-size: 22px;
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-card h2 i {
    color: #667eea;
}

/* Группы формы */
.search-form-group {
    margin-bottom: 25px;
}

.search-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.search-form-group label i {
    color: #667eea;
    width: 20px;
    text-align: center;
}

/* Поля ввода */
.search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.search-hint {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

/* Выпадающий список */
.search-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23667eea' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.search-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.search-select option {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
}

/* Диапазон цены */
.price-range {
    margin-top: 10px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.price-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.price-input:focus {
    outline: none;
    border-color: #667eea;
}

.price-separator {
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

.price-slider-container {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
}

.price-slider {
    position: absolute;
    width: 100%;
    height: 5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    pointer-events: all;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.price-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    pointer-events: all;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.price-slider-track {
    position: absolute;
    height: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px;
    pointer-events: none;
}

/* Кнопки поиска */
.search-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.search-submit-btn {
    flex: 1;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.search-submit-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.search-reset-btn {
    flex: 1;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.search-reset-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

/* Подсказки по поиску */
.search-tips {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-tips h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-tips h3 i {
    color: #FFD166;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-list li i {
    color: #20c997;
    font-size: 12px;
}

/* Правая панель - результаты */
.search-results {
    flex: 1;
    min-width: 0;
}

/* Статистика поиска */
.search-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.stats-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-item i {
    font-size: 28px;
    color: #667eea;
    width: 40px;
    text-align: center;
}

.stats-value {
    display: block;
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.stats-label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 5px;
}

/* Заголовок результатов */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-header h2 {
    color: white;
    font-size: 24px;
    margin: 0;
}

.results-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.results-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.view-toggle {
    display: flex;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 5px;
}

/* Сетка объявлений */
.search-ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.search-ads-grid.list-view {
    grid-template-columns: 1fr;
}

.search-ads-grid.list-view .search-ad-card {
    flex-direction: row;
    height: 200px;
}

.search-ads-grid.list-view .search-ad-image {
    width: 200px;
    height: 100%;
}

.search-ads-grid.list-view .search-ad-info {
    flex: 1;
    padding: 20px;
}

/* Карточка объявления в поиске */
.search-ad-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
    display: flex;
    flex-direction: column;
}

.search-ad-card:hover {
    transform: translateY(-10px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(102, 126, 234, 0.2);
}

.search-ad-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Изображение */
.search-ad-image {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    overflow: hidden;
}

.search-ad-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.search-ad-card:hover .search-ad-image img {
    transform: scale(1.05);
}

.search-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.search-no-image i {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.search-ad-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

/* Информация об объявлении */
.search-ad-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-ad-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.search-ad-user i {
    color: #667eea;
}

.search-ad-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.4;
    flex: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.search-ad-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 15px 0;
    flex: 1;
}

.search-ad-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    font-weight: bold;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.search-price-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.search-price-value {
    color: white;
    font-size: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.search-price-value + i {
    color: white;
    font-size: 16px;
}

.search-ad-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
}

.search-ad-location,
.search-ad-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-ad-location i,
.search-ad-date i {
    font-size: 12px;
}

/* Нет результатов */
.search-no-results {
    text-align: center;
    padding: 60px 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-results-icon {
    margin-bottom: 25px;
}

.no-results-icon i {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
}

.search-no-results h3 {
    font-size: 28px;
    color: white;
    margin: 0 0 15px 0;
}

.search-no-results p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-results-suggestions {
    max-width: 600px;
    margin: 0 auto;
}

.no-results-suggestions h4 {
    color: white;
    font-size: 18px;
    margin: 0 0 20px 0;
}

.suggestions-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.suggestion-tag {
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.suggestion-tag:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* Пагинация */
.search-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.search-page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-page-link:hover {
    background-color: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
    transform: translateY(-2px);
}

.search-current-page {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .search-container {
        flex-direction: column;
    }

    .search-sidebar {
        flex: none;
        width: 100%;
    }

    .search-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .search-page {
        margin: 80px 15px 40px;
        padding: 0;
    }

    .search-title {
        font-size: 28px;
    }

    .search-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .search-ads-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .rental-period-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .search-ads-grid {
        grid-template-columns: 1fr;
    }

    .search-buttons {
        flex-direction: column;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .results-controls {
        width: 100%;
        justify-content: space-between;
    }
}


/* ============================================= */
/* === ACCOUNT_ACTIVATION_SENT.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.activation-sent-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}


/* Основной контент */
.activation-sent-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.activation-sent-container {
    width: 650px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.activation-sent-header {
    margin-bottom: 40px;
}

.activation-sent-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.4);
}

@keyframes activation-sent-icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.activation-sent-icon i {
    font-size: 50px;
    color: white;
}

.activation-sent-title {
    color: white;
    font-size: 2rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: activation-sent-title-shift 3s ease infinite;
}

@keyframes activation-sent-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.activation-sent-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Основное сообщение */
.activation-sent-message {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: activation-sent-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.activation-sent-email-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #4ECDC4, #44A08D);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.activation-sent-email-icon i {
    font-size: 30px;
    color: white;
}

.activation-sent-email-address {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 15px 0;
}

.activation-sent-email-highlight {
    color: #FFD166;
    font-weight: bold;
    background: rgba(255, 209, 102, 0.1);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    transition: all 0.3s ease;
}

@keyframes activation-sent-email-pulse {
    0%, 100% {
        background: rgba(255, 209, 102, 0.1);
        box-shadow: 0 0 0 rgba(255, 209, 102, 0.2);
    }
    50% {
        background: rgba(255, 209, 102, 0.2);
        box-shadow: 0 0 15px rgba(255, 209, 102, 0.4);
    }
}

.activation-sent-email-pulse {
    animation: activation-sent-email-pulse 1s ease;
}

.activation-sent-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Демо-уведомление */
.activation-sent-demo-notice {
    background: linear-gradient(135deg,
        rgba(155, 93, 229, 0.1),
        rgba(147, 51, 234, 0.05));
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(155, 93, 229, 0.2);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
    animation: activation-sent-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.activation-sent-demo-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activation-sent-demo-icon i {
    font-size: 24px;
    color: white;
}

.activation-sent-demo-content {
    flex: 1;
    text-align: left;
}

.activation-sent-demo-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.activation-sent-demo-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.activation-sent-demo-hint {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px !important;
}

.activation-sent-demo-hint i {
    color: #9B5DE5;
}

/* Инструкции */
.activation-sent-instructions {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: activation-sent-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.activation-sent-instructions-title {
    color: white;
    font-size: 1.4rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.activation-sent-instructions-title i {
    color: #FFD166;
    font-size: 1.8rem;
}

.activation-sent-instructions-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.activation-sent-instruction-step {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}

.activation-sent-instruction-step:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.activation-sent-step-number {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

@keyframes activation-sent-step-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.activation-sent-step-animate {
    animation: activation-sent-step-bounce 0.5s ease;
}

.activation-sent-step-content h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 10px 0;
}

.activation-sent-step-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки действий */
.activation-sent-buttons {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: activation-sent-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.activation-sent-view-email-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.activation-sent-view-email-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.activation-sent-view-email-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.activation-sent-view-email-btn:hover::before {
    left: 100%;
}

.activation-sent-view-email-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

.activation-sent-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}


/* Дополнительная информация */
.activation-sent-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: activation-sent-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.activation-sent-timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.activation-sent-timeline-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
}

.activation-sent-timeline-item i {
    color: #FFD166;
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.activation-sent-timeline-content h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.activation-sent-timeline-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.activation-sent-resend-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 5px 0;
}

.activation-sent-resend-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

.activation-sent-troubleshooting {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.activation-sent-troubleshooting h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activation-sent-troubleshooting h4 i {
    color: #FF6B6B;
}

.activation-sent-troubleshooting-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activation-sent-troubleshooting-list li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.activation-sent-troubleshooting-list li:before {
    content: '•';
    color: #FF6B6B;
    font-size: 1.2rem;
    line-height: 1;
}

/* Анимации */
@keyframes activation-sent-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.activation-sent-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект летящих писем */
.activation-sent-flying-letters {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.activation-sent-flying-letter {
    position: absolute;
    top: -50px;
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 5px;
    opacity: 0;
    animation: activation-sent-letter-fly linear forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.activation-sent-flying-letter i {
    color: white;
    font-size: 16px;
}

@keyframes activation-sent-letter-fly {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .activation-sent-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .activation-sent-container {
        width: 100%;
        padding: 30px 20px;
    }

    .activation-sent-title {
        font-size: 1.6rem;
    }

    .activation-sent-subtitle {
        font-size: 1rem;
    }

    .activation-sent-instructions-steps {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .activation-sent-timeline {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .activation-sent-demo-notice {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .activation-sent-demo-content {
        text-align: center;
    }

    .activation-sent-view-email-btn,
    .activation-sent-login-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .activation-sent-icon {
        width: 80px;
        height: 80px;
    }

    .activation-sent-icon i {
        font-size: 40px;
    }

    .activation-sent-title {
        font-size: 1.4rem;
    }

    .activation-sent-subtitle {
        font-size: 0.9rem;
    }

    .activation-sent-email-address {
        font-size: 1rem;
    }

    .activation-sent-text {
        font-size: 0.9rem;
    }

    .activation-sent-timeline-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}


/* ============================================= */
/* === FAKE_EMAIL_TEMPLATE.HTML === */
/* ============================================= */

/* Контейнер страницы с отступами */
.email-page-container {
    /* Регулируемые отступы */
    margin: 30px 200px 100px 200px; /* сверху справа снизу слева */
    padding: 0;
    min-height: calc(100vh - 210px); /* 60px сверху + 150px снизу */
    box-sizing: border-box;
    /* Фон с полосками - регулируемые цвета */
    background-color: #ffffff;
    background-image:
        linear-gradient(90deg,
            rgba(240, 240, 240, 0.3) 1px, transparent 1px),
        linear-gradient(rgba(240, 240, 240, 0.3) 1px, transparent 1px);
    background-size: 20px 20px; /* Регулируемый размер клеток */
}

/* Заголовок демо-режима */
.demo-alert {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #856404;
    font-size: 14px;
}

.demo-alert i {
    font-size: 18px;
}

/* Основной контейнер письма */
.email-client-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Заголовок email-клиента */
.email-client-header {
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.email-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-header-left i {
    font-size: 18px;
}

.email-subject {
    font-weight: bold;
    font-size: 16px;
}

.email-date {
    font-size: 14px;
    opacity: 0.8;
}

/* Панель инструментов */
.email-toolbar {
    background-color: #f8f9fa;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e9ecef;
}

.toolbar-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 5px 10px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background-color: #e9ecef;
}

.delete-fe-btn {
    color: #dc3545;
    border-color: #dc3545;
}

.delete-fe-btn:hover {
    background-color: #dc3545;
    color: white;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: #dee2e6;
    margin: 0 5px;
}

/* Заголовки письма */
.email-headers {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.email-header-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
}

.header-label {
    width: 60px;
    font-weight: bold;
    color: #6c757d;
}

.header-value {
    flex-grow: 1;
    color: #495057;
}

.subject-value {
    color: #4169E1;
    font-weight: bold;
}

/* Содержимое письма */
.email-content {
    padding: 30px;
    line-height: 1.6;
    color: #333;
}

/* Логотип */
.email-logo {
    text-align: center;
    margin-bottom: 30px;
}

.logo-circle {
    width: 80px;
    height: 80px;
    background-color: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.logo-circle i {
    font-size: 36px;
    color: #4169E1;
}


/* Анимация пульсации */
.logo-emoji {
    font-size: 30px;
    color: #4169E1;
    animation: logo-emoji 2s infinite ease-in-out;
}

@keyframes logo-emoji {
  0% {
    transform: scale(1.1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}


.logo-text {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.logo-subtext {
    color: #6c757d;
    font-size: 14px;
}

/* Приветствие */
.email-greeting {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 24px;
}

.email-intro, .email-text {
    margin-bottom: 20px;
    font-size: 16px;
}

/* Блок активации */
.activation-block {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 30px;
    margin: 30px 0;
    text-align: center;
}

.activation-title {
    color: #28a745;
    margin-bottom: 25px;
    font-size: 20px;
}

.activation1-text {
    margin-bottom: 15px;
    font-size: 15px;
}

.activation-button-container {
    margin-bottom: 20px;
}

.activation-button {
    display: inline-block;
    background-color: #28a745;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s;
    animation: pulse 2s infinite;
}

.activation-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.activation-button i {
    margin-right: 10px;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.activation-link-text {
    font-size: 14px;
    color: #6c757d;
}

.activation-link {
    color: #4169E1;
    word-break: break-all;
    text-decoration: none;
}

.activation-link:hover {
    text-decoration: underline;
}

/* Информационный блок */
.info-block {
    background-color: #e7f5ff;
    border-left: 4px solid #4169E1;
    padding: 20px;
    border-radius: 5px;
    margin: 30px 0;
}

.info-title {
    color: #4169E1;
    margin-bottom: 15px;
    font-size: 18px;
}

.info-title i {
    margin-right: 10px;
}

.info-list {
    margin: 0;
    padding-left: 20px;
}

.info-list li {
    margin-bottom: 8px;
    color: #495057;
}

/* Техническая информация */
.tech-info {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 14px;
}

.tech-info-item {
    margin: 5px 0;
}

/* Подпись */
.email-signature {
    margin-top: 40px;
}

.signature-line {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 20px 0;
}

.signature-text {
    color: #6c757d;
    margin-bottom: 5px;
}

.signature-name {
    color: #495057;
}

/* Футер email-клиента */
.email-footer {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-btn {
    background: none;
    border: 1px solid #6c757d;
    color: #6c757d;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.footer-btn:hover {
    background-color: #6c757d;
    color: white;
}

.footer-btn i {
    margin-right: 5px;
}

.footer-note {
    font-size: 12px;
    color: #6c757d;
    text-align: right;
    max-width: 300px;
}

/* Навигационные кнопки */
.email-navigation {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.activate-btn {
    background-color: #28a745;
    color: white;
}

.activate-btn:hover {
    background-color: #218838;
}

.back-btn {
    background-color: #6c757d;
    color: white;
}

.back-btn:hover {
    background-color: #5a6268;
}



/* ============================================= */
/* === ACCOUNT_ACTIVATED.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.account-activated-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}


/* Основной контент */
.account-activated-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.account-activated-container {
    width: 800px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.account-activated-header {
    margin-bottom: 40px;
}

.account-activated-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 30px rgba(40, 167, 69, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.1);
    position: relative;
}

.account-activated-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    animation: account-activated-icon-pulse 2s ease-in-out infinite;
}

@keyframes account-activated-icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.account-activated-checkmark {
    color: white;
    font-size: 60px;
    font-weight: bold;
    opacity: 0;
    animation: account-activated-checkmark-draw 1s ease-in-out forwards;
    animation-delay: 0.5s;
}

@keyframes account-activated-checkmark-draw {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.account-activated-title {
    color: white;
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #28a745, #20c997, #06D6A0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: account-activated-title-shift 3s ease infinite;
}

@keyframes account-activated-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.account-activated-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Основное сообщение */
.account-activated-message {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 0.7s;
}

.account-activated-welcome-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.account-activated-welcome-icon i {
    font-size: 35px;
    color: white;
    animation: account-activated-rocket-bounce 2s ease-in-out infinite;
}

@keyframes account-activated-rocket-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(5deg);
    }
    75% {
        transform: translateY(-3px) rotate(-5deg);
    }
}

.account-activated-welcome-message {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.account-activated-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Статистика активации */
.account-activated-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 0.9s;
}

.account-activated-stat-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
}

.account-activated-stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.account-activated-stat-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-activated-stat-icon i {
    font-size: 24px;
    color: white;
}

.account-activated-stat-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.account-activated-stat-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Преимущества */
.account-activated-features {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 1.1s;
}

.account-activated-features-title {
    color: white;
    font-size: 1.6rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.account-activated-features-title i {
    color: #FFD166;
    font-size: 2rem;
}

.account-activated-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.account-activated-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes account-activated-feature-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-activated-feature-animate {
    animation: account-activated-feature-appear 0.5s ease forwards;
}

.account-activated-feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.account-activated-feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.account-activated-feature-icon i {
    font-size: 28px;
    color: white;
}

.account-activated-feature-card h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.account-activated-feature-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Быстрый старт */
.account-activated-quick-start {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 1.3s;
}

.account-activated-quick-start-title {
    color: white;
    font-size: 1.6rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.account-activated-quick-start-title i {
    color: #4ECDC4;
    font-size: 2rem;
}

.account-activated-quick-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.account-activated-quick-step {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes account-activated-step-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-activated-step-animate {
    animation: account-activated-step-appear 0.5s ease forwards;
}

.account-activated-quick-step:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.account-activated-step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.account-activated-step-content h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.account-activated-step-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки действий */
.account-activated-buttons {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 1.5s;
}

.account-activated-login-btn,
.account-activated-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.account-activated-login-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.account-activated-login-btn::before,
.account-activated-home-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.account-activated-login-btn:hover::before,
.account-activated-home-btn:hover::before {
    left: 100%;
}

.account-activated-login-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

.account-activated-home-btn {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
}

.account-activated-home-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.account-activated-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.account-activated-buttons-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 15px;
}

.account-activated-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.account-activated-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Дополнительная информация */
.account-activated-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: account-activated-fade-up 0.6s ease forwards;
    animation-delay: 1.7s;
}

.account-activated-security-note {
    background: rgba(32, 201, 151, 0.1);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(32, 201, 151, 0.2);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-align: left;
}

.account-activated-security-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #20c997, #06d6a0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-activated-security-icon i {
    font-size: 24px;
    color: white;
}

.account-activated-security-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.account-activated-security-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.account-activated-support-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.account-activated-support-info h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-activated-support-info h4 i {
    color: #4ECDC4;
}

.account-activated-support-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.account-activated-faq-link,
.account-activated-support-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.account-activated-faq-link:hover,
.account-activated-support-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

/* Анимации */
@keyframes account-activated-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-activated-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект конфетти */
.account-activated-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.account-activated-confetti-piece {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: account-activated-confetti-fall linear forwards;
}

@keyframes account-activated-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Эффект летящих звезд */
.account-activated-stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.account-activated-flying-star {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: account-activated-star-fly linear forwards;
    box-shadow: 0 0 5px white;
}

@keyframes account-activated-star-fly {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .account-activated-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .account-activated-container {
        width: 100%;
        padding: 30px 20px;
    }

    .account-activated-title {
        font-size: 1.8rem;
    }

    .account-activated-subtitle {
        font-size: 1.1rem;
    }

    .account-activated-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .account-activated-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .account-activated-quick-steps {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .account-activated-security-note {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .account-activated-security-content {
        text-align: center;
    }

    .account-activated-login-btn,
    .account-activated-home-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .account-activated-icon {
        width: 100px;
        height: 100px;
    }

    .account-activated-checkmark {
        font-size: 50px;
    }

    .account-activated-title {
        font-size: 1.6rem;
    }

    .account-activated-subtitle {
        font-size: 1rem;
    }

    .account-activated-features-grid {
        grid-template-columns: 1fr;
    }

    .account-activated-welcome-message {
        font-size: 1.3rem;
    }

    .account-activated-text {
        font-size: 0.95rem;
    }
}



/* ============================================= */
/* === CATEGORIES.HTML === */
/* ============================================= */


/* Основной контейнер страницы */
.categories-page {
    display: flex;
    margin: 0px 20px 20px;
    gap: 20px;
    position: relative;
    min-height: 50vh;
}

/* === Боковая панель категорий === */
.categories-sidebar {
    width: 280px;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: fit-content;
    position: sticky;
    top: 80px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 100px); /* Настроить по своему вкусу */
    overflow-y: auto; /* Включить прокрутку внутри меню */
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-header h2 i {
    color: #667eea;
}

.sidebar-close {
    display: none;
    cursor: pointer;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.sidebar-close:hover {
    color: #FF6B6B;
}

/* Список категорий */
.categories-list {
    margin-bottom: 20px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.category-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    border-color: rgba(102, 126, 234, 0.5);
}

.category-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    color: white;
    border-color: rgba(102, 126, 234, 0.7);
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.category-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.category-item.active i {
    color: white;
}

.item-count {
    margin-left: auto;
    background-color: rgba(102, 126, 234, 0.3);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.category-item.active .item-count {
    background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-footer i {
    color: #667eea;
}

/* === Основной контент === */
.categories-content {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-header h1 {
    font-size: 28px;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.content-header h1 i {
    color: #667eea;
}

.ads-count {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sort-controls select {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.sort-controls select:hover {
    border-color: #667eea;
    background-color: rgba(102, 126, 234, 0.2);
}

.sort-controls select option {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
}


/* === Контейнеры с объявлениями === */
/* Сетка объявлений */
.ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.ads-grid.list-view {
    grid-template-columns: 1fr;
}

.ads-grid.list-view .ad-container {
    flex-direction: row;
    height: 200px;
}

.ads-grid.list-view .ad-image {
    width: 200px;
    height: 100%;
}

.ads-grid.list-view .ad-info {
    flex: 1;
    padding: 20px;
}


/* Карточка объявления в поиске */
.ad-container {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
    display: flex;
    flex-direction: column;
}

.ad-container:hover {
    transform: translateY(-10px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(102, 126, 234, 0.2);
}

.ad-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Изображение */
.ad-image {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    overflow: hidden;
}

.ad-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ad-card:hover .ad-image img {
    transform: scale(1.05);
}

.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.no-image i {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.ad-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

/* Информация об объявлении */
.ad-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ad-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.ad-user i {
    color: #667eea;
}

.ad-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.4;
    flex: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ad-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 15px 0;
    flex: 1;
}

.ad-price {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    font-weight: bold;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.price-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.price-value {
    color: white;
    font-size: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.price-value + i {
    color: white;
    font-size: 16px;
}

.ad-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
}

.ad-location,
.ad-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ad-location i,
.ad-date i {
    font-size: 12px;
}


/* Нет объявлений */
.no-ads {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.no-ads-icon {
    margin-bottom: 20px;
}

.no-ads-icon i {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.3);
}

.no-ads h3 {
    font-size: 24px;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.no-ads p {
    font-size: 16px;
    margin-bottom: 20px;
}

.no-ads-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.no-ads-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-link:hover {
    background-color: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
    transform: translateY(-2px);
}

.current-page {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .categories-page {
        flex-direction: column;
    }

    .categories-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 20px;
    }

    .sidebar-close {
        display: block;
    }
}

@media (max-width: 768px) {
    .categories-page {
        margin: 80px 10px 10px;
    }

    .categories-content {
        padding: 20px;
    }

    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .ads-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .ads-grid {
        grid-template-columns: 1fr;
    }

    .sort-controls {
        width: 100%;
        justify-content: space-between;
    }
}


/* ============================================= */
/* === AD_DETAIL.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.ad-detail-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.ad-detail-container {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

/* Левая колонка - 50% */
.ad-detail-left-col {
    flex: 1;
    min-width: 0; /* Для правильной работы flex */
}

/* Правая колонка - 50% */
.ad-detail-right-col {
    flex: 1;
    min-width: 0;
}

/* Изображение объявления */
.ad-detail-main-image {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
}

.ad-detail-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ad-detail-main-image:hover img {
    transform: scale(1.03);
}

.ad-detail-no-image-large {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
}

.ad-detail-no-image-large i {
    font-size: 80px;
    margin-bottom: 15px;
    opacity: 0.7;
}

/* Описание в левой колонке */
.ad-detail-description-left {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-description-left h3 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-description-left p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    white-space: pre-line;
}

/* Карточка автора */
.ad-detail-author-card {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-author-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ad-detail-author-info {
    flex: 1;
}

.ad-detail-author-info h4 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 20px;
}

.ad-detail-author-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.ad-detail-author-rating i {
    color: #FFD166;
    font-size: 16px;
}

.ad-detail-author-rating-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-left: 8px;
}

.ad-detail-author-contact {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

.ad-detail-author-contact p {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-author-contact i {
    width: 18px;
    color: #667eea;
    flex-shrink: 0;
}

/* Правая колонка - Заголовок и цена */
.ad-detail-header {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-title {
    color: white;
    font-size: 28px;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.ad-detail-price-main {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.ad-detail-price-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    font-weight: 500;
}

.ad-detail-price-value {
    color: #FFD166;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ad-detail-price-main i {
    color: #FFD166;
    font-size: 24px;
}

/* Варианты аренды */
.ad-detail-rental-options {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-rental-title {
    color: white;
    margin: 0 0 20px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-rental-periods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.ad-detail-period-option {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ad-detail-period-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.5);
}

.ad-detail-period-option.selected {
    background-color: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

.ad-detail-period-option input[type="radio"] {
    display: none;
}

.ad-detail-period-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.ad-detail-period-name {
    color: white;
    font-weight: bold;
    font-size: 17px;
    flex: 1;
}

.ad-detail-period-price {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    margin: 0 15px;
    min-width: 120px;
    text-align: center;
}

.ad-detail-period-total {
    color: #FFD166;
    font-weight: bold;
    font-size: 18px;
    min-width: 120px;
    text-align: right;
}

.ad-detail-period-save {
    position: absolute;
    top: -10px;
    right: 15px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3);
}

/* Итоговая сумма */
.ad-detail-rental-summary {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

.ad-detail-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 22px;
    font-weight: bold;
}

#ad-detail-totalAmount {
    color: #FFD166;
    font-size: 28px;
}

/* Кнопка добавления в корзину */
.ad-detail-add-to-cart-btn {
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    min-height: 60px;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap; /* Важно: текст не переносится */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-detail-add-to-cart-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.ad-detail-add-to-cart-btn:active {
    transform: translateY(-1px);
}

.ad-detail-login-to-add-btn {
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    min-height: 60px;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap; /* Важно: текст не переносится */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-detail-login-to-add-btn:hover {
    background: linear-gradient(135deg, #e084f0, #e04a5f);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
}
/* Стили для кнопки владельца */

.ad-detail-owner-btn {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.2);
    margin-top: 20px;
}

.ad-detail-owner-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4);
}

.ad-detail-owner-btn i {
    font-size: 20px;
}


/* Медиа-запрос для маленьких экранов */
@media (max-width: 768px) {
    .ad-detail-add-to-cart-btn,
    .ad-detail-login-to-add-btn {
        font-size: 16px;
        padding: 15px 20px;
        white-space: normal; /* На мобильных разрешаем перенос */
        text-align: center;
    }
}


/* Контактная информация */
.ad-detail-contact-info {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-contact-title {
    color: white;
    margin: 0 0 15px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-contact-details {
    color: rgba(255, 255, 255, 0.8);
}

.ad-detail-contact-details p {
    margin: 12px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-contact-details i {
    width: 20px;
    color: #667eea;
    flex-shrink: 0;
}

.ad-detail-contact-restricted {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    border-left: 4px solid #667eea;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Дополнительная информация */
.ad-detail-meta-info {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ad-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 12px 18px;
    border-radius: 10px;
    flex: 1;
    min-width: 200px;
}

.ad-detail-meta-item i {
    color: #667eea;
    font-size: 16px;
    flex-shrink: 0;
}

/* Отзывы */
.ad-detail-reviews-section {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-reviews-title {
    color: white;
    margin: 0 0 25px 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Похожие объявления */

.ad-detail-similar-title {
    color: white !important; /* Белый цвет */
    margin: 0 0 25px 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ad-detail-similar-title i {
    color: #667eea !important; /* Синий цвет иконки, можно регулировать */
}

.ad-detail-similar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    gap: 20px;
    margin-top: 20px;
}

.ad-detail-similar-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}

.ad-detail-similar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.ad-detail-similar-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.ad-detail-similar-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.ad-detail-no-image-small {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    color: rgba(255, 255, 255, 0.5);
}

.ad-detail-no-image-small i {
    font-size: 40px;
}

.ad-detail-similar-info {
    padding: 15px;
}

.ad-detail-similar-info h4 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ad-detail-similar-price {
    color: #FFD166;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Модальное окно для изображения */
.ad-image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding: 150px 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.98);
    overflow: auto;
    animation: ad-modal-fade 0.3s ease;
}

@keyframes ad-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ad-modal-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 90vw; /* 90% ширины окна браузера */
    max-height: 90vh; /* 90% высоты окна браузера */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease;
}

.ad-modal-content:hover {
    transform: scale(1.3);
}

#adModalCaption {
    margin: 20px auto 0;
    display: block;
    width: 90%;
    max-width: 90vw;
    text-align: center;
    color: #fff;
    padding: 15px;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
}

.ad-modal-close {
    position: fixed;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 50px; /* Увеличен размер */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 60px;
}

.ad-modal-close:hover {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.3);
    transform: scale(1.1) rotate(90deg);
}

/* Сделаем изображение в левой колонке кликабельным */
.ad-detail-main-image {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ad-detail-main-image:hover {
    transform: scale(1.02);
}


/* Стили для отзывов */
.ad-detail-reviews-section {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
}

.section-spacing {
    margin-top: 40px;
}

.ad-detail-reviews-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.ad-detail-add-review-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ad-detail-add-review-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-2px);
}

.ad-detail-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ad-detail-review-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ad-detail-reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.ad-detail-reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-detail-reviewer-avatar i {
    font-size: 24px;
    color: white;
}

.ad-detail-reviewer-info h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 16px;
}

.ad-detail-review-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ad-detail-review-rating i {
    color: #FFD166;
    font-size: 14px;
}

.ad-detail-review-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-left: 10px;
}

.ad-detail-review-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0;
    font-size: 15px;
}

.ad-detail-no-reviews {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.ad-detail-no-reviews i {
    font-size: 60px;
    margin-bottom: 15px;
    display: block;
}

.ad-detail-no-reviews p {
    font-size: 16px;
    margin: 0;
}

/* Форма отзыва */
.ad-detail-review-form {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-detail-review-form h3 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-review-rating-input {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ad-detail-review-rating-input span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

.ad-detail-star-rating {
    display: flex;
    gap: 5px;
}

.ad-detail-star-rating i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.3s ease;
}

.ad-detail-star-rating i.active,
.ad-detail-star-rating i:hover,
.ad-detail-star-rating i:hover ~ i {
    color: #FFD166;
}

.ad-detail-review-comment textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    resize: vertical;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.ad-detail-review-comment textarea:focus {
    outline: none;
    border-color: #667eea;
}

.ad-detail-review-buttons {
    display: flex;
    gap: 15px;
}

.ad-detail-review-submit-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ad-detail-review-submit-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-2px);
}

.ad-detail-review-cancel-btn {
    flex: 1;
    padding: 12px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ad-detail-review-cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ad-detail-owner-notice {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid #667eea;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

/* Стили для действий с отзывами */
.ad-detail-other-reviews {
    margin-top: 30px;
}

.ad-detail-other-reviews h3 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ad-detail-review-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.ad-detail-review-edit,
.ad-detail-review-delete {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.ad-detail-review-edit:hover {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.1);
}

.ad-detail-review-delete:hover {
    color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
}

.ad-detail-user-review {
    margin-top: 20px;
}

.ad-detail-user-review h3 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Адаптивность */
@media (max-width: 1200px) {
    .ad-detail-container {
        flex-direction: column;
        gap: 30px;
    }

    .ad-detail-left-col,
    .ad-detail-right-col {
        flex: none;
        width: 100%;
    }

    .ad-detail-main-image {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .ad-detail-page {
        margin: 80px 15px 40px;
        padding: 0;
    }

    .ad-detail-title {
        font-size: 24px;
    }

    .ad-detail-price-value {
        font-size: 28px;
    }

    .ad-detail-period-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ad-detail-period-price,
    .ad-detail-period-total {
        margin: 0;
        text-align: left;
        min-width: auto;
    }

    .ad-detail-meta-info {
        flex-direction: column;
        gap: 10px;
    }

    .ad-detail-meta-item {
        min-width: auto;
    }
}


/* ============================================= */
/* === EDIT_REVIEW.HTML === */
/* ============================================= */

.edit-review-page {
    max-width: 800px;
    margin: 80px auto 40px;
    padding: 0 20px;
}

.edit-review-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0px);
}

.edit-review-container h1 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.edit-review-form .form-group {
    margin-bottom: 25px;
}

.edit-review-form label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.star-rating-edit {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.star-rating-edit i {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.star-rating-edit i.active,
.star-rating-edit i:hover,
.star-rating-edit i:hover ~ i {
    color: #FFD166;
}

.edit-review-form textarea {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
}

.edit-review-form textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-e-buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.save-e-btn, .cancel-e-btn {
    flex: 1;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0s ease;
    cursor: pointer;
    border: none;
}

.save-e-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.save-e-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.cancel-e-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cancel-e-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}


/* ============================================= */
/* === EDIT_AD.HTML === */
/* ============================================= */

.edit-ad-page {
    max-width: 800px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.edit-ad-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-ad-container h1 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Стили из предыдущих форм */
.form-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h2 {
    color: white;
    font-size: 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}


.form-text {
    color: rgba(255, 255, 255, 0.5);
}


.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half {
    flex: 1;
}

.categories-checkbox {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
}

.categories-checkbox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-checkbox li {
    margin-bottom: 10px;
}

.categories-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}

.categories-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}


.image-group {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.current-image-container {
    flex: 0 0 250px;
}

.current-image {
    margin-top: 10px;
}

.current-image img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgba(102, 126, 234, 0.7);
}

.current-image-name {
    text-align: center;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    word-break: break-all;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-image-preview {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.no-image-preview i {
    font-size: 48px;
    margin-bottom: 10px;
}

.image-upload {
    flex: 1;
    min-width: 300px;
}

.image-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-input:hover {
    border-color: rgba(102, 126, 234, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.image-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.image-upload .form-text {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-top: 8px;
    font-style: italic;
}

.form-note {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.form-note i {
    color: #FFC107;
    font-size: 24px;
    margin-top: 2px;
}

.form-note div {
    flex: 1;
}

.form-note p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

.form-note p:last-child {
    margin-bottom: 0;
}

.form-note strong {
    color: #FFC107;
}

.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 40px;
}

.save-btn, .cancel-btn, .delete-btn {
    flex: 1;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.save-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.save-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.cancel-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.delete-btn {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.delete-btn:hover {
    background: linear-gradient(135deg, #bd2130, #a71e2a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

.error {
    color: #FF6B6B;
    font-size: 14px;
    margin-top: 5px;
}

.messages {
    margin-bottom: 30px;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.5);
}

.alert-error {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .image-group {
        flex-direction: column;
        gap: 20px;
    }

    .current-image-container {
        flex: 0 0 auto;
        width: 100%;
    }

    .current-image {
        text-align: center;
    }

    .current-image img,
    .no-image-preview {
        margin: 0 auto;
    }

    .image-upload {
        min-width: 100%;
    }

    .form-buttons {
        flex-direction: column;
    }
}


/* ============================================= */
/* === DELETE_AD.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.delete-ad-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: calc(100vh - 190px);
}


/* Основной контент */
.delete-ad-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.delete-ad-container {
    width: 800px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.delete-ad-header {
    margin-bottom: 40px;
}

.delete-ad-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #FF6B6B, #DC3545);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 30px rgba(255, 107, 107, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.1);
    position: relative;
}

@keyframes delete-ad-icon-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 50px rgba(255, 107, 107, 0.6);
    }
}

.delete-ad-icon i {
    font-size: 50px;
    color: white;
}

.delete-ad-title {
    color: white;
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #FF6B6B, #DC3545, #FF8E53);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: delete-ad-title-shift 3s ease infinite;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes delete-ad-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.delete-ad-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Основное сообщение */
.delete-ad-warning-message {
    background: linear-gradient(135deg,
        rgba(255, 107, 107, 0.1),
        rgba(220, 53, 69, 0.05));
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 107, 107, 0.2);
    opacity: 0;
    transform: translateY(20px);
    animation: delete-ad-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.delete-ad-warning-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #FF6B6B, #DC3545);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.delete-ad-warning-icon i {
    font-size: 35px;
    color: white;
}

.delete-ad-warning-title {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.delete-ad-warning-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

.delete-ad-highlight {
    color: #FFD166;
    font-weight: bold;
    background: rgba(255, 209, 102, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    transition: all 0.3s ease;
}

@keyframes delete-ad-highlight-pulse {
    0%, 100% {
        background: rgba(255, 209, 102, 0.1);
        box-shadow: 0 0 0 rgba(255, 209, 102, 0);
    }
    50% {
        background: rgba(255, 209, 102, 0.2);
        box-shadow: 0 0 15px rgba(255, 209, 102, 0.3);
    }
}

.delete-ad-highlight-pulse {
    animation: delete-ad-highlight-pulse 1s ease;
}

/* Последствия удаления */
.delete-ad-consequences {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: delete-ad-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.delete-ad-consequences-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.delete-ad-consequences-header i {
    color: #FF6B6B;
    font-size: 24px;
}

.delete-ad-consequences-header h3 {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

.delete-ad-consequences-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.delete-ad-consequence-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes delete-ad-consequence-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delete-ad-consequence-animate {
    animation: delete-ad-consequence-appear 0.5s ease forwards;
}

.delete-ad-consequence-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 107, 107, 0.3);
    transform: translateX(5px);
}

.delete-ad-consequence-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF6B6B, #DC3545);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-ad-consequence-icon i {
    font-size: 24px;
    color: white;
}

.delete-ad-consequence-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.delete-ad-consequence-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Предпросмотр объявления */
.delete-ad-preview {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: delete-ad-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.delete-ad-preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.delete-ad-preview-header i {
    color: #FFD166;
    font-size: 24px;
}

.delete-ad-preview-header h3 {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

.delete-ad-preview-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 2px solid rgba(255, 107, 107, 0.3);
    display: flex;
    gap: 25px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.95);
}

@keyframes delete-ad-preview-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.delete-ad-preview-animate {
    animation: delete-ad-preview-appear 0.6s ease forwards;
}

.delete-ad-preview-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 107, 107, 0.5);
    transform: translateY(-5px);
}

.delete-ad-preview-image {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.delete-ad-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-ad-no-image {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.delete-ad-no-image i {
    font-size: 50px;
    margin-bottom: 10px;
}

.delete-ad-no-image span {
    font-size: 14px;
}

.delete-ad-preview-content {
    flex: 1;
}

.delete-ad-preview-title {
    color: white;
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.delete-ad-preview-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.delete-ad-preview-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.delete-ad-preview-price {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFD166;
    font-size: 1.3rem;
    font-weight: bold;
}

.delete-ad-preview-price i {
    font-size: 20px;
}

.delete-ad-price-value {
    color: #FFD166;
}

.delete-ad-price-currency {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: normal;
}

.delete-ad-preview-meta {
    display: flex;
    gap: 25px;
    align-items: center;
}

.delete-ad-preview-location,
.delete-ad-preview-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.delete-ad-preview-location i,
.delete-ad-preview-date i {
    color: #4ECDC4;
    font-size: 16px;
}

/* Альтернативные варианты */
.delete-ad-alternatives {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: delete-ad-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.delete-ad-alternatives-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.delete-ad-alternatives-header i {
    color: #FFD166;
    font-size: 24px;
}

.delete-ad-alternatives-header h3 {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

.delete-ad-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.delete-ad-alternative-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes delete-ad-alternative-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delete-ad-alternative-animate {
    animation: delete-ad-alternative-appear 0.5s ease forwards;
}

.delete-ad-alternative-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.delete-ad-alternative-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.delete-ad-alternative-icon i {
    font-size: 28px;
    color: white;
}

.delete-ad-alternative-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.delete-ad-alternative-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Форма подтверждения */
.delete-ad-form {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: delete-ad-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.delete-ad-confirmation {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.delete-ad-confirmation-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
}

.delete-ad-confirmation-checkbox input[type="checkbox"] {
    display: none;
}

.delete-ad-confirmation-label {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}

.delete-ad-confirmation-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 107, 107, 0.5);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 2px;
}

.delete-ad-confirmation-check::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.delete-ad-confirmation-checkbox input[type="checkbox"]:checked + .delete-ad-confirmation-label .delete-ad-confirmation-check {
    background: linear-gradient(135deg, #FF6B6B, #DC3545);
    border-color: #FF6B6B;
}

.delete-ad-confirmation-checkbox input[type="checkbox"]:checked + .delete-ad-confirmation-label .delete-ad-confirmation-check::after {
    opacity: 1;
}

.delete-ad-confirmation-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
    flex: 1;
}

.delete-ad-form-warning {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.delete-ad-form-warning i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.delete-ad-form-warning p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки */
.delete-ad-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.delete-ad-confirm-btn,
.delete-ad-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.delete-ad-confirm-btn {
    background: linear-gradient(135deg, #FF6B6B, #DC3545);
    color: white;
}

.delete-ad-confirm-btn::before,
.delete-ad-cancel-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.delete-ad-confirm-btn:hover::before,
.delete-ad-cancel-btn:hover::before {
    left: 100%;
}

.delete-ad-confirm-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.delete-ad-cancel-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.delete-ad-cancel-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(108, 117, 125, 0.4);
}

.delete-ad-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.delete-ad-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: delete-ad-button-spin 0.8s linear infinite;
}

@keyframes delete-ad-button-spin {
    to { transform: rotate(360deg); }
}

.delete-ad-button-loading .delete-ad-button-loader {
    display: block;
}

.delete-ad-button-loading .delete-ad-button-text {
    opacity: 0.7;
}

.delete-ad-button-active {
    background: linear-gradient(135deg, #DC3545, #BD2130) !important;
}

.delete-ad-buttons-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 15px;
}

.delete-ad-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.delete-ad-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.delete-ad-support-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.delete-ad-support-info h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.delete-ad-support-info h4 i {
    color: #4ECDC4;
}

.delete-ad-support-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.delete-ad-support-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.delete-ad-support-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

/* Сообщение об ошибке */
.delete-ad-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.delete-ad-error-visible {
    opacity: 1;
    transform: translateY(0);
}

.delete-ad-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.delete-ad-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
    flex: 1;
}

/* Анимации */
@keyframes delete-ad-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delete-ad-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект предупреждения */
.delete-ad-warning-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.delete-ad-warning-particle {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: delete-ad-warning-fall linear forwards;
}

@keyframes delete-ad-warning-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .delete-ad-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .delete-ad-container {
        width: 100%;
        padding: 30px 20px;
    }

    .delete-ad-title {
        font-size: 1.8rem;
    }

    .delete-ad-subtitle {
        font-size: 1.1rem;
    }

    .delete-ad-consequences-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .delete-ad-alternatives-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .delete-ad-preview-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .delete-ad-preview-image {
        width: 100%;
        height: 200px;
    }

    .delete-ad-preview-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .delete-ad-confirmation-checkbox {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }


    .delete-ad-confirm-btn,
    .delete-ad-cancel-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .delete-ad-icon {
        width: 80px;
        height: 80px;
    }

    .delete-ad-icon i {
        font-size: 40px;
    }

    .delete-ad-title {
        font-size: 1.6rem;
    }

    .delete-ad-subtitle {
        font-size: 1rem;
    }

    .delete-ad-warning-title,
    .delete-ad-consequences-header h3,
    .delete-ad-preview-header h3,
    .delete-ad-alternatives-header h3 {
        font-size: 1.3rem;
    }

    .delete-ad-warning-text {
        font-size: 0.95rem;
    }

    .delete-ad-preview-title {
        font-size: 1.2rem;
    }

    .delete-ad-preview-description {
        font-size: 0.9rem;
    }

    .delete-ad-support-info h4 {
        font-size: 1rem;
    }

    .delete-ad-support-info p {
        font-size: 0.9rem;
    }
}



/* ============================================= */
/* === CART.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.cart-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

/* Заголовок корзины */
.cart-title {
    color: white;
    font-size: 32px;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-title i {
    color: #667eea;
}

.cart-items-count {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}


/* Контейнер корзины с товарами */
.cart-container {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.cart-items-section {
    flex: 2;
}

.cart-summary-section {
    flex: 1;
    min-width: 350px;
}

/* Заголовок раздела товаров */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-header h2 {
    color: white;
    font-size: 24px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-header h2 i {
    color: #667eea;
}

.cart-select-all {
    background: none;
    border: 1px solid rgba(102, 126, 234, 0.5);
    color: #667eea;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0s ease;
}

.cart-select-all:hover {
    background-color: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

/* Карточка товара в корзине */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.cart-item-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Чекбокс выбора товара */
.cart-item-select {
    flex-shrink: 0;
}

.cart-item-checkbox {
    display: none;
}

.cart-item-checkbox + label {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(102, 126, 234, 0.7);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: all 0s ease;
}

.cart-item-checkbox:checked + label {
    background-color: #667eea;
    border-color: #667eea;
}

.cart-item-checkbox:checked + label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Изображение товара */
.cart-item-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.cart-item-image a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-image img:hover {
    transform: scale(1.05);
}

.cart-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.cart-no-image i {
    font-size: 40px;
}

/* Информация о товаре */
.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title {
    color: white;
    font-size: 18px;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.cart-item-title a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cart-item-title a:hover {
    color: #667eea;
}

.cart-item-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.cart-item-owner,
.cart-item-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.cart-item-owner i,
.cart-item-location i {
    color: #667eea;
    font-size: 12px;
}

.cart-item-period {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
}

.period-label {
    font-weight: 500;
}

.period-value {
    color: #FFD166;
    font-weight: bold;
}

/* Дополнительные стили для бронирования */

.cart-booking-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffd700;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.cart-booking-expired {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffd700;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.cart-booking-timer {
    font-weight: bold;
    color: #ffd700;
}


/* Управление товаром */
.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 180px;
}

/* Стили для информации о количестве (вместо кнопок +/-) */
.cart-item-quantity-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.quantity-value {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

/* Стили для изменения количества товара */
.quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: scale(1.1);
}

.quantity-btn.minus {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.quantity-btn.minus:hover {
    background: linear-gradient(135deg, #e084f0, #e04a5f);
}

.quantity-input {
    width: 60px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.quantity-input:focus {
    outline: none;
    border-color: #667eea;
}

/* Убедимся, что цена отображается корректно */
.cart-item-price .price-total {
    font-size: 22px;
    color: #FFD166;
    font-weight: bold;
}

.price-per-day {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 5px;
}

.price-total {
    display: block;
    color: #FFD166;
    font-size: 22px;
    font-weight: bold;
}


/* Форма удаления */
.cart-item-remove-form {
    margin: 0;
    padding: 0;
}


.cart-item-remove {
    width: 40px;
    height: 40px;
    border: none;
    background-color: rgba(255, 107, 107, 0.1);
    color: #FF6B6B;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0s ease;
}

.cart-item-remove:hover {
    background-color: rgba(255, 107, 107, 0.2);
    transform: scale(1.1);
}

/* Итоговая карточка */
.cart-summary-card {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
    position: sticky;
    top: 100px;
}

.cart-summary-card h2 {
    color: white;
    font-size: 22px;
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-summary-card h2 i {
    color: #667eea;
}

.summary-details {
    margin-bottom: 25px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

.summary-row.discount {
    color: #20c997;
}

.summary-row.total {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 20px;
    font-weight: bold;
}

#totalAmount {
    color: #FFD166;
    font-size: 28px;
}

.summary-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checkout-btn,
.continue-shopping-btn {
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.checkout-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.checkout-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.checkout-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.continue-shopping-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.continue-shopping-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}


/* Стили для отключенной кнопки оплаты */
#checkoutBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: linear-gradient(135deg, #a0a0a0, #808080);
}

#checkoutBtn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* Промокод */
.cart-promo {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-promo h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-promo h3 i {
    color: #f093fb;
}

.promo-input {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.promo-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 8px;
    font-size: 16px;
}

.promo-input input:focus {
    outline: none;
    border-color: #667eea;
}

.apply-promo-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.apply-promo-btn:hover {
    background: linear-gradient(135deg, #e084f0, #e04a5f);
    transform: translateY(-2px);
}

.promo-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 0;
    font-style: italic;
}

/* Информация о безопасности */
.cart-security-info {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.security-item:last-child {
    margin-bottom: 0;
}

.security-item i {
    font-size: 24px;
    color: #667eea;
    flex-shrink: 0;
}

.security-item h4 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 16px;
}

.security-item p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
}

/* Рекомендации */
.cart-recommendations {
    margin-top: 50px;
}

.cart-recommendations h2 {
    color: white;
    font-size: 24px;
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-recommendations h2 i {
    color: #f5576c;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.recommendation-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recommendation-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.recommendation-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.recommendation-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.recommendation-no-image {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    color: rgba(255, 255, 255, 0.5);
}

.recommendation-no-image i {
    font-size: 40px;
}

.recommendation-info {
    padding: 15px;
}

.recommendation-info h4 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recommendation-price {
    color: #FFD166;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Пустая корзина */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
}

.empty-cart-icon {
    position: relative;
    margin-bottom: 40px;
}

.empty-cart-icon i {
    font-size: 120px;
    color: rgba(255, 255, 255, 0.2);
}

.empty-cart-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.floating-clothes {
    position: relative;
    width: 100%;
    height: 100%;
}

.floating-clothes span {
    position: absolute;
    font-size: 40px;
    animation: clothesFloat 3s ease-in-out infinite;
}

.floating-clothes span:nth-child(1) {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.floating-clothes span:nth-child(2) {
    top: 60%;
    left: 20%;
    animation-delay: 0.5s;
}

.floating-clothes span:nth-child(3) {
    top: 40%;
    left: 70%;
    animation-delay: 1s;
}

.floating-clothes span:nth-child(4) {
    top: 70%;
    left: 60%;
    animation-delay: 1.5s;
}

@keyframes clothesFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

.cart-empty h2 {
    color: white;
    font-size: 36px;
    margin: 0 0 15px 0;
}

.cart-empty p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.empty-cart-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.browse-categories-btn,
.go-home-btn {
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.browse-categories-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.browse-categories-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.go-home-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.go-home-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.empty-cart-tips {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.empty-cart-tips h3 {
    color: white;
    font-size: 22px;
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.empty-cart-tips h3 i {
    color: #FFD166;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.tip-card {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.tip-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-5px);
}

.tip-card i {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 15px;
    display: block;
}

.tip-card h4 {
    color: white;
    font-size: 16px;
    margin: 0 0 10px 0;
}

.tip-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

/* Модальное окно удаления */
.cart-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    animation: modalFade 0.3s ease;
}

@keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.modal-content h3 {
    color: white;
    font-size: 22px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-content h3 i {
    color: #FF6B6B;
}

.modal-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.modal-buttons {
    display: flex;
    gap: 15px;
}

.modal-confirm,
.modal-cancel {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.modal-confirm {
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: white;
}

.modal-confirm:hover {
    background: linear-gradient(135deg, #E04A4A, #FF6B6B);
    transform: translateY(-2px);
}

.modal-cancel {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-cancel:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Адаптивность */
@media (max-width: 1200px) {
    .cart-container {
        flex-direction: column;
    }

    .cart-summary-section {
        min-width: auto;
    }

    .cart-summary-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .cart-page {
        margin: 80px 15px 40px;
        padding: 0;
    }

    .cart-title {
        font-size: 28px;
    }

    .cart-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cart-item-image {
        width: 100%;
        height: 200px;
    }

    .cart-item-controls {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cart-item-price {
        text-align: center;
    }

    .empty-cart-actions {
        flex-direction: column;
        align-items: center;
    }

    .browse-categories-btn,
    .go-home-btn {
        width: 100%;
        max-width: 300px;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cart-item-controls {
        flex-direction: column;
        gap: 10px;
    }

    .modal-buttons {
        flex-direction: column;
    }
}


/* ============================================= */
/* === CHECKOUT_PAGE.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.checkout-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 50vh;
}


/* Основной контент */
.checkout-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.payment-checkout-container {
    width: 800px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.checkout-header {
    margin-bottom: 40px;
}

.payment-checkout-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 30px rgba(102, 126, 234, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.1);
    position: relative;
}

@keyframes checkout-cart-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(10deg);
    }
    75% {
        transform: translateY(-5px) rotate(-10deg);
    }
}

.payment-checkout-icon i {
    font-size: 50px;
    color: white;
}

.payment-checkout-title {
    color: white;
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: checkout-title-shift 3s ease infinite;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes checkout-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.checkout-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Основная информация о заказе */
.checkout-order-summary {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.checkout-summary-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.checkout-summary-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.checkout-summary-header i {
    color: #667eea;
    font-size: 24px;
}

.checkout-summary-header h3 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

.checkout-summary-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.checkout-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkout-summary-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.checkout-summary-value {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.checkout-order-number {
    color: #FFD166;
    background: rgba(255, 209, 102, 0.1);
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
}

.checkout-items-count {
    color: #4ECDC4;
}

.checkout-total-amount {
    color: #FF6B6B;
    font-size: 1.3rem !important;
    transition: all 0.3s ease;
}

@keyframes checkout-total-pulse {
    0%, 100% {
        background: rgba(255, 107, 107, 0.1);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
    50% {
        background: rgba(255, 107, 107, 0.2);
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
    }
}

.checkout-total-pulse {
    animation: checkout-total-pulse 1s ease;
}

/* Детали заказа */
.payment-order-details {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.checkout-details-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.checkout-details-header i {
    color: #667eea;
    font-size: 24px;
}

.checkout-details-header h3 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

.checkout-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checkout-item-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
}

@keyframes checkout-item-slide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.checkout-item-animate {
    animation: checkout-item-slide 0.5s ease forwards;
}

.checkout-item-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(5px);
}

.checkout-item-info {
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
}

.checkout-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.checkout-item-icon i {
    font-size: 18px;
    color: white;
}

.checkout-item-content {
    flex: 1;
}

.checkout-item-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.checkout-item-meta {
    display: flex;
    gap: 20px;
    align-items: center;
}

.checkout-item-days,
.checkout-item-price {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.checkout-item-days i {
    color: #4ECDC4;
}

.checkout-item-price i {
    color: #FFD166;
}

/* Тестовое уведомление */
.checkout-demo-notice {
    background: linear-gradient(135deg,
        rgba(155, 93, 229, 0.1),
        rgba(147, 51, 234, 0.05));
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(155, 93, 229, 0.2);
    display: flex;
    gap: 20px;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.checkout-demo-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-demo-icon i {
    font-size: 24px;
    color: white;
}

.checkout-demo-content {
    flex: 1;
    text-align: left;
}

.checkout-demo-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.checkout-demo-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.checkout-demo-hint {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px !important;
}

.checkout-demo-hint i {
    color: #9B5DE5;
}

/* Кнопки оплаты */
.payment-checkout-actions {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.payment-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-pay-btn,
.payment-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.payment-pay-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.payment-pay-btn::before,
.payment-back-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.payment-pay-btn:hover::before,
.payment-back-btn:hover::before {
    left: 100%;
}

.payment-pay-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.4);
}

.payment-back-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.payment-back-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(108, 117, 125, 0.4);
}

.payment-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.payment-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: payment-button-spin 0.8s linear infinite;
}

@keyframes payment-button-spin {
    to { transform: rotate(360deg); }
}

.payment-button-loading .payment-button-loader {
    display: block;
}

.payment-button-loading .payment-button-text {
    opacity: 0.7;
}

.payment-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 15px;
}

.payment-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.payment-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Информация о безопасности */
.payment-security-info {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.checkout-security-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.checkout-security-header i {
    color: #FFD166;
    font-size: 24px;
}

.checkout-security-header h3 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

.checkout-security-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.checkout-security-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes checkout-security-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-security-animate {
    animation: checkout-security-appear 0.5s ease forwards;
}

.checkout-security-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.checkout-security-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-security-icon i {
    font-size: 24px;
    color: white;
}

.checkout-security-content h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.checkout-security-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Дополнительная информация */
.checkout-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: checkout-fade-up 0.6s ease forwards;
    animation-delay: 1.2s;
}

.checkout-timing-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 20px;
    align-items: center;
    text-align: left;
}

.checkout-timing-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4ECDC4, #44A08D);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-timing-icon i {
    font-size: 24px;
    color: white;
}

.checkout-timing-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.checkout-timing-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.checkout-help-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.checkout-help-info h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-help-info h4 i {
    color: #4ECDC4;
}

.checkout-help-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.checkout-help-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.checkout-help-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

/* Сообщение об ошибке */
.checkout-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: checkout-error-appear 0.3s ease;
}

@keyframes checkout-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.checkout-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
    flex: 1;
}

/* Анимации */
@keyframes checkout-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект летящих элементов */
.checkout-flying-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.checkout-flying-element {
    position: absolute;
    top: -50px;
    font-size: 40px;
    opacity: 0;
    animation: checkout-element-fly linear forwards;
    pointer-events: none;
    user-select: none;
}

@keyframes checkout-element-fly {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .checkout-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .payment-checkout-container {
        width: 100%;
        padding: 30px 20px;
    }

    .payment-checkout-title {
        font-size: 1.8rem;
    }

    .checkout-subtitle {
        font-size: 1.1rem;
    }

    .checkout-summary-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .checkout-security-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .checkout-demo-notice {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .checkout-demo-content {
        text-align: center;
    }

    .checkout-timing-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .checkout-timing-content {
        text-align: center;
    }

    .payment-pay-btn,
    .payment-back-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .payment-checkout-icon {
        width: 80px;
        height: 80px;
    }

    .payment-checkout-icon i {
        font-size: 40px;
    }

    .payment-checkout-title {
        font-size: 1.6rem;
    }

    .checkout-subtitle {
        font-size: 1rem;
    }

    .checkout-summary-header h3,
    .checkout-details-header h3,
    .checkout-security-header h3 {
        font-size: 1.2rem;
    }

    .checkout-item-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .checkout-item-meta {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .checkout-help-info h4 {
        font-size: 1rem;
    }

    .checkout-help-info p {
        font-size: 0.9rem;
    }
}


/* ============================================= */
/* === PAYMENT_SUCCESS.HTML === */
/* ============================================= */


/* Основной контейнер страницы */
.payment-success-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: calc(100vh - 190px);
}


/* Основной контент */
.payment-success-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.payment-success-container {
    width: 850px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.payment-success-header {
    margin-bottom: 40px;
}

.payment-success-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 40px rgba(40, 167, 69, 0.6),
        inset 0 0 40px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.payment-success-icon::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.4;
    animation: payment-success-icon-glow 2s ease-in-out infinite;
}

@keyframes payment-success-icon-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

@keyframes payment-success-icon-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(10deg);
    }
    75% {
        transform: scale(1.05) rotate(-10deg);
    }
}

.payment-success-icon i {
    font-size: 70px;
    color: white;
}

.payment-success-title {
    color: white;
    font-size: 2.3rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #28a745, #20c997, #06D6A0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% 300%;
    animation: payment-success-title-shift 3s ease infinite;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes payment-success-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.payment-success-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Основная информация о платеже */
.payment-success-message {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: payment-success-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.payment-success-status-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #FFD166, #FFB347);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.payment-success-status-icon i {
    font-size: 35px;
    color: white;
}

.payment-success-status-message {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.payment-success-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 25px 0;
    max-width: 600px;
    margin: 0 auto 25px auto;
}

.payment-success-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.payment-success-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes payment-detail-slide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-detail-animate {
    animation: payment-detail-slide 0.6s ease forwards;
}

.payment-success-detail-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.payment-success-detail-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-success-detail-icon i {
    font-size: 24px;
    color: white;
}

.payment-success-detail-content h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.payment-success-detail-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

.payment-success-order-number {
    color: #FFD166;
    background: rgba(255, 209, 102, 0.1);
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

@keyframes payment-success-number-pulse {
    0%, 100% {
        background: rgba(255, 209, 102, 0.1);
        box-shadow: 0 0 0 rgba(255, 209, 102, 0);
    }
    50% {
        background: rgba(255, 209, 102, 0.2);
        box-shadow: 0 0 15px rgba(255, 209, 102, 0.3);
    }
}

.payment-success-number-pulse {
    animation: payment-success-number-pulse 1s ease;
}

.payment-success-payment-id {
    color: #4ECDC4;
}

.payment-success-total-amount {
    color: #FF6B6B;
    font-size: 1.2rem !important;
}

.payment-success-time-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}

.payment-success-time-info i {
    color: #FFD166;
    font-size: 20px;
}

.payment-success-time-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
}

.payment-success-time-info strong {
    color: white;
}

/* Статус заказа */
.payment-success-order-status {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: payment-success-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.payment-success-status-title {
    color: white;
    font-size: 1.6rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.payment-success-status-title i {
    color: #4ECDC4;
    font-size: 2rem;
}

.payment-success-status-timeline {
    position: relative;
    padding-left: 40px;
}

.payment-success-status-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 1px;
}

.payment-success-status-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

@keyframes payment-success-step-slide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.payment-success-step-visible {
    animation: payment-success-step-slide 0.6s ease forwards;
}

.payment-success-status-step:last-child {
    margin-bottom: 0;
}

.payment-success-step-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.payment-success-step-active .payment-success-step-icon {
    background: linear-gradient(135deg, #28a745, #20c997);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.4);
}

.payment-success-step-content {
    flex: 1;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.payment-success-status-step:hover .payment-success-step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(5px);
}

.payment-success-step-content h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.payment-success-step-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.payment-success-step-time {
    color: #FFD166;
    font-size: 0.85rem;
    font-style: italic;
}

/* Что дальше */
.payment-whats-next {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: payment-success-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.payment-whats-next-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.payment-whats-next-header i {
    color: #FFD166;
    font-size: 2rem;
}

.payment-whats-next-header h3 {
    color: white;
    font-size: 1.6rem;
    margin: 0;
}

.payment-whats-next-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.payment-whats-next-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes payment-whats-next-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-whats-next-animate {
    animation: payment-whats-next-appear 0.5s ease forwards;
}

.payment-whats-next-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.payment-whats-next-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.payment-whats-next-icon i {
    font-size: 28px;
    color: white;
}

.payment-whats-next-card h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.payment-whats-next-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки действий */
.payment-success-actions {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: payment-success-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.payment-shop-btn,
.payment-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.payment-shop-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.payment-shop-btn::before,
.payment-home-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.payment-shop-btn:hover::before,
.payment-home-btn:hover::before {
    left: 100%;
}

.payment-shop-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

.payment-home-btn {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
}

.payment-home-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.payment-success-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.payment-success-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 15px;
}

.payment-success-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.payment-success-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Дополнительная информация */
.payment-success-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: payment-success-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.payment-success-support-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 20px;
    align-items: center;
    text-align: left;
}

.payment-success-support-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4ECDC4, #44A08D);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-success-support-icon i {
    font-size: 24px;
    color: white;
}

.payment-success-support-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.payment-success-support-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.payment-success-support-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.payment-success-support-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

.payment-success-reminder {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.payment-success-reminder h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-success-reminder h4 i {
    color: #FFD166;
}

.payment-success-reminder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.payment-success-reminder-list li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.payment-success-reminder-list li:before {
    content: '•';
    color: #FFD166;
    font-size: 1.2rem;
    line-height: 1;
}

/* Анимации */
@keyframes payment-success-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-success-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект конфетти */
.payment-success-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.payment-success-confetti-piece {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: payment-success-confetti-fall linear forwards;
}

@keyframes payment-success-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Эффект летящих элементов */
.payment-success-flying-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.payment-success-flying-element {
    position: absolute;
    top: -50px;
    font-size: 40px;
    opacity: 0;
    animation: payment-success-element-fly linear forwards;
    pointer-events: none;
    user-select: none;
}

@keyframes payment-success-element-fly {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .payment-success-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .payment-success-container {
        width: 100%;
        padding: 30px 20px;
    }

    .payment-success-title {
        font-size: 1.8rem;
    }

    .payment-success-subtitle {
        font-size: 1.1rem;
    }

    .payment-success-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .payment-success-status-timeline {
        padding-left: 30px;
    }

    .payment-success-status-timeline::before {
        left: 15px;
    }

    .payment-success-status-step {
        flex-direction: column;
        gap: 15px;
    }

    .payment-success-step-content {
        text-align: center;
    }

    .payment-whats-next-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .payment-success-support-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .payment-success-support-content {
        text-align: center;
    }

    .payment-shop-btn,
    .payment-home-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .payment-success-icon {
        width: 100px;
        height: 100px;
    }

    .payment-success-icon i {
        font-size: 60px;
    }

    .payment-success-title {
        font-size: 1.6rem;
    }

    .payment-success-subtitle {
        font-size: 1rem;
    }

    .payment-success-status-title,
    .payment-whats-next-header h3 {
        font-size: 1.3rem;
    }

    .payment-success-status-message {
        font-size: 1.3rem;
    }

    .payment-success-description {
        font-size: 0.95rem;
    }

    .payment-success-detail-content h4 {
        font-size: 0.9rem;
    }

    .payment-success-detail-content p {
        font-size: 1rem;
    }

    .payment-success-reminder h4 {
        font-size: 1rem;
    }

    .payment-success-reminder-list li {
        font-size: 0.85rem;
    }
}


/* ============================================= */
/* === FAKE_PAYMENT_EMAIL.HTML === */
/* ============================================= */

/* Контейнер с регулируемыми отступами */
.fake-payment-email-container {
    margin: 30px 200px 100px 200px;
    padding: 0;
    min-height: calc(100vh - 210px);
    box-sizing: border-box;
    background-color: #ffffff;
    background-image:
        linear-gradient(90deg,
            rgba(240, 240, 240, 0.3) 1px, transparent 1px),
        linear-gradient(rgba(240, 240, 240, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Заголовок демо-режима */
.fake-payment-email-demo-alert {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #155724;
    font-size: 14px;
}

.fake-payment-email-demo-alert i {
    font-size: 18px;
}

/* Основной контейнер письма */
.fake-payment-email-client-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Заголовок email-клиента */
.fake-payment-email-client-header {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fake-payment-email-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fake-payment-email-header-left i {
    font-size: 18px;
}

.fake-payment-email-subject {
    font-weight: bold;
    font-size: 16px;
}

.fake-payment-email-date {
    font-size: 14px;
    opacity: 0.8;
}

/* Панель инструментов */
.fake-payment-email-toolbar {
    background-color: #f8f9fa;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e9ecef;
}

.fake-payment-email-toolbar-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 5px 10px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

.fake-payment-email-toolbar-btn:hover {
    background-color: #e9ecef;
}

.fake-payment-email-delete-btn {
    color: #dc3545;
    border-color: #dc3545;
}

.fake-payment-email-delete-btn:hover {
    background-color: #dc3545;
    color: white;
}

.fake-payment-email-toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: #dee2e6;
    margin: 0 5px;
}

/* Заголовки письма */
.fake-payment-email-headers {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.fake-payment-email-header-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
}

.fake-payment-email-header-label {
    width: 60px;
    font-weight: bold;
    color: #6c757d;
}

.fake-payment-email-header-value {
    flex-grow: 1;
    color: #495057;
}

.fake-payment-email-subject-value {
    color: #28a745;
    font-weight: bold;
}

/* Содержимое письма */
.fake-payment-email-content {
    padding: 30px;
    line-height: 1.6;
    color: #333;
}

/* Логотип */
.fake-payment-email-logo {
    text-align: center;
    margin-bottom: 30px;
}

.fake-payment-email-logo-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.fake-payment-email-logo-circle i {
    font-size: 36px;
    color: white;
}

.fake-payment-email-logo-text {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.fake-payment-email-logo-subtext {
    color: #6c757d;
    font-size: 14px;
}

/* Приветствие */
.fake-payment-email-greeting {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 24px;
}

.fake-payment-email-success-badge {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 15px 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    animation: fake-payment-pulse 2s infinite;
}

.fake-payment-email-success-badge i {
    font-size: 24px;
}

@keyframes fake-payment-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fake-payment-email-intro {
    margin-bottom: 30px;
    font-size: 16px;
}

/* Информация о платеже */
.fake-payment-email-payment-info {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 25px 0;
    border-left: 4px solid #28a745;
}

.fake-payment-email-info-title {
    color: #28a745;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fake-payment-email-info-grid {
    display: grid;
    gap: 15px;
}

.fake-payment-email-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #dee2e6;
}

.fake-payment-email-info-row:last-child {
    border-bottom: none;
}

.fake-payment-email-info-label {
    font-weight: bold;
    color: #495057;
}

.fake-payment-email-info-value {
    color: #2c3e50;
    font-family: monospace;
}

.fake-payment-email-order-number {
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

.fake-payment-email-total-amount {
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
}

/* Товары в заказе */
.fake-payment-email-items {
    margin: 30px 0;
}

.fake-payment-email-items-title {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fake-payment-email-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.fake-payment-email-item-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s;
}

.fake-payment-email-item-card:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.fake-payment-email-item-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.fake-payment-email-item-details {
    flex-grow: 1;
}

.fake-payment-email-item-title {
    margin-bottom: 5px;
    font-size: 16px;
    color: #2c3e50;
}

.fake-payment-email-item-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.fake-payment-email-item-days,
.fake-payment-email-item-price {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
}

.fake-payment-email-item-price {
    color: #28a745;
    font-weight: bold;
}

.fake-payment-email-items-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #2c3e50;
    border-radius: 8px;
    color: white;
    font-size: 18px;
}

.fake-payment-email-total-label {
    font-weight: bold;
}

.fake-payment-email-total-price {
    font-weight: bold;
    color: #28a745;
    font-size: 20px;
}

/* Контакты арендодателя */
.fake-payment-email-seller-contacts {
    margin: 30px 0;
    padding: 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    color: white;
}

.fake-payment-email-contacts-title {
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.fake-payment-email-seller-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    margin-bottom: 20px;
}

.fake-payment-email-seller-avatar i {
    font-size: 48px;
    color: white;
}

.fake-payment-email-seller-name {
    color: white;
    margin-bottom: 5px;
}

.fake-payment-email-seller-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #FFD700;
}

.fake-payment-email-seller-rating span {
    color: rgba(255,255,255,0.8);
    margin-left: 5px;
}

.fake-payment-email-contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.fake-payment-email-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.fake-payment-email-contact-icon {
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fake-payment-email-contact-details h5 {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 3px;
}

.fake-payment-email-contact-link {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

.fake-payment-email-contact-link:hover {
    text-decoration: underline;
}

.fake-payment-email-seller-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 14px;
}

.fake-payment-email-seller-note i {
    font-size: 18px;
}

/* Что дальше */
.fake-payment-email-next-steps {
    margin: 30px 0;
}

.fake-payment-email-next-title {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fake-payment-email-steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fake-payment-email-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.fake-payment-email-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.fake-payment-email-step-content {
    flex-grow: 1;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.fake-payment-email-step-content h4 {
    color: #2c3e50;
    margin-bottom: 5px;
}

.fake-payment-email-step-content p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

/* Важная информация */
.fake-payment-email-important-info {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 20px;
    border-radius: 5px;
    margin: 30px 0;
}

.fake-payment-email-important-title {
    color: #856404;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fake-payment-email-important-list {
    margin: 0;
    padding-left: 20px;
    color: #856404;
}

.fake-payment-email-important-list li {
    margin-bottom: 8px;
}

/* Техническая информация */
.fake-payment-email-tech-info {
    background-color: #e7f5ff;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 14px;
}

.fake-payment-email-tech-info-item {
    margin: 5px 0;
    color: #495057;
}

/* Подпись */
.fake-payment-email-signature {
    margin-top: 40px;
}

.fake-payment-email-signature-line {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 20px 0;
}

.fake-payment-email-signature-text {
    color: #6c757d;
    margin-bottom: 5px;
}

.fake-payment-email-signature-name {
    color: #495057;
}

/* Футер email-клиента */
.fake-payment-email-footer {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fake-payment-email-footer-btn {
    background: none;
    border: 1px solid #6c757d;
    color: #6c757d;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.fake-payment-email-footer-btn:hover {
    background-color: #6c757d;
    color: white;
}

.fake-payment-email-footer-btn i {
    margin-right: 5px;
}

.fake-payment-email-footer-note {
    font-size: 12px;
    color: #6c757d;
    text-align: right;
    max-width: 300px;
}

/* Навигационные кнопки */
.fake-payment-email-navigation {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.fake-payment-email-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.fake-payment-email-home-btn {
    background-color: #6c757d;
    color: white;
}

.fake-payment-email-home-btn:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
}

.fake-payment-email-profile-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.fake-payment-email-profile-btn:hover {
    background: linear-gradient(135deg, #218838, #1e9b7a);
    transform: translateY(-2px);
}

/* Анимации */
@keyframes fake-payment-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================= */
/* === ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ FAKE_PAYMENT_EMAIL === */
/* ============================================= */

/* Центрирование приветственной секции */
.fake-payment-email-welcome-section {
    text-align: center;
    margin-bottom: 30px;
}

.fake-payment-email-welcome-section .fake-payment-email-greeting {
    text-align: center;
    margin-bottom: 20px;
}

.fake-payment-email-welcome-section .fake-payment-email-success-badge {
    display: inline-flex;
    margin: 0 auto 20px;
}

.fake-payment-email-welcome-section .fake-payment-email-intro {
    max-width: 600px;
    margin: 0 auto;
}

/* Блок с товарами и продавцами */
.fake-payment-email-items-with-sellers {
    margin: 30px 0;
}

.fake-payment-email-item-seller-block {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.fake-payment-email-item-seller-block:last-child {
    border-bottom: none;
    margin-bottom: 20px;
}


.fake-payment-email-item-details {
    flex-grow: 1;
}

.fake-payment-email-item-title {
    margin-bottom: 8px;
    font-size: 18px;
    color: #2c3e50;
}

.fake-payment-email-item-meta {
    display: flex;
    gap: 25px;
    font-size: 15px;
}

.fake-payment-email-item-days {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
}

.fake-payment-email-item-price {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

/* Обновленные стили для контактов продавца */
.fake-payment-email-seller-contacts {
    margin-left: 100px; /* Отступ под изображение товара */
    padding: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    color: white;
}

.fake-payment-email-seller-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    margin-bottom: 20px;
}

.fake-payment-email-seller-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fake-payment-email-seller-avatar i {
    font-size: 40px;
    color: white;
}

.fake-payment-email-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fake-payment-email-seller-info h4 {
    color: white;
    margin-bottom: 5px;
    font-size: 18px;
}

.fake-payment-email-seller-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #FFD700;
}

.fake-payment-email-seller-rating span {
    color: rgba(255,255,255,0.8);
    margin-left: 5px;
    font-size: 14px;
}

/* Контактные данные */
.fake-payment-email-contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.fake-payment-email-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.fake-payment-email-contact-icon {
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fake-payment-email-contact-details {
    flex-grow: 1;
}

.fake-payment-email-contact-details h5 {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 3px;
    color: rgba(255,255,255,0.9);
}

.fake-payment-email-contact-text {
    color: white;
    font-size: 13px;
    font-weight: bold;
    display: block;
}

/* Итоговая сумма */
.fake-payment-email-items-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #2c3e50;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    margin-top: 30px;
}

.fake-payment-email-total-label {
    font-weight: bold;
}

.fake-payment-email-total-price {
    font-weight: bold;
    color: #28a745;
    font-size: 22px;
}



.fake-payment-email-item-card,
.fake-payment-email-contact-item,
.fake-payment-email-step {
    animation: fake-payment-slide-in 0.5s ease-out forwards;
}

.fake-payment-email-item-card:nth-child(1) { animation-delay: 0.1s; }
.fake-payment-email-item-card:nth-child(2) { animation-delay: 0.2s; }
.fake-payment-email-item-card:nth-child(3) { animation-delay: 0.3s; }
.fake-payment-email-contact-item:nth-child(1) { animation-delay: 0.2s; }
.fake-payment-email-contact-item:nth-child(2) { animation-delay: 0.3s; }
.fake-payment-email-contact-item:nth-child(3) { animation-delay: 0.4s; }
.fake-payment-email-contact-item:nth-child(4) { animation-delay: 0.5s; }



/* ============================================= */
/* === PASSWORD_RESET_REQUEST.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.password-reset-request-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 100vh;
}

/* Основной контент */
.password-reset-request-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

/* Контейнер формы */
.password-reset-request-container {
    width: 450px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Заголовок формы */
.password-reset-request-header {
    margin-bottom: 40px;
}

.password-reset-request-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.password-reset-request-icon i {
    font-size: 40px;
    color: white;
}

.password-reset-request-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 15px 0;
}

.password-reset-request-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Сообщение об ошибке */
.password-reset-request-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: password-reset-request-error-appear 0.3s ease;
}

@keyframes password-reset-request-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-reset-request-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.password-reset-request-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
}

/* Форма */
.password-reset-request-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

/* Поле формы */
.password-reset-request-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.password-reset-request-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.password-reset-request-label i {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.password-reset-request-input-wrapper {
    position: relative;
}

.password-reset-request-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.password-reset-request-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.password-reset-request-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    color: white !important;
}

.password-reset-request-input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 0 0 12px 12px;
}

.password-reset-request-input-focused .password-reset-request-input-focus-border {
    transform: scaleX(1);
}

.password-reset-request-field-error {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-reset-request-field-error::before {
    content: '⚠';
    font-size: 14px;
}

/* Кнопка отправки */
.password-reset-request-submit-btn {
    position: relative;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
    overflow: hidden;
}

.password-reset-request-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.password-reset-request-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.password-reset-request-submit-btn:hover::before {
    left: 100%;
}

.password-reset-request-submit-btn:active {
    transform: translateY(-1px);
}

/* Демо-уведомление */
.password-reset-request-demo-notice {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.password-reset-request-demo-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #9B5DE5, #F15BB5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-reset-request-demo-icon i {
    font-size: 24px;
    color: white;
}

.password-reset-request-demo-content {
    flex: 1;
}

.password-reset-request-demo-content h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
}

.password-reset-request-demo-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Футер со ссылкой */
.password-reset-request-footer {
    margin-top: 20px;
}

.password-reset-request-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.password-reset-request-back-link:hover {
    color: white;
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* Адаптивность */
@media (max-width: 768px) {
    .password-reset-request-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .password-reset-request-container {
        width: 100%;
        padding: 30px 20px;
    }

    .password-reset-request-title {
        font-size: 1.5rem;
    }

    .password-reset-request-subtitle {
        font-size: 0.9rem;
    }

    .password-reset-request-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .password-reset-request-submit-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .password-reset-request-icon {
        width: 60px;
        height: 60px;
    }

    .password-reset-request-icon i {
        font-size: 30px;
    }

    .password-reset-request-title {
        font-size: 1.3rem;
    }

    .password-reset-request-demo-notice {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .password-reset-request-demo-icon {
        margin: 0 auto;
    }
}}


/* ============================================= */
/* === PASSWORD_RESET_SENT.HTML - ДОПОЛНИТЕЛЬНЫЕ СТИЛИ === */
/* ============================================= */

/* Выделяем email */
.password-reset-sent-email {
    color: #FFD166 !important;
    font-weight: bold;
    background: rgba(255, 209, 102, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    transition: all 0.3s ease;
}


@keyframes password-reset-sent-email-pulse {
    0%, 100% {
        background: rgba(255, 209, 102, 0.1);
        box-shadow: 0 0 0 rgba(255, 209, 102, 0);
    }
    50% {
        background: rgba(255, 209, 102, 0.2);
        box-shadow: 0 0 15px rgba(255, 209, 102, 0.3);
    }
}

.password-reset-sent-email-pulse {
    animation: password-reset-sent-email-pulse 1s ease;
}


/* Анимация для иконки письма */
@keyframes password-reset-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Дополнительный текст в демо-уведомлении */
.password-reset-demo-info {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 8px;
    display: block;
}

/* Фикс для футера */
.password-reset-request-footer {
    margin-top: 20px;
    text-align: center;
}

/* Кнопка отправки */
.password-reset-sent-submit-btn {
    position: relative;
    width: 100%;
    padding: 0;  /* Убираем padding у кнопки */
    background: transparent;  /* Прозрачный фон */
    border: none;
    cursor: pointer;
    display: block;
    margin-top: 10px;
    overflow: visible;
}


.password-reset-sent-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.01),
        transparent);
    transition: left 0.5s ease;
}

/* Создаем внутренний контейнер для анимации */
.password-reset-sent-submit-btn span.button-content {
    position: relative;  /* Важно: relative для позиционирования ::before */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0s ease;
    box-sizing: border-box;
    overflow: hidden;  /* Важно: скрываем выходящий за границы ::before */
}


/* Эффект скользящего блика - теперь на span */
.password-reset-sent-submit-btn span.button-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;  /* Начинаем дальше, чтобы эффект был плавнее */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: skewX(-15deg);  /* Наклон для более красивого эффекта */
    transition: left 0.6s ease;  /* Чуть медленнее для плавности */
}


/* Hover-эффекты для кнопки */
.password-reset-sent-submit-btn:hover span.button-content {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
}

/* Блик при наведении - теперь не выходит за границы */
.password-reset-sent-submit-btn:hover span.button-content::before {
    left: 150%;  /* Уходим вправо, но скрыто overflow: hidden */
}

.password-reset-sent-submit-btn:active {
    transform: translateY(0px);
}



/* ============================================= */
/* === FAKE_PASSWORD_EMAIL.HTML === */
/* ============================================= */

/* Контейнер с регулируемыми отступами */
.password-fake-email-container {
    margin: 30px 200px 100px 200px;
    padding: 0;
    min-height: calc(100vh - 210px);
    box-sizing: border-box;
    background-color: #ffffff;
    background-image:
        linear-gradient(90deg,
            rgba(240, 240, 240, 0.3) 1px, transparent 1px),
        linear-gradient(rgba(240, 240, 240, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Заголовок демо-режима */
.password-fake-email-demo-alert {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #856404;
    font-size: 14px;
}

.password-fake-email-demo-alert i {
    font-size: 18px;
}

/* Основной контейнер письма */
.password-fake-email-client-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Заголовок email-клиента */
.password-fake-email-client-header {
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.password-fake-email-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-fake-email-header-left i {
    font-size: 18px;
}

.password-fake-email-subject {
    font-weight: bold;
    font-size: 16px;
}

.password-fake-email-date {
    font-size: 14px;
    opacity: 0.8;
}

/* Панель инструментов */
.password-fake-email-toolbar {
    background-color: #f8f9fa;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e9ecef;
}

.password-fake-email-toolbar-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 5px 10px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

.password-fake-email-toolbar-btn:hover {
    background-color: #e9ecef;
}

.password-fake-email-delete-btn {
    color: #dc3545;
    border-color: #dc3545;
}

.password-fake-email-delete-btn:hover {
    background-color: #dc3545;
    color: white;
}

.password-fake-email-toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: #dee2e6;
    margin: 0 5px;
}

/* Заголовки письма */
.password-fake-email-headers {
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.password-fake-email-header-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
}

.password-fake-email-header-label {
    width: 60px;
    font-weight: bold;
    color: #6c757d;
}

.password-fake-email-header-value {
    flex-grow: 1;
    color: #495057;
}

.password-fake-email-subject-value {
    color: #4169E1;
    font-weight: bold;
}

/* Содержимое письма */
.password-fake-email-content {
    padding: 30px;
    line-height: 1.6;
    color: #333;
}

/* Логотип */
.password-fake-email-logo {
    text-align: center;
    margin-bottom: 30px;
}

.password-fake-email-logo-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.password-fake-email-logo-circle i {
    font-size: 36px;
    color: white;
}

/* Анимация пульсации */
.icon-pulsate {
    animation: pulsate 2s infinite ease-in-out;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.password-fake-email-logo-text {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.password-fake-email-logo-subtext {
    color: #6c757d;
    font-size: 14px;
}

/* Приветствие */
.password-fake-email-greeting {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 24px;
}

.password-fake-email-intro {
    margin-bottom: 20px;
    font-size: 16px;
}

/* Информация о запросе */
.password-fake-email-request-info {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 14px;
    border-left: 4px solid #667eea;
}

.password-fake-email-request-info p {
    margin: 5px 0;
}

/* Варианты восстановления */
.password-fake-email-options {
    margin: 30px 0;
    padding: 30px;
    text-align: center;
}



.password-fake-email-options-title {
    color: #4169E1;
    margin-bottom: 25px;
    font-size: 20px;
}

.password-fake-email-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 25px;
    margin: 25px 0;
}

.password-fake-email-option-title {
    color: #28a745;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-fake-email-option-text {
    margin-bottom: 15px;
    font-size: 15px;
}

.password-fake-email-temp-password {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-family: monospace;
    margin: 15px 0;
    color: #856404;
}

.password-fake-email-option-note {
    font-size: 14px;
    color: #6c757d;
    font-style: italic;
}

/* Кнопка активации */
.password-fake-email-activation-button-container {
    margin-bottom: 20px;
}

.password-fake-email-activation-button {
    display: inline-block;
    background-color: #28a745;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s;
    animation: password-fake-email-pulse 2s infinite;
}

.password-fake-email-activation-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.password-fake-email-activation-button i {
    margin-right: 10px;
}

@keyframes password-fake-email-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.password-fake-email-activation-link-text {
    font-size: 14px;
    color: #6c757d;
}

.password-fake-email-activation-link {
    color: #4169E1;
    word-break: break-all;
    text-decoration: none;
}

.password-fake-email-activation-link:hover {
    text-decoration: underline;
}

/* Предупреждение безопасности */
.password-fake-email-security-warning {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
    padding: 20px;
    border-radius: 5px;
    margin: 30px 0;
}

.password-fake-email-security-warning-title {
    color: #dc3545;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-fake-email-security-warning-text {
    margin: 0;
    color: #721c24;
}

/* Советы по безопасности */
.password-fake-email-security-tips {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    padding: 20px;
    border-radius: 5px;
    margin: 30px 0;
}

.password-fake-email-security-tips-title {
    color: #155724;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-fake-email-security-tips-list {
    margin: 0;
    padding-left: 20px;
    color: #155724;
}

.password-fake-email-security-tips-list li {
    margin-bottom: 8px;
}

/* Техническая информация */
.password-fake-email-tech-info {
    background-color: #e7f5ff;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 14px;
}

.password-fake-email-tech-info-item {
    margin: 5px 0;
}

/* Подпись */
.password-fake-email-signature {
    margin-top: 40px;
}

.password-fake-email-signature-line {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 20px 0;
}

.password-fake-email-signature-text {
    color: #6c757d;
    margin-bottom: 5px;
}

.password-fake-email-signature-name {
    color: #495057;
}

/* Футер email-клиента */
.password-fake-email-footer {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.password-fake-email-footer-btn {
    background: none;
    border: 1px solid #6c757d;
    color: #6c757d;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.password-fake-email-footer-btn:hover {
    background-color: #6c757d;
    color: white;
}

.password-fake-email-footer-btn i {
    margin-right: 5px;
}

.password-fake-email-footer-note {
    font-size: 12px;
    color: #6c757d;
    text-align: right;
    max-width: 300px;
}

/* Навигационные кнопки */
.password-fake-email-navigation {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.password-fake-email-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.password-fake-email-activate-btn {
    background-color: #28a745;
    color: white;
}

.password-fake-email-activate-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

.password-fake-email-back-btn {
    background-color: #6c757d;
    color: white;
}

.password-fake-email-back-btn:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
}


/* ============================================= */
/* === PASSWORD_RESET_CONFIRM.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.password-reset-confirm-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 100vh;
}


/* Основной контент */
.password-reset-confirm-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

/* Контейнер формы */
.password-reset-confirm-container {
    width: 500px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Заголовок формы */
.password-reset-confirm-header {
    margin-bottom: 40px;
}

.password-reset-confirm-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    animation: password-reset-confirm-pulse 2s ease-in-out infinite;
}

@keyframes password-reset-confirm-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
    }
}

.password-reset-confirm-icon i {
    font-size: 40px;
    color: white;
}

.password-reset-confirm-title {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 15px 0;
}

.password-reset-confirm-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Сообщение об ошибке */
.password-reset-confirm-error-message {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: password-reset-confirm-error-appear 0.3s ease;
}

@keyframes password-reset-confirm-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-reset-confirm-error-message i {
    color: #FF6B6B;
    font-size: 18px;
    flex-shrink: 0;
}

.password-reset-confirm-error-message span {
    color: #FF6B6B;
    font-size: 0.95rem;
}

/* Форма */
.password-reset-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}

/* Поля формы */
.password-reset-confirm-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.password-reset-confirm-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.password-reset-confirm-label i {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.password-reset-confirm-input-wrapper {
    position: relative;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.password-reset-confirm-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.password-reset-confirm-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.password-reset-confirm-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    color: white !important;
}

.password-reset-confirm-input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 0 0 12px 12px;
}

.password-reset-confirm-input-focused .password-reset-confirm-input-focus-border {
    transform: scaleX(1);
}

.password-reset-confirm-field-error {
    color: #FF6B6B;
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-reset-confirm-field-error::before {
    content: '⚠';
    font-size: 14px;
}

/* Требования к паролю */
.password-reset-confirm-requirements {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.password-reset-confirm-requirements-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.password-reset-confirm-requirements-header i {
    color: #FFD166;
    font-size: 20px;
}

.password-reset-confirm-requirements-header h3 {
    color: white;
    font-size: 1.1rem;
    margin: 0;
}

.password-reset-confirm-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.password-reset-confirm-requirements-list li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-reset-confirm-requirements-list li:before {
    content: '✓';
    color: #06D6A0;
    font-size: 12px;
    font-weight: bold;
}

/* Индикатор сложности пароля */
.password-reset-confirm-strength {
    margin: 20px 0;
}

.password-reset-confirm-strength-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: white;
    font-size: 0.9rem;
}

.password-reset-confirm-strength-value {
    font-weight: bold;
    transition: color 0.3s ease;
}

.password-reset-confirm-strength-meter {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.password-reset-confirm-strength-bar {
    height: 100%;
    width: 0%;
    background: #FF6B6B;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Кнопка сохранения */
.password-reset-confirm-submit-btn {
    position: relative;
    width: 100%;
    padding: 18px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
    overflow: hidden;
}

.password-reset-confirm-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.password-reset-confirm-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.password-reset-confirm-submit-btn:hover::before {
    left: 100%;
}

.password-reset-confirm-submit-btn:active {
    transform: translateY(-1px);
}

.password-reset-confirm-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.password-reset-confirm-button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: password-reset-confirm-button-spin 0.8s linear infinite;
}

@keyframes password-reset-confirm-button-spin {
    to { transform: rotate(360deg); }
}

.password-reset-confirm-button-loading .password-reset-confirm-button-loader {
    display: block;
}

.password-reset-confirm-button-loading .password-reset-confirm-button-text {
    opacity: 0.7;
}

.password-reset-confirm-button-active {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a) !important;
}


/* Адаптивность */
@media (max-width: 768px) {
    .password-reset-confirm-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .password-reset-confirm-container {
        width: 100%;
        padding: 30px 20px;
    }

    .password-reset-confirm-title {
        font-size: 1.5rem;
    }

    .password-reset-confirm-subtitle {
        font-size: 0.9rem;
    }

    .password-reset-confirm-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .password-reset-confirm-submit-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }

    .password-reset-confirm-footer {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .password-reset-confirm-icon {
        width: 60px;
        height: 60px;
    }

    .password-reset-confirm-icon i {
        font-size: 30px;
    }

    .password-reset-confirm-title {
        font-size: 1.3rem;
    }

    .password-reset-confirm-requirements {
        padding: 15px;
    }

    .password-reset-confirm-requirements-list li {
        font-size: 0.85rem;
    }
}


/* ============================================= */
/* === PASSWORD_RESET_COMPLETE.HTML === */
/* ============================================= */

/* Основной контейнер страницы */
.password-reset-complete-page {
    max-width: 1400px;
    margin: 0px auto 40px;
    padding: 0 20px;
    min-height: 100vh;
}

/* Основной контент */
.password-reset-complete-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Контейнер формы */
.password-reset-complete-container {
    width: 600px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Заголовок и иконка */
.password-reset-complete-header {
    margin-bottom: 40px;
}

.password-reset-complete-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.4);
    animation: password-reset-complete-icon-pulse 2s ease-in-out infinite;
}

@keyframes password-reset-complete-icon-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(40, 167, 69, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 50px rgba(40, 167, 69, 0.6);
    }
}

@keyframes password-reset-complete-icon-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    75% {
        transform: translateY(-5px) rotate(-5deg);
    }
}

.password-reset-complete-icon i {
    font-size: 50px;
    color: white;
}

.password-reset-complete-title {
    color: white;
    font-size: 2rem;
    margin: 0 0 15px 0;
    background: linear-gradient(45deg, #28a745, #20c997);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: password-reset-complete-title-shift 3s ease infinite;
}

@keyframes password-reset-complete-title-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.password-reset-complete-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Основное сообщение */
.password-reset-complete-message {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: password-reset-complete-fade-up 0.6s ease forwards;
    animation-delay: 0.2s;
}

.password-reset-complete-success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.password-reset-complete-success-icon i {
    font-size: 30px;
    color: white;
}

.password-reset-complete-welcome-message {
    color: white;
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.password-reset-complete-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Уведомление о безопасности */
.password-reset-complete-security-note {
    background: linear-gradient(135deg,
        rgba(32, 201, 151, 0.1),
        rgba(6, 214, 160, 0.05));
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(32, 201, 151, 0.2);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
    animation: password-reset-complete-fade-up 0.6s ease forwards;
    animation-delay: 0.4s;
}

.password-reset-complete-security-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #20c997, #06d6a0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-reset-complete-security-icon i {
    font-size: 24px;
    color: white;
}

.password-reset-complete-security-content {
    flex: 1;
    text-align: left;
}

.password-reset-complete-security-content h4 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.password-reset-complete-security-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 15px 0;
    font-size: 0.95rem;
}

.password-reset-complete-security-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-reset-complete-security-tips li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-reset-complete-security-tips li:before {
    content: '✓';
    color: #20c997;
    font-size: 12px;
    font-weight: bold;
}

/* Дальнейшие действия */
.password-reset-complete-actions {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: password-reset-complete-fade-up 0.6s ease forwards;
    animation-delay: 0.6s;
}

.password-reset-complete-actions-title {
    color: white;
    font-size: 1.4rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.password-reset-complete-actions-title i {
    color: #FFD166;
    font-size: 1.8rem;
}

.password-reset-complete-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.password-reset-complete-action-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.password-reset-complete-action-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.password-reset-complete-action-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-reset-complete-action-icon i {
    font-size: 24px;
    color: white;
}

.password-reset-complete-action-card h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 10px 0;
}

.password-reset-complete-action-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Кнопки действий */
.password-reset-complete-buttons {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: password-reset-complete-fade-up 0.6s ease forwards;
    animation-delay: 0.8s;
}

.password-reset-complete-login-btn,
.password-reset-complete-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.password-reset-complete-login-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.password-reset-complete-login-btn::before,
.password-reset-complete-home-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    transition: left 0.5s ease;
}

.password-reset-complete-login-btn:hover::before,
.password-reset-complete-home-btn:hover::before {
    left: 100%;
}

.password-reset-complete-login-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

.password-reset-complete-home-btn {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
}

.password-reset-complete-home-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.password-reset-complete-button-text {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.password-reset-complete-buttons-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 15px;
}

.password-reset-complete-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
}

.password-reset-complete-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Дополнительная информация */
.password-reset-complete-footer {
    opacity: 0;
    transform: translateY(20px);
    animation: password-reset-complete-fade-up 0.6s ease forwards;
    animation-delay: 1s;
}

.password-reset-complete-support-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.password-reset-complete-support-info i {
    color: #4ECDC4;
    font-size: 24px;
    flex-shrink: 0;
}

.password-reset-complete-support-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.password-reset-complete-support-link {
    color: #4ECDC4;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.password-reset-complete-support-link:hover {
    color: #FFD166;
    text-decoration: underline;
}

.password-reset-complete-quick-tips {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.password-reset-complete-quick-tips h4 {
    color: white;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-reset-complete-quick-tips h4 i {
    color: #FFD166;
}

.password-reset-complete-quick-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-reset-complete-quick-tips li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-reset-complete-quick-tips li:before {
    content: '•';
    color: #FFD166;
    font-size: 1.2rem;
}

/* Анимации */
@keyframes password-reset-complete-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-reset-complete-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease !important;
}

/* Эффект конфетти */
.password-reset-complete-celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.password-reset-complete-confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: password-reset-complete-confetti-fall linear forwards;
}

@keyframes password-reset-complete-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Плавающие звезды */
.password-reset-complete-floating-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: password-reset-complete-star-float linear infinite;
    box-shadow: 0 0 5px white;
}

@keyframes password-reset-complete-star-float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .password-reset-complete-page {
        margin: 60px auto 20px;
        padding: 0 15px;
    }

    .password-reset-complete-container {
        width: 100%;
        padding: 30px 20px;
    }

    .password-reset-complete-title {
        font-size: 1.6rem;
    }

    .password-reset-complete-subtitle {
        font-size: 1rem;
    }

    .password-reset-complete-actions-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .password-reset-complete-security-note {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .password-reset-complete-security-content {
        text-align: center;
    }

    .password-reset-complete-security-tips li {
        justify-content: center;
    }

    .password-reset-complete-login-btn,
    .password-reset-complete-home-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .password-reset-complete-icon {
        width: 80px;
        height: 80px;
    }

    .password-reset-complete-icon i {
        font-size: 40px;
    }

    .password-reset-complete-title {
        font-size: 1.4rem;
    }

    .password-reset-complete-subtitle {
        font-size: 0.9rem;
    }

    .password-reset-complete-welcome-message {
        font-size: 1.2rem;
    }

    .password-reset-complete-text {
        font-size: 0.9rem;
    }

    .password-reset-complete-support-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}


/* ============================================= */
/* === ABOUT.HTML === */
/* ============================================= */

.body-about-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.about-page {
    max-width: 1200px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.about-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* ----- ГЕРОЙ-СЕКЦИЯ ----- */
.about-hero {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.about-hero h1 {
    color: white;
    font-size: 36px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.about-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    margin: 0;
}

/* ----- СЕКЦИИ ----- */
.about-section {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-section.reverse {
    flex-direction: row-reverse;
}

.about-icon {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 48px;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    color: white;
    font-size: 28px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ----- ОСОБЕННОСТИ ----- */
.about-features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

.about-feature-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.about-feature-item i {
    font-size: 24px;
    color: #667eea;
    margin-top: 5px;
}

.about-feature-item h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.about-feature-item p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ----- СТАТИСТИКА ----- */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.about-stat-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.about-stat-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.3);
}

.about-stat-number {
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* ----- ШАГИ ----- */
.about-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.about-step:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.about-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.about-step-content h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.about-step-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ----- CTA СЕКЦИЯ ----- */
.about-cta-section {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
}

.about-cta-section h2 {
    color: white;
    font-size: 28px;
    margin-bottom: 20px;
}

.about-cta-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin-bottom: 30px;
}

.about-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.about-cta-btn {
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.about-cta-btn.primary-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.about-cta-btn.primary-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.about-cta-btn.secondary-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-cta-btn.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* ----- АНИМАЦИИ ----- */
@keyframes aboutFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.about-section {
    animation: aboutFadeIn 0.6s ease;
}

/* ----- АДАПТИВНОСТЬ ----- */
@media (max-width: 768px) {
    .about-page {
        padding: 0 15px;
    }

    .about-container {
        padding: 25px;
    }

    .about-hero h1 {
        font-size: 28px;
        flex-direction: column;
        gap: 10px;
    }

    .about-section,
    .about-section.reverse {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .about-icon {
        width: 100px;
        height: 100px;
        font-size: 40px;
    }

    .about-feature-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-cta-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-hero h1 {
        font-size: 24px;
    }

    .about-text h2 {
        font-size: 24px;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .about-stat-number {
        font-size: 28px;
    }
}

/* ----- СКРОЛЛ ----- */
.about-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.about-page ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.about-page ::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
}

.about-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}


/* ============================================= */
/* === CONTACTS.HTML === */
/* ============================================= */

.body-contacts-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.contacts-page {
    max-width: 1200px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.contacts-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* ----- ЗАГОЛОВОК ----- */
.contacts-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.contacts-header h1 {
    color: white;
    font-size: 36px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.contacts-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    margin: 0;
}

/* ----- СЕТКА КОНТАКТОВ ----- */
.contacts-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* ----- КОНТАКТНАЯ ИНФОРМАЦИЯ ----- */
.contacts-info h2,
.offices-section h2,
.contact-form-section h2,
.social-section h2 {
    color: white;
    font-size: 28px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacts-methods {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contacts-item {
    display: flex;
    gap: 25px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contacts-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: rgba(102, 126, 234, 0.3);
}

.contacts-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
}

.contacts-details {
    flex: 1;
}

.contacts-details h3 {
    color: white;
    font-size: 22px;
    margin: 0 0 20px 0;
}

/* ----- ТЕЛЕФОНЫ (ЗАГЛУШКИ) ----- */
.contacts-phone-numbers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.contacts-phone-link {
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contacts-phone-link[href="#"] {
    opacity: 0.8;
    cursor: pointer;
}

.contacts-phone-link[href="#"]:hover {
    color: #667eea;
    opacity: 1;
}

.contacts-phone-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-left: 10px;
}

.contacts-hours {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 10px;
    font-style: italic;
}

/* ----- EMAIL (ЗАГЛУШКИ) ----- */
.contacts-email-addresses {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contacts-email-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.contacts-email-link[href="#"] {
    opacity: 0.8;
    cursor: pointer;
}

.contacts-email-link[href="#"]:hover {
    color: #667eea;
    opacity: 1;
}

.contacts-email-link i {
    color: #667eea;
    width: 20px;
}

.contacts-email-addresses span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-left: 30px;
    margin-top: 5px;
}

/* ----- МЕССЕНДЖЕРЫ (ЗАГЛУШКИ) ----- */
.contacts-messengers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.contacts-messenger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-align: center;
}

.contacts-messenger-btn[href="#"] {
    opacity: 0.8;
    cursor: pointer;
}

.contacts-messenger-btn[href="#"]:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.contacts-messenger-btn i {
    font-size: 28px;
    margin-bottom: 8px;
}

.contacts-messenger-btn span {
    font-size: 14px;
    font-weight: bold;
}

.contacts-messenger-btn small {
    font-size: 11px;
    margin-top: 5px;
    opacity: 0.8;
}

/* Цвета мессенджеров */
.contacts-telegram { background-color: rgba(0, 136, 204, 0.2); border-color: rgba(0, 136, 204, 0.4); }
.contacts-telegram:hover { background-color: rgba(0, 136, 204, 0.3); }

.contacts-whatsapp { background-color: rgba(37, 211, 102, 0.2); border-color: rgba(37, 211, 102, 0.4); }
.contacts-whatsapp:hover { background-color: rgba(37, 211, 102, 0.3); }

.contacts-viber { background-color: rgba(124, 85, 157, 0.2); border-color: rgba(124, 85, 157, 0.4); }
.contacts-viber:hover { background-color: rgba(124, 85, 157, 0.3); }

.contacts-messenger { background-color: rgba(0, 132, 255, 0.2); border-color: rgba(0, 132, 255, 0.4); }
.contacts-messenger:hover { background-color: rgba(0, 132, 255, 0.3); }

.contacts-max { background-color: rgba(255, 107, 107, 0.2); border-color: rgba(255, 107, 107, 0.4); }
.contacts-max:hover { background-color: rgba(255, 107, 107, 0.3); }

/* ----- ОФИСЫ (С КАРТАМИ) ----- */
.contacts-offices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.contacts-office-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contacts-office-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.3);
}

.contacts-office-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contacts-office-header h3 {
    color: white;
    font-size: 22px;
    margin: 0;
}

.contacts-office-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    background-color: rgba(102, 126, 234, 0.2);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.4);
}

.contacts-office-badge.main {
    background-color: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    border-color: rgba(255, 193, 7, 0.4);
}

.contacts-office-details p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contacts-office-details i {
    color: #667eea;
    width: 16px;
    margin-top: 3px;
}

.contacts-office-details strong {
    color: white;
    margin-right: 5px;
}

.contacts-office-map {
    margin-top: 20px;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contacts-map-container {
    width: 100%;
    height: 100%;
}

/* ----- ФОРМА ОБРАТНОЙ СВЯЗИ (РАБОЧАЯ) ----- */
.contacts-form-section {
    color: white;
    margin-top: 20px;
}

.contacts-form {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contacts-form-group {
    margin-bottom: 25px;
}

.contacts-form-group label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.contacts-form-group input,
.contacts-form-group select,
.contacts-form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.contacts-form-group input:focus,
.contacts-form-group select:focus,
.contacts-form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.contacts-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.contacts-form-row {
    display: flex;
    gap: 20px;
}

.contacts-form-group.half {
    flex: 1;
}

.contacts-form-actions {
    text-align: center;
    margin-top: 30px;
}

.contacts-submit-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.contacts-submit-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* ----- СОЦИАЛЬНЫЕ СЕТИ (ЗАГЛУШКИ) ----- */
.contacts-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contacts-social-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 15px;
    text-decoration: none;
    color: white;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.contacts-social-card[href="#"] {
    opacity: 0.8;
    cursor: pointer;
}

.contacts-social-card[href="#"]:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.contacts-social-card i {
    font-size: 40px;
    flex-shrink: 0;
}

.contacts-social-info h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.contacts-social-info p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 14px;
}

/* Цвета соцсетей */
.contacts-vk { background-color: rgba(76, 117, 163, 0.2); border-color: rgba(76, 117, 163, 0.4); }
.contacts-vk:hover { background-color: rgba(76, 117, 163, 0.3); }

.contacts-telegram { background-color: rgba(0, 136, 204, 0.2); border-color: rgba(0, 136, 204, 0.4); }
.contacts-telegram:hover { background-color: rgba(0, 136, 204, 0.3); }

.contacts-youtube { background-color: rgba(255, 0, 0, 0.2); border-color: rgba(255, 0, 0, 0.4); }
.contacts-youtube:hover { background-color: rgba(255, 0, 0, 0.3); }

.contacts-yandex { background-color: rgba(255, 204, 0, 0.2); border-color: rgba(255, 204, 0, 0.4); }
.contacts-yandex:hover { background-color: rgba(255, 204, 0, 0.3); }

/* ----- АДАПТИВНОСТЬ ----- */
@media (max-width: 768px) {
    .contacts-container {
        padding: 25px;
    }

    .contacts-header h1 {
        font-size: 28px;
        flex-direction: column;
        gap: 10px;
    }

    .contacts-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .contacts-icon {
        margin-bottom: 15px;
    }

    .contacts-form-row {
        flex-direction: column;
        gap: 0;
    }

    .contacts-offices-grid {
        grid-template-columns: 1fr;
    }

    .contacts-social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contacts-messengers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .contacts-header h1 {
        font-size: 24px;
    }

    .contacts-info h2,
    .offices-section h2,
    .contact-form-section h2,
    .social-section h2 {
        font-size: 24px;
    }

    .contacts-social-grid {
        grid-template-columns: 1fr;
    }

    .contacts-messengers-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- СКРОЛЛ ----- */
.contacts-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.contacts-page ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.contacts-page ::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
}

.contacts-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}


/* ============================================= */
/* === REVIEWS.HTML === */
/* ============================================= */

.body-reviews-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.reviews-page {
    max-width: 1000px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.reviews-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* Заголовок */
.reviews-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.reviews-header h1 {
    color: white;
    font-size: 36px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.reviews-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    margin-bottom: 30px;
}

/* Статистика */
.reviews-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Форма добавления отзыва */
.add-review-section {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.add-review-section h2 {
    color: white;
    font-size: 24px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-review-form {
    margin-top: 20px;
}

.add-review-form .form-group {
    margin-bottom: 25px;
}

.add-review-form label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* Звездный рейтинг */
.star-rating {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.star-rating i {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.star-rating i:hover,
.star-rating i:hover ~ i,
.star-rating i.active {
    color: #FFD166;
}

.add-review-form textarea {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
    min-height: 100px;
}

.add-review-form textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.form-note {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.form-note i {
    color: #FFC107;
    font-size: 20px;
    margin-top: 2px;
}

.form-note p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.submit-review-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.submit-review-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* Приглашение войти */
.login-prompt {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.login-prompt i {
    font-size: 40px;
    color: #667eea;
}

.login-prompt p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0;
}

.login-prompt a {
    color: #667eea;
    text-decoration: none;
    font-weight: bold;
}

.login-prompt a:hover {
    text-decoration: underline;
}

/* Управление отзывами */
.reviews-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sort-controls label {
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-controls select {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
}

.sort-controls select:hover {
    border-color: #667eea;
    background-color: rgba(102, 126, 234, 0.2);
}

.sort-controls select option {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
}

.filter-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-controls label {
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
}

/* Список отзывов */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
}

.review-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.review-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-details {
    flex: 1;
}

.reviewer-name {
    color: white;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.review-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.review-date,
.review-ad-ad,
.service-review {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.review-ad-ad a {
    color: #667eea;
    text-decoration: none;
}

.review-ad-ad a:hover {
    text-decoration: underline;
}

.service-review {
    color: #FFD166;
}

.review-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-rating i {
    color: #FFD166;
    font-size: 18px;
}

.rating-value {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: bold;
}

.review-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

/* Превью объявления в отзыве */
.review-ad-ad-preview {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.review-ad-ad-preview .search-ad-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.review-ad-ad-preview .search-ad-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
}

.ad-image-small {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.ad-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-small {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.ad-info-small {
    flex: 1;
}

.ad-info-small h4 {
    color: white;
    font-size: 16px;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.ad-price-small {
    color: #FFD166;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Нет отзывов */
.no-reviews {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.no-reviews-icon {
    margin-bottom: 20px;
}

.no-reviews-icon i {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.3);
}

.no-reviews h3 {
    font-size: 24px;
    color: white;
    margin-bottom: 10px;
}

.no-reviews p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Статистика рейтингов */
.ratings-distribution {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ratings-distribution h2 {
    color: white;
    font-size: 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.distribution-chart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rating-label {
    color: white;
    font-size: 16px;
    font-weight: bold;
    width: 40px;
}

.rating-bar {
    flex: 1;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 10px;
    transition: width 1s ease;
}

.rating-count {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    width: 40px;
    text-align: right;
}

/* Адаптивность */
@media (max-width: 768px) {
    .reviews-container {
        padding: 25px;
    }

    .reviews-header h1 {
        font-size: 28px;
        flex-direction: column;
        gap: 10px;
    }

    .reviews-stats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .reviews-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .sort-controls,
    .filter-controls {
        width: 100%;
    }

    .sort-controls select {
        width: 100%;
    }

    .filter-buttons {
        justify-content: center;
    }

    .review-header {
        flex-direction: column;
        gap: 20px;
    }

    .review-rating {
        align-self: flex-start;
    }

    .review-ad-preview .ad-link {
        flex-direction: column;
        text-align: center;
    }

    .ad-image-small {
        width: 100%;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .filter-buttons {
        justify-content: space-between;
    }

    .filter-btn {
        flex: 1;
        text-align: center;
    }
}



/* ============================================= */
/* === HELP.HTML === */
/* ============================================= */

.body-help-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.help-page {
    max-width: 1200px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.help-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* ----- ПРЕДУПРЕЖДЕНИЕ О РАЗРАБОТКЕ ----- */
.help-development-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.15));
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 50px;
    padding: 15px 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #FFC107;
    font-size: 16px;
    font-weight: 500;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.1);
    animation: helpPulse 2s infinite;
}

.help-development-warning i {
    font-size: 20px;
}

.help-development-warning i:first-child {
    color: #FFC107;
}

.help-development-warning i:last-child {
    color: rgba(255, 193, 7, 0.7);
}

@keyframes helpPulse {
    0% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.1); }
    50% { box-shadow: 0 0 30px rgba(255, 193, 7, 0.2); }
    100% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.1); }
}

/* ----- ГЕРОЙ-СЕКЦИЯ ----- */
.help-hero {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.help-hero h1 {
    color: white;
    font-size: 36px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.help-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    margin-bottom: 40px;
}

/* ----- ПОИСК ----- */
.help-search-section {
    max-width: 600px;
    margin: 0 auto;
}

.help-search-form {
    display: flex;
    gap: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 5px;
}

.help-search-form:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.help-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px 20px;
    color: white;
    font-size: 16px;
    outline: none;
}

.help-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.help-search-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 12px;
    padding: 0 25px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-search-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.help-popular-questions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.6);
}

.help-popular-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.help-popular-link:hover {
    background-color: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.4);
    color: white;
}

/* ----- НАВИГАЦИЯ (УМЕНЬШЕННАЯ, В ОДИН РЯД) ----- */
.help-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.help-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
}

.help-nav-item i {
    font-size: 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.help-nav-item span {
    font-size: 14px;
    font-weight: bold;
}

.help-nav-item small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.help-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.3);
}

/* ----- ЗАГОЛОВКИ РАЗДЕЛОВ ----- */
.help-section {
    margin-bottom: 50px;
}

.help-section-title {
    color: white;
    font-size: 28px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-section-title i {
    color: #667eea;
}

/* ----- СЕТКА КАТЕГОРИЙ ----- */
.help-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.help-category {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.help-category h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-category h3 i {
    color: #667eea;
}

/* ----- СПИСОК ВОПРОСОВ ----- */
.help-questions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.help-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.help-question:hover {
    color: #667eea;
}

.help-question i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: all 0.3s ease;
}

.help-question:hover i {
    color: #667eea;
    transform: translateX(5px);
}

/* ----- FAQ АККОРДЕОН ----- */
.help-faq-section {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 50px;
}

.help-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.help-faq-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-faq-item:hover {
    border-color: rgba(102, 126, 234, 0.3);
}

.help-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.help-faq-question i {
    color: #667eea;
    transition: all 0.3s ease;
}

.help-faq-answer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}

.help-faq-item.active .help-faq-answer {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- ГАЙДЫ ----- */
.help-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.help-guide-card {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.help-guide-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.3);
}

.help-guide-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.help-guide-icon i {
    font-size: 28px;
    color: #667eea;
}

.help-guide-card h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
}

.help-guide-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.help-guide-link {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.help-guide-link:hover {
    gap: 12px;
}

/* ----- СРОЧНАЯ ПОМОЩЬ (ПОЛУПРОЗРАЧНЫЕ КНОПКИ) ----- */
.help-urgent-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 15px;
    padding: 30px;
    margin: 50px 0;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.help-urgent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

.help-urgent-item {
    text-align: center;
}

.help-urgent-item i {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 15px;
}

.help-urgent-item h4 {
    color: white;
    font-size: 18px;
    margin-bottom: 15px;
}

.help-urgent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.help-urgent-btn-transparent {
    background: rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: white;
}

.help-urgent-btn-transparent:hover {
    background: rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.8);
    transform: translateY(-3px);
}

.help-urgent-btn-transparent i {
    color: white;
    opacity: 0.9;
    margin: 0;
}

/* ----- НЕ НАШЛИ ОТВЕТ? ----- */
.help-not-found {
    margin-top: 50px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.help-not-found i {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
}

.help-not-found h3 {
    color: white;
    font-size: 24px;
    margin-bottom: 10px;
}

.help-not-found p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin-bottom: 25px;
}

.help-not-found-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.help-not-found-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* ----- ПОДДЕРЖКА (ЗАГЛУШКИ) ----- */
.help-support-section {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
}

.help-support-section h2 {
    color: white;
    font-size: 28px;
    margin-bottom: 30px;
}

.help-support-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.help-support-card {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.help-support-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

.help-support-card i {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 15px;
}

.help-support-card h4 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
}

.help-support-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 15px;
}

.help-support-link {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.help-support-link[href="#"] {
    opacity: 0.8;
    cursor: pointer;
}

.help-support-link[href="#"]:hover {
    opacity: 1;
    gap: 12px;
}

/* ----- АДАПТИВНОСТЬ ----- */
@media (max-width: 992px) {
    .help-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .help-faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .help-page {
        padding: 0 15px;
    }

    .help-container {
        padding: 25px;
    }

    .help-hero h1 {
        font-size: 28px;
        flex-direction: column;
        gap: 10px;
    }

    .help-search-form {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
    }

    .help-search-input {
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
    }

    .help-search-btn {
        padding: 15px;
        justify-content: center;
    }

    .help-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .help-category-grid {
        grid-template-columns: 1fr;
    }

    .help-support-grid {
        flex-direction: column;
        align-items: center;
    }

    .help-support-card {
        max-width: 100%;
        width: 100%;
    }

    .help-urgent-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .help-nav-grid {
        grid-template-columns: 1fr;
    }

    .help-hero h1 {
        font-size: 24px;
    }

    .help-section-title {
        font-size: 22px;
    }

    .help-popular-questions {
        flex-direction: column;
    }

    .help-development-warning {
        flex-direction: column;
        text-align: center;
        border-radius: 15px;
        padding: 20px;
    }
}

/* ----- СКРОЛЛ ----- */
.help-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.help-page ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.help-page ::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
}

.help-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}


/* ============================================= */
/* === PROFILE.HTML === */
/* ============================================= */

.profile-page {
    display: flex;
    min-height: calc(100vh - 110px);
    margin: 0px 20px 20px;
    gap: 20px;
    position: relative;
}

.profile-sidebar {
    width: 280px;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: fit-content;
    position: sticky;
    top: 80px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    order: 2;
}

.profile-content {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    order: 1;
}

/* ============================================= */
/* === КАРТОЧКИ СТАТИСТИКИ === */
/* ============================================= */

.profile-p-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.stat-p-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-height: 70px;
}

.stat-p-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
}

.stat-p-card.active {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.7);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}

.stat-p-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-p-info {
    flex: 1;
    min-width: 0;
}

.stat-p-value {
    display: block;
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.stat-p-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 3px;
    line-height: 1.3;
}

/* ============================================= */
/* === ОБЩАЯ ОБЕРТКА ДЛЯ ВСЕЙ КАРТОЧКИ === */
/* ============================================= */

.search-ad-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

.search-ad-wrapper:hover {
    transform: translateY(0px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.5);
    opacity: 1;
}

.search-ad-card {
    transition: none;
}

.search-ad-card:hover {
    transform: none !important;
}

.search-ad-link {
    transition: none;
}

.search-ad-link:hover {
    transform: none !important;
}

/* ============================================= */
/* === БЛОК СТАТУСА - ВСЕГДА СВЕРХУ === */
/* ============================================= */

.search-ad-status-container {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
    position: relative;
    transition: none;
}

/* СТАТУСЫ ОБЪЯВЛЕНИЙ */
.search-ad-status {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.search-ad-status.active {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.5);
}

.search-ad-status.pending {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.5);
}

.search-ad-status.rented-out {
    background-color: rgba(23, 162, 184, 0.25);
    color: #a8e6ff;
    border: 1px solid rgba(23, 162, 184, 0.6);
}

.search-ad-status.rented-by-me {
    background-color: rgba(111, 66, 193, 0.25);
    color: #c9b5ff;
    border: 1px solid rgba(111, 66, 193, 0.6);
}

/* НОВЫЙ СТАТУС: Забронировано */
.search-ad-status.booked {
    background-color: rgba(95, 168, 211, 0.2);
    color: #5fa8d3;
    border: 1px solid rgba(95, 168, 211, 0.5);
}

.search-ad-status.inactive {
    background-color: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
    border: 1px solid rgba(108, 117, 125, 0.5);
}

/* КНОПКИ ДЕЙСТВИЙ */
.search-ad-action-spacer {
    width: 36px;
    height: 52px;
    visibility: hidden;
    flex-shrink: 0;
}

.search-ad-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.search-ad-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 14px;
}

.search-ad-action-btn:hover {
    background-color: rgba(102, 126, 234, 0.2);
    color: white;
    transform: translateY(-2px);
}

.search-ad-action-btn.return-btn {
    color: #c9b5ff;
    border-color: #c9b5ff;
    background-color: rgba(111, 66, 193, 0.15);
}

.search-ad-action-btn.return-btn:hover {
    background-color: rgba(111, 66, 193, 0.3);
    color: #ffffff;
}

.search-ad-action-btn.activate-btn {
    color: #28a745;
    border-color: #28a745;
}

.search-ad-action-btn.activate-btn:hover {
    background-color: rgba(40, 167, 69, 0.2);
}

.search-ad-action-btn.deactivate-btn {
    color: #ffc107;
    border-color: #ffc107;
}

.search-ad-action-btn.deactivate-btn:hover {
    background-color: rgba(255, 193, 7, 0.2);
}

.search-ad-action-btn.delete-ad-btn:hover {
    background-color: rgba(255, 107, 107, 0.2) !important;
    color: #FF6B6B !important;
}

/* ДНЕЙ ОСТАЛОСЬ */
.days-remaining {
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.9;
    font-weight: normal;
    color: inherit;
}

/* НОВЫЕ СТИЛИ ДЛЯ ТАЙМЕРА */
.countdown-timer {
    font-size: 10px;
    margin-left: 5px;
    font-weight: normal;
    color: inherit;
    white-space: nowrap;
}

.countdown-timer span {
    font-weight: bold;
    color: #5fa8d3;
}

/* ============================================= */
/* === БЛОК ПОЛЬЗОВАТЕЛЯ === */
/* ============================================= */

.search-ad-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 12px;
    padding: 5px 0;
}

.search-ad-user i {
    font-size: 12px;
    color: rgba(102, 126, 234, 0.8);
}

.search-ad-user span {
    font-weight: 500;
}

/* ============================================= */
/* === FIX: ПРАВИЛЬНЫЙ OVERLAY === */
/* ============================================= */

.search-ad-image {
    position: relative;
    overflow: hidden;
}

.ad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.search-ad-wrapper:hover .ad-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: white;
    padding: 20px;
    z-index: 6;
}

.overlay-content i {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
    color: white;
}

.overlay-content span {
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: white;
}

/* ============================================= */
/* === МОДАЛЬНЫЕ ОКНА === */
/* ============================================= */

.moderation-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
    color: white;
    font-size: 26px;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.modal-close-btn {
    margin-top: 25px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    min-width: 180px;
}

.modal-close-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.modal-icon {
    font-size: 70px;
    margin-bottom: 25px;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

#moderationModal .modal-icon {
    color: #ffc107;
}

#rentedModal .modal-icon {
    color: #17a2b8;
}

#inactiveModal .modal-icon {
    color: #6c757d;
}

#rentedByMeModal .modal-icon {
    color: #6f42c1;
}

/* НОВЫЙ ЦВЕТ ДЛЯ МОДАЛЬНОГО ОКНА ЗАБРОНИРОВАННЫХ */
#bookedModal .modal-icon {
    color: #5fa8d3;
}

/* ============================================= */
/* === ОСТАЛЬНЫЕ ЭЛЕМЕНТЫ === */
/* ============================================= */

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-info {
    margin-bottom: 25px;
    text-align: center;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(102, 126, 234, 0.7);
    background-color: rgba(255, 255, 255, 0.1);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.default-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 40px;
}

.profile-details {
    margin-top: 15px;
}

.profile-username {
    color: white;
    font-size: 20px;
    margin: 0 0 8px 0;
    font-weight: bold;
}

.profile-bio {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.profile-bio-empty {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-3px);
    border-color: rgba(102, 126, 234, 0.5);
}

.menu-item.active {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.3), rgba(102, 126, 234, 0.3));
    color: white;
    border-color: rgba(50, 205, 50, 0.7);
    font-weight: bold;
}

.cart-badge {
    margin-left: auto;
    background-color: #FF6347;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}

.menu-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

.logout-item {
    color: #FF6B6B;
}

.logout-item:hover {
    background-color: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.5);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left {
    flex: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.content-header h1 {
    font-size: 28px;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ads-count {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.8);
    min-width: 60px;
}

.header-info i {
    font-size: 20px;
    color: #667eea;
}

.info-value {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.info-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.content-actions {
    margin-left: 10px;
}

.action-btn {
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.action-btn.primary-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.action-btn.primary-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.user-ads-section {
    margin-top: 40px;
}

.no-ads-message {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.no-ads-icon {
    margin-bottom: 20px;
}

.no-ads-icon i {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.3);
}

.no-ads-message h3 {
    font-size: 24px;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.no-ads-message p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* ============================================= */
/* === АДАПТИВНОСТЬ === */
/* ============================================= */

@media (max-width: 1200px) {
    .profile-stats {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1024px) {
    .profile-page {
        flex-direction: column;
    }

    .profile-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 20px;
        order: 1;
    }

    .profile-content {
        order: 2;
    }

    .profile-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-page {
        margin: 80px 10px 10px;
    }

    .profile-content {
        padding: 20px;
    }

    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .header-info {
        min-width: 50px;
    }

    .content-actions {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-ad-status-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .search-ad-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 576px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }

    .header-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .header-info {
        flex-direction: row;
        gap: 10px;
        min-width: auto;
    }

    .info-label {
        font-size: 14px;
        text-transform: none;
    }

    .search-ad-status-container {
        padding: 10px 12px;
    }

    .search-ad-status {
        font-size: 11px;
        padding: 5px 10px;
    }

    .search-ad-user {
        font-size: 13px;
    }

    .overlay-content i {
        font-size: 36px;
    }

    .overlay-content span {
        font-size: 14px;
    }
}

/* ============================================= */
/* === SAFARI-SPECIFIC FIXES === */
/* ============================================= */

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (not (-ms-accelerator:true)) and (not (-moz-appearance:none)) {
        .search-ad-wrapper {
            display: block;
        }

        .search-ad-status-container {
            display: block;
            padding: 10px 15px;
        }

        .search-ad-actions {
            display: block;
            margin-top: 10px;
            text-align: right;
        }
    }
}



/* ============================================= */
/* === PROFILE_EDIT.HTML === */
/* ============================================= */

.profile-body-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}

.profile-edit-page {
    max-width: 800px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.profile-edit-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-edit-container h1 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.form-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h2 {
    color: white;
    font-size: 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.avatar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.current-avatar {
    flex: 0 0 150px;
}

.current-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(102, 126, 234, 0.7);
}

.default-avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 60px;
    border: 3px solid rgba(102, 126, 234, 0.7);
}

.avatar-upload {
    flex: 1;
    min-width: 300px;
}

.avatar-upload input[type="file"] {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
}


.avatar-clear {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar-clear input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.avatar-clear label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
}


.avatar-upload .form-text {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-top: 8px;
}

.error {
    color: #FF6B6B;
    font-size: 14px;
    margin-top: 5px;
}

.messages {
    margin-bottom: 30px;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.5);
}

.alert-error {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

.form-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.save-btn, .cancel-btn {
    flex: 1;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.save-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.save-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.cancel-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .avatar-group {
        flex-direction: column;
        gap: 20px;
    }

    .avatar-upload {
        min-width: 100%;
    }

    .form-buttons {
        flex-direction: column;
    }
}


/* Дополнительные стили для секции смены пароля */
.password-input {
    font-family: monospace;
    letter-spacing: 2px;
}

.password-buttons {
    margin-top: 20px;
}

.password-btn {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

.password-btn:hover {
    background: linear-gradient(135deg, #6a4a9a, #5a6fd8);
}

.form-section {
    position: relative;
}

.form-section h2 i {
    color: #667eea;
}

/* Стили для разделителя между секциями */
.form-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Улучшенные стили для сообщений об ошибках */
.error {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
    padding: 8px 12px;
    margin-top: 5px;
    border-radius: 0 4px 4px 0;
    color: #ff8a8a;
}

/* Стили для подсказок */
.form-text {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-top: 5px;
    font-style: italic;
}


/* Стили для сообщений профиля */
.profile-message {
    animation: slideDown 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-message i {
    font-size: 20px;
}

.alert-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    border-left: 4px solid #28a745;
    color: #d4edda;
}

.alert-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
    border-left: 4px solid #dc3545;
    color: #f8d7da;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Убираем старые сообщения из вида, если они не относятся к профилю */
.messages .alert:not(.profile-message) {
    display: none;
}


/* ============================================= */
/* === PROFILE_SETTINGS.HTML === */
/* ============================================= */

.profile-body-settings-page {
    min-height: 100vh;
    background: transparent;
    position: relative;
    z-index: 1;
}


.profile-settings-page {
    max-width: 900px;
    margin: 0px auto 40px;
    padding: 0 20px;
}

.profile-settings-container {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-settings-container h1 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Вкладки */
.settings-tabs {
    display: flex;
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

.tab {
    flex: 1;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.tab:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.tab.active {
    background-color: rgba(102, 126, 234, 0.2);
    color: white;
    font-weight: bold;
}

.tab i {
    font-size: 24px;
}

.tab span {
    font-size: 14px;
}

/* Контент вкладок */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content h2 {
    color: white;
    font-size: 22px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Настройки */
.settings-form {
    margin-top: 20px;
}

.setting-group {
    margin-bottom: 40px;
}

.setting-group h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-info {
    flex: 1;
}

.setting-info h4 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.setting-info p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Переключатель */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #667eea;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Кнопки безопасности */
.security-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.security-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.security-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(102, 126, 234, 0.3);
}

.security-btn i {
    font-size: 30px;
    color: #667eea;
    width: 50px;
    text-align: center;
}

.security-info {
    flex: 1;
}

.security-info h4 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.security-info p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Действия с аккаунтом */
.account-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-warning {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 193, 7, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 193, 7, 0.3);
    margin-bottom: 10px;
}

.account-warning i {
    font-size: 30px;
    color: #FFC107;
    width: 50px;
    text-align: center;
}

.account-warning h4 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.account-warning p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.account-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.account-btn.danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

.account-btn.danger:hover {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.5);
}

.account-btn.danger i {
    color: #dc3545;
}

.account-btn i {
    font-size: 30px;
    color: #667eea;
    width: 50px;
    text-align: center;
}

.account-info {
    flex: 1;
}

.account-info h4 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.account-info p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Кнопки форм */
.form-buttons {
    margin-top: 40px;
}

.save-btn {
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    width: 100%;
}

.save-btn:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4a9a);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}


/* ===== PROFILE SETTINGS MODALS ===== */

/* Модальные окна */
.ps-custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: psFadeIn 0.3s ease;
}

@keyframes psFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ps-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #4a4a8c;
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    animation: psSlideIn 0.4s ease;
}

@keyframes psSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ps-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #4a4a8c;
    padding-bottom: 15px;
}

.ps-modal-header i {
    font-size: 2.2em;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.ps-modal-header.ps-warning i {
    color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.ps-modal-header.ps-danger i {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

.ps-modal-header h3 {
    margin: 0;
    color: #00ffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    letter-spacing: 1px;
}

.ps-modal-body {
    margin-bottom: 25px;
    color: #fff;
}

.ps-modal-body p {
    margin: 10px 0;
    line-height: 1.6;
    font-size: 1.1em;
}

.ps-modal-body ul {
    margin: 15px 0;
    padding-left: 20px;
    list-style-type: none;
}

.ps-modal-body li {
    margin: 10px 0;
    color: #ccc;
    padding-left: 25px;
    position: relative;
}

.ps-modal-body li:before {
    content: "•";
    color: #00ffff;
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -5px;
}

.ps-warning-text {
    color: #ffaa00;
    font-weight: bold;
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 170, 0, 0.1);
    border-left: 4px solid #ffaa00;
    border-radius: 0 8px 8px 0;
}

.ps-danger-text {
    color: #ff4444;
    font-weight: bold;
    font-size: 1.2em;
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 68, 68, 0.1);
    border-left: 4px solid #ff4444;
    border-radius: 0 8px 8px 0;
}

.ps-password-confirm {
    margin-top: 25px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid #4a4a8c;
}

.ps-password-confirm label {
    display: block;
    margin-bottom: 10px;
    color: #00ffff;
    font-weight: 600;
    font-size: 1.1em;
}

.ps-password-confirm input {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #4a4a8c;
    border-radius: 10px;
    color: #fff;
    font-size: 1.1em;
    transition: all 0.3s;
}

.ps-password-confirm input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    background: rgba(0, 255, 255, 0.1);
}

.ps-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

.ps-modal-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-cancel-btn {
    background: transparent;
    border: 2px solid #4a4a8c;
    color: #fff;
}

.ps-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00ffff;
    transform: translateY(-2px);
}

.ps-confirm-btn {
    background: linear-gradient(135deg, #00ffff, #0088ff);
    color: #000;
    border: 2px solid transparent;
}

.ps-confirm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
}

.ps-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ps-deactivate-btn {
    background: linear-gradient(135deg, #ffaa00, #ff8800);
    color: #000;
}

.ps-delete-btn {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: #fff;
}

.ps-error-message {
    color: #ff4444;
    font-size: 0.95em;
    margin-top: 10px;
    padding: 8px;
    background: rgba(255, 68, 68, 0.2);
    border-radius: 6px;
    display: none;
}

.ps-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #00ffff;
    animation: psSpin 1s ease-in-out infinite;
}

@keyframes psSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .ps-modal-content {
        padding: 20px;
        width: 95%;
    }

    .ps-modal-footer {
        flex-direction: column;
    }

    .ps-modal-btn {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 768px) {
    .settings-tabs {
        flex-direction: column;
    }

    .tab {
        padding: 15px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .switch {
        align-self: flex-end;
    }
}



/* ============================================= */
/* === COSMOS.HTML === */
/* ============================================= */

/* Специальные стили только для космической страницы */
body.cosmos-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    font-family: 'Arial', 'Helvetica', sans-serif;
}

/* ===== СТАТИЧНЫЕ ЗВЕЗДЫ ===== */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 0;
}

.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    opacity: var(--opacity);
    width: var(--size);
    height: var(--size);
    top: var(--y);
    left: var(--x);
    box-shadow: 0 0 var(--glow) rgba(255, 255, 255, 0.8);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ===== ТУННЕЛЬНЫЕ ЗВЕЗДЫ ===== */
.tunnel-stars-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}


/* ===== ТУМАННОСТИ COSMOS ===== */
.nebulae-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: nebula-drift 40s infinite linear;
}

@keyframes nebula-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    25% { transform: translate(50px,30px) scale(1.35); }
    50% { transform: translate(-30px,60px) scale(0.8); }
    75% { transform: translate(40px,-20px) scale(1.2); }
}


/* Туманности с разными размерами и размытием */
.nebula:nth-child(1) {
    transform: scale(1.6);
    filter: blur(70px);
}

.nebula:nth-child(2) {
    transform: scale(1.4);
    filter: blur(80px);
}

.nebula:nth-child(3) {
    transform: scale(2.6);
    filter: blur(60px);
}

.nebula:nth-child(4) {
    transform: scale(0.9);
    filter: blur(90px);
}

.nebula:nth-child(5) {
    transform: scale(3.4);
    filter: blur(50px);
}


/* ДРЕЙФУЮЩИЕ ПЛАНЕТЫ */
.drifting-planets {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.planet {
    position: absolute;
    border-radius: 50%;
    left: -400px;
    animation: drift linear infinite;
    opacity: 1;
    transform: translateZ(0);
    will-change: left;
    filter: blur(0.4px);
}

/* Расширенная анимация дрейфа */
@keyframes drift {
    0% {
        left: -400px;
    }
    100% {
        left: 130%;
    }
}

/* ===== ВСЕ ПЛАНЕТЫ УМЕНЬШЕНЫ ===== */

/* МЕРКУРИЙ */
.mercury {
    width: 20px;
    height: 20px;
    animation-duration: 900s;
    background: #9a9a9a;
    background-image:
        radial-gradient(circle at 30% 40%, #6a6a6a 0%, transparent 4px),
        radial-gradient(circle at 70% 60%, #7a7a7a 0%, transparent 6px),
        radial-gradient(circle at 45% 70%, #5a5a5a 0%, transparent 3px),
        radial-gradient(circle at 80% 20%, #6a6a6a 0%, transparent 5px),
        radial-gradient(circle at 20% 75%, #7a7a7a 0%, transparent 4px),
        repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,0.3) 0px, transparent 1px),
        repeating-radial-gradient(circle at 70% 60%, rgba(0,0,0,0.25) 0px, transparent 2px),
        radial-gradient(circle at 30% 30%, #c0c0c0, #6a6a6a 80%);
    box-shadow:
        inset -8px -8px 12px rgba(0,0,0,0.9),
        inset 5px 5px 10px rgba(255,255,255,0.3),
        0 0 20px rgba(160,160,160,0.3);
}

/* ВЕНЕРА */
.venus {
    width: 30px;
    height: 30px;
    animation-duration: 1100s;
    background: #d4b483;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.2) 0px,
            rgba(255,255,240,0.25) 3px,
            rgba(255,255,240,0) 6px,
            rgba(240,230,200,0.2) 9px,
            rgba(255,255,240,0) 12px),
        radial-gradient(circle at 70% 40%, #f0e68c 0%, transparent 12px),
        radial-gradient(circle at 20% 70%, #f0e68c 0%, transparent 10px),
        radial-gradient(circle at 35% 35%, #f5e6b3, #b89e7a 70%, #8b6b4d);
    box-shadow:
        inset -10px -8px 15px rgba(0,0,0,0.8),
        inset 7px 7px 15px rgba(255,255,240,0.4),
        0 0 25px rgba(244,216,148,0.4);
}

/* МАРС */
.mars {
    width: 23px;
    height: 23px;
    animation-duration: 1000s;
    background: #b94e0e;
    background-image:
        radial-gradient(circle at 25% 35%, #7d3c0b 0%, transparent 5px),
        radial-gradient(circle at 65% 55%, #8b4e1e 0%, transparent 7px),
        radial-gradient(circle at 80% 25%, #6a3a0a 0%, transparent 4px),
        radial-gradient(circle at 40% 75%, #7d3c0b 0%, transparent 6px),
        radial-gradient(circle at 15% 60%, #8b4e1e 0%, transparent 4px),
        radial-gradient(circle at 50% 30%, #d87e3a 0%, transparent 8px),
        radial-gradient(circle at 70% 70%, #c56b2a 0%, transparent 7px),
        radial-gradient(circle at 30% 30%, #e67e22, #b94e0e 70%, #7d3c0b);
    box-shadow:
        inset -9px -8px 15px rgba(0,0,0,0.9),
        inset 6px 5px 12px rgba(255,200,150,0.3),
        0 0 22px rgba(230,126,34,0.4);
}

/* ЮПИТЕР */
.jupiter {
    width: 60px;
    height: 60px;
    animation-duration: 1600s;
    background: #e0c9a6;
    background-image:
        repeating-linear-gradient(30deg,
            transparent,
            transparent 5px,
            rgba(140,110,80,0.4) 3px,
            rgba(140,110,80,0.2) 8px),
        repeating-linear-gradient(30deg,
            transparent,
            transparent 13px,
            rgba(160,130,90,0.3) 13px,
            rgba(160,130,90,0.3) 18px),
        radial-gradient(ellipse at 35% 55%, #b87a5a 0%, transparent 12px),
        radial-gradient(ellipse at 40% 60%, #a56a4a 0%, transparent 10px),
        radial-gradient(circle at 35% 35%, #f5e2c1, #b89e7a 60%, #8b6b4d);
    box-shadow:
        inset -18px -15px 25px rgba(0,0,0,0.9),
        inset 12px 10px 20px rgba(255,240,200,0.4),
        0 0 40px rgba(224,201,166,0.3);
}

/* САТУРН */
.saturn {
    width: 45px;
    height: 45px;
    animation-duration: 1300s;
    background: #e8d9b0;
    background-image:
        repeating-linear-gradient(15deg,
            transparent,
            transparent 4px,
            rgba(200,170,130,0.8) 3px,
            rgba(200,170,130,0.3) 8px),
        radial-gradient(circle at 60% 30%, #c4a77a 0%, transparent 8px),
        radial-gradient(circle at 25% 70%, #b89e7a 0%, transparent 7px),
        radial-gradient(circle at 30% 30%, #f5e8c4, #c4a77a 60%, #9e7b56);
    box-shadow:
        inset -15px -12px 20px rgba(0,0,0,0.9),
        inset 8px 7px 15px rgba(255,240,200,0.3),
        0 0 30px rgba(232,217,176,0.3);
}

/* Кольца Сатурна */
.saturn .rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
    width: 120px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(232,217,176,0.2) 15%,
        rgba(232,217,176,0.5) 30%,
        rgba(232,217,176,0.2) 50%,
        rgba(232,217,176,0.5) 70%,
        rgba(232,217,176,0.2) 85%,
        transparent 100%);
    filter: blur(1px);
    opacity: 0.7;
}

/* УРАН */
.uranus {
    width: 35px;
    height: 35px;
    animation-duration: 1200s;
    background: #6bb5c9;
    background-image:
        repeating-linear-gradient(30deg,
            transparent,
            transparent 6px,
            rgba(100,180,200,0.4) 6px,
            rgba(100,180,200,0.4) 11px),
        radial-gradient(circle at 40% 30%, #9fd9e8 0%, transparent 8px),
        radial-gradient(circle at 70% 70%, #9fd9e8 0%, transparent 7px),
        radial-gradient(circle at 20% 60%, #9fd9e8 0%, transparent 6px),
        radial-gradient(circle at 35% 35%, #b0e2f0, #4f9bb0 70%, #2d5f6b);
    box-shadow:
        inset -12px -10px 18px rgba(0,0,0,0.8),
        inset 8px 7px 15px rgba(200,240,255,0.4),
        0 0 28px rgba(159,217,232,0.3);
}

/* НЕПТУН */
.neptune {
    width: 38px;
    height: 38px;
    animation-duration: 1400s;
    background: #27408b;
    background-image:
        repeating-linear-gradient(-20deg,
            transparent,
            transparent 7px,
            rgba(65,105,225,0.4) 7px,
            rgba(65,105,225,0.4) 13px),
        radial-gradient(ellipse at 65% 45%, #1a2f6a 0%, transparent 10px),
        radial-gradient(ellipse at 30% 70%, #1f3978 0%, transparent 9px),
        repeating-linear-gradient(90deg,
            rgba(100,150,255,0.15) 0px,
            rgba(100,150,255,0) 5px),
        radial-gradient(circle at 30% 30%, #5d7cd4, #1f3978 70%, #0a1940);
    box-shadow:
        inset -13px -11px 20px rgba(0,0,0,0.9),
        inset 8px 7px 18px rgba(150,200,255,0.4),
        0 0 32px rgba(65,105,225,0.3);
}

/* ===== СПУТНИКИ ===== */
.moon {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c0c0c0;
    background-image: radial-gradient(circle at 30% 30%, #ffffff, #8a8a8a);
    box-shadow: 0 0 8px rgba(200,200,200,0.3);
    opacity: 0.5;
    filter: blur(0.2px);

    /* Позиционируем в центре планеты */
    top: 50%;
    left: 50%;

    /* Анимация с уменьшенной скоростью (все значения увеличены в 2 раза) */
    animation: moon-orbit var(--orbit-duration, 60s) linear infinite;
    animation-delay: var(--moon-delay, 0s);
}

/* Правильная круговая орбита */
@keyframes moon-orbit {
    0% {
        transform: rotate(0deg) translateX(var(--orbit-distance, 18px)) rotate(0deg);
    }
    25% {
        transform: rotate(90deg) translateX(var(--orbit-distance, 18px)) rotate(-90deg);
    }
    50% {
        transform: rotate(180deg) translateX(var(--orbit-distance, 18px)) rotate(-180deg);
    }
    75% {
        transform: rotate(270deg) translateX(var(--orbit-distance, 18px)) rotate(-270deg);
    }
    100% {
        transform: rotate(360deg) translateX(var(--orbit-distance, 18px)) rotate(-360deg);
    }
}

/* Размеры спутников */
.moon-1 {
    width: 6px;
    height: 6px;
    --orbit-duration: 64s;
}
.moon-2 {
    width: 5px;
    height: 5px;
    --orbit-duration: 72s;
}
.moon-3 {
    width: 7px;
    height: 7px;
    --orbit-duration: 88s;
}

/* ЮПИТЕР - увеличен разброс орбит */
.jupiter .moon-1 {
    --orbit-distance: 78px;
    transform: rotate(0deg) translateX(42px);
}
.jupiter .moon-2 {
    --orbit-distance: 60px;
    transform: rotate(120deg) translateX(52px);
}
.jupiter .moon-3 {
    --orbit-distance: 68px;
    transform: rotate(240deg) translateX(38px);
}

.moon-jupiter-small {
    width: 4px;
    height: 4px;
    --orbit-duration: 100s;
    --orbit-distance: 68px;
    transform: rotate(300deg) translateX(58px); /* Начинает слева снизу */
    opacity: 0.35;
}

/* САТУРН */
.saturn .moon-1 {
    --orbit-distance: 65px;
    transform: rotate(45deg) translateX(40px);
}

.moon-saturn-small {
    width: 3px;
    height: 3px;
    --orbit-duration: 72s;
    opacity: 0.4;
}

.moon-saturn-small:nth-of-type(1) { transform: rotate(30deg) translateX(38px); }
.moon-saturn-small:nth-of-type(2) { transform: rotate(150deg) translateX(44px); }
.moon-saturn-small:nth-of-type(3) { transform: rotate(210deg) translateX(46px); }
.moon-saturn-small:nth-of-type(4) { transform: rotate(300deg) translateX(42px); }

/* УРАН - оставляем как есть (отлично работает) */
.uranus .moon-1 {
    --orbit-distance: 52px;
    transform: rotate(60deg) translateX(22px);
}
.uranus .moon-2 {
    --orbit-distance: 44px;
    transform: rotate(240deg) translateX(24px);
}

/* Спутник Нептуна */
.moon-neptune {
    width: 5px;
    height: 5px;
    --orbit-duration: 64s;
    --orbit-distance: 60px;
    transform: rotate(180deg) translateX(26px); /* Начинает слева */
}

/* Блик и тень */
.planet::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%);
    pointer-events: none;
    filter: blur(0.5px);
}

.planet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 75% 75%,
        rgba(0, 0, 0, 0.5) 0%,
        transparent 60%);
    pointer-events: none;
    filter: blur(0.5px);
}


/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.cosmos-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none; /* чтобы не мешать кликам по планете */
}


/* ===== ТЕКСТ ПО ЦЕНТРУ ===== */
.cosmos-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 1;
    transition: opacity 3s ease; /* Длительность исчезновения */
}


/* ===== РЯД С БУКВАМИ ???  ===== */
.cosmos-text-container > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Расстояние между буквами */
    flex-wrap: nowrap;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}


/* ===== СТИЛИ БУКВ ===== */
.cosmos-letter {
    font-size: 120px;
    font-weight: 900;
    background: linear-gradient(135deg,
        #FF6B6B 0%,
        #FFD166 20%,
        #06D6A0 40%,
        #118AB2 60%,
        #9B5DE5 80%,
        #FF6B6B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
    display: inline-block;
    line-height: 1;
    transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2),
                opacity 0.8s ease,
                text-shadow 4s ease,
                filter 3s ease;
    will-change: transform, opacity;

    /* ВАЖНО: буквы сразу в потоке, на своих местах */
    position: relative;
    left: auto;
    top: auto;

    /* Начальное состояние - невидимы и сжаты */
    opacity: 0;
    transform: scale(0);
}

/* ===== КОГДА БУКВА ПОЯВЛЯЕТСЯ ===== */
.cosmos-letter.visible {
    opacity: 1;
    transform: scale(1);
}


/* ===== СОСТОЯНИЕ ПОСЛЕ ПОЯВЛЕНИЯ ??? ===== */
.cosmos-letter.appeared {
    position: relative;
    left: auto;
    top: auto;
    transform: scale(1);
    opacity: 1;
}


/* ===== СВЕРКАНИЕ БУКВ ===== */
.cosmos-letter.sparkle {
    text-shadow:
        0 0 30px rgba(255, 255, 255, 1),
        0 0 80px rgba(255, 255, 255, 0.8),
        0 0 120px currentColor !important;
    filter: brightness(1.5);
    transform: scale(1.1) !important;
    transition: all 0.3s ease;
}


/* ===== ПРОБЕЛ МЕЖДУ СЛОВАМИ ===== */
.cosmos-space {
    width: 40px; /* Ширина пробела между COSMIC и RENTAL */
    display: inline-block;
}

/* ===== ПОДПИСЬ ПОД ТЕКСТОМ ===== */
.cosmos-caption {
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 30px;
    text-shadow:
        0 0 15px rgba(102, 126, 234, 0.8),
        0 0 30px rgba(102, 126, 234, 0.4);
    z-index: 20;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 3.5s ease, transform 3.5s ease, text-shadow 4s ease, filter 3s ease;
    text-align: center;
    width: 100%;
}

/* ===== ВИДИМАЯ ПОДПИСЬ ===== */
.cosmos-caption.visible {
    opacity: 0.3;
}


/* ===== ВСПЫШКА ПОДПИСИ ===== */
.cosmos-caption.flash {
    text-shadow:
        0 0 40px rgba(255, 255, 255, 1),
        0 0 90px rgba(255, 255, 255, 0.7) !important;
    filter: brightness(2);
    transform: scale(1) !important;
    transition: all 0.3s ease;
}

/* ===== СОСТОЯНИЕ ИСЧЕЗНОВЕНИЯ ===== */
.cosmos-text-container.fade-out {
    opacity: 0;
    transition: opacity 3s ease; /* Длительность исчезновения */
}


/* ===== ПЛАНЕТА НИЖНЯЯ ===== */
.planet-wrapper {
    position: fixed;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease;
    animation: planet-appear 2s ease-out;
}


@keyframes planet-appear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-720deg) translate(300px);
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateX(-50%) translateY(0);
        filter: blur(0);
    }
}


/* Подсказка для возврата */
.cosmos-return-hint {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* УБИРАЕМ transition - он конфликтует с анимациями */
    /* transition: all 0.3s ease; - УДАЛИТЬ! */

    /* Оставляем только анимации */
    animation: hint-appear 3s ease-out forwards,
               hint-fadeout 2s ease-in forwards 6s; /* Старт через 4 секунды (3s appear + 1s пауза) */
    z-index: 31;
    pointer-events: none; /* Чтобы не мешала кликам после исчезновения */
}

@keyframes hint-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
    }
}

@keyframes hint-fadeout {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
        visibility: visible;
    }
    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
        filter: blur(5px);
        visibility: hidden;
    }
}


/* Подсказка для fullscreen */
.cosmos-fullscreen-hint1 {
    position: fixed;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* УБИРАЕМ transition - он конфликтует с анимациями */
    /* transition: all 0.3s ease; - УДАЛИТЬ! */

    /* Оставляем только анимации */
    animation: hint1-appear 3s ease-out forwards,
               hint1-fadeout 2s ease-in forwards 4s; /* Старт через 4 секунды (3s appear + 1s пауза) */
    z-index: 31;
    pointer-events: none; /* Чтобы не мешала кликам после исчезновения */
}

@keyframes hint1-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
    }
}

@keyframes hint1-fadeout {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
        visibility: visible;
    }
    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
        filter: blur(5px);
        visibility: hidden;
    }
}



/* === Космический фон с эффектом туннеля и туманностями для base.html === */

/* ============================================= */
/* === КОСМИЧЕСКИЕ ЭФФЕКТЫ (ОРИГИНАЛЬНЫЕ) === */
/* ============================================= */

/* Базовый фон страницы */
.page-background {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse at 30% 20%,
            rgba(30, 10, 60, 0.2) 0%,
            transparent 20%),
        radial-gradient(ellipse at 70% 80%,
            rgba(10, 30, 60, 0.1) 0%,
            transparent 20%),
        radial-gradient(ellipse at center,
            #000011 0%,
            #050520 30%,
            #0a0a30 55%,
            #000005 70%);
    position: relative;
    overflow: hidden;
}


/* Контейнер для всех эффектов (создается в JS) */
.base-global-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* === ТУМАННОСТИ === */
.base-global-nebula {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}

@keyframes base-global-nebula-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, 30px) scale(1.1);
    }
    50% {
        transform: translate(-30px, 60px) scale(0.9);
    }
    75% {
        transform: translate(40px, -20px) scale(1.05);
    }
}


/* Туманности с разными размерами и размытием */
.base-global-nebula:nth-child(1) {
    transform: scale(1.4);
    filter: blur(70px);
}

.base-global-nebula:nth-child(2) {
    transform: scale(0.9);
    filter: blur(80px);
}

.base-global-nebula:nth-child(3) {
    transform: scale(1.8);
    filter: blur(60px);
}

.base-global-nebula:nth-child(4) {
    transform: scale(0.7);
    filter: blur(90px);
}

.base-global-nebula:nth-child(5) {
    transform: scale(2.2);
    filter: blur(50px);
}



/* === ТУННЕЛЬНЫЕ ЗВЕЗДЫ === */
.base-global-tunnel-star {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: center;
    will-change: transform, opacity;
    animation: base-global-tunnel-move linear infinite;
}

@keyframes base-global-tunnel-move {
    0% {
        transform: translate(-50%,-50%) translate3d(calc(var(--dir-x,0)*0px), calc(var(--dir-y,0)*0px), 0) scale(0.1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%,-50%) translate3d(calc(var(--dir-x,0)*1000px), calc(var(--dir-y,0)*1000px), 1000px) scale(2);
        opacity: 0;
    }
}

/* === ЗВЕЗДНОЕ ПОЛЕ === */
.base-global-starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.3;
}


/* ============================================= */
/* === SAFARI FIXES === */
/* ============================================= */

/* Предотвращение белого мелькания в Safari */
@supports (-webkit-touch-callout: none) {
    /* Для iOS Safari */
    html, body {
        background-color: #000 !important;
    }

    .page-background {
        background-color: #000 !important;
        animation: none !important;
    }

    /* Плавное появление контента */
    .terms-card,
    .login-form-card,
    .register-form-card {
        animation: safari-fade-in 0.5s ease !important;
    }

    @keyframes safari-fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Для всех версий Safari */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) {
        body {
            background: #000 !important;
            min-height: 100vh;
        }

        /* Быстрая загрузка темного фона */
        .page-background {
            background: #000 !important;
            min-height: 100vh;
            display: block !important;
        }
    }
}



/* ============================================= */
/* === КЛИКАБЕЛЬНЫЙ ЛОГОТИП В ФУТЕРЕ === */
/* ============================================= */

.base-footer-logo-link {
    display: block;
    text-decoration: none;
    transition: all 0.5s ease;
    position: relative;
    border-radius: 50%;
    overflow: visible;
}

.base-footer-logo-link:hover {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
}

/* Анимация пульсации колец при наведении */
.base-footer-logo-link:hover .base-footer-ring {
    animation: base-footer-ring-glow 1.5s ease-in-out infinite;
}

.base-footer-logo-link:hover .base-footer-ring:nth-child(1) {
    animation-delay: 0s;
    border-color: rgba(255, 107, 107, 1);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
}

.base-footer-logo-link:hover .base-footer-ring:nth-child(2) {
    animation-delay: 0.3s;
    border-color: rgba(255, 209, 102, 1);
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.6);
}

.base-footer-logo-link:hover .base-footer-ring:nth-child(3) {
    animation-delay: 0.6s;
    border-color: rgba(6, 214, 160, 1);
    box-shadow: 0 0 30px rgba(6, 214, 160, 0.6);
}

@keyframes base-footer-ring-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 2px;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        border-width: 3px;
    }
}

/* Подсветка планеты при наведении */
.base-footer-logo-link:hover .base-footer-planet-core {
    box-shadow:
        inset 0 0 40px rgba(255, 255, 255, 0.6),
        0 0 50px rgba(102, 126, 234, 1);
    border-color: rgba(255, 255, 255, 0.9);
    animation: base-footer-planet-pulse 2s ease-in-out infinite;
}

@keyframes base-footer-planet-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Ускорение вращения звезд при наведении */
.base-footer-logo-link:hover .base-footer-star {
    animation-duration: 8s !important;
    box-shadow: 0 0 20px white;
}

/* Эффект свечения для одежды */
.base-footer-logo-link:hover .base-footer-clothes {
    animation: base-footer-clothes-glow 1.5s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 255, 255, 1);
}

@keyframes base-footer-clothes-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 25px currentColor) brightness(1.3);
    }
}

/* Мерцающая подсветка фона */
.base-footer-logo-link::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle at center,
        rgba(102, 126, 234, 0.3) 0%,
        transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.base-footer-logo-link:hover::before {
    opacity: 1;
    animation: base-footer-glow-pulse 2s ease-in-out infinite;
}

@keyframes base-footer-glow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}