/* ══════════════════════════════════════════
   МОБІЛЬНЕ МЕНЮ — повністю переробити поведінку
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Хедер на мобільному — відносний, не фіксований
     щоб меню розсувало сторінку вниз */
  #header,
  .header.style1 {
    position: relative !important;
    top: auto !important;
    z-index: 9999 !important;
  }

  /* Компенсуємо — body padding тільки для топбара */
  body {
    padding-top: 72px !important;
  }

  /* Мобільне меню — static, тягне сторінку вниз */
  #mainnav-mobi {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    overflow-y: visible !important;
    z-index: 9998 !important;
    width: 100% !important;
  }

  /* Логотип і кнопка меню у хедері */
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }

  .btn-menu {
    display: block !important;
    float: none !important;
  }
}

/* ══════════════════════════════════════════
   КРИТИЧНІ ВИПРАВЛЕННЯ
   ══════════════════════════════════════════ */

/* 1. ТОПБАР — завжди фіксований вгорі, НЕ рухається */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000001 !important;
}

/* 2. Хедер — під топбаром */
.header.style1 {
  position: fixed !important;
  top: 40px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000000 !important;
  background: #fff !important;
}

@media (max-width: 768px) {
  .header.style1 {
    top: 72px !important;
  }
}

/* 3. Body padding щоб контент не ховався */
body {
  padding-top: 113px !important; /* 40px topbar + 73px header */
}

@media (max-width: 768px) {
  body {
    padding-top: 145px !important; /* 72px topbar + 73px header */
  }
}

/* 4. Мобільне меню — кнопка "Записатись" НЕ перекриває меню */
@media (max-width: 768px) {
  /* Мобільне меню — static, розсуває сторінку вниз */
  #mainnav-mobi {
    position: static !important;
    top: auto !important;
    overflow-y: visible !important;
    z-index: 999998 !important;
    margin-top: 0 !important;
  }

  /* Хедер при відкритому меню не перекриває пункти */
  #header {
    position: relative !important;
    top: auto !important;
  }

  /* Повертаємо body padding тільки для закритого стану */
  body.menu-open {
    padding-top: 0 !important;
  }

  /* Кнопка "Записатись" в топбарі — прибираємо з меню overlap */
  .btn-appointment {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Топбар на мобільному */
  .topbar {
    height: auto !important;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
  }

  .topbar .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .topbar-left {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .topbar-right {
    width: 100% !important;
  }

  .license {
    display: none !important;
  }
}


/* ── ТОПБАР — фіксований, не рухається зі скролом ── */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000000 !important;
}

/* Компенсація висоти топбару щоб контент не ховався під ним */
body {
  padding-top: 40px;
}

@media (max-width: 768px) {
  body {
    padding-top: 72px;
  }
}

/* ── SERVICES: герой-блок з фото ── */
@media (max-width: 768px) {
  /* Блок з фото зліва і текстом справа */
  section > div[style*="display:flex"][style*="height:500px"],
  section > div[style*="display:flex; align-items:center; overflow:hidden"] {
    flex-direction: column !important;
    height: auto !important;
  }

  section > div[style*="display:flex"] > div[style*="width:35%"] {
    width: 100% !important;
    height: 240px !important;
    flex-shrink: 0;
  }

  section > div[style*="display:flex"] > div[style*="flex:1; padding:40px 52px"] {
    padding: 24px 20px !important;
  }

  /* Блок форма + телефон */
  section > div[style*="display:flex"][style*="gap:0"] {
    flex-direction: column !important;
  }

  section > div > div[style*="padding:20px 80px"] {
    padding: 24px 20px !important;
    text-align: left !important;
  }

  section > div > div[style*="padding:20px 80px"] a {
    font-size: 28px !important;
  }

  /* Таблиця цін */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================
   DENTAL WHITE — МОБІЛЬНА АДАПТАЦІЯ
   Підключити в index.html ПІСЛЯ style.css:
   <link rel="stylesheet" href="stylesheets/mobile.css">
   ============================================= */

/* ── ТОПБАР ── */
@media (max-width: 768px) {
  .topbar {
    height: auto;
    padding: 6px 12px;
    line-height: 1.4;
  }

  .topbar .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
  }

  .topbar-left {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .license {
    display: none; /* ховаємо ліцензію на мобільному — занадто довга */
  }

  .btn-appointment {
    font-size: 11px;
    padding: 5px 12px;
  }

  /* Підіймаємо хедер нижче topbar */
  :root { --topbar-h: 72px; }
  .header.style1 { margin-top: var(--topbar-h); }
  #header.downscrolled,
  #header.upscrolled { top: var(--topbar-h) !important; }
}

/* ── ХЕДЕР / ЛОГОТИП ── */
@media (max-width: 768px) {
  .header-inner .logo {
    padding: 8px 60px 8px 12px;
    margin: 0;
  }

  .header-inner .logo img {
    max-height: 48px;
    width: auto;
  }

  .btn-menu {
    display: block;
  }
}

/* ── ГЕРОЙ СЕКЦІЯ (перший блок) ── */
@media (max-width: 768px) {
  .flat-row.nopad .col-md-5,
  .flat-row.nopad .col-md-7 {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .about-wrap.padding-left61px {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .about-wrap h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  .single-images img {
    width: 100%;
    height: auto;
    display: block;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .buttons a {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}

/* ── СЕКЦІЯ "ПРО НАС" З ФОТО КОМАНДИ ── */
@media (max-width: 768px) {
  section#about > div[style*="position:relative"] {
    min-height: auto !important;
  }

  section#about img[src*="team_dr"] {
    position: relative !important;
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  section#about > div > div[style*="margin-left:50%"] {
    margin-left: 0 !important;
    padding: 32px 16px !important;
    min-height: auto !important;
  }

  section#about > div > div[style*="position:absolute; top:0; left:0; bottom:0; width:55%"] {
    display: none !important;
  }

  section#about > div > div[style*="position:absolute; top:0; left:0; right:0; height:80px"] {
    display: none !important;
  }
}

/* ── ФОРМА ЗАПИСУ ── */
@media (max-width: 768px) {
  .dw-contact-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 16px !important;
  }

  .dw-contact-form {
    padding: 24px 16px !important;
  }

  .dw-contact-title {
    font-size: 26px !important;
  }
}

