/*
 * StopNarcotics - Modern CSS for Clinic Page v2.5 (Final)
 * Основано на оригинальном CSS с полным сохранением всей структуры и логики.
 */

/* --- 1. Базовые переменные и шрифты --- */
 
:root {
    --font-primary:   Verdana, sans-serif;
    --font-secondary: "Times New Roman", serif;
    --color-surface: #ffffff;
    --color-text-primary: #1f2937;
    --color-text-secondary: #6b7280;
    --color-accent-red: #ef0021;
    --color-accent-green: #16a34a;
    --color-danger: #dc2626;
    --color-border: #e5e7eb;
    --color-form-focus: #2563eb;
}

/* --- 2. Общие стили --- */
body {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-repeat: repeat; /* Сохраняем ваш фон */
    font-family: var(--font-primary);
    font-size: 11pt;
    color: var(--color-text-primary);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: #111827;
}

h1 { font-size: 2rem; margin: 0.1em 0 0.33em; }
h2 { font-size: 1.5rem; margin: 2rem 0 1.5rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }
h3 { font-size: 1.25rem; text-align: center; color: #333; line-height: 1.5; }
h4 { font-size: 1.2rem; margin: 0.1em 0 0.33em; }

h1 a, h4 a { color: #111827; text-decoration: none; }
h1 a:hover, h4 a:hover { color: var(--color-accent-red); }

h1 a span, h4 a span {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: #fff;
    background-color: var(--color-accent-green);
    margin: 0 1rem;
    padding: 4px 12px;
    vertical-align: middle;
    border-radius: 16px;
    font-weight: 600;
}
h1 a span:hover, h4 a span:hover { background-color: #15803d; }

/* --- 3. Шапка (Header) --- */
.head {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.head a { color: #374151; margin-right: 8px; text-decoration: none; font-size: 14pt; }
.head a:hover { color: var(--color-accent-red); text-decoration: none; fill: var(--color-accent-red); }
.lefttopmenu { order: 1; padding: 20px 0 20px 20px; flex-basis: 40%; }
.logo { order: 2; text-align: center; padding-top: 10px; }
.logo img { max-height: 50px; }
.righttopmenu { order: 3; padding: 20px 20px 20px 0; flex-basis: 40%; text-align: right; }
.icon { width: 1em; height: 1em; vertical-align: -0.2em; margin-right: 5px; }

/* --- 4. Основной макет --- */
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.cent { text-align: center; }
.centerlist {
    margin: 0 0 6px 0;
    display: flex;
    width: 100%;
    max-width: 1400px; /* Увеличено для современных экранов */
    align-items: flex-start;
}

/* --- 5. Карточка и колонки --- */
.listfoto {
    position: relative;
    display: inline-block;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    border-radius: 8px;
    overflow: hidden;
}
.listfoto img { display: block; width: 100%; height: auto; object-fit: cover; }
.listfoto b {
    position: absolute; color: var(--color-accent-red); top: 15px; right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%; padding: 6px; font-size: 20px;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(0, 0, 0, 0.1); cursor: pointer;
}
.listdes {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.listdes p { margin: 15px 0 5px 0; }
.listdes p a { font-size: 11pt; color: var(--color-text-secondary); }
.listdes p a:hover { color: var(--color-text-primary); text-decoration: none; }
.listdes .on { position: absolute; color: #fff; top: 1.5rem; right: 1.5rem; background-color: var(--color-accent-green); padding: 5px 15px; border-radius: 12px; font-size: 0.8rem; }
.listdes .off { position: absolute; color: var(--color-text-secondary); top: 1.5rem; right: 1.5rem; background-color: #f3f4f6; padding: 5px 15px; border-radius: 12px; font-size: 0.8rem; }
.listdes h2 {padding: 0 20px; text-align: center;}
.listadr { border-top: 1px solid var(--color-border); margin-top: 1rem; padding-top: 1rem; }
.listadr div { display: flex; justify-content: space-between; }
.listfotostik {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1rem;
    border-radius: 12px;
}
.listfotostik p { padding: 10px 0; }
.listfotostik p a, .listdes p a { color: var(--color-text-primary); }
.listfotostik p a:hover, .listdes a:hover { color: var(--color-accent-red); text-decoration: none; }
.listfotostik a.knopka {
    text-align: center; color: #fff; text-decoration: none;
    background-color: var(--color-accent-red);
    padding: 12px 0; border-radius: 8px; width: 100%;
    display: inline-block; transition: background-color 0.2s ease;
    font-weight: 600; border: none;
}
.listfotostik a.knopka:hover { background-color: #c0001a; }
.tvb {display: flex;    justify-content: space-between;  max-width: 60px;  align-items: center;}
/* --- 6. Контентные блоки --- */
.text-block { line-height: 1.6; padding: 1.5rem; }
.content { overflow: hidden; max-height: 21em; transition: max-height 0.3s ease; }
#show-more-btn {
    display: none; margin: 1rem auto;
    background-color: #eef2ff; color: #3730a9;
    border: none; padding: 8px 16px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s; font-weight: 500;
}
#show-more-btn:hover { background-color: #e0e7ff; color: #312e81; }
.expanded { max-height: 1000px; }

.listservice { list-style: none; padding: 0; text-align:center; }
.listservice li { margin-bottom: 10px; display: inline-block; border: 1px solid var(--color-border); padding: 0 10px; line-height: 160%; margin-right: 5px; border-radius: 16px; }
.listservice li:hover { border: 1px solid #9ca3af; background-color: #f3f4f6; }
.listservice li a {color: #333; text-decoration: none;}
.listservice li a:hover {color: #111827;}

.pad { padding: 1.5rem; }
.otzivi { padding: 1.5rem; }
.otzivi h4 { text-align: center; padding: 10px 0; }
.otz { border-top: 1px solid var(--color-border); line-height: 1.4; padding: 1.5rem 0; }
.otz:first-child { border-top: none; }
.otz .data { display: flex; justify-content: space-between; }
.otz .data span { color: var(--color-text-secondary); }
.otz p { margin-top: 5px; }
.otz .data .plus { color: var(--color-accent-green); font-size: 1.4em; }
.otz .data .minus { color: var(--color-danger); font-size: 1.4em; }
.otz .data .neutral { color: var(--color-text-secondary); font-size: 1.4em; }
.otz .plus { color: var(--color-text-primary); }
.otz .minus { color: #b91c1c; }
.otz p i { color: #111827; line-height: 200%; font-style: normal; font-weight: 600; }
.otz .otvet { padding: 1rem; border-left: 4px solid var(--color-accent-blue); background-color: #f9fafb; margin-top: 1rem; }

.articl { display: flex; flex-wrap: wrap; padding: 1.5rem; border-top: 1px solid var(--color-border); }
.articl .art { max-width: 48%; flex-grow: 1; border: 1px solid var(--color-border); display: flex; flex-direction: column; box-sizing: border-box; padding: 1rem; border-radius: 8px; margin: 5px 1%; }
.articl .art p { padding: 10px; display: flex; justify-content: space-between; margin: 0; }
.articl .art span { color: #888; }
.articl .art .spacer { flex-grow: 1; }
.articl .art .cvs { display: flex; justify-content: space-between; }
.articl .art .cv { display: flex; align-items: center; padding: 0 10px; }
.articl .art p a { font-size: 1.2em; font-weight: bold; }
.view, .com { background-repeat: no-repeat; background-size: contain; width: 1em; height: 1em; }
.view { background-image: url('data:image/svg+xml;utf8,<svg fill="%236b7280" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>'); margin-right: 5px; }
.com { background-image: url('data:image/svg+xml;utf8,<svg fill="%236b7280" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>'); margin-right: 10px; }

/* Таблица */
.table-container { width: 100%; overflow-x: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
thead { background-color: #f3f4f6; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--color-border); }
th { font-weight: 600; color: var(--color-text-secondary); }
tbody tr:hover { background-color: #f9fafb; }

/* --- 10. Формы (сохранено и улучшено) --- */
form { margin: 20px 0; padding: 20px; border-top: 1px solid var(--color-border); }
label { display: block; margin-bottom: 5px; font-weight: 600; color: #374151; }
input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #d1d5db;
    border-radius: 6px; box-sizing: border-box; transition: all 0.2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}
button {
    display: block; width: 100%; padding: 12px; border: none;
    border-radius: 8px; background-color: var(--color-accent-red);
    color: #fff; font-size: 16px; cursor: pointer; transition: all 0.2s;
    font-weight: 600; text-align: center;
}
button:hover { background-color: #be001a; box-shadow: 0 4px 10px rgba(234, 76, 98, 0.3); }
.formoc {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  font-family: var(--font-primary);
  flex-wrap: wrap;
}

.formoc div {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--color-text-primary);
  position: relative;
}
.formoc input[type="radio"] {
  display: none;
}

/* Базовый стиль кнопки */
.formoc .vvt label {
  flex: 1;
  border: 2px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: block;
  min-width: 160px;
}

.formoc label:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Активный выбор — через :checked и for */
#option1:checked ~ label[for="option1"] {
  background-color: var(--color-accent-green);
  color: white;
}

#option2:checked ~ label[for="option2"] {
  background-color: #9ca3af;
  color: white;
}

#option3:checked ~ label[for="option3"] {
  background-color: var(--color-danger);
  color: white;
}


/* --- 11. Футер (сохранено и улучшено) --- */
footer { background-color: #1f2937; color: #9ca3af; padding: 20px 0; }
.footer-bottom { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #374151; }
.footer-bottom p { margin: 0; padding: 5px 0; }
.footer-links { list-style: none; padding: 0; display: flex; justify-content: center; }
.footer-links li { margin: 15px; }
.footer-links a { color: #d1d5db; text-decoration: none; }
.footer-links a:hover { color: #fff; }

        /* ДОБАВЛЕНО: Стили для галереи и лайтбокса */
        .clinic-gallery { padding: 5px 20px 20px 20px; background-color:rgba(83,214,243,0.05);}
        .clinic-gallery h3 { text-align: left; margin-left: 0; }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
        .gallery-thumbnail { cursor: pointer; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; aspect-ratio: 4 / 3; }
        .gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
        .gallery-thumbnail:hover img { transform: scale(1.05); }
        .lightbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center; }
        .lightbox-content { max-width: 90%; max-height: 90%; }
        .lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }
        .lightbox-close:hover { color: #ccc; }
        
        /* ДОБАВЛЕНО: Стили для блока доп. информации */
        .clinic-features { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.5rem ; background-color: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; }
        .feature-item { display: flex; align-items: center; gap: 0.5rem; background-color: #fff; padding: 0.5rem 1rem; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .feature-item .icon { width: 20px; height: 20px; fill: #6b7280; }
        .feature-item span { font-weight: 500; color: #374151; }

.star-rating-display {
    display: flex;
    align-items: center;
    justify-content: center;  
    gap: 0.5rem;  
    margin-top: 10px;
    margin-bottom: 10px;
}

.star-rating-display .stars {
    position: relative;
    display: inline-block;
    color: #eaeff6;  
    font-size: 2.6rem;  
    line-height: 1;
}

.star-rating-display .stars::before {
    content: '★★★★★';
    -webkit-text-stroke: 1px #ccc;  
}

.star-rating-display .stars-filled {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #f59e0b;  
    width: var(--rating-percent, 0%); 
}

.star-rating-display .stars-filled::before {
    content: '★★★★★';
    -webkit-text-stroke: 1px #ca8a04; 
}


/* --- Стили для модального окна с картой --- */
.map-lightbox {
    display: none; /* По умолчанию скрыто */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.map-lightbox-content {
    position: relative;
    background-color: #fefefe;
    width: 80%;
    height: 80%;
    max-width: 900px;
    max-height: 700px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    border-radius: 8px;
    overflow: hidden;
}

.map-lightbox-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-lightbox-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    background-color: #333;
    border: 2px solid white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

.map-lightbox-close:hover,
.map-lightbox-close:focus {
    background-color: #ef0021;
    color: white;
    text-decoration: none;
}
a.adress {color: var(--color-accent-green)!important;}
a.adress:hover {color: var(--color-text-primary)!important;}
/* --- 12. Адаптивность (сохранена) --- */
@media (max-width: 480px) {
    .lefttopmenu a span { display: none; }
    .container { flex-direction: column; padding: 0; }
    .centerlist { flex-direction: column; margin: 0 0 20px 0; }
    .listfotostik { max-width: 100%; }
    .listdes { border-left: none; border-right: none; }
    .articl .art { max-width: 98%; }
}
@media (min-width: 481px) and (max-width: 960px) {
    .lefttopmenu a span { display: none; }
    .container { flex-direction: column; padding: 10px; }
    .centerlist { flex-direction: row; }
    .listfotostik { max-width: 25%; position: sticky; top: 20px; }
    .listdes { width: 100%; }
        .articl .art { max-width: 98%; }

}
@media (min-width: 961px) and (max-width: 1200px) {
    .lefttopmenu a span { display: none; }
    .container { padding: 40px; }
    .leftblok { min-width: 60%; padding-right: 10px; }
    .listdes { width: 72%; }
    .listfotostik { max-width: 28%; position: sticky; top: 20px; }
}
@media (min-width: 1201px) {
    .container { padding: 40px 0; max-width: 1400px; margin: 0 auto; }
    .leftblok { min-width: 60%; padding-right: 10px; }
    .listdes { width: 75%; }
    .listfotostik { max-width: 25%; position: sticky; top: 20px; }
}