/*
Theme Name: My Custom Theme
Author: You
Version: 1.0.0
Text Domain: mycustomtheme
*/

/* =========================
   Base / Variables
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
:root{
  --container: 1200px;
  --gap: 16px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --border: 1px solid rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
font-family:"Inter", serif;height:100%;
display:flex;
line-height: 1.8;
flex-direction:column;
font-weight: 300;
overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.section{ padding: 56px 0; }
.h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.1; margin:0 0 16px; }
.h2{ font-size: clamp(22px, 3vw, 32px); margin:0 0 12px; }
.h3{ font-size: 18px; margin: 0 0 8px; }
.muted{ opacity:.75; }
.small{ font-size: 13px; opacity:.75; }

.prose :where(p,ul,ol){ margin: 0 0 12px; }
.prose :where(h2,h3){ margin: 20px 0 10px; }
.prose a{ text-decoration: underline; }

/* =========================
   Header
========================= */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom: var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  min-height: 64px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-logo{ max-height: 40px; width:auto; }
.brand-text{ font-weight: 700; }

.nav{ margin-left: auto; }
.menu{
  list-style:none;
  display:flex;
  gap: 18px;
  padding:0;
  margin:0;
}
.menu a{ text-decoration:none; color:inherit; opacity:.85; }
.menu a:hover{ opacity:1; }

.header-actions{ display:flex; align-items:center; gap: 10px; }
.messengers{ display:flex; gap: 8px; align-items:center; }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border: var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 8px 10px;
  text-decoration:none;
  color:inherit;
  min-height: 38px;
}
.icon-btn img{ width: 25px; height: 25px; object-fit: contain; }
.icon-btn--wide{ width: 100%; justify-content:flex-start; }

/* =========================
   Burger & Mobile Drawer
========================= */
.burger{
  display:none;
  border: var(--border);
  background:#fff;
  border-radius: 12px;
  width: 44px;
  height: 44px;
}
.burger-lines{
  display:block;
  width: 20px;
  height: 2px;
  background: currentColor;
  margin: 0 auto;
  position: relative;
}
.burger-lines::before,
.burger-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background: currentColor;
}
.burger-lines::before{ top:-6px; }
.burger-lines::after{ top:6px; }

.mobile-drawer{
  border-top: var(--border);
  background:#fff;
}
.mobile-drawer-inner{
  padding: 12px 0 18px;
}
.menu--mobile{
  flex-direction: column;
  gap: 10px;
}
.messengers--mobile{
  margin-top: 12px;
  flex-direction: column;
  align-items: stretch;
}

/* =========================
   Hero
========================= */
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items:center;
}
.hero-desc{ margin-bottom: 18px; }
.hero-buttons{ display:flex; gap: 12px; flex-wrap: wrap; }

