/* General Body & Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #f2f2f7; /* iOS-like light grey background */
    color: #1c1c1e; /* Dark text for contrast */
    margin: 0;
    padding-top: 60px; /* Space for fixed header */
}

h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-weight: 600; /* Semi-bold for titles */
}

a {
    color: #007aff; /* iOS blue link color */
    text-decoration: none; /* Убираем подчеркивание по умолчанию для всех ссылок */
}

a:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
    opacity: 0.8; /* Небольшое изменение прозрачности при наведении */
}

/* Container for content */
.container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff; /* White background for content blocks */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}

/* =========================================
   Modern Forms & Inputs (iOS / Stripe Style) 
   ========================================= */
   .form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1c1c1e;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid transparent;
    border-radius: 12px; /* Более круглые формы */
    font-size: 16px;
    color: #1c1c1e;
    background-color: #f2f2f7; /* Мягкий серый фон */
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

.form-control:focus {
    background-color: #ffffff;
    border-color: #007aff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15); /* Мягкое синее свечение */
}

.form-control::placeholder {
    color: #8e8e93;
}

/* Спец-поле для номера телефона (+998) */
.phone-input-group {
    display: flex;
    align-items: center;
    background-color: #f2f2f7;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.phone-input-group:focus-within {
    background-color: #ffffff;
    border-color: #007aff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.phone-prefix {
    padding: 14px 0 14px 16px;
    font-weight: 600;
    color: #1c1c1e;
    font-size: 16px;
    user-select: none;
    white-space: nowrap; /* 👈 ЭТОТ ПАРАМЕТР ЗАПРЕТИТ ПЕРЕНОС СТРОКИ */
}

.phone-input-group .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 8px;
}

.phone-input-group .form-control:focus {
    box-shadow: none;
    border-color: transparent;
}

/* =========================================
   Bot Templates Grid (3D Flip Cards)
   ========================================= */
   .bot-templates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

/* Контейнер для 3D пространства */
.bot-card-container {
    perspective: 1000px;
    background: transparent;
    cursor: pointer;
}

/* Внутренний блок, который будет вращаться */
.bot-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    min-height: 110px;
}

/* Класс для переворота (добавляется через JS) */
.bot-card-container.flipped .bot-card-inner {
    transform: rotateY(180deg);
}

/* Лицевая и задняя стороны карточки */
.bot-card-front, .bot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Скрываем заднюю часть при повороте */
    backface-visibility: hidden;
    border: 2px solid #e5e5ea;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    background: #ffffff;
}

