/* ============================================================
# ФАЙЛ: templates/sunshine-psy/css/psych-theme.css
# НАЗНАЧЕНИЕ: Полный стиль шаблона sunshine-psy для проекта «Живи в Городе».
# ВНИМАНИЕ: Использует !important для перекрытия всех конфликтующих стилей.
# ============================================================ */

/* === ПРИНУДИТЕЛЬНЫЙ ФОН И ЦВЕТ ТЕКСТА === */
body.psych-theme,
.psych-theme,
.psych-theme *,
.psych-theme *::before,
.psych-theme *::after {
  background-color: transparent !important;
  color: #f9f5ff !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Lora', serif !important;
}

body.psych-theme {
  background-color: #0a041a !important;
  color: #f9f5ff !important;
  line-height: 1.7 !important;
  position: relative !important;
  overflow-x: hidden !important;
  min-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === ФОНОВЫЕ ЭФФЕКТЫ === */
body.psych-theme::after {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 90% 15%, #e0c0ff, transparent),
    radial-gradient(1px 1px at 30% 70%, #ffd700, transparent),
    radial-gradient(1px 1px at 70% 50%, #b19cd9, transparent) !important;
  opacity: 0.85 !important;
  animation: psychTwinkle 7s infinite alternate ease-in-out !important;
  z-index: -4 !important;
  pointer-events: none !important;
}

.psych-aurora {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 200% !important;
  height: 200% !important;
  z-index: -3 !important;
  opacity: 0.6 !important;
  filter: blur(60px) !important;
  background: 
    radial-gradient(circle at 25% 35%, rgba(106, 17, 203, 0.3), transparent 45%),
    radial-gradient(circle at 75% 20%, rgba(186, 85, 211, 0.25), transparent 50%),
    radial-gradient(circle at 55% 65%, rgba(255, 215, 0, 0.2), transparent 40%) !important;
  animation: psychAuroraDrift 32s infinite alternate ease-in-out !important;
  pointer-events: none !important;
}

@keyframes psychTwinkle { 
  0%, 100% { opacity: 0.7 !important; }
  30%      { opacity: 1 !important; }
  60%      { opacity: 0.5 !important; }
}
@keyframes psychAuroraDrift { 
  0%   { transform: translate(-10%, 5%) scale(1.05) !important; }
  100% { transform: translate(8%, -12%) scale(1.12) !important; }
}

/* === ОСНОВНАЯ СЕТКА === */
#content-wrapper {
  display: grid !important;
  grid-template-columns: var(--col-left-width, 17%) 1fr var(--col-right-width, 13%) !important;
  grid-template-areas: "left center right" !important;
  gap: 20px !important;
  padding: 20px !important;
  max-width: 80vw !important;
  margin: 20px auto !important;
  width: calc(100% - 40px) !important;
  align-items: start !important;
}

@media (max-width: 992px) {
  #content-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-areas: "center" "left" "right" !important;
    gap: 15px !important;
    padding: 15px !important;
  }
}

/* === МОДУЛЬ С РАМКОЙ === */
.psych-module {
  position: relative !important;
  background: rgba(12, 6, 28, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  border-radius: 16px !important;
  z-index: 2 !important;
}

.psych-module::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: -3px !important;
  right: 50% !important;
  bottom: 50% !important;
  border-top: 3px solid #c0c0c0 !important;
  border-left: 3px solid #c0c0c0 !important;
  border-image: linear-gradient(to bottom right, #c0c0c0, #ffd700) 1 !important;
  border-radius: 16px 0 0 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.psych-module-glow {
  position: absolute !important;
  bottom: -12px !important;
  left: 8px !important;
  right: 8px !important;
  height: 24px !important;
  background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.3), transparent 70%) !important;
  filter: blur(10px) !important;
  z-index: 1 !important;
}

.psych-module + .psych-module {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 24px !important;
}

/* === ЗАГОЛОВКИ === */
.psych-module h1,
.psych-module h2,
.psych-module h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 700 !important;
  color: #f0e6ff !important;
  margin-bottom: 1rem !important;
}
.psych-module h1 {
  background: linear-gradient(to right, #d8b4fe, #ffd700) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

/* === КНОПКИ === */
.psych-btn {
  display: inline-block !important;
  padding: 0.625rem 1.75rem !important;
  background: linear-gradient(135deg, #7e22ce, #a855f7) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 30px !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(138, 43, 226, 0.4) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}
.psych-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

/* === МЕНЮ === */
#mainmenu {
  background: rgba(10, 4, 26, 0.4) !important;
  padding: 0.8rem 0 !important;
  backdrop-filter: blur(4px) !important;
  border-bottom: 1px solid rgba(192, 192, 192, 0.2) !important;
}

#mainmenu .container-fluid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#mainmenu ul.nav {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

#mainmenu ul.nav li a {
  color: #e6ddf7 !important;
  text-decoration: none !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

#mainmenu ul.nav li a:hover {
  background: rgba(138, 43, 226, 0.2) !important;
  color: #ffd700 !important;
}

/* === ФУТЕР === */
#footer {
  background: rgba(10, 4, 26, 0.7) !important;
  color: #c5b8e0 !important;
  padding: 30px 0 !important;
  margin-top: 40px !important;
  text-align: center !important;
  width: 100% !important;
}

.footer-default {
  text-align: center !important;
  color: #c5b8e0 !important;
  font-size: 14px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* === КОНТЕНТ КОМПОНЕНТА === */
.component-content {
  background: rgba(12, 6, 28, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  border-radius: 16px !important;
  position: relative !important;
}

.component-content::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: -3px !important;
  right: 50% !important;
  bottom: 50% !important;
  border-top: 3px solid #c0c0c0 !important;
  border-left: 3px solid #c0c0c0 !important;
  border-image: linear-gradient(to bottom right, #c0c0c0, #ffd700) 1 !important;
  border-radius: 16px 0 0 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.component-content::after {
  position: absolute !important;
  bottom: -12px !important;
  left: 8px !important;
  right: 8px !important;
  height: 24px !important;
  background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.3), transparent 70%) !important;
  filter: blur(10px) !important;
  z-index: 1 !important;
}