/**
 * PC Layout Refactoring - Bootstrap Override Styles
 *
 * Этот файл содержит переопределения стилей для PC-верстки
 * после подключения Bootstrap Grid + Utilities.
 *
 * Коммит для отката: 59f89d3
 * Дата создания: 2026-01-27
 *
 * Новые размеры:
 * - Контейнер: 900px -> 1200px
 * - Левый сайдбар: 145px -> 195px
 * - Правый сайдбар: 175px -> 235px
 */

/* ==========================================================================
   CSS Variables (Цветовая палитра)
   ========================================================================== */

:root {
    /* Основные цвета */
    --color-primary: #1483cb;
    --color-secondary: #148352;
    --color-text: #0d3051;
    --color-text-muted: #999999;
    --color-text-footer: #666666;

    /* Фоны */
    --color-bg-body: #125871;
    --color-bg-content: #ffffff;

    /* Границы */
    --color-border: #dce6e9;
    --color-border-photo: #e5e5e5;

    /* Акценты */
    --color-vip: #EB0000;
    --color-top: #1483cb;

    /* Размеры - НОВЫЕ */
    --width-wrapper: 1200px;
    --width-sidebar-left: 230px;
    --width-sidebar-right: 230px;
    --width-content-padding: 230px;

    /* Размеры - старые (для справки)
    --width-wrapper-old: 900px;
    --width-sidebar-left-old: 145px;
    --width-sidebar-right-old: 175px;
    --width-content-padding-old: 175px;
    */

    /* Шрифты */
    --font-family-base: Tahoma, sans-serif;
    --font-family-heading: "Segoe UI", Tahoma, sans-serif;
    --font-size-base: 13px;
}

/* ==========================================================================
   Layout Overrides (CSS Grid вместо float)
   ========================================================================== */

/* Wrapper - основной контейнер */
.wrapper {
    width: var(--width-wrapper);
}

/* Скругления - убираем только фоновую картинку */
.topround {
    width: var(--width-wrapper);
    height: 34px;
    margin: 0 auto;
    overflow: hidden;
    background: none;
}

.bottomround {
    width: var(--width-wrapper);
}

/* Middle - CSS Grid layout */
.middle {
    display: grid;
    grid-template-columns: var(--width-sidebar-left) 1fr var(--width-sidebar-right);
    gap: 0;
}

/* Container - центральная колонка */
.container {
    grid-column: 2;
    width: 100%;
    float: none;
    overflow: visible;
    padding-left: 0; /* временно убираем левый padding Bootstrap */
}

/* Контент - убираем padding под сайдбары (теперь не нужен) */
.content {
    /*padding: 0 15px 30px 15px;*/
    padding: 0 0 30px 0;
}

/* Левый сайдбар */
.sideLeft {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    float: none;
    margin-left: 0;
}

/* Правый сайдбар */
.sideRight {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Middle Section (убираем фоновое изображение)
   ========================================================================== */

/* Убираем старый фон-картинку, заменяем на чистый белый */
.middle {
    background: var(--color-bg-content);
}

/* Левый сайдбар - разделитель справа */
.sideLeft {
    border-right: 1px solid var(--color-border);
}

/* Правый сайдбар - разделитель слева */
.sideRight {
    border-left: 1px solid var(--color-border);
}

/* ==========================================================================
   Profile Cards - Блоки анкет
   ========================================================================== */

/* Карточка анкеты */
.about_girl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    /*margin: 15px 10px;*/
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    font-size: 14px;
}