.hero-img{
  width: 500px;
  height: 500px;
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--border);
  text-decoration:none;
  color:inherit;
  min-height: 44px;
}
.btn-ico{ width: 18px; height: 18px; object-fit: contain; }
.btn-primary{ background:#111; color:#fff; border-color:#111; }
.btn-secondary{ background:#fff; }

/* =========================
   Tabs / Product Card
========================= */
.section.tabs h2 {
    text-align: center;
}
.muted {
    text-align: center;
}
.tabs-ui{ margin-top: 16px; }
.tabs-nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tab-btn{
  border: var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
}
.tab-btn[aria-selected="true"]{
  background:#111;
  color:#fff;
  border-color:#111;
}

.product-card{
  display:grid;
  grid-template-columns: 500px 1fr;
  gap: 20px;
  align-items: start;
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.product-img img{
  width: 500px;
  height: 500px;
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 14px;
}
.product-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.price{ font-weight: 800; font-size: 18px; }
.product-actions{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.inline-icons{ display:flex; gap: 8px; }

/* =========================
   Grid / Cards
========================= */
.grid{ display:grid; gap: 16px; margin-top: 16px; }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card{
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  background:#fff;
}
.card-img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 12px;
}
.service-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.section.services h2 {
    text-align: center;
}
.service-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  color: red;
}

/* =========================
   Steps
========================= */
.steps-list{
  margin-top: 18px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.step-num{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  flex: 0 0 auto;
}
.step-title{ font-weight: 800; margin-bottom: 4px; }
.section.steps h2 {
    text-align: center;
}

/* =========================
   Accordion (FAQ)
========================= */
.accordion{ margin-top: 16px; display:flex; flex-direction: column; gap: 10px; }
.acc-item{ border: var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background:#fff; }
.acc-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-size: 17px;
  font-weight: 700;
  text-align:left;
}
.acc-a{ padding: 0 16px 14px; }
.acc-ico{ font-weight: 900; }

/* =========================
   Footer / Contacts
========================= */
.site-footer{ border-top: var(--border); background:#fff; }
.footer-map iframe{ width:100%; height: 320px; border:0; display:block; }
.footer-inner{ padding: 18px 0 26px; display:flex; justify-content:space-between; gap: 16px; flex-wrap: wrap; }
.footer-contacts{ display:flex; flex-direction: column; gap: 8px; }
.footer-messengers{ margin-top: 10px; }

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .nav{ display:none; }
  .header-actions{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ order: -1; }
  .hero-img { width: 350px; height: 350px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
  .product-card{ grid-template-columns: 1fr; }
  .product-img img{ width: 100%; height: auto; }
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .grid-3{ grid-template-columns: 1fr; }
  .footer-map iframe{ height: 260px; }
}









/* =========================
   CLINICAL (MEDICAL) UI THEME
   Paste at the end of style.css
========================= */

:root{
  --container: 1200px;

  /* Clinical palette */
  --bg: #F6FAFF;          /* very light blue */
  --surface: #FFFFFF;     /* white cards */
  --surface-2: #F2F7FF;   /* section tint */
  --text: #0B1F33;        /* deep blue-gray */
  --muted: #5B6B7A;

  --primary: #1E6BFF;     /* clinical blue */
  --primary-2: #0F56E6;
  --teal: #0EA5A4;        /* optional second accent */

  --border: 1px solid rgba(11,31,51,.10);
  --radius: 18px;
  --radius-lg: 24px;

  --shadow: 0 14px 40px rgba(11,31,51,.08);
  --shadow-soft: 0 10px 24px rgba(11,31,51,.06);

  --ring: 0 0 0 4px rgba(30,107,255,.15);
}

/* Base */
body{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(30,107,255,.10) 0%, transparent 60%),
    radial-gradient(700px 420px at 90% 15%, rgba(14,165,164,.08) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
}

.section{
  padding: clamp(44px, 6vw, 80px) 0;
}

.muted{ color: var(--muted) !important; opacity: 1; }
.small{ color: var(--muted); opacity: .9; }

.h1{
  font-weight: 800;
}
.h2{
  letter-spacing: -0.01em;
  font-weight: 800;
}
.h3{
  font-weight: 800;
}

/* Links / focus */
a{ color: inherit; }
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 12px; }

/* Container */
.container{ max-width: var(--container); }

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  background: #253338;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,31,51,.08);
}
.header-inner{ min-height: 76px; }

.menu a{
  padding: 10px 12px;
  border-radius: 14px;
  color: #fff;
  background: rgb(255 255 255 / 10%);
}
.menu a:hover{
background: rgb(0 0 0 / 15%);
color: rgb(255 255 255);
}

.icon-btn{
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  padding: 5px 7px;
}
.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Burger */
.burger{
  border: 1px solid rgba(11,31,51,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
}
.mobile-drawer{
  background: rgba(255,255,255,.95);
  border-top: 1px solid rgba(11,31,51,.08);
}

/* Buttons */
.btn{
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  border-radius: 5px;
  padding: 10px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 30px rgb(0 87 255 / 40%);
}
.btn-primary:hover{
  box-shadow: 0 22px 60px rgba(30,107,255,.26);
}

.btn-secondary{
    background: #3bb300;
    color: #fff;
    border: 1px solid rgba(11, 31, 51, .10);
    box-shadow: 0 0 30px rgb(59 179 0 / 65%);
}

/* Hero (clinical card + image) */
.section.hero {background-image: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .52)), radial-gradient(900px 360px at 15% 20%, rgba(0, 188, 212, .22), transparent 60%), url(/wp-content/uploads/2026/02/bg-site.png);}
.hero-grid{ gap: 28px; align-items: stretch; }

.hero-left{
  background: rgb(0 0 0 / 15%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.hero-left:hover{
  background: rgb(255 255 255 / 5%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.hero-left h1 {
    color: #fff;
}
.hero-desc{
  color: #fff;
  font-size: 16px;
}
.hero-buttons{ margin-top: 18px; font-weight: 400;}

.hero-img{
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    outline: 1px solid rgba(11, 31, 51, .06);
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgb(255 255 255 / 25%);
    padding: 25px;
}

/* Tabs (medical segmented control) */
.tabs-nav{
  background: #253338;
  border: 1px solid rgba(11,31,51,.10);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
}

.tab-btn{
  border: 0;
  border-radius: 14px;
  background: transparent;
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  color: #fff;
}
.tab-btn:hover{ background: rgba(30,107,255,.08); }
.tab-btn[aria-selected="true"]{
    background: rgb(255 255 255 / 15%);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(30, 107, 255, .18);
}

/* Product card (clinic layout) */
.product-card{
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.94);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}

.product-img img{
  border-radius: 20px;
  outline: 1px solid rgba(11,31,51,.06);
}

.price{
  font-size: 20px;
  font-weight: 900;
  color: rgba(11,31,51,1);
}

/* Grids / cards */
.card{
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.94);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-img{
  border-radius: 18px;
  outline: 1px solid rgba(11,31,51,.06);
}


/* Steps (clean vertical) */
.step{
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.94);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.step-num{
  background: linear-gradient(135deg, rgba(30,107,255,1), rgba(14,165,164,.9));
  box-shadow: 0 16px 40px rgba(30,107,255,.18);
}

/* FAQ (clinic accordion) */
.acc-item{
  border: 1px solid rgba(11,31,51,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.94);
}
.acc-q{
  padding: 16px 18px;
  color: rgba(11,31,51,.92);
}
.acc-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(30,107,255,.10);
}
.section.faq h2 {
    text-align: center;
}

/* Footer */
.site-footer{
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(11,31,51,.08);
}
.footer-map iframe{
  width:100%;
  height: 340px;
  border:0;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* Responsive tune */
@media (max-width: 980px){
  .hero-left{ padding: 18px; }
  .tabs-nav{ padding: 6px; }
}
/* Hero trust badges (clinical) */
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 14px; /* ✅ будет над кнопками */
  align-items:center;
}

.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border: 1px solid rgba(11,31,51,.10);
  background: rgb(255 255 255 / 10%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11,31,51,.06);
  font-weight: 600;
  font-size: 13px;

  /* ✅ защита от "растягивания" */
  width: auto;
  height: auto;
  max-width: 100%;
}

.trust-ico{
  width:18px;
  height:18px;
  object-fit:contain;
}


/* ===== Medical Service Cards ===== */
.service-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  overflow: hidden;
}

.service-media{
  border-radius: 18px;
  overflow: hidden;
  outline: 1px solid rgba(11,31,51,.06);
}

.service-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display:block;
}

