:root {
  /* Primary palette — warm coral-orange */
  --one: #8E92E8;
  --one_light: #B8BAF0;
  --one_dark: #646AE0;
  
  /* Secondary — deep terracotta */
  --two: #4F56DC;
  --two_light: #646AE0;
  --two_dark: #3A42D8;
  
  /* Tertiary — amber gold */
  --three: #F39C12;
  --three_light: #F5B041;
  --three_dark: #D68910;
  
  /* Success — emerald */
  --four: #27AE60;
  --four_light: #2ECC71;
  --four_dark: #1E8449;
  
  /* Info — soft rose */
  --five: #A3A6EA;
  --five_light: #CDCEF4;
  --five_dark: #797EE0;
  
  /* Neutral scale */
  --white: #FFFFFF;
  --gray: #BDC3C7;
  --gray_light: #ECF0F1;
  --gray_dark: #95A5A6;
  --a_dark: #2C3E50;
  --a_light: #FFFFFF;
  
  /* Glassmorphism tokens */
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
  --glass-shadow-hover: 0 12px 40px rgba(31, 38, 135, 0.12);
  
  /* Soft UI depth */
  --soft-inset: inset 2px 2px 5px rgba(166, 180, 200, 0.3),
                inset -2px -2px 5px rgba(255, 255, 255, 0.8);
  --soft-raised: 4px 4px 8px rgba(166, 180, 200, 0.3),
                -4px -4px 8px rgba(255, 255, 255, 0.9);
  --soft-raised-hover: 6px 6px 12px rgba(166, 180, 200, 0.35),
                       -6px -6px 12px rgba(255, 255, 255, 0.95);
  
  /* Bento grid */
  --bento-gap: 16px;
  --bento-radius: 20px;
  --bento-radius-sm: 12px;
  --bento-radius-lg: 28px;
  
  /* Pagination */
  --pagination: #F0FDF4;
  --pagination_hover: #34D399;
  --pagination_active: #059669;
  
  /* Price */
  --price: #FF6B6B;
  
  /* Background */
  --bg-page: #F0F2F5;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FAFBFC;
  
  /* Transitions — только анимируемые свойства */
  --transition-fast: box-shadow 0.2s ease, color 0.2s ease;
  --transition-smooth: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                       box-shadow 0.3s ease;
  --transition-color: background-color 0.25s ease, 
                      border-color 0.25s ease;

  --background_white_transparent: rgba(255, 255, 255, 0.7);
}

/* ─── BASE & RESET ──────────────────────────────────────────── */
html, body {
  font-size: 106%;
  background-color: var(--bg-page);
  color: var(--a_dark);
}

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
  }
}

/* ─── SELECTION ───────────────────────────────────────────── */
select {
  display: none;
}

.select_no_filter .bs-searchbox {
  display: none;
}

.select_order .dropdown-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--bento-radius-sm);
}

/* ─── FORM ELEMENTS ─────────────────────────────────────────── */
.input_double input {
  margin-bottom: -3px;
  padding-left: 6px;
  width: 48% !important;
  display: inline-block;
  border-radius: var(--bento-radius-sm);
  border: 1px solid var(--gray_light);
  background: var(--glass-bg);
  transition: var(--transition-fast);
}

.input_double input:nth-child(2) {
  float: right;
}

.input_double input:focus {
  border-color: var(--one);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
  outline: none;
}

.disabled_form {
  pointer-events: none;
  opacity: 0.4;
}

/* ─── SEARCH FORM ───────────────────────────────────────────── */
.search_form {
  position: relative;
  margin-bottom: 10px;
}

.search_form .card-body {
  padding: 20px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--glass-shadow);
}

.search_form .btn,
.search_form .form-control,
.search_form .col-form-label {
  font-size: 0.99rem;
  line-height: 1.5;
  border-radius: var(--bento-radius-sm);
}

.search_form .form-control {
  background: var(--bg-card);
  border: 1px solid var(--gray_light);
  transition: var(--transition-fast);
}

.search_form .form-control:focus {
  border-color: var(--one);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.search_form .expand_collapse {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -45px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 0 10px;
  border-radius: var(--bento-radius-sm);
  cursor: pointer;
  box-shadow: var(--soft-raised);
  transition: var(--transition-smooth);
}

.search_form .expand_collapse:hover {
  box-shadow: var(--soft-raised-hover);
}

.search_form label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.search_form .form-check label {
  white-space: normal;
}

.search_form .menu {
  max-height: 1500px;
  transition: max-height 0.5s ease-out, opacity 0.4s ease;
  opacity: 1;
}

.search_form .menu.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.border_error {
  border: 2px solid #FECACA !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* ─── FOCUS STATES ──────────────────────────────────────────── */
.btn, .form-check, .form-check-input, .form-check-label {
  cursor: pointer;
}

ul {
  padding: 0;
  margin: 0;
}

/* Убраны outline и box-shadow на фокус — заменены на мягкие glow */
a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus,
textarea:focus,
input:focus,
.form-control:focus {
  outline: 0!important;
  outline-color: transparent!important;
  outline-width: 0!important;
  outline-style: none!important;
}

a {
  cursor: pointer;
  color: var(--one);
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: none;
  color: var(--one_dark);
}

.dropleft .dropdown-toggle::before {
  display: none;
}

/* ─── RADIUS TOKENS (Bento system) ──────────────────────────── */
.rounded-1 {
  border-radius: 8px !important;
}
.rounded-2 {
  border-radius: 12px !important;
}
.rounded-3 {
  border-radius: 20px !important;
}
.rounded-4 {
  border-radius: 28px !important;
}
.rounded-5 {
  border-radius: 32px !important;
}
.rounded-6 {
  border-radius: 48px !important;
}

/* ─── CONTAINER BREAKPOINTS ─────────────────────────────────── */
@media (min-width: 1250px) {
  .col-xl-3.myxl {
    max-width: 22%;
    flex: 0 0 22%;
  }
  .col-xl-6.myxl {
    max-width: 56%;
    flex: 0 0 56%;
  }
  .col-xl-9.myxl {
    max-width: 78%;
    flex: 0 0 78%;
  }
}

@media (max-width: 1909px) {
  .container {
    max-width: calc(100% - 20px);
  }
}

@media (min-width: 1910px) {
  .container {
    max-width: 1870px;
  }
}

@media (max-width: 1200px) {
  legend { font-size: calc(1.275rem + 0.3vw); }
  h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
  h2, .h2 { font-size: calc(1.325rem + 0.9vw); }
  h3, .h3 { font-size: calc(1.3rem + 0.6vw); }
  h4, .h4 { font-size: calc(1.275rem + 0.3vw); }
  .display-1 { font-size: calc(1.725rem + 5.7vw); }
  .display-2 { font-size: calc(1.675rem + 5.1vw); }
  .display-3 { font-size: calc(1.575rem + 3.9vw); }
  .display-4 { font-size: calc(1.475rem + 2.7vw); }
  .close { font-size: calc(1.275rem + 0.3vw); }
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — Neo-Skeuomorphism + Soft UI
   Тактильные кнопки с физичностью: вдавленный эффект при active
   ═══════════════════════════════════════════════════════════════ */

.btn {
  border-radius: var(--bento-radius-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

/* Primary — Amber Gold */
.btn-primary {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--three_light) 0%, var(--three) 100%);
  border: none;
  box-shadow: 
    0 4px 6px rgba(243, 156, 18, 0.25),
    0 1px 3px rgba(243, 156, 18, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 12px rgba(243, 156, 18, 0.3),
    0 2px 4px rgba(243, 156, 18, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--three) 0%, var(--three_dark) 100%);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 2px rgba(243, 156, 18, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary {
  color: var(--three) !important;
  background: transparent;
  border: 2px solid var(--three);
  box-shadow: none;
}

.btn-outline-primary:hover {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--three) 0%, var(--three_dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.25);
}

/* Success — Emerald */
.btn-success {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--four_light) 0%, var(--four) 100%);
  border: none;
  box-shadow: 
    0 4px 6px rgba(39, 174, 96, 0.25),
    0 1px 3px rgba(39, 174, 96, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 12px rgba(39, 174, 96, 0.3),
    0 2px 4px rgba(39, 174, 96, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--four) 0%, var(--four_dark) 100%);
}

.btn-success:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 2px rgba(39, 174, 96, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-success {
  color: var(--four) !important;
  background: transparent;
  border: 2px solid var(--four);
  box-shadow: none;
}

.btn-outline-success:hover {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--four) 0%, var(--four_dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
}

/* Info — Soft Rose */
.btn-info {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--five_light) 0%, var(--five) 100%);
  border: none;
  box-shadow: 
    0 4px 6px rgba(255, 121, 121, 0.25),
    0 1px 3px rgba(255, 121, 121, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-info:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 12px rgba(255, 121, 121, 0.3),
    0 2px 4px rgba(255, 121, 121, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--five) 0%, var(--five_dark) 100%);
}

.btn-info:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 2px rgba(255, 121, 121, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-info {
  color: var(--five) !important;
  background: transparent;
  border: 2px solid var(--five);
  box-shadow: none;
}

.btn-outline-info:hover {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--five) 0%, var(--five_dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 121, 121, 0.25);
}

/* Secondary — Neutral */
.btn-secondary {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--gray) 0%, var(--gray_dark) 100%);
  border: none;
  box-shadow: 
    0 4px 6px rgba(149, 165, 166, 0.25),
    0 1px 3px rgba(149, 165, 166, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 12px rgba(149, 165, 166, 0.3),
    0 2px 4px rgba(149, 165, 166, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--gray_dark) 0%, #7F8C8D 100%);
}

