/* ============================================
   Мир Знаний — Custom Styles
   ============================================ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background-color: rgba(242, 101, 34, 0.2);
  color: #333;
}

/* ---- Fade-in-up animation ---- */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Pulse button ---- */
@keyframes gentle-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(242, 101, 34, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(242, 101, 34, 0);
  }
}

.pulse-btn {
  animation: gentle-pulse 2.5s infinite;
}

.pulse-btn:hover {
  animation: none;
}

/* ---- Reviews carousel ---- */
.reviews-carousel {
  overflow: hidden;
}

#reviews-track {
  cursor: grab;
}

#reviews-track:active {
  cursor: grabbing;
}

/* ---- Form focus effects ---- */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.1);
}

/* ---- Card hover lift ---- */
.hover\:-translate-y-1:hover {
  transform: translateY(-4px);
}

/* ---- Smooth image loading ---- */
img {
  transition: opacity 0.3s ease;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded,
img:not([loading="lazy"]) {
  opacity: 1;
}

/* ---- Cookie banner slide up ---- */
#cookie-banner {
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- Mobile menu animation ---- */
#mobile-menu {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Scrollbar styling ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #FFF9F0;
}

::-webkit-scrollbar-thumb {
  background: #d1c7ba;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b8a998;
}

/* ---- FAQ Accordion ---- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-answer:not(.hidden) {
  max-height: 200px;
}

.faq-item {
  transition: box-shadow 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ---- Print styles ---- */
@media print {
  nav, #cookie-banner, .pulse-btn {
    display: none !important;
  }
}

/* ---- Mobile adjustments: 375–768px ---- */
@media (min-width: 375px) and (max-width: 768px) {
  /* Increase font sizes (text + headings) */
  [class~="text-xs"] { font-size: 14px !important; }
  [class~="text-sm"] { font-size: 16px !important; }
  [class~="text-lg"] { font-size: 20px !important; }
  [class~="text-xl"] { font-size: 22px !important; }
  [class~="text-2xl"] { font-size: 26px !important; }
  [class~="text-3xl"] { font-size: 32px !important; }
  [class~="text-4xl"] { font-size: 38px !important; }
  [class~="text-5xl"] { font-size: 50px !important; }

  /* Photos must not overflow the screen */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Social buttons: icons only, comfortable tap targets */
  a[href^="https://vk.com/"],
  a[href^="https://wa.me/"],
  a[href^="https://max.ru/u/"] {
    font-size: 0 !important;
    min-width: 44px;
    min-height: 44px;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  a[href^="https://vk.com/"] svg,
  a[href^="https://wa.me/"] svg,
  a[href^="https://max.ru/u/"] svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Primary submit button: comfortable tap target */
  #submit-btn {
    min-height: 48px;
    font-size: 16px !important;
  }
}