/* =============== Повний темний фон для body =============== */
body {
  background: #0a0a0e !important;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(79,195,247,0.03) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255,112,166,0.03) 0%, transparent 20%) !important;
  background-color: #0a0a0e !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
/* =============== Темна тема для публічної частини =============== */
:root {
  --bg: #0a0a0e;
  --bg-alt: #101014;
  --bg-card: rgba(20, 20, 30, 0.75);
  --text: #f5f5ff;
  --muted: #cacaca;
  --border: rgba(255, 255, 255, 0.08);
  --primary: #4fc3f7;
  --primary-dark: #29b6f6;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  --shadow-glass: 0 10px 32px rgba(0, 0, 0, 0.5);
  --radius: 18px;
}

/* === Загальні стилі === */
.section-title,
h1, h2, h3, h4, h5 {
  color: var(--text) !important;
}
p, .muted, .card-text, .faq-item p {
  color: var(--muted) !important;
}



/* === Картки послуг === */
.service-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  padding: 24px !important;
}

.service-content {
  background: rgba(40, 45, 50, 0.5);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.service-content h3 {
  color: var(--primary) !important;
  font-size: 1.3rem;
}

/* === Відгуки === */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-title {
  color: var(--text) !important;
}

.card-rating {
  color: #FFD700 !important;
  font-size: 1.2rem;
}

/* === Кнопки === */
.btn-primary,
.btn-dark-outline {
  background: var(--primary) !important;
  color: #000 !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  padding: 0.8rem 1.4rem !important;
  box-shadow: var(--shadow-glass) !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-dark-outline:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(79, 195, 247, 0.5) !important;
}

/* === FAQ === */
.faq-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* === Форми зворотного зв’язку (якщо є) === */
.form-control {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.3) !important;
}

/* === Хедер і футер — опціонально === */
.header,
.footer {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
}
.header a,
.footer a {
  color: var(--muted) !important;
}
.header a:hover,
.footer a:hover {
  color: var(--primary) !important;
}

/* === Контакти === */
.contact-section {
  color: var(--text) !important;
}
.contact-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: var(--shadow-glass) !important;
}
.contact-item,
.contact-item a,
.contact-item p {
  color: var(--muted) !important;
}
.contact-item i {
  color: var(--primary) !important;
}
.social-icons a {
  color: var(--muted) !important;
}
.social-icons a:hover {
  color: var(--primary) !important;
}

/* === FAQ === */
.faq-section {
  color: var(--text) !important;
}
.faq-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.faq-item h3 {
  color: var(--text) !important;
}
.faq-item p {
  color: var(--muted) !important;
}
.arrow {
  color: var(--primary) !important;
}

/* === Загальні покращення === */
.section-title {
  color: var(--text) !important;
}
.center {
  color: var(--muted) !important;
}
a:hover {
  color: var(--primary) !important;
}

/* === Відгуки (reviews.php) === */
#reviewFormWrapper {
  display: none;
}
#reviewFormWrapper.active {
  display: block;
}
.review-form-wrapper {
  margin-top: 24px;
}
.review-form {
  display: none;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.review-form-wrapper.active .review-form {
  display: block;
}

.input-group {
  position: relative;
  margin-bottom: 18px !important;
}
.input-group i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted) !important;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}
.input-group input,
.input-group textarea,
.input-group select {
  width: 100% !important;
  padding: 12px 14px 12px 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
  font-family: inherit !important;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.3) !important;
}
.input-group textarea {
  min-height: 110px !important;
  resize: vertical !important;
}
.input-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b0b0c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 12px;
  padding-right: 42px !important;
}

/* Повідомлення */
.success-message,
.error-message {
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  font-size: 0.95rem !important;
}
.success-message {
  background: rgba(46, 204, 113, 0.2) !important;
  color: #4ade80 !important;
}
.error-message {
  background: rgba(220, 53, 69, 0.2) !important;
  color: #f87171 !important;
}

/* Сітка відгуків */
.reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 20px !important;
}
.review-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.stars {
  color: #FFD700 !important;
  font-size: 1.2rem !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Фонові зображення для послуг */
.service-1 {
    background-image: url('/img/service-straight-cut.jpeg') !important;
}
.service-2 {
    background-image: url('/img/service-custom-cut.jpg') !important;
}
.service-3 {
    background-image: url('/img/service-edge-finishing.jpg') !important;
}

/* Загальний стиль для усіх блоків послуг */
.service-item {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
}

/* Напівпрозорий оверлей для читабельності тексту */
.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 14, 0.349); /* темний оверлей */
    backdrop-filter: blur(2px);
    z-index: 1;
}

/* Контент поверх оверлею */
.service-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 20px;
}
.service-content h3 {
    color: #4fc3f7 !important;
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.service-content p {
    color: #b0b0c8 !important;
    font-size: 0.95rem;
    line-height: 1.5;
}