.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 2px rgba(149, 165, 166, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-secondary {
  color: var(--gray_dark) !important;
  background: transparent;
  border: 2px solid var(--gray);
  box-shadow: none;
}

.btn-outline-secondary:hover {
  color: var(--a_light) !important;
  background: linear-gradient(135deg, var(--gray_dark) 0%, #7F8C8D 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(149, 165, 166, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   BODY & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

body {
  background-image: url(../img/body_bg.jpg); /* Путь к фоновому изображению */
  background-attachment: fixed; /* Фиксируем фон веб-страницы */
  color: var(--a_dark);
  line-height: 1.6;
}

h1 {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--a_dark);
}

h1:before,
h1:after {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gray_light) 50%, transparent 100%);
  position: absolute;
  bottom: -8px;
  left: 0;
}

h1::after {
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--one) 50%, transparent 100%);
  bottom: -9px;
}

/* ─── INFO BOX — Soft UI card ───────────────────────────────── */
.info_box {
  display: inline-block;
  /*background-color: var(--five_light);*/
  text-align: center;
  padding: 4px;
  margin-top: 10px;
  /*box-shadow: 0 4px 4px var(--background_gray_transparent);*/
  border-radius: 6px;
  border: 1px dashed var(--a_dark);
}

.info_box:hover {
  box-shadow: var(--soft-raised-hover);
}

/* ─── BOX SHADOW — Glassmorphic glow ────────────────────────── */
.box_shadow {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: var(--bento-radius-sm);
  transition: var(--transition-smooth);
}

.box_shadow:hover {
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.1);
}

.textfade {
  box-shadow: -12px 0 15px 2px rgb(255, 255, 255) inset;
  height: 20px;
  position: absolute;
  right: 10px;
  width: 25px;
}

.info_block {
  border: 2px solid var(--four_light);
  border-radius: var(--bento-radius-sm);
  margin: 0 0 20px 0;
  padding: 16px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS — Glassmorphic Bento Cards
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--glass-bg);
  border: 0;
  border-radius: var(--bento-radius);
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
}

.card:hover {
  box-shadow: var(--glass-shadow-hover);
}

.card.no_border {
  border: 0;
  border-radius: var(--bento-radius);
  margin-bottom: 30px;
  box-shadow: var(--glass-shadow);
}

.card-header {
  padding: 12px 16px;
  margin-bottom: 0;
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
  border-bottom: none;
  line-height: 1.4;
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

/* Декоративный градиентный блик на card-header */
.card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.6s ease;
}

.card:hover .card-header::before {
  left: 100%;
}

.card-header i::before {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: -5px;
  padding: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  line-height: 1;
}

.card-header span.more {
  height: 28px;
  line-height: 28px;
  font-size: 75%;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 10px;
  border-radius: 20px;
  font-weight: 600;
}

.card-header span.before_triangle {
  background-color: var(--four);
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 8px 0 12px;
  color: var(--white);
  margin: 0 -9px 0 -5px;
  border-radius: 4px 0 0 4px;
}

.card-header span.triangle {
  position: relative;
  top: -22px;
  left: -22px;
  display: inline-block;
  width: 36px;
  margin-right: -6px;
}

.card-header span.triangle::before {
  content: '';
  position: absolute;
  right: 0px;
  top: -1px;
  border-style: solid;
  border-width: 17px 0px 17px 11px;
  border-color: var(--white) var(--white) var(--white) var(--four);
}

.card-header span.triangle::after {
  content: '';
  position: absolute;
  right: -9px;
  border-style: solid;
  border-width: 16px 0px 16px 10px;
  border-color: var(--two) var(--two) var(--two) var(--white);
  top: 0px;
}

.card-header a {
  color: var(--white);
}

.card-header span.before_triangle i {
  transform: scale(1.2);
}

.card-title {
  font-weight: 700;
  padding: 12px 16px 8px;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  color: var(--a_dark);
}

.card-body {
  padding: 16px;
  background-color: transparent;
}

.card-body:last-child {
  margin-bottom: 0;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--gray_light);
  padding: 12px 16px;
}