/* ── ЛІЧИЛЬНИКИ / INFO-BOXES ── */
@media (max-width: 768px) {
  .flat-row.row-counter .row {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .info-box {
    width: calc(50% - 16px) !important;
    min-width: 140px;
  }
}

/* ── ПРОПОЗИЦІЇ (картки послуг) ── */
@media (max-width: 768px) {
  .dw-offers-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
  }

  .dw-offers-title {
    font-size: 26px !important;
  }
}

/* ── ВІДГУКИ ── */
@media (max-width: 768px) {
  .dw-review-card {
    min-width: 280px !important;
    max-width: 85vw !important;
  }

  .dw-reviews-title {
    font-size: 26px !important;
  }
}

/* ── КОМАНДА ── */
@media (max-width: 768px) {
  .flat-team-group {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .flat-team-group {
    grid-template-columns: 1fr !important;
  }
}

/* ── ПОРТФОЛІО ── */
@media (max-width: 768px) {
  .ba-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── СЕКЦІЯ "МІСІЯ" ── */
@media (max-width: 768px) {
  section[style*="background:#1b2533"] h2 {
    font-size: 24px !important;
  }

  section[style*="background:#1b2533"] > div {
    flex-direction: column !important;
    gap: 12px !important;
  }

  section[style*="background:#1b2533"] a {
    width: 100%;
    text-align: center;
  }
}

/* ── БЛОК "ЗАТЕЛЕФОНУЙТЕ" ── */
@media (max-width: 768px) {
  section[style*="background:#1b2533"] .container,
  section[style*="padding:48px"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  section[style*="padding:48px"] a[href*="tel"] {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── КОНТАКТИ / КАРТА ── */
@media (max-width: 768px) {
  #contact .col-md-6 {
    width: 100% !important;
    padding: 0 !important;
  }

  #contact iframe {
    height: 300px !important;
  }

  #contact .col-md-6:last-child {
    padding: 32px 16px !important;
  }
}

/* ── ФУТЕР ── */
@media (max-width: 768px) {
  footer {
    padding: 48px 0 32px;
  }

  .footer-widgets .widget {
    padding: 24px 16px;
    margin-bottom: 0;
  }

  .footer-widgets .row {
    display: flex;
    flex-direction: column;
  }
}

/* ── ЗАГАЛЬНЕ ── */
@media (max-width: 768px) {
  /* Прибираємо горизонтальний скрол */
  body, html {
    overflow-x: hidden;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Великі заголовки зменшуємо */
  h2 { font-size: 26px !important; line-height: 1.3 !important; }
  h3 { font-size: 20px !important; }
}

/* ── SERVICES: картки послуг ── */
@media (max-width: 768px) {
  .dw-services-grid {
    grid-template-columns: 1fr !important;
  }

  .dw-services-section {
    padding: 32px 16px 48px !important;
  }

  .dw-services-title {
    font-size: 20px !important;
  }

  .dw-card {
    padding: 14px !important;
  }

  /* Таблиця цін — горизонтальний скрол */
  .dw-price-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }

  .dw-price-table table {
    min-width: 500px;
  }
}

/* ── SERVICES: форма + телефон поруч ── */
@media (max-width: 600px) {
  /* Будь-який flex з двома колонками на services ── */
  section div[style*="display:flex"][style*="border-top"] {
    flex-direction: column !important;
  }
}