/* ==============================
   ЗМІННІ (ЗА БАЖАННЯМ)
============================== */
:root {
  --main-bg-color: #ffffff;      /* Білий фон для блоку товару */
  --text-color: #333333;         /* Основний колір тексту */
  --accent-color: #00af50;       /* Зелена кнопка/акцент */
  --accent-hover-color: #009347; /* Темніший зелений при наведенні */
  --secondary-bg-color: #f9f9f9; /* Світло-сірий для відокремлених блоків */
  --border-color: #dddddd;       /* Колір простих меж/бордерів */
}

/* ==============================
   КОНТЕЙНЕР ТОВАРУ
============================== */
.product-page {
  /* Щоб оформити все в одному місці:
     можна огорнути контент у <div class="product-page"> ... </div> */
  background-color: var(--main-bg-color);
  color: var(--text-color);
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* Заголовок товару */
.product-page h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
}

/* Опис товару */
.details-description {
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: center;
}

/* Ціна, трафік, дохід і т.д. */
.product-properties {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}

.product-properties p {
  margin: 0;
  font-size: 1rem;
}

/* Кнопка "Купити" під товаром */
.buy-domain-button {
  text-align: center;
  margin-bottom: 40px;
}

.buy-domain-button form {
  display: inline-block;
  margin: 0;
}

.buy-domain-button button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.buy-domain-button button:hover {
  background-color: var(--accent-hover-color);
}

/* ==============================
   КОНТАКТНА ІНФОРМАЦІЯ
============================== */
.contact-info {
  background-color: var(--secondary-bg-color);
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 40px;
}

.contact-info h3 {
  margin-bottom: 20px;
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.social-links a img {
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}

.social-links a:hover img {
  transform: scale(1.1);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--accent-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a i {
  font-size: 28px;
  line-height: 1;
}

.social-links a:hover {
  transform: scale(1.1);
  color: var(--secondary-color);
}

/* Текстова інформація (наприклад, телефон) */
.contact-details p {
  text-align: center;
  margin: 0;
  font-size: 1rem;
}

.contact-details span {
  font-weight: 600; /* Можна виділити жирним */
  color: var(--accent-color);
}

/* ==============================
   БЛОК КОМЕНТАРІВ
============================== */
.comments-section {
  margin-top: 40px;
}

.comments-section h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.comments-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 0 auto 30px;
}

.comment-item {
  background-color: var(--secondary-bg-color);
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.comment-item strong {
  color: var(--accent-color);
  margin-right: 5px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}

.comment-form textarea {
  width: 80%;
  max-width: 800px;
  min-height: 80px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-family: inherit;
}

.comment-form button {
  background-color: var(--accent-color);
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.comment-form button:hover {
  background-color: var(--accent-hover-color);
}

/* ==============================
   АЛЕРТ-ПОВІДОМЛЕННЯ (При купівлі)
============================== */
@keyframes fadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Якщо потрібно показувати короткий алерт:
   в JS можна додати елемент з цим класом і після 3-4 секунд видаляти його */
.alert-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-color);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 4px;
  z-index: 9999;
  animation: fadeInOut 3s forwards;
  font-size: 1rem;
}

.social-networks label,
.social-networks input {
  display: block;
  width: 200%;
  margin-bottom: 8px;
}