.card-footer .btn {
  float: right;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMBS — Glassmorphic ribbon
   ═══════════════════════════════════════════════════════════════ */

.breadcrumbs {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  margin: -26px 5% 0 5%;
  padding: 12px 16px 12px;
  background: linear-gradient(135deg, var(--two_light) 0%, var(--two) 50%, var(--two_light) 100%);
  border-radius: var(--bento-radius);
  box-shadow: 
    0 4px 6px rgba(192, 57, 43, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.breadcrumbs .breadcrumb {
  margin: -5px 0 0 0;
  background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumbs .breadcrumb i:first-child::before {
  color: var(--five_light);
  background-color: rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  display: inline-flex;
  position: relative;
  top: -2px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 8px;
  content: "/";
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumbs > ul {
  list-style: none;
  display: inline-flex;
  padding: 0 4px;
  align-items: center;
}

.breadcrumbs > ul > li,
.breadcrumbs > ul > li * {
  line-height: 26px;
}

.breadcrumbs > ul > li {
  overflow: hidden;
  display: none;
  padding-right: 5px;
}

.breadcrumbs > ul > li.show {
  display: inline-flex;
  color: var(--white);
  align-items: center;
}

.breadcrumbs > ul > li i {
  padding-top: 5px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs > ul > li.ellipsis {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  direction: rtl;
}

.breadcrumbs > ul > li a {
  color: var(--five_light);
  margin-right: 5px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumbs > ul > li a:hover {
  color: var(--white);
}

.breadcrumbs .divider {
  color: rgba(255, 255, 255, 0.4);
  padding: 0 5px;
}

.breadcrumbs ul li:nth-child(2n) a {
  float: left;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumbs .btn {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.breadcrumbs .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Breadcrumbs responsive */
@media only screen and (min-width: 1024px) {
  .breadcrumbs ul li:nth-child(2n) a {
    max-width: 500px;
  }
}

@media only screen and (max-width: 1023px) {
  .breadcrumbs ul li:nth-child(2n) a {
    max-width: 300px;
  }
}

@media only screen and (max-width: 640px) {
  .breadcrumbs ul li:nth-child(2n) a {
    max-width: 250px;
  }
}

@media only screen and (max-width: 480px) {
  .breadcrumbs ul li:nth-child(2n) a {
    max-width: 110px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION — Soft pill buttons
   ═══════════════════════════════════════════════════════════════ */

.pagination {
  gap: 6px;
}

.pagination li.page-item {
  margin-right: 0;
}

.pagination li.page-item a {
  color: var(--a_dark);
  text-align: center;
  background-color: var(--pagination);
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 8px 16px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.pagination li.page-item a:hover {
  color: var(--white);
  border-color: var(--pagination_hover);
  background-color: var(--pagination_hover);
  box-shadow: 0 4px 8px rgba(52, 211, 153, 0.3);
}

.pagination li.page-item.active .page-link {
  z-index: 3;
  color: var(--white);
  background: linear-gradient(135deg, var(--pagination_active) 0%, #047857 100%);
  border-color: transparent;
  box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   PRICE — Vibrant accent
   ═══════════════════════════════════════════════════════════════ */

.price {
  color: var(--price) !important;
  font-weight: 700;
  font-size: 1.1em;
}

.price.old {
  text-decoration: line-through;
  color: var(--gray_dark);
  font-weight: 400;
  font-size: 0.95em;
}

/* ═══════════════════════════════════════════════════════════════
   SPECS — Bento image grid
   ═══════════════════════════════════════════════════════════════ */

#specs img {
  height: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: var(--bento-radius-sm);
  box-shadow: var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR OVER — Glassmorphic top bar
   ═══════════════════════════════════════════════════════════════ */

.navbar_over {
  height: 100px;
  background: var(--white);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative;
  z-index: 10;
}

.navbar_over .logo {
  height: 100%;
  background-color: var(--one);
  clip-path: polygon(0 0, 100% -28%, 88% 100%, 0% 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
}

.navbar_over .logo img {
  position: absolute;
  top: 50%;
  left: 42%;
  transform: translate(-50%, -50%);
}

/* ─── NEAR NAVBAR — Info strip ──────────────────────────────── */
.near_navbar {
  height: 50px;
  background-color: var(--one);
  color: #fff;
  overflow: hidden;
}

.near_navbar > div {
  height: 100% !important;
  align-items: center !important;
  overflow: hidden;
  line-height: 100%;
}

.near_navbar > div.row div {
  line-height: 23px;
  text-align: center;
  max-height: 100% !important;
  align-items: center !important;
}

.near_navbar > div.row div:nth-child(2):before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  background-color: rgba(255, 255, 255, 0.2);
  width: 1px;
  height: 115px;
}

.near_navbar > div.row div:nth-child(2):after {
  content: "";
  position: absolute;
  top: -15px;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2);
  width: 1px;
  height: 115px;
}

.near_navbar a {
  color: #fff;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.near_navbar a:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL BUTTONS — Soft UI circles with gradient hover
   ═══════════════════════════════════════════════════════════════ */

/* СОЦ. КНОПКИ + */
ul.social {
  list-style: outside none none;
  padding: 0;
  margin: 0;
}
ul.social li {
  display: inline-block;
}
ul.social li:before {
  content: '' !important;
}
ul.social li:hover::before {
  padding: 0;
}
ul.social li a {
  position: relative;
  text-align: center;
  background: var(--white);
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  padding: 6px 0;
  overflow: hidden;
  cursor: pointer;
}
ul.social li a::before,
ul.social li a::after {
  content: '';
  position: absolute;
  left: -25%;
  width: 150%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg);
}
ul.social li a::before {
  top: -10%;
  transition: all 0.3s linear;
}
ul.social li a::after {
  bottom: -10%;
  transition: all 0.3s linear;
}
ul.social li a:hover::before,
ul.social li a:hover::after {
  opacity: 1;
  visibility: visible;
  height: 60%;
  background-color: #77929f;
}
ul.social li a:hover {
  color: var(--white) !important;
}
ul.social li a.whatsapp {
  color: #29AD00;
}
ul.social li a.whatsapp:hover::before,
ul.social li a.whatsapp:hover::after {
  background-color: #29AD00;
}
ul.social li a.telegram {
  color: #2CA3E0;
  padding: 7px 10px 6px 6px;
}
ul.social li a.telegram:hover::before,
ul.social li a.telegram:hover::after {
  background-color: #2CA3E0;
}
ul.social li a.max {
  background: #fff;
  /*padding: 7px 10px 6px 6px;*/
}
ul.social li a.max:hover {
  color: #2CA3E0;
}
ul.social li a.max:hover .fa-max {
  background: linear-gradient(135deg, #fff, #fff);
}
ul.social li a.viber {
  color: #734D93;
}
ul.social li a.viber:hover::before,
ul.social li a.viber:hover::after {
  background-color: #734D93;
}
ul.social li a.vk {
  color: #4F7DB2;
}
ul.social li a.vk:hover::before,
ul.social li a.vk:hover::after {
  background-color: #4F7DB2;
}
ul.social li a.facebook {
  color: #4064AD;
}
ul.social li a.facebook:hover::before,
ul.social li a.facebook:hover::after {
  background-color: #4064AD;
}
ul.social li a.instagram {
  color: #C50364;
}
ul.social li a.instagram:hover::before,
ul.social li a.instagram:hover::after {
  background-color: #C50364;
}
ul.social li a.odnoklassniki {
  color: #F98B0E;
}
ul.social li a.odnoklassniki:hover::before,
ul.social li a.odnoklassniki:hover::after {
  background-color: #F98B0E;
}
ul.social li a i {
  position: relative;
  z-index: 2;
  font-size: 26px;
}

.fa-max {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: linear-gradient(135deg, #1682FC, #9443DB);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M21.47 41.88c-4.11 0-6.02-.6-9.34-3-2.1 2.7-8.75 4.81-9.04 1.2 0-2.71-.6-5-1.28-7.5C1 29.5.08 26.07.08 21.1.08 9.23 9.82.3 21.36.3c11.55 0 20.6 9.37 20.6 20.91a20.6 20.6 0 0 1-20.49 20.67Zm.17-31.32c-5.62-.29-10 3.6-10.97 9.7-.8 5.05.62 11.2 1.83 11.52.58.14 2.04-1.04 2.95-1.95a10.4 10.4 0 0 0 5.08 1.81 10.7 10.7 0 0 0 11.19-9.97 10.7 10.7 0 0 0-10.08-11.1Z"/></svg>') no-repeat center;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M21.47 41.88c-4.11 0-6.02-.6-9.34-3-2.1 2.7-8.75 4.81-9.04 1.2 0-2.71-.6-5-1.28-7.5C1 29.5.08 26.07.08 21.1.08 9.23 9.82.3 21.36.3c11.55 0 20.6 9.37 20.6 20.91a20.6 20.6 0 0 1-20.49 20.67Zm.17-31.32c-5.62-.29-10 3.6-10.97 9.7-.8 5.05.62 11.2 1.83 11.52.58.14 2.04-1.04 2.95-1.95a10.4 10.4 0 0 0 5.08 1.81 10.7 10.7 0 0 0 11.19-9.97 10.7 10.7 0 0 0-10.08-11.1Z"/></svg>') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* СОЦ. КНОПКИ - */

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — Glassmorphic sticky
   ═══════════════════════════════════════════════════════════════ */

.navbar {
  width: 100%;
  height: 50px;
  background-color: var(--white);
  padding: 0;
  z-index: 1;
}

.navbar.nav-up {
  margin-top: -50px;
  position: fixed;
  left: 0;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-toggle::after {
  border: 0;
  margin-left: 0;
  vertical-align: -1px;
}

.navbar .dropdown-toggle i {
  position: relative;
  top: 2px;
}

.navbar li .dropdown-menu {
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--bento-radius-sm);
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg);
  padding: 8px 2px;
}

/* Desktop dropdown animation — transform вместо visibility/opacity */
@media (min-width: 992px) {
  #navbar.navbar li > .dropdown-menu {
    display: block;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
  }
  
  #navbar.navbar li:hover > .dropdown-menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  
  #navbar .dropdown > .dropdown-toggle:active {
    pointer-events: none;
  }
}

.navbar li a {
  color: var(--a_dark);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: var(--transition-fast);
}

.navbar li > a {
  margin: 0 1px 0 1px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar li a:hover,
.navbar li.active > a,
.navbar li .dropdown-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
}

.navbar ul > li:hover > a {
  color: #fff;
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
}

.navbar ul li a.dropdown-item.active,
.navbar ul li a.dropdown-item:active {
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
}

.navbar li a.dropdown-item {
  position: relative;
  max-width: 100%;
  padding: 5px;
  border-radius: 6px;
  margin: 2px 0;
}

.navbar li a.dropdown-item > span {
  position: relative;
  z-index: 1;
  padding: 0;
  background-color: transparent;
}

.navbar li a.dropdown-item:hover > span {
  z-index: 2;
}

.navbar li a.dropdown-item > span + span {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--gray_light);
  color: var(--a_dark);
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar li a.dropdown-item:hover > span + span {
  background: var(--white);
  color: var(--one);
}

.flexmenu_dropdown .nav-link {
  white-space: nowrap !important;
}

#navbar_top {
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — Hero section
   ═══════════════════════════════════════════════════════════════ */

.header {
  background: url('../img/header.jpg');
  height: 300px;
}

/* ═══════════════════════════════════════════════════════════════
   TABS — Soft UI
   ═══════════════════════════════════════════════════════════════ */

.tabdrop {
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.bootstrap-tabs .nav-tabs {
  border-bottom: 2px solid rgba(13, 93, 145, 0.1);
  margin-left: 0 !important;
  gap: 4px;
  padding: 0 4px;
}
.bootstrap-tabs .nav-tabs li {
  padding: 0 !important;
}
.bootstrap-tabs .nav-tabs li:before {
  display: none;
}
.bootstrap-tabs .nav-tabs .nav-item {
  margin-bottom: -2px;
}
.bootstrap-tabs .nav-tabs .nav-link {
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 10px 20px;
  font-weight: 500;
  color: var(--one);
  transition: all 0.2s ease-in-out;
  background: transparent;
}
.bootstrap-tabs .nav-tabs .nav-link:hover {
  color: var(--two_dark);
  background: rgba(13, 93, 145, 0.06);
}
.bootstrap-tabs .nav-tabs .nav-link.active {
  color: var(--two_dark);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid var(--two_dark);
}

.bootstrap-tabs .tab-content {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 0;
  padding: 20px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.bootstrap-tabs .dropdown-menu {
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);

  left: auto !important;
  right: 0;
  top: 48px !important;
  transform: none !important;
}
.bootstrap-tabs .nav-tabs a {
  color: #0D5D91;
}

/* ═══════════════════════════════════════════════════════════════
   DATA LISTS — Two column layout
   ═══════════════════════════════════════════════════════════════ */

ul.data {
  list-style: none;
  column-count: 2;
  column-width: 250px;
  column-gap: 6em;
  padding: 5px 0 5px 0;
  margin-bottom: 0;
}

ul.data li {
  width: 100%;
  display: inline-block;
  padding: 0;
}

ul.data li span:first-child {
  float: left;
  padding: 0 .4em 0 0;
  margin: 0 0 1px 0;
  font-weight: 600;
  color: var(--a_dark);
}

ul.data li span + span {
  float: right;
  padding: 0 0 0 .4em;
  margin: 0 0 1px 0;
}

ul.data li:after {
  content: "";
  display: block;
  overflow: hidden;
  height: 1em;
  border-bottom: 1px dashed var(--gray_light);
  padding-top: 18px;
  margin: 0 0 1px 0;
}

.article ul.data li:before {
  content: "" !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDE MENU — Glassmorphic sidebar
   ═══════════════════════════════════════════════════════════════ */

.card.side_menu {
  background: var(--glass-bg);
  padding: 0;
  position: relative;
  border-radius: var(--bento-radius);
  overflow: hidden;
  border: 0px;
  box-shadow: var(--glass-shadow);
}

.card.side_menu .card {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: var(--bento-radius-sm);
}

.card.side_menu .card-header {
  position: relative;
  color: var(--four);
  font-weight: 700;
  border: 0;
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
  margin: 0;
  padding: 12px 10px;
  border-radius: 0;
}

.card.side_menu .card-header h3 {
  position: sticky;
  padding: 0 2px 0px 5px;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  color: var(--white);
  z-index: 10;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.card.side_menu .card-header i {
  margin-right: 6px;
}

.card.side_menu .card-header i::before {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

.card.side_menu .card-title {
  padding-left: 0;
}

.card.side_menu > .card-body {
  padding: 0;
}

.card.side_menu .card-body .card-header {
  background: transparent;
  padding: 0;
  border: 0;
  margin: 0 0 8px 1px;
}

.card.side_menu .card-body img {
  width: calc(100% + 10px);
  height: 250px;
  object-fit: cover;
  object-position: 50% 50%;
  margin: -5px 0 0 -5px;
  border-radius: 0;
}

.card.side_menu .card-body ul.menu {
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 5px;
}

.card.side_menu .card-body ul.menu li {
  list-style: outside none none;
  margin: 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.card.side_menu .card-body ul.menu li::before {
  content: "\f105 ";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 13px;
  color: var(--gray);
  position: relative;
  top: -6px;
  left: 2px;
}

.card.side_menu .card-body ul.menu li div {
  width: 100%;
  display: inline-block;
}

.card.side_menu .card-body ul.menu li div a {
  color: var(--a_dark);
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 89%;
  display: inline-block;
  height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition-fast);
}

.card.side_menu .card-body ul.menu li:hover,
.card.side_menu .card-body ul.menu li.active {
  background: rgba(255, 107, 107, 0.06);
}

.card.side_menu .card-body ul.menu li:hover a,
.card.side_menu .card-body ul.menu li:hover:before,
.card.side_menu .card-body ul.menu li.active a,
.card.side_menu .card-body ul.menu li.active:before {
  color: var(--one);
}

.card.side_menu .card-body ul.menu li div a span + span {
  position: absolute;
  right: 8px;
  margin-top: 2px;
  background: linear-gradient(135deg, var(--two) 0%, var(--two_dark) 100%);
  color: var(--white);
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(192, 57, 43, 0.2);
}

.card.side_menu .card-body .card-footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
}

.card.side_menu .card-footer {
  border-top: 0;
  border-bottom: 0;
  padding: 12px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLES — Bento grid cards
   ═══════════════════════════════════════════════════════════════ */

.two-col-left,
.two-col-right,
.two-col,
.three-col {
  margin-right: 0;
  margin-left: 0;
}

#art ul li,
#building ul li {
  padding: 0 0 6px 0;
  list-style: outside none none;
}

#art ul li:before,
#building ul li:before {
  content: "\f00c ";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 8px;
  color: var(--four);
}

.article .card-body .preview {
  position: relative;
  float: left;
  cursor: pointer;
  border-radius: var(--bento-radius-sm);
  overflow: hidden;
}

.article .card-body .preview .title {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  line-height: 1.4;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--a_dark);
  box-shadow: var(--glass-shadow);
}

.article .card-body .preview .construction {
  position: absolute;
  bottom: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  line-height: 1.4;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--a_dark);
  box-shadow: var(--glass-shadow);
}

.article .art img, .article img {
  margin: 0 5px 5px 0;
  cursor: pointer;
  border-radius: var(--bento-radius-sm);
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
}

.article .art img:hover,
.article img:hover {
  box-shadow: var(--glass-shadow-hover);
}

.article .art img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: var(--bento-radius);
}

#art.article,
#buildings .article,
#building.article {
  overflow: auto;
  padding: 5px;
  margin-bottom: 20px;
}

#comment {
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .article .card-body .preview {
    float: unset;
  }
  
  .article .art img {
    width: 100%;
    margin: 4px 0 4px 0;
  }
  
  .article img {
    width: 100% !important;
    object-fit: cover;
    margin: 4px 0px 4px 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMMENTS — Chat bubbles (Soft UI)
   ═══════════════════════════════════════════════════════════════ */

#comment .input-group-text sup {
  color: #EF4444;
  font-size: 15px;
  left: 6px;
  position: absolute;
  top: 14px;
}

#comment .input-group-text {
  width: 40px;
  background: var(--gray_light);
  border: 1px solid var(--gray);
  border-radius: var(--bento-radius-sm) 0 0 var(--bento-radius-sm);
}

.comments_2 {
  margin-bottom: 20px;
  padding: 0;
}

.comments_2 li {
  list-style-type: none;
  border-bottom: 1px solid var(--gray_light);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.comments_2 .content {
  padding: 16px 20px;
  background: var(--white);
  color: var(--a_dark);
  max-width: 400px;
  display: inline-block;
  margin-bottom: -20px;
  margin-left: 20px;
  border-radius: 20px 20px 20px 4px;
  text-align: left;
  box-shadow: var(--soft-raised);
  border: 1px solid var(--gray_light);
}

.comments_2 .avatar {
  display: inline-block;
  vertical-align: bottom;
}

.comments_2 .avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 4px var(--white), 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.comments_2 .info {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 0.72em;
  color: var(--gray_dark);
}

.comments_2 .comment .self {
  text-align: right;
}

.comments_2 .comment .self .content {
  background: linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 100%);
  color: #1E40AF;
  margin-right: 20px;
  margin-left: 0px;
  border-radius: 20px 20px 4px 20px;
  box-shadow: var(--soft-raised);
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL — Glassmorphic controls
   ═══════════════════════════════════════════════════════════════ */

.carousel_objects img {
  height: 200px;
  object-fit: cover;
  border-radius: var(--bento-radius-sm);
}

.carousel_objects .item {
  position: relative;
  overflow: hidden;
  border-radius: var(--bento-radius);
}

.carousel_objects .item span {
  position: absolute;
  height: 50px;
  width: calc(100% - 30px);
  margin-top: -50px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 500;
}

.carousel .owl-theme .owl-nav [class*='owl-'] {
  color: var(--white);
  font-size: 14px;
  margin: 5px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #0db2f0 0%, #0891B2 100%);
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(13, 178, 240, 0.3);
  transition: var(--transition-smooth);
}

.carousel .owl-theme .owl-nav [class*='owl-']:hover {
  background: linear-gradient(135deg, #ff515b 0%, #DC2626 100%);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(255, 81, 91, 0.3);
}

.carousel .owl-theme .owl-nav {
  line-height: 1;
  text-align: center;
}

.carousel .owl-theme .owl-nav .owl-prev,
.carousel .owl-theme .owl-nav .owl-next {
  position: absolute;
  top: 40%;
  color: var(--a_dark);
  font-size: 16px;
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
}

.carousel .owl-theme .owl-nav .owl-prev {
  left: -12px;
}

.carousel .owl-theme .owl-nav .owl-next {
  right: -12px;
}

.carousel .owl-theme .owl-nav .owl-prev:hover,
.carousel .owl-theme .owl-nav .owl-next:hover {
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.carousel .owl-theme .owl-dots {
  display: none;
}

.carousel .owl-theme .owl-dots .owl-dot {
  display: none;
}

@media only screen and (max-width: 768px) {
  .carousel .owl-theme .owl-nav .owl-next,
  .carousel .owl-theme .owl-nav .owl-prev {
    position: initial;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OBJECTS — Bento property cards (Glassmorphic)
   ═══════════════════════════════════════════════════════════════ */

.object ul, .object ol {
  padding: 15px;
}

#objects .object .box a img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: var(--bento-radius-sm);
}

#objects .object:last-child {
  margin-bottom: 0 !important;
}

#objects .object .box {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: var(--transition-smooth);
}

#objects .object .box:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

#objects .object .box .preview {
  height: 280px;
  overflow: hidden;
  position: relative;
}

#objects .object .box .preview img {
  transition: transform 0.5s ease;
}

#objects .object .box:hover .preview img {
  transform: scale(1.03);
}

#objects .object .box .info {
  position: relative;
  padding: 5px;
  top: -42px;
}

#objects .object:hover .box .info,
#objects .object.ordered .box .info {
  max-height: 230px;
}

#objects .object .box .info .agent .avatar {
  float: left;
}

#objects .object .box .info .agent .avatar img {
  width: 80px;
  height: 80px;
  border: 3px solid var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

#objects .object .box .info .agent .contact {
  position: absolute;
  right: 16px;
  top: 50px;
  max-width: calc(100% - 120px);
  text-align: right;
}

#objects .object .box .info .agent .contact .phone {
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--one);
}

#objects .object .box .info .agent .contact .fio {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  font-weight: 500;
  color: var(--a_dark);
}

#objects .object .box .info .tools {
  position: absolute;
  top: 2px;
  right: 8px;
  clear: both;
  display: flex;
  justify-content: space-around;
  gap: 6px;
}

#objects .object .box .info .tools a {
  position: relative;
  width: 36px;
  height: 36px;
  color: var(--white);
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
  border: 2px solid var(--white);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  transition: var(--transition-smooth);
}

