/* КПКІТП — consultations.css
   ВАЖЛИВО: стилі ізоляційні (не ламають Bootstrap і інші сторінки),
   працюють тільки в межах .consultations-wrap (і запасний варіант .page-container).
*/

.consultations-wrap,
.page-container{
  /* нічого, просто “якір” для ізоляції */
}

/* Контейнер і заголовки */
.consultations-wrap .page-title,
.page-container .page-title{
  color: var(--kp-violet);
  font-size: clamp(20px, 4vw, 28px);
  margin-bottom: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

.consultations-wrap .section-title,
.page-container .section-title{
  font-size: clamp(18px, 3.5vw, 24px);
  color: var(--kp-violet-2);
  margin-bottom: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* Таблиця */
.consultations-wrap .schedule-table th,
.consultations-wrap .schedule-table td,
.page-container .schedule-table th,
.page-container .schedule-table td{
  vertical-align: middle;
  font-size: 15px;
}

/* Кнопки — тільки всередині консультацій */
.consultations-wrap .btn,
.page-container .btn{
  border-radius: 14px;
  font-weight: 900;
  border-width: 1px;
}

/* primary (КПКІТП) */
.consultations-wrap .btn-primary,
.page-container .btn-primary{
  background: linear-gradient(180deg, rgba(59,31,94,.92) 0%, rgba(43,18,72,.98) 100%);
  color: #fff;
  border-color: rgba(59,31,94,.12);
  box-shadow: 0 10px 18px rgba(16,24,40,.12);
}
.consultations-wrap .btn-primary:hover,
.page-container .btn-primary:hover{
  filter: brightness(1.03);
}

/* warning */
.consultations-wrap .btn-warning,
.page-container .btn-warning{
  background: rgba(255,193,7,.92);
  color: #1b1b1b;
  border-color: rgba(255,193,7,.35);
}
.consultations-wrap .btn-warning:hover,
.page-container .btn-warning:hover{
  filter: brightness(0.98);
}

/* danger */
.consultations-wrap .btn-danger,
.page-container .btn-danger{
  background: #fff;
  color: #b42318;
  border-color: rgba(180,35,24,.35);
}
.consultations-wrap .btn-danger:hover,
.page-container .btn-danger:hover{
  background: rgba(180,35,24,.08);
}

/* Карточний вигляд на телефонах */
@media (max-width: 576px){
  .consultations-wrap .table-responsive,
  .page-container .table-responsive{
    border: 0;
  }

  .consultations-wrap .schedule-table thead,
  .page-container .schedule-table thead{
    display: none;
  }

  .consultations-wrap .schedule-table,
  .consultations-wrap .schedule-table tbody,
  .consultations-wrap .schedule-table tr,
  .consultations-wrap .schedule-table td,
  .page-container .schedule-table,
  .page-container .schedule-table tbody,
  .page-container .schedule-table tr,
  .page-container .schedule-table td{
    display: block;
    width: 100%;
  }

  .consultations-wrap .schedule-table,
  .page-container .schedule-table{
    border: 0;
    background: transparent;
  }

  .consultations-wrap .schedule-table tr,
  .page-container .schedule-table tr{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 100%);
    margin-bottom: 12px;
    border: 1px solid rgba(59,31,94,.14);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(16,24,40,.10);
    overflow: hidden;
  }

  .consultations-wrap .schedule-table td,
  .page-container .schedule-table td{
    border: 0;
    border-bottom: 1px dashed rgba(59,31,94,.18);
    padding: 10px 14px;
  }

  .consultations-wrap .schedule-table td:last-child,
  .page-container .schedule-table td:last-child{
    border-bottom: 0;
  }

  .consultations-wrap .schedule-table td::before,
  .page-container .schedule-table td::before{
    content: attr(data-label);
    display: block;
    font-weight: 900;
    margin-bottom: 4px;
    color: rgba(30,27,34,.62);
    letter-spacing: .15px;
  }

  .consultations-wrap .schedule-table td[data-label="Дії"],
  .page-container .schedule-table td[data-label="Дії"]{
    text-align: left !important;
  }

  .consultations-wrap .schedule-table td[data-label="Дії"] .btn,
  .page-container .schedule-table td[data-label="Дії"] .btn{
    margin-right: 8px;
    margin-bottom: 8px;
  }
}

/* Планшет */
@media (min-width: 577px) and (max-width: 992px){
  .consultations-wrap .schedule-table th,
  .consultations-wrap .schedule-table td,
  .page-container .schedule-table th,
  .page-container .schedule-table td{
    padding: 10px;
  }
}
