/* 2. Контейнер для карток */
.pricing-section {
  display: flex;
  justify-content: center; 
  gap: 30px;                /* відступ між картками */
  padding: 40px 20px;       /* внутрішні відступи секції */
}

/* 3. Картка тарифу */
.pricing-card {
  background-color: #EFE8FC; /* світло-фіолетовий */
  border-radius: 10px;
  width: 33.33%;              
  padding: 20px;
  text-align: center;
  
  /* Анімація при наведенні */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  /* Флекс-верстка для «прилипання» кнопки вниз */
  display: flex;              
  flex-direction: column;     
  justify-content: flex-start;

  /* Мінімальна висота, щоб кнопка мала простір опуститися */
  min-height: 480px; 
}

/* 4. Ефект при наведенні */
.pricing-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 5. Заголовок тарифу */
.pricing-card .title {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 6. Опис тарифу */
.pricing-card .subtitle {
  font-size: 11px;
  color: #666;
  margin-bottom: 20px;
}

/* 7. Ціна тарифу */
.pricing-card .price {
  font-size: 28px;
  font-weight: bold;
  color: #007BFF;  /* синій, можна замінити на інший */
  margin-bottom: 20px;
}

/* 8. Список опцій тарифу */
.pricing-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 10px 0;  /* додаємо нижній відступ, щоб відокремити від кнопки */
  text-align: left;    /* вирівнюємо текст списку ліворуч */
}

.pricing-card ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;  /* відступ під іконку «■» */
}

/* Імітація іконки ліворуч */
.pricing-card ul li::before {
  content: '■'; 
  color: #FB8500;  /* помаранчева «кулька» для списку */
  position: absolute;
  left: 0;
}

/* 9. Контейнер для кнопки, який «прилипає» донизу */
.flex-center {
  margin-top: auto !important;  /* ось ключова властивість */
}

.starnote {
  font-size: 12px;
  color: #4a4a4a;
  display: block;
  margin-bottom: 10px;
}

/* 3. Утримувач окремої опції */
.addon-wrapper {
  /* Відступ зверху, аби відділити від секції планів */
  margin-top: 30px;
  /* За бажанням можна зробити text-align: center; щоб усе центрувати */
  text-align: center;
}

/* 4. Стилі для блоку-опції (докупки) */
.addon-plan {
  /* Ширина менша чи більша – на ваш розсуд */
  width: 280px; 
  /* При бажанні можна зробити інший фон, наприклад, білий */
  background-color: #fff;  
  border: 2px solid #EFE8FC; /* тонка рамка, щоб гармоніювало з фіолетовими картками */
  border-radius: 10px;
  margin: 0 auto;     /* щоб блок був по центру */
  padding: 20px;
  text-align: left;   /* наприклад, вирівнювання тексту по лівому краю */
  
  /* Можна не робити ефект масштабування, залишити простіше */
  transition: box-shadow 0.3s ease;
}
.addon-plan-index {
  /* Ширина менша чи більша – на ваш розсуд */
  width: 340px; 
  padding: 20px;
  text-align: left;   /* наприклад, вирівнювання тексту по лівому краю */

}

/* Легкий ефект при наведенні, якщо потрібно */
.addon-plan:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 5. Заголовки, ціна тощо (щоб відрізнялось від .pricing-card .title) */
.addon-plan h3,.addon-plan-index h3 {
  font-size: 20px;
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #333;
}

.addon-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.addon-price {
  font-size: 24px;
  font-weight: bold;
  color: #007BFF; 
  margin-bottom: 20px;
}

/* 6. Список у блоці-опції, щоб зберегти схожість */
.addon-plan ul, ..addon-plan-index ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.addon-plan ul li,.addon-plan-index ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

/* Іконка (помаранчева «■») */
.addon-plan ul li::before,.addon-plan-index ul li::before {
  content: '■';
  color: #FB8500;
  position: absolute;
  left: 0;
}

/* 7. Кнопка «Придбати» для опції (можна лишити стандартні стилі .btn) */
.addon-btn {
  background-color: #00C4FF; 
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* Легкий ховер */
.addon-btn:hover {
  background-color: #00A6DB; 
}
/* "Точка зламу" 768px (орієнтація на планшети).
   При ширині екрану <= 768px картки шикуються вертикально */

@media (max-width: 960px) {
  .pricing-section {
    flex-direction: column;     /* картки одна під одною */
    align-items: center;        /* центральне вирівнювання */
    gap: 20px;                  /* відступ між картками зверху/знизу */
  }
  
  .pricing-card {
    width: 70%;                 /* робимо ширину ~80% від батька */
    min-height: auto;           /* щоб картка розтягувалась за вмістом */
  }
}

@media (max-width: 768px) {
 
  .pricing-card {
    width: 100%;                 /* робимо ширину ~80% від батька */
         /* щоб картка розтягувалась за вмістом */
  }
}



/* Додатково: якщо треба інша "точка зламу" для дуже маленьких телефонів */
@media (max-width: 480px) {
  .pricing-card .title {
    font-size: 20px;           /* трохи менший текст */
  }
  .pricing-card .price {
    font-size: 24px;
  }
  /* тощо, регулюйте на свій розсуд */
}
.addon-plan-index .price
{
    font-size: 28px;
  font-weight: bold;
  color: #007BFF;  /* синій, можна замінити на інший */
  margin-bottom: 10px;
  text-align: center;
}
.addon-plan-index .subtitle {
  font-size: 11px;
  color: #666;
  margin-bottom: 10px;
  text-align: center;
}
.addon-plan-index .title {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}
.pricing-b-index
{
  background-color: #f0eff5  !important;
  min-height: 380px;
}

/* Робимо з .pricing-section.addon-section флекс-контейнер із переносом */
.pricing-section.addon-section {
  display: flex;       /* флекс-батько */
  flex-wrap: wrap;     /* щоб блоки переносилися, якщо не вистачає місця */
  gap: 20px;           /* керуємо проміжком між блоками (можна 10px, 15px і т.д.) */
  justify-content: flex-start; /* або 'center' / 'space-between' на ваш смак */
  
  /* Якщо у вас були прописані margin-left: -15px; і margin-right: -15px; 
     – видаліть їх або перебийте: */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* «Колонки» – блоки .addon-wrapper.  
   Замість жорсткої width: 25% рекомендуємо використовувати flex-базу + calc() 
   або просто фіксовану width із медіа-запитами. */

.addon-wrapper {
  /* Прибираємо фіксовані відступи margin-top, якщо вони створюють велику «дірку»: */
  margin-top: 0 !important; 
  
  /* Оптимальний підхід – використовувати flex: 1 1 calc(25% - (gap)) 
     Тоді 4 блоки в ряд, а відступи дає gap флекс-контейнера:
  */
  flex: 1 1 calc(25% - 20px);
  box-sizing: border-box; /* щоб padding не «розривав» ширину */
  
  /* Якщо у вас у .addon-plan чи .addon-wrapper були задані жорсткі width: 280px (тощо), 
     – обов'язково їх видаліть або перебийте ось так: */
  width: auto !important;
}

/* При середній ширині (приблизно <= 992px) робимо 2 у ряд */
@media (max-width: 992px) {
  .addon-wrapper {
    flex: 1 1 calc(50% - 20px);
  }
}

/* При зовсім маленькій (<= 576px) – 1 у ряд */
@media (max-width: 576px) {
  .addon-wrapper {
    flex: 1 1 100%;
  }
}