/*
Theme Name:GORN 2 Дочерняя тема
Theme URI: https://goodwinpress.ru/tema-gorn-2
Author: GoodwinPress
Author URI: https://goodwinpress.ru/
Description: Используем дочернюю тему лишь в тех случаях, когда собрались менять стили, разметку или функции темы. Просто так ее ставить не требуется.
Text Domain: gorn-2
Domain Path: /languages
Template: gorn-2
*/

/* Размещайте ваши стили под этой строкой. */ 
.rating-button::before {background-image: url(assets/img/tiktok-poster.svg);}
.nav-menu .sub-menu {width: 235px;}
.card-item__category a{font-weight: 500; color: #ff5e14;}

/* Иконки для смен по сезонам */
.card-item__category li a{display:inline-flex;align-items:center;gap:6px}.card-item__category li a[href*="/catalog/vesna/"]::before{content:"🌸"}.card-item__category li a[href*="/catalog/lito/"]::before{content:"☀️"}.card-item__category li a[href*="/catalog/osin/"]::before{content:"🍁"}.card-item__category li a[href*="/catalog/zyma/"]::before{content:"❄️"}

/* Видео отзывы на главной */
.oc-video-reviews-grid {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 10px;
}

.oc-video-reviews-grid__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  flex-wrap: wrap;
}

.oc-video-item {
  width: 100%;
  max-width: 310px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.oc-video-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.08);
}

.oc-video-item__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.oc-video-item__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.oc-video-item__content {
  padding: 18px 18px 20px;
  text-align: center;
}

.oc-video-item__content h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #1f2d4a;
}

@media (max-width: 1024px) {
  .oc-video-item {
    max-width: 320px;
  }
}

@media (max-width: 767px) {
  .oc-video-reviews-grid__list {
    gap: 16px;
  }

  .oc-video-item {
    max-width: 100%;
  }

  .oc-video-item__content {
    padding: 16px;
  }

  .oc-video-item__content h3 {
    font-size: 17px;
  }
}

/* 1. Робимо контейнер чіткою сіткою */
.modal-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Два рівні стовпчики */
    gap: 20px !important;
    align-items: start !important;
}

/* 2. Виправляємо обгортки Contact Form 7, які все псують */
.modal-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 3. Уніфікуємо ВСІ поля (текст, дата, селект, телефон) */
.modal-form input[type="text"],
.modal-form input[type="tel"],
.modal-form input[type="date"],
.modal-form select {
    display: block !important;
    width: 100% !important;
    height: 48px !important; /* Фіксована висота для всіх */
    padding: 0 15px !important; /* Однаковий відступ */
    margin: 8px 0 0 0 !important; /* Відступ від назви поля */
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none; /* Прибираємо стандартні стилі Safari/Chrome */
    appearance: none;
}

/* 4. Специфічне виправлення для випадаючого списку (select) */
.modal-form select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    padding-right: 40px !important; /* Місце для стрілочки */
}

/* 5. Специфічне виправлення для дати */
.modal-form input[type="date"] {
    line-height: 48px !important; /* Центруємо текст вертикально */
}

/* 6. Чекбокс та кнопка на всю ширину */
.modal-form .wpcf7-acceptance,
.wpcf7-submit {
    grid-column: span 2 !important;
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .modal-form {
        grid-template-columns: 1fr !important;
    }
    .modal-form .wpcf7-acceptance,
    .wpcf7-submit {
        grid-column: span 1 !important;
    }
}