.bot-card-icon { font-size: 32px; margin-bottom: 10px; }
.bot-card-title { font-weight: 600; font-size: 14px; color: #1c1c1e; line-height: 1.2; }

/* Активная карточка (Служба поддержки) */
.bot-card-front.active {
    border-color: #007aff;
    background-color: #f0f8ff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.1);
}

/* Заблокированные (Серые) карточки */
.bot-card-front.disabled {
    background-color: #f9f9fb;
    opacity: 0.7;
}

/* Дизайн задней стороны карточки (когда перевернулась) */
.bot-card-back {
    background: linear-gradient(135deg, #1c1c1e, #3a3a3c);
    color: white;
    transform: rotateY(180deg);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bot-card-back-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* =========================================
   Red Info Banner (Важная информация)
   ========================================= */
.info-banner-btn {
    background-color: #ffe5e5;
    color: #ff3b30;
    border: 2px solid #ffcccc;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.info-banner-btn:hover { background-color: #ffcccc; }

.info-banner-content {
    background-color: #ffffff;
    border: 2px solid #ff3b30;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    display: none; /* Скрыто по умолчанию */
    box-shadow: 0 10px 25px rgba(255, 59, 48, 0.15);
    animation: slideDown 0.3s ease-out;
}

.info-banner-content.show { display: block; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: 10px; /* Rounded buttons */
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease; /* Add transform for subtle press effect */
    text-align: center;
    -webkit-appearance: none; /* For iOS button style */
    text-decoration: none; /* УБИРАЕМ ПОДЧЕРКИВАНИЕ ДЛЯ КНОПОК */
    color: #ffffff; /* Убедимся, что цвет текста кнопки основной */
}

.btn:hover {
    text-decoration: none; /* УБИРАЕМ ПОДЧЕРКИВАНИЕ ПРИ НАВЕДЕНИИ */
    opacity: 0.9; /* Небольшое изменение прозрачности при наведении */
}

.btn:active {
    transform: translateY(1px); /* Subtle press effect */
}

.btn-primary {
    background-color: #007aff; /* iOS blue */
    color: #ffffff; /* Цвет текста кнопки */
}

.btn-primary:hover {
    background-color: #005ac9; /* Darker blue on hover */
}

.btn-secondary {
    background-color: #e5e5ea; /* iOS light grey */
    color: #007aff; /* Цвет текста кнопки */
}

.btn-secondary:hover {
    background-color: #d1d1d6;
}

/* iOS Push Notifications (Flash) */
.flash-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Чтобы клики проходили сквозь контейнер, если он пуст */
    width: 90%;
    max-width: 400px;
}

.flash-message {
    padding: 16px 20px;
    border-radius: 20px; /* Сильное скругление как в iOS */
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: #1c1c1e;
    pointer-events: auto; /* Возвращаем кликабельность самому уведомлению */
    
    /* Анимация появления сверху */
    animation: slideDownFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Анимация исчезновения (вызывается через JS) */
.flash-message.fade-out {
    animation: slideUpFade 0.4s ease-in forwards;
}

@keyframes slideDownFade {
    0% { opacity: 0; transform: translateY(-40px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideUpFade {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

/* Эмодзи для разных типов уведомлений */
.flash-success::before { content: '✅'; margin-right: 10px; font-size: 18px; }
.flash-danger::before { content: '❌'; margin-right: 10px; font-size: 18px; }
.flash-warning::before { content: '⚠️'; margin-right: 10px; font-size: 18px; }
.flash-info::before { content: '💡'; margin-right: 10px; font-size: 18px; }
.flash-telegram_alert::before { content: '🤖'; margin-right: 10px; font-size: 18px; }

/* Custom Telegram Alert */
.flash-telegram_alert { /* Имя класса flash_alert в Python будет flash-telegram_alert в HTML */
    background-color: #e0f2f7; /* Light blue */
    color: #007aff; /* iOS blue text */
    border: 1px solid #b3e0ff;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    font-size: 18px;
}


/* Header (Navbar) */
.header {
    background-color: #ffffff; /* White header */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box; /* Важно для ширины навигации */
}

.header .logo {
    font-size: 22px;
    font-weight: 700;
    color: #007aff; /* iOS blue for logo */
    white-space: nowrap; /* Чтобы логотип не переносился */
}

.header .nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Элементы не будут переноситься на новую строку, пока возможно */
    gap: 15px; /* Промежуток между элементами навигации */
    overflow-x: auto; /* Позволит скроллить, если места совсем нет */
    -webkit-overflow-scrolling: touch; /* Улучшает скроллинг на iOS */
    padding-bottom: 5px; /* Чтобы скроллбар не закрывал текст */
}


.header .nav-links a {
    font-size: 17px;
    font-weight: 500;
    color: #4a4a4c;
    white-space: nowrap; /* Запрещаем перенос текста в ссылках */
    padding: 5px 0; /* Небольшие отступы, чтобы можно было кликнуть */
}

.header .nav-links a:hover {
    color: #007aff;
    text-decoration: none;
}

/* Footer */
.footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    color: #8e8e93; /* iOS grey text */
    font-size: 14px;
}

/* Specific elements for iOS feel */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
}

.list-item {
    padding: 15px 0;
    border-bottom: 1px solid #e5e5ea;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-item:last-child {
    border-bottom: none;
}

.text-muted {
    color: #8e8e93;
    font-size: 14px;
}

.hero-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #ffffff;
    border-radius: 12px;
    margin-bottom: 20px;
}

.hero-section h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.hero-section p {
    font-size: 18px;
    color: #4a4a4c;
    margin-bottom: 30px;
}

/* =========================================
   MOBILE RESPONSIVENESS (Адаптация под смартфоны)
   ========================================= */
   @media (max-width: 768px) {
    body { 
        padding-top: 80px; /* Больше места под шапку */
    }
    .container { 
        margin: 10px; 
        padding: 15px; 
        max-width: 100%;
    }
    
    /* Шапка и меню выстраиваются по центру и переносятся */
    .header { 
        flex-direction: column; 
        padding: 10px; 
        text-align: center;
    }
    .header .nav-links { 
        margin-top: 8px; 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 10px;
    }
    .header .nav-links a { 
        font-size: 14px; 
        padding: 5px 10px;
        background: #f2f2f7;
        border-radius: 15px;
    }

    /* Карточки ботов выстраиваются в один столбик */
    .bot-templates-grid { 
        grid-template-columns: 1fr; 
    }

    /* Кнопки внутри панели бота переносятся красиво */
    .bot-panel-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .bot-panel-nav a {
        text-align: center;
        padding: 12px;
    }

    /* Окно чата становится адаптивным по высоте */
    .chat-container {
        height: 55vh !important; /* Занимает 55% высоты экрана телефона */
        min-height: 350px;
    }
    .bubble {
        max-width: 90% !important; /* Пузыри шире на узком экране */
    }
}