#objects .object .box .info .tools a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

#objects .object .box .info .tools.vibors a {
  background: var(--white);
  color: var(--one);
  border-color: var(--one);
}

#objects .object .box .info .tools a i {
  transform: scale(1.2);
}

#objects .object .datas {
  padding-top: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   AGENT BLOCK — Glassmorphic profile card
   ═══════════════════════════════════════════════════════════════ */

.block_agent {
  border-radius: var(--bento-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  margin: 0;
  padding: 24px;
  box-shadow: var(--glass-shadow);
}

.block_agent .agent .avatar {
  max-width: 200px;
}

.block_agent .agent .avatar img {
  width: 100%;
  object-fit: cover;
  border: 6px solid var(--white);
  border-radius: 50%;
  box-shadow: var(--soft-raised);
}

.block_agent .agent .contact .phone {
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--one);
  font-size: 1.1rem;
}

.block_agent .agent .contact .fio {
  font-weight: 700;
  color: var(--one);
  font-size: 1.2rem;
}

@media (max-width: 991px) {
  .block_agent .col-12:first-child {
    margin-bottom: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Dark glassmorphic
   ═══════════════════════════════════════════════════════════════ */

.footer {
  margin-top: 60px;
}

.footer ul.data {
  column-count: 3;
  column-width: 200px;
  column-rule: 1px solid rgba(120, 130, 140, 0.13);
}

.footer ul li::before {
  content: "\f105 ";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 13px;
  color: var(--gray_dark);
  position: relative;
  top: 0px;
  left: -2px;
}

.footer ul li a {
  padding-left: 2px;
  color: var(--gray_light);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer ul li:hover a,
.footer ul li:hover:before {
  color: var(--one);
}

.footer ul.data li:after {
  display: inline-block;
}

.footer .info {
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
  color: var(--white);
  width: calc(100% - 50px);
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 40px;
  position: relative;
  z-index: 1;
  bottom: -45px;
  font-size: 18px;
  border-radius: var(--bento-radius-lg);
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.25);
}

@media only screen and (max-width: 768px) {
  .footer .info {
    width: 95%;
    padding: 20px;
    text-align: center;
  }
}

.footer .info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.footer .info .contact a {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 6px 50px 6px 20px;
  display: inline-block;
  color: var(--white);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.footer .info .contact a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.footer .info .contact a i {
  position: absolute;
  top: 0px;
  right: -2px;
  width: 44px;
  height: 44px;
  background: var(--white);
  color: var(--one);
  border-radius: 50%;
  text-align: center;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer .agency {
  background-color: #1a1a2e;
  padding-top: 80px;
  padding-bottom: 40px;
  color: var(--gray_light);
  justify-content: center !important;
  border-bottom: 1px solid rgba(120, 130, 140, 0.13);
}

.footer .main {
  background-color: #1a1a2e;
  padding-top: 20px;
  padding-bottom: 50px;
  color: #98969b;
  justify-content: center !important;
}

.footer a {
  color: var(--a_light);
  transition: color 0.3s ease;
}

.footer a:hover,
.footer a.active {
  color: var(--five_light);
}

.footer ul {
  list-style: none;
  padding: 0px;
}

.footer .tiny {
  background-color: #12121a;
  color: #98969b;
  font-size: 13px;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer .logo {
  filter: brightness(1.2);
  opacity: 0.9;
}

.footer .title {
  color: var(--five_light);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 20px;
  font-size: 0.85rem;
}

.footer .contact {
  line-height: 1.8;
}

.footer .social {
  margin-top: 2px;
}

.footer .links {
  line-height: 2;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN BLOCKS — Bento Grid Cards (Hero section)
   ═══════════════════════════════════════════════════════════════ */

.main_blocks {
  overflow: hidden;
}
.main_blocks .card-body {
  padding: 0 10px;
}
.main_blocks a.title {
  display: block;
  font-size: 18px;
  color: #3a3c41;
  height: 25px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main_blocks .card-body .row div {
  padding-right: 5px;
  padding-left: 5px;
}
.main_blocks figure span {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--two);
  color: var(--white);
  font-size: 13px;
  padding: 3px 10px 4px 8px;
  border-radius: 12px 12px 42px 12px;
  z-index: 10;
}
.main_blocks figure {
  position: relative;
  overflow: hidden;
  margin: 10px 0;
  /*min-width: 220px;
  max-width: 310px;*/
  width: 100%;
  background: var(--white);
  color: #000000;
}
.main_blocks figure * {
  box-sizing: border-box;
  transition: all 0.35s ease-in-out;
}
.main_blocks figure img {
  /*max-width: 100%;*/
  position: relative;
  display: block;
}
.main_blocks figure:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 90%;
  z-index: 1;
  left: -20%;
  background: var(--background_white_transparent);
  border: 1px solid var(--white);
  transition: all 0.4s ease-in-out;
  transform: skewX(-30deg) translateX(-80%);
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
}
.main_blocks figure figcaption {
  position: absolute;
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -45%);
  z-index: 1;
  opacity: 0;
}
.main_blocks figure .position {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 2px 5px 5px 5px;
  color: var(--white);
  background: var(--two);
  z-index: 1;
  font-weight: bold;
}
.main_blocks figure:hover figcaption,
.main_blocks figure.hover figcaption {
  opacity: 1;
  transition-delay: 0.2s;
}
.main_blocks figure:hover:before,
.main_blocks figure.hover:before {
  transform: skewX(-30deg) translateX(28%);
}


.main_blocks.arts .card {
  border: 0;
}
.main_blocks.arts .card .card-body {
  /*height: 30px;
  margin-top: -30px;*/
  padding: 0 !important;
}
.main_blocks.arts .card .card-img-top {
  height: 250px;
  object-fit: cover;
}
.main_blocks.arts .card .card-body p {
  height: 100%;
  padding: 4px;
  margin: 0;
  background-color: var(--one);
  color: var(--white);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK GENERATOR — Article inline blocks
   ═══════════════════════════════════════════════════════════════ */

.block_generator div img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  margin: 0 !important;
  padding: 0;
  border-radius: var(--bento-radius-sm);
  box-shadow: var(--glass-shadow);
}

.block_generator div p.price {
  text-align: center;
  letter-spacing: -0.05rem;
  font-weight: 700;
  color: var(--price);
  font-size: 1.2rem;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   MAP — Glassmorphic map container
   ═══════════════════════════════════════════════════════════════ */

#map, #panorama {
  width: 100%;
  height: 350px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  margin-bottom: 16px;
  text-align: center;
  border-radius: var(--bento-radius);
  overflow: hidden;
}

.map_link {
  border-radius: var(--bento-radius);
  margin: 0 auto 16px auto;
  position: relative;
  width: 98%;
  background: linear-gradient(135deg, #FFF5EB 0%, #FFEDD5 100%);
  border: 1px solid rgba(255, 140, 0, 0.2);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.map_link:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.map_link::before {
  backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(255, 100, 0, 0.08) 0%, rgba(255, 100, 0, 0.02) 100%);
  border-radius: var(--bento-radius) 0 0 var(--bento-radius);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 500ms ease 0s;
  width: 82px;
}

.map_link:hover::before {
  width: 100%;
  border-radius: var(--bento-radius);
}

.map_link .left {
  float: left;
  padding: 16px;
  text-align: center;
}

.map_link .left i.fa {
  color: #FF6400;
  font-size: 48px;
  width: 60px;
  transition: transform 0.3s ease;
}

.map_link:hover .left i.fa {
  transform: scale(1.1);
}

.map_link .right {
  overflow: hidden;
  padding: 20px 16px 20px 24px;
  color: #FF6400;
  font-size: 16px;
  font-weight: 600;
}

.map_link .right i {
  color: var(--gray_dark);
  font-size: 13px;
  margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   OFFER MODAL — Glassmorphic popup
   ═══════════════════════════════════════════════════════════════ */

#offer {
  display: none;
  left: 0;
  right: 0;
  top: 15%;
  width: 500px;
  max-height: none;
  overflow: hidden;
  background: var(--white);
  position: fixed;
  margin: auto;
  max-width: 100%;
  z-index: 2147483645;
  color: var(--a_dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border-radius: var(--bento-radius-lg);
  border: 1px solid var(--glass-border);
}

#offer .title {
  background: linear-gradient(135deg, #329B58 0%, #059669 100%);
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

#offer .title i {
  background: var(--white);
  color: #329B58;
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#offer .title i.h3 {
  float: none;
  margin: 0 12px 0 0;
  padding: 0;
}

#offer .title h3 {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  color: var(--white);
  margin: 0;
  flex: 1;
}

#offer .triangle {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  border-left: 245px solid transparent;
  border-right: 245px solid transparent;
  border-top: 20px solid #329B58;
  z-index: 100;
}

#offer .body {
  padding: 20px;
}

#offer #intro, #offer #form {
  overflow: hidden;
}

#offer .form-group {
  margin-bottom: 16px;
}

#offer .form-group label {
  margin-bottom: 4px;
  background: transparent;
  color: var(--gray_dark);
  margin-left: 0;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 93%;
  font-size: 0.9rem;
}