.about_girl:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.about_girl.supervip {
    border-top: 3px solid var(--color-primary);
    background: linear-gradient(180deg, rgba(20, 131, 203, 0.05) 0%, #ffffff 100%);
}

/* Фото в карточке */
.about_girl .girl_img {
    position: relative;
    width: 252px;
    height: 375px;  /* высота фото 369px + border 6px */
    flex-shrink: 0;
}

/* Информация о профиле - занимает оставшуюся ширину */
.about_girl .girl_info {
    flex: 1;
    float: none;
    width: auto;
    margin-left: 15px;
}

.about_girl .girl_img img {
    width: 246px;   /* контейнер 252px - border 6px */
    height: 369px;
    margin: 0;
    border-radius: 6px;
    border: 3px solid var(--color-border-photo);
    transition: border-color 0.2s ease;
}

.about_girl:hover .girl_img img {
    border-color: var(--color-primary);
}

/* Бейдж TOP/EXCLUSIVE/PREMIUM/ELITE сверху */
.about_girl .girl_img .TopAnket {
    position: absolute;
    top: 3px;    /* border 3px */
    left: 3px;   /* border 3px */
    width: 246px; /* ширина фото */
    border-radius: 0;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    box-sizing: border-box;
}

/* Бейдж "100% фото" - зелёный, внизу фото слева */
.about_girl .girl_img .verified {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    opacity: 1;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    min-height: 24px;
    line-height: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    top: unset;
    bottom: 5px;
    left: 5px;
    display: flex;
    align-items: center;
}

.about_girl .girl_img .verified img {
    vertical-align: middle;
    margin-right: 3px;
}

/* Бейдж VIP - фиолетовый, внизу фото справа */
.about_girl .girl_img .isvip {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    opacity: 1;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    min-height: 24px;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    top: unset;
    bottom: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Блоки параметров и цен */
.about_girl .girl_info .info_left,
.about_girl .girl_info .info_right {
    width: 160px;
    float: left;
}

/* Имя и телефон */
.about_girl .girl_info h2 {
    font-size: 16px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Рекламный текст */
.about_girl .services {
    width: 100%;
    margin: 0;
    padding: 12px 15px 45px 15px;
    background: #f8f9fa;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text);
    max-height: 115px;  /* 80px + 35px для кнопки */
    overflow: hidden;
    position: relative;
}

.about_girl .services::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(transparent, #f8f9fa);
}

.about_girl .services .param i {
    font-style: normal;
    color: var(--color-text);
}

/* Кнопка "Подробнее" */
.about_girl .more {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.about_girl .more a {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary);
    color: #ffffff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s ease;
}

.about_girl .more a:hover {
    background: #1070b0;
    text-decoration: none;
}

/* ==========================================================================
   Sidebar Left - Фильтры
   ========================================================================== */

.sideLeft ul {
    font-size: 14px;
}

/* ==========================================================================
   Sidebar Right - Новости
   ========================================================================== */

.sideRight .last_news {
    font-size: 13px;
}

.sideRight .last_news .news_box time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.sideRight .last_news .news_box .title {
    font-size: 14px;
    font-weight: bold;
}

/* ==========================================================================
   Header Top Navigation
   ========================================================================== */

.header .top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 38px;
}

.header .top .topmenu {
    width: auto;
    float: none;
    text-align: left;
    font-size: 14px;
    padding: 0 0 0 10px;
    display: flex;
    align-items: stretch;
    height: 100%;
}

/* Ссылки в меню - выравнивание по центру */
.header .top .topmenu a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 8px;
}

/* Активный пункт меню */
.header .top .topmenu span {
    color: #ffffff;
    font-weight: bold;
    background-color: var(--color-primary);
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.header .top .button {
    text-align: right;
    margin-left: auto;
    padding: 0 10px 0 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: auto;
    float: none;
}

/* Ссылки авторизации в шапке */
.header .top .button .auth-link {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.header .top .button .auth-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Ссылка на приложение в навигации */
.header .top .topmenu .app-link {
    color: #2E7D32;
    font-weight: bold;
}

/* ==========================================================================
   Header Banner
   ========================================================================== */

/* Баннер - чёрный фон, картинка справа */
.wrapper .header .banner {
    position: relative;
    height: 148px;
    background: #000000 url(/themes/images/banner.jpg) no-repeat right center;
}

/* Логотип - прижат влево */
.header .banner .logo {
    float: left;
}

/* ==========================================================================
   GLightbox Integration
   ========================================================================== */

/* Стили для GLightbox будут здесь после интеграции */

/* ==========================================================================
   Breadcrumbs (Хлебные крошки)
   ========================================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 15px;
    padding: 8px 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #1070b0;
}

.breadcrumbs a svg {
    opacity: 0.8;
}

.breadcrumbs .separator {
    margin: 0 10px;
    color: #ccc;
    font-size: 16px;
    font-weight: bold;
}

.breadcrumbs .current {
    color: var(--color-text);
    font-weight: 500;
}

/* ==========================================================================
   Text Block (SEO текст)
   ========================================================================== */

.text-block-inner {
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Clearfix */
.clr {
    clear: both;
}

.clr::after {
    content: "";
    display: table;
    clear: both;
}

/* Бейдж «Жду звонка» */
.wc-v2.wc-photo-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    background: rgba(76, 175, 80, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wc-badge-ring 2s ease-in-out infinite;
    z-index: 2;
}
@keyframes wc-badge-ring {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15) rotate(-8deg); }
    30% { transform: scale(1.15) rotate(8deg); }
    45% { transform: scale(1); }
}