.service-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.service-title{
  font-size: 18px;
  font-weight: 900;
  margin: 0;
  color: #0B1F33;
}

.service-subtitle{
  color: rgba(11,31,51,.70);
  font-weight: 600;
  font-size: 14px;
}

p.services-desc {
    text-align: center;
}

.service-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(30,107,255,.08);
  border: 1px solid rgba(30,107,255,.14);
  color: rgba(11,31,51,.85);
  font-weight: 700;
  font-size: 12px;
}

.service-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 2px;
}

.meta-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: rgba(11,31,51,.72);
  font-weight: 600;
  font-size: 13px;
}

.meta-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(14,165,164,.95);
  box-shadow: 0 0 0 3px rgba(14,165,164,.12);
}

.service-bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.service-price{
  font-size: 18px;
  font-weight: 900;
  color: #0B1F33;
}

.service-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Make services grid nicer on large screens */
@media (min-width: 981px){
  .service-card{
    padding: 18px;
  }
}



/* =========================
   Advantages (NEW DESIGN)
========================= */

/* Сетка: ровно 3 в ряд, красиво на клиническом дизайне */
.advantages .grid-3{
  gap: 16px;
}

/* Карточка преимущества */
.adv-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(11,31,51,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 40px rgba(11,31,51,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Лёгкий “медицинский” градиент в фоне карточки */
.adv-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(380px 240px at 20% 10%, rgba(30,107,255,.14) 0%, transparent 60%),
    radial-gradient(320px 220px at 90% 30%, rgba(14,165,164,.12) 0%, transparent 55%);
  opacity: .75;
  pointer-events:none;
}

/* Обводка-акцент при наведении */
.adv-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(30,107,255,.14);
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
}

.adv-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(11,31,51,.12);
  border-color: rgba(30,107,255,.18);
}
.adv-card:hover::after{ opacity: 1; }

/* Внутренности карточки */
.adv-card{
  padding: 18px;
}
.adv-card .icon{
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(30,107,255,.10);
  outline: 1px solid rgba(30,107,255,.18);
  position: relative;
  z-index: 1;
  transition: transform .18s ease;
}
.adv-card:hover .icon{
  transform: scale(1.05);
}

.adv-title{
  margin: 12px 0 6px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0B1F33;
  position: relative;
  z-index: 1;
}
.section.advantages h2 {
    text-align: center;
}
p.advantages-desc {
    text-align: center;
}

/* ✅ Вместо muted — отдельный класс, не влияет на другие блоки */
.adv-desc{
  margin: 0;
  color: rgba(11,31,51,.72);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}

/* Анимация появления (когда элемент становится видимым) */
.adv-card[data-anim="fade-up"]{
  opacity: 0;
  transform: translateY(14px);
}
.adv-card.is-inview{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}

/* Уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .adv-card,
  .adv-card *{
    transition: none !important;
    animation: none !important;
  }
  .adv-card[data-anim="fade-up"]{
    opacity: 1;
    transform: none;
  }
}



/* Header contacts (desktop + mobile) */
.header-contacts{
  display:flex;
  flex-direction: column;   /* 👈 главное */
  align-items: flex-start;
  gap:4px;
  margin-left: 16px;
}

.header-phone{
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}

.header-address{
  font-size: 13px;
  color: #eee;
  font-weight: 400;
}
.header-phone:hover{ opacity:.8; }

/* Если места мало — адрес скрываем раньше, телефон оставляем */
@media (max-width: 1180px){
  .header-address{ display:none; }
}
.header-phone {
    font-size: 15px;
}
/* На мобилке контакты можно показывать, но компактно */
@media (max-width: 980px){
  .header-contacts{
    margin-left: 0;
  }
.header-phone {
    font-size: 14px;
}
}