#offer .form-group input {
  margin-top: 0;
  border-radius: var(--bento-radius-sm);
  border: 1px solid var(--gray_light);
  padding: 10px 14px;
  background: var(--white);
  transition: var(--transition-fast);
}

#offer .form-group input:focus {
  border-color: #329B58;
  box-shadow: 0 0 0 3px rgba(50, 155, 88, 0.15);
}

#offer p.privacy {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray_dark);
}

@media (orientation: landscape) and (max-height: 650px) {
  #offer {
    top: 280px !important;
    position: absolute !important;
  }
}

@media screen and (max-width: 500px) {
  #offer {
    width: 300px;
    border-radius: var(--bento-radius);
  }
  
  #offer h3 {
    font-size: 16px !important;
  }
  
  #offer .triangle {
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
  }
  
  #offer .body {
    padding: 16px;
  }
}

#offer_button {
  background: linear-gradient(135deg, #329B58 0%, #059669 100%);
  border-radius: 50%;
  color: var(--white);
  font-size: 20px;
  margin: 8px 4px 6px 1px;
  padding: 0;
  position: fixed;
  top: -2px;
  z-index: 2147483646;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(50, 155, 88, 0.4);
  border: 3px solid var(--white);
  transition: var(--transition-smooth);
}

#offer_button:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 24px rgba(50, 155, 88, 0.5);
}

#offer_button.right {
  right: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   BASKET — Glassmorphic floating cart
   ═══════════════════════════════════════════════════════════════ */

#basket {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 380px;
  max-width: 94%;
  max-height: 90vh;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: width 300ms ease-in-out, max-height 300ms ease-in-out, box-shadow 150ms linear;
  border-radius: var(--bento-radius);
  padding: 16px;
  overflow: hidden;
  z-index: 10000;
  box-shadow: var(--glass-shadow-hover);
}

#basket:hover {
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.15);
}

#basket > .title {
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: var(--a_dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#basket > .title::after {
  font-family: "Font Awesome 5 Free";
  content: "\f077";
  font-size: 14px;
  margin-left: 8px;
  line-height: 1;
  width: 28px;
  height: 28px;
  background: var(--gray_light);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 300ms ease, background-color 0.2s ease;
}

#basket.closed > .title::after {
  transform: rotate(-180deg);
  background: var(--one);
  color: var(--white);
}

#basket .html {
  display: flex;
  flex-direction: column;
  max-height: calc(80vh - 50px);
}

#basket .html .objects {
  display: block;
  height: 100%;
  overflow-x: hidden;
  padding: 0;
}

#basket .form {
  max-height: calc(80vh - 50px);
  padding: 0;
  overflow: auto;
}

#basket .form .privacy {
  font-size: 13px;
  color: var(--gray_dark);
}

#basket .form .privacy label {
  margin-bottom: 0;
}

#basket.closed {
  width: 260px;
  max-height: 52px;
  transition: width 300ms 100ms ease-in-out, max-height 300ms 0ms ease-in-out, border 300ms 0ms ease-in-out, box-shadow 150ms linear;
  border: 1px solid var(--glass-border);
  padding: 12px 16px;
}

#basket .objects,
#basket .html .info {
  opacity: 1;
  transition: opacity 200ms ease-in-out;
}

#basket.closed .objects,
#basket.closed .html .info {
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

#basket .html .info {
  padding: 12px 0;
  border-top: 1px solid var(--gray_light);
  margin-top: 12px;
}

#basket .objects .object {
  border: 1px solid var(--glass-border);
  padding: 12px;
  margin-bottom: 12px;
  background: var(--white);
  border-radius: var(--bento-radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: var(--transition-smooth);
}

#basket .objects .object:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#basket .objects .object .title {
  float: right;
  font-weight: 700;
  text-align: right;
  width: calc(100% - 90px);
  color: var(--a_dark);
  font-size: 0.95rem;
}

#basket .objects .object .image {
  float: left;
  width: 80px;
  max-height: 80px;
  overflow: hidden;
  border-radius: 8px;
}

#basket .objects .object .image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

#basket .objects .object .price {
  float: left;
  line-height: 31px;
  font-weight: 700;
  color: var(--price);
  font-size: 1.1rem;
}

#basket .objects .object .tools {
  float: right;
  display: flex;
  gap: 4px;
}

#basket .objects .object .tools .ordered {
  background: var(--a_dark) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

#basket .form-group {
  margin-bottom: 0.5rem;
}

#basket_float {
  width: 250px;
  height: 250px;
  overflow: hidden;
  border: 2px solid var(--glass-border);
  border-radius: var(--bento-radius);
  position: absolute;
  background: var(--glass-bg);
  z-index: 10001;
  box-shadow: var(--glass-shadow-hover);
}

#basket_float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET MESSAGES — Radial menu (Soft UI + Glassmorphism)
   ═══════════════════════════════════════════════════════════════ */

.widget_messages {
  width: 280px;
  height: 280px;
  margin: 0;
  position: fixed;
  bottom: -200px;
  right: -200px;
  transition: bottom 400ms ease-out, right 400ms ease-out;
  z-index: 1010;
}

.widget_messages.open {
  bottom: 16px;
  right: 16px;
}

.widget_messages .menu_circle {
  width: 280px;
  height: 280px;
  opacity: 0;
  transform: scale(0);
  transition: all 400ms ease-in-out;
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.2);
  border-radius: 50%;
}

.widget_messages.open .menu_circle {
  display: flex;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
}

.widget_messages .menu_circle a {
  text-decoration: none;
  color: white;
  height: 44px;
  width: 44px;
  line-height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--four) 0%, var(--four_dark) 100%);
  border-radius: 12px; /* фиксированный px вместо 50% */
  text-shadow: none;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
  transition: var(--transition-smooth);
}

.widget_messages .menu_circle a:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

.widget_messages .menu_button {
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 48px;
  width: 48px;
  line-height: 48px;
  padding: 0;
  transition: all 200ms linear;
  cursor: pointer;
}

.widget_messages.open .menu_button {
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}

.widget_messages .menu_button:hover {
  transform: scale(1.05);
}

.widget_messages.open .menu_circle ~ .menu_button em,
.widget_messages.open .menu_circle ~ .menu_button u {
  display: none;
}

.widget_messages .menu_button em,
.widget_messages .menu_button u,
.widget_messages .menu_button span {
  display: block;
  position: absolute;
  border-radius: 50%;
  transform-origin: center center;
  transition: all 500ms ease;
}

/* Pulse rings — через opacity, не filter */
.widget_messages .menu_button em {
  width: 80px;
  height: 80px;
  top: -16px;
  left: -16px;
  border: 2px solid #93A8B2;
  opacity: 0.5;
  background: #f00;
  animation: widget_menu_anim1 1.2s infinite ease-in-out;
}

.widget_messages .menu_button u {
  width: 56px;
  height: 56px;
  top: -4px;
  left: -4px;
  text-decoration: none;
  background: rgba(110, 154, 193, 0.2);
  opacity: 0.3;
  animation: widget_menu_anim2 2.3s infinite ease-in-out;
}

.widget_messages .menu_button span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, var(--four) 0%, var(--four_dark) 100%);
  opacity: 0.9;
  animation: widget_menu_anim3 2s infinite ease-in-out, widget_menu_bg_change 10s infinite;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.widget_messages.open .menu_circle ~ .menu_button span {
  top: -6px;
  left: -6px;
  padding: 0;
  width: 48px;
  height: 48px;
  font-size: 24px;
  animation: unset;
  box-shadow: var(--glass-shadow-hover);
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
}

/* Social brand colors in open state */
.widget_messages.open .menu_circle .social_phone,
.widget_messages.open .menu_circle .social_mail {
  background: linear-gradient(135deg, var(--one) 0%, var(--one_dark) 100%);
}

.widget_messages.open .menu_circle .social_whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.widget_messages.open .menu_circle .social_telegram {
  background: linear-gradient(135deg, #0088CC 0%, #005F8C 100%);
}

.widget_messages.open .menu_circle .social_max {
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  color: #2CA3E0;
}

.widget_messages.open .menu_circle .social_instagram {
  background: linear-gradient(135deg, #E4405F 0%, #C13584 100%);
}

.widget_messages.open .menu_circle .social_vk {
  background: linear-gradient(135deg, #4A76A8 0%, #3B5E8C 100%);
}

.widget_messages.open .menu_circle .social_facebook {
  background: linear-gradient(135deg, #1877F2 0%, #0D5FCE 100%);
}

.widget_messages.open .menu_circle .social_odnoklassniki {
  background: linear-gradient(135deg, #EE8208 0%, #D46E00 100%);
}

.widget_messages.open .menu_circle .social_viber {
  background: linear-gradient(135deg, #7360F2 0%, #5A4AD9 100%);
}

/* Keyframes — только transform и opacity (60 FPS гарантировано) */
@keyframes widget_menu_anim1 {
  0% {
    transform: rotate(0deg) scale(0.5) skew(1deg);
    opacity: 0.1
  }
  30% {
    transform: rotate(0deg) scale(.7) skew(1deg);
    opacity: 0.5
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.1
  }
}
@keyframes widget_menu_anim2 {
  0% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.2
  }
  100% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2
  }
}
@keyframes widget_menu_anim3 {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  5% {
    transform: rotate(-15deg) scale(1) skew(1deg)
  }
  10% {
    transform: rotate(15deg) scale(1) skew(1deg)
  }
  100%, 20% {
    transform: rotate(0deg) scale(1) skew(1deg)
  }
}
@keyframes widget_menu_bg_change {
  0% {
    background: #A61919;
    color: #fff;
    font-size: 20px;
  }
  25% {
    background: #A65919;
    color: #fff;
    font-size: 14px;
  }
  50% {
    background: #0F6363;
    color: #fff;
    font-size: 16px;
  }
  75% {
    background: #148514;
    color: #fff;
    font-size: 18px;
  }
  100% {
    background: #fff;
    color: #000;
    font-size: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .widget_messages .menu_button em,
  .widget_messages .menu_button u,
  .widget_messages .menu_button span {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — Custom modern
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-page);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray_dark);
}