/* ============================================

   MYSTICKÁ HVĚZDA - HOROSKOPY & TAROT

   Design System & Stylesheet

   

   DIVI KOMPATIBILITA:

   - CSS Custom Properties → Divi Theme Customizer

   - Sekce → Divi Sections

   - .row → Divi Rows

   - Komponenty → Divi Modules

   ============================================ */



/* ============================================

   1. CSS CUSTOM PROPERTIES (DIVI: Theme Options → General)

   ============================================ */

:root {

  /* Barevná paleta - Enhanced */

  --color-deep-space: #050510;

  --color-cosmic-purple: #1a0a2e;

  --color-mystic-gold: #ffd700;

  --color-mystic-gold-light: #ffe55c;

  --color-ethereal-violet: #9d4edd;

  --color-starlight: #ffffff;

  --color-nebula-pink: #f72585;

  --color-midnight-blue: #0a1128;

  --color-silver-mist: #e0e1dd;

  --color-aurora-green: #4cc9f0;



  /* Gradienty - Organic */

  --gradient-cosmic: radial-gradient(circle at 50% 0%, var(--color-cosmic-purple) 0%, var(--color-deep-space) 100%);

  --gradient-gold: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);

  --gradient-aurora: linear-gradient(45deg, var(--color-ethereal-violet), var(--color-nebula-pink), var(--color-aurora-green));

  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));



  /* Typography - Editorial & Fluid */

  --font-heading: 'Cinzel', serif;

  --font-body: 'Inter', sans-serif;



  /* Fluid Typography - More conservative scaling */

  --text-xs: 0.75rem;

  --text-sm: 0.875rem;

  --text-base: 1rem;

  --text-lg: 1.125rem;

  --text-xl: 1.25rem;

  --text-2xl: clamp(1.5rem, 2vw, 1.75rem);

  --text-3xl: clamp(1.85rem, 2.5vw, 2.25rem);

  --text-4xl: clamp(2.25rem, 3vw, 3rem);

  --text-5xl: clamp(3rem, 4vw, 3.75rem);

  --text-6xl: clamp(3.5rem, 5vw, 4.5rem);

  --text-7xl: clamp(4rem, 6vw, 5.5rem);



  /* Spacing */

  --space-xs: 0.25rem;

  --space-sm: 0.5rem;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 3rem;

  --space-2xl: 5rem;

  --space-3xl: 8rem;

  --space-4xl: 10rem;

  --space-5xl: 12rem;



  /* Border radius */

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --radius-full: 9999px;



  /* Shadows & Glows */

  --shadow-glow: 0 0 30px rgba(157, 78, 221, 0.15);

  --shadow-glow-strong: 0 0 60px rgba(157, 78, 221, 0.3);

  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.2);



  /* Transitions */

  --transition-fast: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --transition-base: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --transition-slow: 700ms cubic-bezier(0.2, 0.8, 0.2, 1);



  /* Z-index */

  --z-negative: -1;

  --z-base: 1;

  --z-dropdown: 100;

  --z-sticky: 200;

  --z-cursor: 9999;

}



/* ============================================

   2. RESET & BASE

   ============================================ */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



/* Default cursor is always visible - no custom cursor override */



/* Restore cursor for interactive elements due to usability */

a,

button,

input[type="submit"],

input[type="button"],

select,

label,

.btn,

.spread-trigger,

.tarot-card {

  cursor: pointer;

}



input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

input[type="time"],

input[type="search"],

textarea {

  cursor: text;

  caret-color: var(--color-mystic-gold);

}



html {

  font-size: 16px;

  -webkit-text-size-adjust: 100%;

  -ms-text-size-adjust: 100%;

  overscroll-behavior-y: none;

  /* Prevents scroll elasticity / rubberbanding bounding on Chromium/Edge */

  overflow-x: hidden;

  max-width: 100vw;

}



/* Global Fixed Background (solves scroll jank from background-attachment: fixed on body) */

html::before {

  content: "";

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: -100;

  background-color: var(--color-deep-space);

  background-image: url('../img/bg-cosmic-hd.webp');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  pointer-events: none;

  /* Specific fix for mobile Safari to ensure it fills viewport and doesn't stretch with content */

  height: 100%;

  width: 100%;

}



@media (max-width: 768px) {

  html::before {

    background-image: url('../img/bg-cosmic-mobile.webp');

  }

}



body {

  font-family: var(--font-body);

  font-size: var(--text-base);

  line-height: 1.6;

  color: var(--color-starlight);

  min-height: 100vh;

  background-color: transparent;

  position: relative;

  letter-spacing: normal;

  overflow-x: hidden;

  max-width: 100vw;

  /* Modern performant alternative to hidden that doesn't break scroll anchoring */

}



/* Disable fixed background on mobile - causes severe scroll jank on iOS/Android */

@media (pointer: coarse) {

  body {

    background-attachment: scroll;

  }

}



/* Aurora Improvements - Fixed positioning context */

body::before,

body::after {

  content: '';

  position: fixed;

  top: 50%;

  left: 50%;

  width: 140vw;

  /* Broader coverage */

  height: 140vh;

  transform: translate(-50%, -50%);

  background: radial-gradient(circle at center, rgba(157, 78, 221, 0.08), transparent 85%);

  z-index: -2;

  pointer-events: none;

  animation: aurora-pulse 15s ease-in-out infinite alternate;

  /* Ensure it's never a square, even on mobile Safari */

  border-radius: 50%;

}



@media (max-width: 992px) {

  body::before,

  body::after {

    width: 100vw; /* Constrain to viewport width to prevent horizontal overflow */

    height: 100vh;

    opacity: 0.3; /* Extremely subtle */

    border-radius: 0; /* No rounded corners needed when viewport-sized */

    /* Soften for mobile display */

    background: radial-gradient(circle at center, rgba(157, 78, 221, 0.04), transparent 85%);

  }

}



body::after {

  background: radial-gradient(circle at center, rgba(76, 201, 240, 0.08), transparent 60%);

  animation-delay: -5s;

}



@keyframes aurora-pulse {

  0% {

    opacity: 0.3;

    transform: translate(-50%, -50%) scale(0.8);

  }



  100% {

    opacity: 0.7;

    transform: translate(-50%, -50%) scale(1.2);

  }

}



/* Prefers-reduced-motion: disable non-essential animations */

@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }



  body::before,

  body::after {

    animation: none;

  }



  .floating-anim,

  .hero__image {

    animation: none !important;

  }

}



/* ============================================

   11. COMET CURSOR

   ============================================ */

.comet-cursor {

  position: fixed;

  top: 0;

  left: 0;

  width: 20px;

  height: 20px;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(212, 175, 55, 0.5) 50%, transparent 100%);

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  z-index: 9999;

  mix-blend-mode: screen;

  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);

}



.comet-tail {

  position: fixed;

  top: 0;

  left: 0;

  width: 10px;

  height: 10px;

  background: rgba(212, 175, 55, 0.6);

  border-radius: 50%;

  pointer-events: none;

  transform: translate(-50%, -50%);

  z-index: 9998;

  mix-blend-mode: screen;

  transition: opacity 0.5s linear, transform 0.5s linear;

}



/* Skip link */

.skip-link {

  position: absolute;

  top: -100%;

  left: 50%;

  transform: translateX(-50%);

  background: var(--color-mystic-gold);

  color: var(--color-deep-space);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-md);

  z-index: 10000;

  font-weight: 700;

  text-decoration: none;

  cursor: auto;

  /* Ensure visible cursor for accessibility */

}



.skip-link:focus {

  top: var(--space-md);

  outline: 3px solid var(--color-starlight);

  outline-offset: 2px;

}



/* Placeholder height to prevent CLS before components.js loads */

#header-placeholder {

  min-height: 85px;

}



@media (max-width: 768px) {

  #header-placeholder {

    min-height: 70px; /* Approximate mobile header height */

  }

}



/* ============================================

   3. TYPOGRAPHY (DIVI: Text Module Styles)

   ============================================ */

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--font-heading);

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.02em;

  color: var(--color-starlight);

}



h1 {

  font-size: var(--text-5xl);

}



h2 {

  font-size: var(--text-4xl);

}



h3 {

  font-size: var(--text-3xl);

}



h4 {

  font-size: var(--text-2xl);

}



h5 {

  font-size: var(--text-xl);

}



h6 {

  font-size: var(--text-lg);

}



p {

  color: var(--color-silver-mist);

  margin-bottom: var(--space-md);

}



a {

  color: var(--color-mystic-gold);

  text-decoration: none;

  transition: color var(--transition-fast);

}



a:hover {

  color: var(--color-mystic-gold-light);

}



/* Focus states for accessibility */

a:focus,

button:focus,

input:focus,

select:focus,

textarea:focus {

  outline: 2px solid var(--color-mystic-gold);

  outline-offset: 2px;

}



a:focus:not(:focus-visible),

button:focus:not(:focus-visible) {

  outline: none;

}



a:focus-visible,

button:focus-visible,

input:focus-visible {

  outline: 2px solid var(--color-mystic-gold);

  outline-offset: 2px;

}



.text-gradient {

  background: var(--gradient-gold);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.text-glow {

  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);

}



/* ============================================

   4. LAYOUT (DIVI: Section & Row Settings)

   ============================================ */

.section {

  padding: var(--space-xl) 0;

  position: relative;

}



.section--hero {

  min-height: auto;

  /* Reduced from 100vh to remove huge gap */

  display: flex;

  align-items: center;

  padding-top: 180px;

  /* More breathing room for header */

  padding-bottom: var(--space-2xl);

  /* Significantly increased from var(--space-2xl) to balance layout without full height */

  position: relative;

}



.section--alt {

  background: rgba(255, 255, 255, 0.02);

}



/* Mini hero for subpages - proper spacing under fixed header */

.hero--mini {

  min-height: auto;

  padding-top: 180px;

  /* Space for fixed header */

  padding-bottom: var(--space-xl);

}



.hero--mini .hero__title {

  font-size: var(--text-4xl);

  margin-bottom: var(--space-sm);

}



.hero--mini .hero__subtitle {

  font-size: var(--text-lg);

  opacity: 0.9;

}



.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--space-xl);

}



.row {

  display: flex;

  flex-wrap: wrap;

  margin: 0 calc(-1 * var(--space-md));

}



.col {

  padding: 0 var(--space-md);

}



.col-12 {

  width: 100%;

}



.col-6 {

  width: 50%;

}



.col-4 {

  width: 33.333%;

}



.col-3 {

  width: 25%;

}



/* Grid layout */

.grid {

  display: grid;

  gap: var(--space-xl);

}



.grid-2 {

  grid-template-columns: repeat(2, 1fr);

}



.grid-3 {

  grid-template-columns: repeat(3, 1fr);

}



.grid-4 {

  grid-template-columns: repeat(4, 1fr);

}



/* Flexbox utilities */

.flex {

  display: flex;

}



.flex-center {

  display: flex;

  align-items: center;

  justify-content: center;

}



.flex-between {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.flex-col {

  flex-direction: column;

}



.gap-sm {

  gap: var(--space-sm);

}



.gap-md {

  gap: var(--space-md);

}



.gap-lg {

  gap: var(--space-lg);

}



.gap-xl {

  gap: var(--space-xl);

}



/* Text alignment */

.text-center {

  text-align: center;

}



.text-left {

  text-align: left;

}



.text-right {

  text-align: right;

}



/* ============================================

   5. HEADER & NAVIGATION (DIVI: Menu Module)

   ============================================ */

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 999; /* Ensure it is above Aurora (-2) and Stars (-1) */

  padding: 0.75rem 0;

  transition: background var(--transition-base), backdrop-filter var(--transition-base), box-shadow var(--transition-base);

  background: rgba(10, 10, 26, 0.4);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}



.header.scrolled {

  background: rgba(10, 10, 26, 0.95);

  backdrop-filter: blur(20px);

  padding: 0.75rem 0;

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

}



/* Force scrolled state for Mentor page (App-like view) */

body.page-mentor .header {

  background: rgba(10, 10, 26, 0.95) !important;

  backdrop-filter: blur(20px) !important;

  padding: var(--space-md) 0 !important;

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;

}



.header__inner {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-lg);

  position: relative;

  width: 100%;

}



@media (max-width: 992px) {

  .header__inner {

    justify-content: space-between;

    padding: 0 var(--space-md);

    gap: 0;

  }

}



.logo {

  font-family: var(--font-heading);

  font-size: var(--text-2xl);

  font-weight: 700;

  color: var(--color-starlight);

  display: flex;

  align-items: center;

  gap: var(--space-sm);

  margin-right: auto; /* Push navigation or toggle to the right */

  text-decoration: none;

  /* Ensure no underline on link */

}

@media (max-width: 992px) {

  .logo {

    margin-right: 0;

  }

}



.logo__icon {

  font-size: var(--text-3xl);

}



.logo__image {

  height: 60px;

  width: auto;

  mix-blend-mode: screen;

  filter: drop-shadow(0 0 10px rgba(157, 78, 221, 0.5));

}



.logo__text {

  margin-left: var(--space-sm);

}



/* Auth buttons container */

.auth-buttons {

  display: flex;

  gap: var(--space-sm);

  align-items: center;

}



/* Mobile auth buttons are hidden on desktop */

.mobile-auth-buttons {

  display: none !important;

}



.nav {

  display: flex;

  align-items: center;

  gap: var(--space-md);

  flex: 1 1 auto;

  justify-content: center;

}



/* Specific Header Button Style - More elegant */

.header .btn {

  background: transparent;

  border: 1px solid rgba(212, 175, 55, 0.5);

  /* Clearer border */

  color: var(--color-mystic-gold);

  padding: 0.4rem 0.8rem;

  /* Compact padding */

  font-size: 0.7rem;

  /* Smaller font */

  box-shadow: none;

  white-space: nowrap !important;

  /* Force single line */

  min-width: fit-content;

  /* Ensure container fits text */

  display: inline-block;

  /* Prevent flex alignment issues */

  line-height: 1.2;

  margin-left: 0;

  /* Remove margin, rely on container gap */

}



.header .btn:hover {

  background: rgba(212, 175, 55, 0.1);

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);

  transform: translateY(-1px);

  color: var(--color-starlight);

  border-color: var(--color-starlight);

}



.nav__list {

  display: flex;

  list-style: none;

  gap: var(--space-sm);

  margin-right: var(--space-sm);

  flex-wrap: nowrap;

  flex-shrink: 1;

  min-width: 0;

}



.nav__link {

  color: var(--color-silver-mist);

  font-size: 0.8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.02em;

  position: relative;

  padding: var(--space-sm) 0;

  white-space: nowrap;

  transition: color var(--transition-fast);

}



.nav__link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--gradient-gold);

  transition: width var(--transition-base);

}



.nav__link:hover,

.nav__link.active {

  color: var(--color-starlight);

}



.nav__link:hover::after,

.nav__link.active::after {

  width: 100%;

}



/* Dropdown Base Styles */

.nav__item {

  position: relative;

}



.nav__item--has-dropdown>.nav__link {

  padding-right: 15px;

  /* space for icon */

}



.dropdown-icon {

  font-size: 0.7rem;

  margin-left: 2px;

  transition: transform var(--transition-fast);

  display: inline-block;

}



.nav__dropdown {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(10px);

  background: rgba(15, 10, 30, 0.95);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(212, 175, 55, 0.2);

  border-radius: var(--radius-md);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  padding: var(--space-sm) 0;

  min-width: 200px;

  list-style: none;

  opacity: 0;

  visibility: hidden;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  z-index: 100;

  pointer-events: none;

}



/* Lang Switcher */

.lang-switcher {

  position: relative;

  margin-right: var(--space-md);

  z-index: 101;

}



.lang-switcher__btn {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--color-starlight);

  padding: 6px 12px;

  border-radius: var(--radius-full);

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 0.75rem;

  font-weight: 600;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.lang-switcher__btn:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: var(--color-mystic-gold);

}



.lang-switcher__dropdown {

  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  background: rgba(10, 5, 25, 0.98);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(212, 175, 55, 0.3);

  border-radius: 12px;

  padding: 6px 0;

  list-style: none;
  margin: 0;

  min-width: 150px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(155, 89, 182, 0.1);

  z-index: 200;

}



.lang-switcher__dropdown li {

  list-style: none !important;

  padding: 0;

  margin: 0;

}



.lang-switcher.open .lang-switcher__dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



/* Mobile Specific Tweaks for Lang Switcher */

@media (max-width: 768px) {

  .header__actions {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

  }



  .lang-switcher {

    margin-right: var(--space-xs);

  }



  .lang-switcher__dropdown {

    position: fixed;

    top: 70px;

    right: 15px;

    margin-top: 0;

    width: auto;

    min-width: 160px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  }

}



.lang-switcher__link {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  color: rgba(255, 255, 255, 0.7);

  text-decoration: none;

  font-size: 0.85rem;

  font-family: var(--font-body, 'Inter', sans-serif);

  transition: all 0.2s ease;

  border-left: 2px solid transparent;

}



.lang-switcher__link:hover {

  background: rgba(212, 175, 55, 0.1);

  color: #fff;

  border-left-color: var(--color-mystic-gold);

}



.lang-switcher__link.active {

  color: var(--color-mystic-gold);

  font-weight: 600;

  background: rgba(212, 175, 55, 0.05);

  border-left-color: var(--color-mystic-gold);

}



/* Desktop Hover Interaction */

@media (min-width: 993px) {

  .nav__item--has-dropdown:hover .nav__dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

    pointer-events: auto;

  }



  .nav__item--has-dropdown:hover .dropdown-icon {

    transform: rotate(180deg);

  }

}



.nav__dropdown-link {

  display: block;

  padding: var(--space-sm) var(--space-lg);

  color: var(--color-silver-mist);

  font-size: 0.85rem;

  text-decoration: none;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  white-space: nowrap;

}



.nav__dropdown-link:hover {

  color: var(--color-mystic-gold);

  background: rgba(212, 175, 55, 0.1);

  padding-left: calc(var(--space-lg) + 5px);

  /* small indentaion effect */

}



/* Mobile Accordion Interaction */

@media (max-width: 992px) {

  .nav__item--has-dropdown>.nav__link {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

  }



  .nav__dropdown {

    position: static;

    transform: none;

    background: transparent;

    border: none;

    box-shadow: none;

    padding: 0;

    margin-left: var(--space-md);

    min-width: unset;

    /* Initially hidden via max-height and overflow */

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);

    /* Remove list styles for mobile accordion */

    list-style: none;

    padding-left: 0;

  }



  .nav__dropdown-link {

    padding: var(--space-xs) 0;

    font-size: 0.8rem;

  }



  /* When JS toggles .is-active on .nav__item */

  .nav__item.is-active .nav__dropdown {

    max-height: 500px;

    opacity: 1;

    visibility: visible;

    margin-top: var(--space-sm);

    margin-bottom: var(--space-sm);

    pointer-events: auto;

  }



  .nav__item.is-active .dropdown-icon {

    transform: rotate(180deg);

  }

}



/* Mobile menu toggle */

.nav__toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  padding: var(--space-sm);

  background: none;

  border: none;

  cursor: pointer;

  z-index: 1000;

}



@media (max-width: 992px) {

  .nav__toggle {

    display: flex !important;

  }

  .nav {

    /* Don't hide with display:none — nav__list inside must be togglable.

       Instead, make the nav a zero-size static container so it doesn't

       take layout space, while nav__list (position:absolute) can still appear. */

    position: static;

    display: block;

    width: 0;

    height: 0;

    overflow: visible;

    padding: 0;

    margin: 0;

  }

}



.nav__toggle span {

  display: block;

  width: 24px;

  height: 2px;

  background: var(--color-starlight);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  transform-origin: center;

}



/* Hamburger → X animation */

.nav__toggle.active span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}



.nav__toggle.active span:nth-child(2) {

  opacity: 0;

}



.nav__toggle.active span:nth-child(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}



/* ============================================

   6. BUTTONS (DIVI: Button Module)

   ============================================ */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-sm);

  padding: var(--space-md) var(--space-xl);

  font-family: var(--font-body);

  font-size: var(--text-sm);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  border: none;

  border-radius: var(--radius-full);

  cursor: pointer;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  text-decoration: none;

}



.btn--primary {

  background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);

  /* Richer gold gradient */

  color: #0F0F1A;

  /* Darker text for contrast */

  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);

  /* Stronger, softer glow */

  border: 1px solid rgba(255, 255, 255, 0.2);

  position: relative;

  overflow: hidden;

  font-weight: 700;

}



.btn--primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

  transition: 0.5s;

}



.btn--primary:hover::before {

  left: 100%;

}



.btn--primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);

  color: #000;

}



.btn--secondary {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--color-starlight);

}



.btn--secondary:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: var(--color-mystic-gold);

  color: var(--color-mystic-gold);

  transform: translateY(-2px);

}







.btn--ghost {

  background: rgba(255, 255, 255, 0.1);

  color: var(--color-starlight);

}



.btn--ghost:hover {

  background: rgba(255, 255, 255, 0.2);

}



.btn--lg {

  padding: var(--space-lg) var(--space-2xl);

  font-size: var(--text-base);

}



.btn--icon {

  width: 48px;

  height: 48px;

  padding: 0;

  border-radius: var(--radius-full);

}



/* ============================================

   7. CARDS (DIVI: Blurb Module)

   ============================================ */

/* ============================================

   7. CARDS (Glassmorphism 2.0)

   ============================================ */

.card {

  background: rgba(10, 17, 40, 0.82);

  /* Darker tint for readability */

  background-image: var(--gradient-glass);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  /* Enhance depth */

  border-radius: var(--radius-lg);

  padding: var(--space-xl);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);

  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

  height: 100%;

  display: flex;

  flex-direction: column;

}



.card:hover {

  transform: translateY(-10px) scale(1.02);

  border-color: rgba(212, 175, 55, 0.6);

  box-shadow: 0 0 40px rgba(157, 78, 221, 0.2), inset 0 0 20px rgba(212, 175, 55, 0.1);

  background: rgba(26, 10, 46, 0.6);

  /* Purple tint on hover */

}



/* 3D Icon Bundle */

.card__icon-wrapper {

  height: 100px;

  /* Allocated height for icon */

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: var(--space-md);

  transition: transform var(--transition-base);

  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));

}



.card__icon-3d {

  height: 100%;

  width: auto;

  max-width: 100%;

  object-fit: contain;

  transition: transform var(--transition-base), filter var(--transition-base);

  will-change: transform;

}



.card:hover .card__icon-3d {

  transform: scale(1.15) rotate(3deg);

  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.4));

}







.card__title {

  font-family: var(--font-heading);

  font-size: var(--text-lg);

  /* Reduced from xl */

  margin-bottom: var(--space-xs);

  /* Compact spacing */

  color: var(--color-starlight);

}



.card__text {

  color: var(--color-silver-mist);

  font-size: var(--text-sm);

  line-height: 1.5;

  flex-grow: 1;

}



/* Service Card specifics */

.card--service {

  text-align: center;

  align-items: center;

}



/* Teaser / Blur Effect */

.blur-content {

  filter: blur(8px);

  user-select: none;

  pointer-events: none;

  opacity: 0.7;

}



.teaser-overlay {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  text-align: center;

  z-index: 10;

  padding: var(--space-md);

  background: rgba(10, 10, 26, 0.4);

}



.teaser-container {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius-md);

  margin-top: var(--space-lg);

}



/* Pricing Card specifics - COMPACT UPDATE */

.card--pricing {

  text-align: center;

  align-items: center;

  border-color: rgba(212, 175, 55, 0.2);

  padding: var(--space-xl) var(--space-lg);

  /* More vertical padding */

}



.card--pricing.featured {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(10, 10, 26, 0.8) 100%);

  border: 1px solid var(--color-mystic-gold);

  transform: scale(1.05);

  z-index: 1;

  box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);

}



.card--pricing.featured::before {

  content: 'NEJOBLÍBENĚJŠÍ';

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--gradient-gold);

  color: var(--color-deep-space);

  padding: 2px 10px;

  border-radius: var(--radius-full);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}



.card__price {

  font-family: var(--font-heading);

  font-size: 2.5rem;

  color: var(--color-mystic-gold);

  margin: var(--space-lg) 0;

  /* Restored larger margin */

  line-height: 1;

}



.card__price span {

  font-size: var(--text-xs);

  color: var(--color-silver-mist);

  font-family: var(--font-body);

  margin-left: 5px;

}



.card__features {

  list-style: none;

  margin: var(--space-lg) 0;

  /* Restored larger margin */

  text-align: left;

  width: 100%;

}



.card__features li {

  padding: 4px 0;

  /* Reduced padding */

  display: flex;

  align-items: center;

  gap: var(--space-sm);

  color: var(--color-silver-mist);

  font-size: var(--text-xs);

  /* Smaller list text */

}



.card__features li::before {

  content: '\2726';

  /* ✦ Star symbol */

  color: var(--color-mystic-gold);

  font-size: 0.8rem;

}



/* ============================================

   8. HERO SECTION

   ============================================ */

.hero {

  position: relative;

  overflow: hidden;

}



.hero__content {

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

  /* Default text center */

  position: relative;

  z-index: var(--z-base);

}



/* Explicit Grid for Hero Desktop - Reverted to Center */

@media (min-width: 769px) {

  .hero__grid {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .hero__content {

    text-align: center;

    margin: 0 auto;

    max-width: 800px;

  }



  .hero__cta {

    justify-content: center;

  }

}



.hero__badge {

  display: inline-flex;

  align-items: center;

  gap: var(--space-sm);

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  padding: var(--space-sm) var(--space-lg);

  border-radius: var(--radius-full);

  font-size: var(--text-sm);

  margin-bottom: var(--space-xl);

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.hero__badge-dot {

  width: 8px;

  height: 8px;

  background: var(--color-mystic-gold);

  border-radius: 50%;

  animation: pulse 2s ease-in-out infinite;

}



.hero__title {

  font-size: var(--text-6xl);

  /* Slightly smaller to fit better */

  margin-bottom: var(--space-md);

  line-height: 1.0;

}



.hero__subtitle {

  font-size: var(--text-xl);

  color: var(--color-silver-mist);

  margin-bottom: var(--space-xl);

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



.moon-widget {

  margin-top: var(--space-md);

  margin-bottom: var(--space-xl);

}



.hero__cta {

  display: flex;

  gap: var(--space-lg);

  justify-content: center;

  flex-wrap: wrap;

}



.hero__scroll {

  position: absolute;

  bottom: var(--space-2xl);

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--space-sm);

  color: var(--color-silver-mist);

  font-size: var(--text-sm);

  animation: bounce 2s ease-in-out infinite;

}



/* ============================================

   9. SECTION HEADERS

   ============================================ */

.section__header {

  text-align: center;

  max-width: 700px;

  margin: 0 auto var(--space-4xl);

}



.section__badge {

  display: inline-block;

  color: var(--color-mystic-gold);

  font-size: var(--text-sm);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  margin-bottom: var(--space-md);

  margin-right: -0.2em;

  /* Optical centering fix */

}



.section__title {

  margin-bottom: var(--space-xl);

  /* Increased from lg */

}



.section__text {

  font-size: var(--text-lg);

}



/* ============================================

/* ============================================

   10. TESTIMONIALS (DIVI: Testimonial Module)

   ============================================ */

.testimonial {

  background: rgba(10, 10, 26, 0.5);

  background-image: linear-gradient(135deg, rgba(8, 8, 20, 0.4), rgba(4, 4, 10, 0.2));

  border: 1px solid rgba(255, 255, 255, 0.05);

  /* Very subtle default border */

  border-top: 1px solid rgba(255, 215, 0, 0.2);

  /* Slight gold finish on top */

  border-radius: 12px;

  padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-xl);

  position: relative;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  min-height: 280px;

  display: flex;

  flex-direction: column;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}



.testimonial:hover {

  transform: translateY(-5px);

  background: rgba(15, 15, 30, 0.8);

  border-color: rgba(212, 175, 55, 0.3);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 20px rgba(157, 78, 221, 0.1);

  /* Slight purple glow */

}



/* Quote styling - Clean & Elegant */

.testimonial__quote {

  font-family: Georgia, serif;

  font-size: 2.5rem;

  color: var(--color-mystic-gold);

  line-height: 1;

  display: block;

  margin-bottom: 0px;

  opacity: 1;

  /* Fully visible */

  position: static;

  /* Normal flow */

  transform: none;

  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);

}



.testimonial__text {

  font-size: 0.95rem;

  /* Clean readable size */

  line-height: 1.6;

  font-style: italic;

  font-weight: 300;

  color: #e0e0e0;

  /* Brighter than silver-mist */

  margin-top: 0;

  margin-bottom: var(--space-lg);

  position: relative;

  z-index: 1;

  flex-grow: 1;

  /* Pushes author down */

}



.testimonial__author {

  display: flex;

  align-items: center;

  gap: var(--space-md);

  margin-top: auto;

  padding-top: var(--space-md);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  /* Subtle separator */

}



.testimonial__avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 1px solid rgba(255, 215, 0, 0.4);

  background: linear-gradient(135deg, rgba(20, 20, 40, 1), rgba(10, 10, 20, 1));

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-heading);

  font-size: 1.1rem;

  color: var(--color-mystic-gold);

  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);

  flex-shrink: 0;

  font-weight: 600;

}



.testimonial__info {

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.testimonial__name {

  font-weight: 600;

  font-size: 0.95rem;

  color: #fff;

  margin-bottom: 2px;

  letter-spacing: 0.02em;

}



.testimonial__role {

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 4px;

}



.testimonial__stars {

  color: #FFD700;

  font-size: 0.8rem;

  letter-spacing: 2px;

  opacity: 0.9;

}



/* ============================================

   11. STEPS/PROCESS (DIVI: Number Counter)

   ============================================ */

.steps {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-xl);

  position: relative;

}



.steps::before {

  content: '';

  position: absolute;

  top: 40px;

  left: 15%;

  right: 15%;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--color-mystic-gold), transparent);

  opacity: 0.3;

}



.step {

  text-align: center;

  position: relative;

}



.step__number {

  width: 80px;

  height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto var(--space-xl);

  background: var(--gradient-card);

  border: 2px solid var(--color-mystic-gold);

  border-radius: 50%;

  font-family: var(--font-heading);

  font-size: var(--text-2xl);

  color: var(--color-mystic-gold);

  position: relative;

  z-index: 1;

}



.step__title {

  font-size: var(--text-xl);

  margin-bottom: var(--space-md);

}



.step__text {

  font-size: var(--text-sm);

  color: var(--color-silver-mist);

}



/* ============================================

   12. PHASE 3: MAGICAL TOUCHES

   ============================================ */



/* Moon Widget Glow */

.moon-widget-container {

  background: rgba(255, 255, 255, 0.05);

  padding: 0.5rem 1.5rem;

  border-radius: 50px;

  display: inline-flex;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  border: 1px solid rgba(255, 255, 255, 0.05);

  margin-bottom: 2rem;

}



.moon-widget-container:hover {

  background: rgba(255, 255, 255, 0.1);

  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);

  border-color: rgba(212, 175, 55, 0.3);

  transform: translateY(-2px);

}



.moon-emoji {

  font-size: 1.5rem;

  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));

  animation: moon-pulse 3s infinite alternate;

}



@keyframes moon-pulse {

  0% {

    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));

    transform: scale(1);

  }



  100% {

    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));

    transform: scale(1.1);

  }

}



/* Newsletter Magnet */

.section--newsletter {

  background: linear-gradient(135deg, rgba(26, 10, 46, 0.8), rgba(10, 10, 26, 0.9));

  border-top: 1px solid rgba(212, 175, 55, 0.2);

  border-bottom: 1px solid rgba(212, 175, 55, 0.2);

  padding: var(--space-2xl) 0;

  text-align: center;

  position: relative;

  overflow: hidden;

  margin-bottom: var(--space-3xl);

  /* Explicit spacing before footer */

}



.cta-banner::before {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 50%);

  animation: rotate 20s linear infinite;

}



.cta-banner__content {

  position: relative;

  z-index: 1;

}



.cta-banner__title {

  margin-bottom: var(--space-md);

}



.cta-banner__text {

  font-size: var(--text-lg);

  margin-bottom: var(--space-xl);

}



/* =========================================

   3D VISUALS UPDATE

   ========================================= */



/* Hero Grid Layout */

.hero__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-2xl);

  align-items: center;

  position: relative;

  z-index: 2;

}



.hero__visual {

  position: relative;

  display: flex;

  justify-content: center;

  perspective: 1000px;

}



.hero__image {

  width: 100%;

  max-width: 650px;

  height: auto;

  filter: drop-shadow(0 0 50px rgba(155, 89, 182, 0.2));

  /* Blend mode for dark space background integration */

  mix-blend-mode: screen;

  border-radius: 50%;

  /* Optional, helps if edges are hard */

}



/* Floating Animation */

.floating-anim {

  animation: float 8s ease-in-out infinite;

}



@keyframes float {

  0% {

    transform: translateY(0px) rotate(0deg);

  }



  50% {

    transform: translateY(-30px) rotate(2deg);

  }



  100% {

    transform: translateY(0px) rotate(0deg);

  }

}



/* 3D Service Icons */

.card__icon-wrapper {

  height: 140px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: var(--space-md);

  position: relative;

}



.card__icon-3d {

  max-height: 100%;

  width: auto;

  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  mix-blend-mode: screen;

}



.card:hover .card__icon-3d {

  transform: scale(1.15) translateY(-10px) rotate(5deg);

}



/* Mobile Responsiveness for Hero */

@media (max-width: 991px) {

  .hero__grid {

    grid-template-columns: 1fr;

    text-align: center;

    gap: var(--space-xl);

  }



  .hero__visual {

    margin-bottom: var(--space-lg);

  }



  .hero__image {

    max-width: 80%;

  }



  .hero__content {

    padding-top: var(--space-md);

  }

}



/* Email form */

.email-form {

  display: flex;

  gap: var(--space-md);

  max-width: 500px;

  margin: 0 auto;

}



.email-form__input {

  flex: 1;

  padding: var(--space-md) var(--space-lg);

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-full);

  color: var(--color-starlight);

  font-size: var(--text-base);

}



.email-form__input::placeholder {

  color: var(--color-silver-mist);

}



.email-form__input:focus {

  outline: none;

  border-color: var(--color-mystic-gold);

}



/* ============================================

   13. FOOTER (DIVI: Footer Sections)

   ============================================ */

.footer {

  background: rgba(0, 0, 0, 0.5);

  padding: var(--space-3xl) 0 var(--space-xl);

  margin-top: 0;

  /* Removed - spacing handled by section above */

  position: relative;

  z-index: 1;

}



.footer__grid,
.footer__grid--5-col {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 1.2fr !important;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}



.footer__brand {

  max-width: 300px;

}



.footer__logo {

  margin-bottom: var(--space-lg);

}



.footer__desc {

  font-size: var(--text-sm);

  color: var(--color-silver-mist);

  margin-bottom: var(--space-lg);

}



.footer__social {

  display: flex;

  gap: var(--space-md);

}



.footer__social a {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.footer__social a:hover {

  background: var(--color-mystic-gold);

  color: var(--color-deep-space);

}



.footer__title {

  font-size: var(--text-sm);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: var(--space-lg);

  color: var(--color-starlight);

}



.footer__links {

  list-style: none;

}



.footer__links li {

  margin-bottom: var(--space-sm);

}



.footer__links a {

  color: var(--color-silver-mist);

  font-size: var(--text-sm);

  transition: color var(--transition-fast);

}



.footer__links a:hover {

  color: var(--color-mystic-gold);

}



.footer__bottom {

  padding-top: var(--space-xl);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: var(--text-sm);

  color: var(--color-silver-mist);

}



.footer__legal {

  display: flex;

  gap: var(--space-xl);

}



/* ============================================

   14. ZODIAC GRID (Custom for Horoskopy page)

   ============================================ */

.zodiac-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

  gap: var(--space-md);

  margin-top: var(--space-xl);

}



.zodiac-card {

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-lg);

  padding: var(--space-lg) var(--space-md);

  text-align: center;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--space-xs);

  text-decoration: none;

  transition: all var(--transition-base);

}



.zodiac-card:hover {

  border-color: var(--color-mystic-gold);

  transform: translateY(-4px);

  box-shadow: var(--shadow-glow);

}



.zodiac-card__symbol {

  font-size: 2.5rem;

  margin-bottom: var(--space-xs);

  display: block;

  line-height: 1;

  transition: transform 0.3s ease;

}



.zodiac-card__name {

  font-family: var(--font-heading);

  font-size: 1.15rem;

  color: var(--color-starlight);

  margin-bottom: 2px;

  letter-spacing: 0.5px;

}



.zodiac-card__dates {

  font-size: var(--text-xs);

  color: var(--color-silver-mist);

}



/* User's selected zodiac card highlighting */

.zodiac-card--highlighted {

  border-color: rgba(235, 192, 102, 0.7);

  box-shadow: 0 0 20px rgba(235, 192, 102, 0.2);

  position: relative;

}



.zodiac-card__badge {

  position: absolute;

  top: -10px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--color-mystic-gold);

  color: var(--color-deep-space);

  font-size: var(--text-xs);

  font-weight: 700;

  padding: var(--space-xs) var(--space-md);

  border-radius: var(--radius-full);

  white-space: nowrap;

  letter-spacing: 0.5px;

}



/* ============================================

   15. TAROT CARDS (Custom for Tarot page)

   ============================================ */

.tarot-deck {

  display: flex;

  justify-content: center;

  gap: calc(-1 * var(--space-xl));

  perspective: 1000px;

  margin: var(--space-3xl) 0;

}



.tarot-card {

  width: 150px;

  height: 250px;

  background: linear-gradient(180deg, #2a1a4a 0%, #1a0a2e 100%);

  border: 2px solid var(--color-mystic-gold);

  border-radius: var(--radius-lg);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--text-4xl);

  cursor: pointer;

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  box-shadow: var(--shadow-card);

}



.tarot-card:nth-child(1) {

  transform: rotate(-15deg);

}



.tarot-card:nth-child(2) {

  transform: rotate(-5deg) translateY(-10px);

}



.tarot-card:nth-child(3) {

  transform: rotate(5deg) translateY(-10px);

}



.tarot-card:nth-child(4) {

  transform: rotate(15deg);

}



.tarot-card:hover {

  transform: translateY(-20px) rotate(0deg) scale(1.1);

  z-index: 10;

  box-shadow: var(--shadow-glow-strong);

}



/* ============================================

   16. TABS (For Horoskopy page)

   ============================================ */

.tabs {

  display: flex;

  justify-content: center;

  gap: var(--space-sm);

  margin-bottom: var(--space-3xl);

}



.tab {

  padding: var(--space-md) var(--space-xl);

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-full);

  color: var(--color-silver-mist);

  font-size: var(--text-sm);

  font-weight: 500;

  cursor: pointer;

  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);

}



.tab:hover {

  border-color: var(--color-mystic-gold);

  color: var(--color-starlight);

}



.tab.active {

  background: var(--gradient-gold);

  border-color: transparent;

  color: var(--color-deep-space);

}



/* ============================================

   17. FAQ ACCORDION

   ============================================ */

.faq-item {

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.faq-question {

  width: 100%;

  padding: var(--space-xl) 0;

  background: none;

  border: none;

  color: var(--color-starlight);

  font-size: var(--text-lg);

  font-weight: 500;

  text-align: left;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.faq-question::after {

  content: '+';

  font-size: var(--text-2xl);

  color: var(--color-mystic-gold);

  transition: transform var(--transition-fast);

}



.faq-item.open .faq-question::after {

  transform: rotate(45deg);

}



.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height var(--transition-base);

}



.faq-item.open .faq-answer {

  max-height: 500px;

}



.faq-answer p {

  padding-bottom: var(--space-xl);

}



/* ============================================

   18. ANIMATIONS

   ============================================ */

@keyframes pulse {



  0%,

  100% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.5;

    transform: scale(1.2);

  }

}



@keyframes bounce {



  0%,

  100% {

    transform: translateX(-50%) translateY(0);

  }



  50% {

    transform: translateX(-50%) translateY(10px);

  }

}



@keyframes rotate {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



@keyframes float-medium {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-20px);

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes twinkle {



  0%,

  100% {

    opacity: 0.3;

  }



  50% {

    opacity: 1;

  }

}



/* Animation classes */

.animate-fade-in {

  animation: fadeInUp 0.6s ease forwards;

}



.animate-float {

  animation: float 6s ease-in-out infinite;

}



/* Stagger delays */

.delay-1 {

  animation-delay: 0.1s;

}



.delay-2 {

  animation-delay: 0.2s;

}



.delay-3 {

  animation-delay: 0.3s;

}



.delay-4 {

  animation-delay: 0.4s;

}



.delay-5 {

  animation-delay: 0.5s;

}



/* ============================================

   19. STARS BACKGROUND (Optimized)

   ============================================ */

.stars {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: -1;

  /* Ensure it stays behind content */

  overflow: hidden;

}



.star-layer {

  position: absolute;

  top: 0;

  left: 0;

  background: transparent;

  width: 1px;

  height: 1px;

  border-radius: 50%;

  animation: starPan linear infinite;

}



@keyframes starPan {

  from {

    transform: translateY(0);

  }



  to {

    transform: translateY(-2000px);

    /* Pan upwards */

  }

}



/* ============================================

   20. RESPONSIVE (DIVI: Responsive Editing)

   ============================================ */

@media (max-width: 1024px) {

  :root {

    --text-7xl: 3.5rem;

    --text-6xl: 3rem;

    --text-5xl: 2.5rem;

  }



  .grid-4 {

    grid-template-columns: repeat(2, 1fr);

  }



  .zodiac-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .footer__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  :root {

    --text-7xl: 2.5rem;

    --text-6xl: 2rem;

    --text-5xl: 1.75rem;

    --text-4xl: 1.5rem;

  }



  /* ===== MOBILE BACKGROUND FIX =====

     On mobile, background-attachment:scroll + background-size:cover

     stretches the image over the ENTIRE body scroll height (5000+px),

     causing extreme blurriness. Fix: remove body bg, use a fixed

     pseudo-element that only covers the viewport. */

  body {

    background-image: none !important;

    background-attachment: scroll;

  }



  /* Fixed viewport-size background via pseudo-element - DISABLED to avoid artifacts */

  body::before,

  body::after {

    display: none !important;

  }



  /* Disable aurora overlays on mobile - background image must not be animated */

  body::before {

    animation: none;

    will-change: auto;

  }



  body::after {

    display: none;

  }



  /* ===== GLOBAL MOBILE SAFETY ===== */

  .container {

    padding-left: 16px;

    padding-right: 16px;

    max-width: 100%;

  }



  .section {

    padding: var(--space-xl) 0;

    text-align: center;

  }



  /* Center hero--mini sections on mobile */

  .hero--mini {

    text-align: center;

    padding-top: 120px;

  }



  /* Center section titles on mobile */

  .section__title {

    text-align: center;

  }



  /* ===== MOBILE HEADER ===== */

  .header {

    padding: var(--space-sm) 0;

  }



  .header__inner {

    padding: 0 var(--space-md);

    justify-content: space-between;

    gap: var(--space-sm);

    flex-wrap: nowrap;

  }



  .header.scrolled {

    padding: var(--space-xs) 0;

  }



  /* Compact logo */

  .logo {

    font-size: 0.9rem;

    gap: var(--space-xs);

    margin-right: 0;

    flex-shrink: 1;

    min-width: 0;

    overflow: hidden;

  }



  .logo__image {

    height: 36px;

    width: auto;

    flex-shrink: 0;

  }



  .logo__text {

    display: inline;

    font-size: 0.8rem;

    white-space: nowrap;

  }



  /* Hide desktop auth buttons on mobile */

  .auth-buttons {

    display: none;

  }



  /* Show mobile auth buttons inside hamburger menu */

  .mobile-auth-buttons {

    display: flex !important;

    flex-direction: column;

    gap: 10px;

    padding: var(--space-lg) var(--space-md);

    margin-top: var(--space-sm);

    border-top: 1px solid rgba(212, 175, 55, 0.2);

  }



  .mobile-auth-buttons .btn {

    width: 100%;

    text-align: center;

    padding: 12px var(--space-lg);

    font-size: var(--text-sm);

    border-radius: var(--radius-full);

    min-height: 44px;

  }



  /* Nav container: zero-size but overflow visible so nav__list can appear */

  .nav {

    position: static;

    display: block;

    width: 0;

    height: 0;

    overflow: visible;

    padding: 0;

    margin: 0;

  }



  /* Hamburger toggle - OUTSIDE .nav, always visible */

  .nav__toggle {

    display: flex;

    min-width: 44px;

    min-height: 44px;

    align-items: center;

    justify-content: center;

    order: 2;

  }



  /* Mobile nav dropdown */

  .nav__list {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: rgba(10, 10, 26, 0.98);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    flex-direction: column;

    padding: var(--space-lg) var(--space-md);

    gap: 0;

    z-index: 1000;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    max-height: 70vh;

    overflow-y: auto;

  }



  .nav__list.open {

    display: flex;

  }



  .nav__link {

    display: block;

    padding: 14px var(--space-md);

    font-size: var(--text-base);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    min-height: 44px;

    line-height: 1.2;

  }



  .nav__list li:last-child .nav__link {

    border-bottom: none;

  }



  /* Header buttons inside mobile (if any shown) */

  .header .btn {

    padding: 0.5rem 0.75rem;

    font-size: 0.7rem;

    min-width: auto;

    min-height: 36px;

  }



  /* ===== GENERAL MOBILE LAYOUT ===== */

  .grid-3,

  .grid-2,

  .grid-4 {

    grid-template-columns: 1fr;

    gap: var(--space-md);

  }



  .zodiac-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-sm);

  }



  .steps {

    grid-template-columns: 1fr;

  }



  .steps::before {

    display: none;

  }



  .col-6,

  .col-4,

  .col-3 {

    width: 100%;

  }



  /* ===== CARDS & GLASS CARDS ===== */

  .card,

  .glass-card {

    padding: var(--space-lg);

  }



  /* ===== HERO SECTION ===== */

  .hero {

    padding-top: 80px;

    min-height: auto;

    text-align: center;

  }



  .hero__title {

    font-size: var(--text-4xl);

    line-height: 1.2;

  }



  .hero__subtitle {

    font-size: var(--text-base);

    line-height: 1.6;

  }



  .hero__cta {

    flex-direction: column;

    align-items: center;

    gap: var(--space-md);

  }



  .hero__visual {

    margin-bottom: var(--space-sm);

  }



  .hero__image {

    max-width: 55%;

    margin: 0 auto;

    display: block;

    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 1) 40%, transparent 100%);

    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0, 0, 0, 1) 40%, transparent 100%);

  }



  .hero__glow-effect {

    display: none; /* Remove decorative glow on mobile — appears as transparent circle artifact */

  }



  /* Reduce floating animation on mobile for performance */

  .floating-anim {

    animation-duration: 8s;

  }



  /* ===== FORMS ===== */

  input[type="text"],

  input[type="email"],

  input[type="password"],

  input[type="number"],

  input[type="date"],

  input[type="time"],

  input[type="search"],

  input[type="tel"],

  textarea,

  select {

    font-size: 16px !important;

    min-height: 48px;

    padding: 12px 16px;

  }



  .email-form {

    flex-direction: column;

  }



  /* ===== TOUCH-FRIENDLY BUTTONS ===== */

  .btn {

    min-height: 44px;

    padding: var(--space-md) var(--space-lg);

    font-size: var(--text-sm);

  }



  /* ===== FOOTER ===== */

  .footer__grid {

    grid-template-columns: 1fr;

    gap: var(--space-lg);

  }



  .footer__bottom {

    flex-direction: column;

    gap: var(--space-md);

    text-align: center;

  }



  /* ===== TAROT ===== */

  .tarot-deck {

    flex-wrap: wrap;

    gap: var(--space-md);

    justify-content: center;

  }



  .tarot-card {

    transform: none !important;

    width: calc(50% - var(--space-md));

  }



  /* ===== DISABLE HEAVY ANIMATIONS ===== */

  .cursor-canvas,

  .comet-cursor {

    display: none !important;

  }



  /* Reduce animation intensity */

  .fade-in-up {

    animation-duration: 0.3s !important;

  }



  /* ===== MODALS ===== */

  .modal__content {

    width: 100% !important;

    max-width: 100% !important;

    min-height: 100vh;

    border-radius: 0 !important;

    padding: var(--space-lg) !important;

  }



  .modal .modal__close {

    top: var(--space-md);

    right: var(--space-md);

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

  }

}



@media (max-width: 480px) {

  .zodiac-grid {

    grid-template-columns: 1fr;

  }



  .tabs {

    flex-wrap: wrap;

    gap: var(--space-xs);

  }



  .tab {

    flex: 1 1 auto;

    text-align: center;

    min-width: calc(50% - var(--space-xs));

  }



  .hero__title {

    font-size: 1.5rem;

  }



  .tarot-card {

    width: 100%;

  }



  .section__title {

    font-size: var(--text-2xl);

  }

}



/* ===== ACCESSIBILITY: Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}



/* ============================================

   21. UTILITIES

   ============================================ */

.mb-xs {

  margin-bottom: var(--space-xs);

}



.mb-sm {

  margin-bottom: var(--space-sm);

}



.mb-md {

  margin-bottom: var(--space-md);

}



.mb-lg {

  margin-bottom: var(--space-lg);

}



.mb-xl {

  margin-bottom: var(--space-xl);

}



.mb-2xl {

  margin-bottom: var(--space-2xl);

}



.mb-3xl {

  margin-bottom: var(--space-3xl);

}



.mt-xs {

  margin-top: var(--space-xs);

}



.mt-sm {

  margin-top: var(--space-sm);

}



.mt-md {

  margin-top: var(--space-md);

}



.mt-lg {

  margin-top: var(--space-lg);

}



.mt-xl {

  margin-top: var(--space-xl);

}



.hidden {

  display: none;

}



.visible {

  display: block;

}



/* Screen reader only */

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* ============================================

   TAROT CARD FLIP ANIMATION

   ============================================ */



/* Tarot Spread Container */

.tarot-spread {

  perspective: 1000px;

}



/* Flip Card Container */

.tarot-flip-card {

  width: 100%;

  max-width: 320px;

  aspect-ratio: 9/15;

  height: auto;

  perspective: 1500px;

  cursor: pointer;

  margin: 0 auto;

}



.tarot-flip-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);

  transform-style: preserve-3d;

  transform-origin: center center;

}



.tarot-flip-card.flipped .tarot-flip-inner {

  transform: rotateY(180deg);

}



/* Front and Back of Card */

.tarot-flip-front,

.tarot-flip-back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

}



.tarot-flip-front {

  z-index: 2;

  background: linear-gradient(135deg, #1a0a2e 0%, #0a0a1a 100%);

  display: flex;

  align-items: center;

  justify-content: center;

}



.tarot-flip-front img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}



.tarot-flip-card:hover .tarot-flip-front img {

  transform: scale(1.05);

}



.tarot-flip-back {

  transform: rotateY(180deg);

  background: linear-gradient(135deg, rgba(26, 10, 46, 0.95) 0%, rgba(10, 10, 26, 0.98) 100%);

  border: 2px solid var(--color-mystic-gold);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:

    0 10px 40px rgba(0, 0, 0, 0.5),

    0 0 30px rgba(212, 175, 55, 0.3),

    inset 0 0 60px rgba(157, 78, 221, 0.1);

}



/* When card has image */

.tarot-flip-back.has-image {

  background: transparent;

  border: none;

  padding: 0;

  overflow: hidden;

}



.tarot-card-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: var(--radius-lg);

  box-shadow:

    0 10px 40px rgba(0, 0, 0, 0.5),

    0 0 30px rgba(212, 175, 55, 0.3);

}



/* Interpretation card image */

.interpretation-image {

  width: 100px;

  height: auto;

  border-radius: var(--radius-md);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

  border: 2px solid var(--color-mystic-gold);

}



/* Card Content (Back side) */

.tarot-card-content {

  text-align: center;

  padding: var(--space-lg);

}



.tarot-card-emoji {

  font-size: 3.5rem;

  display: block;

  margin-bottom: var(--space-md);

  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));

  animation: float-subtle 3s ease-in-out infinite;

}



@keyframes float-subtle {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-8px);

  }

}



.tarot-card-name {

  font-family: var(--font-heading);

  font-size: var(--text-lg);

  color: var(--color-mystic-gold);

  margin-bottom: var(--space-sm);

  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);

}



.tarot-card-meaning {

  font-size: var(--text-sm);

  color: var(--color-silver-mist);

  line-height: 1.4;

  margin: 0;

}



/* Flip Animation Enhancement */

.tarot-flip-card.flipped .tarot-flip-inner {

  animation: cardReveal 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);

}



@keyframes cardReveal {

  0% {

    transform: rotateY(0) scale(1);

  }



  50% {

    transform: rotateY(90deg) scale(1.1);

    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.4);

  }



  100% {

    transform: rotateY(180deg) scale(1);

  }

}



/* Sparkle effect on flip */

.tarot-flip-card.flipped::after {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  width: 150%;

  height: 150%;

  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 60%);

  transform: translate(-50%, -50%);

  opacity: 0;

  animation: sparkle 1s ease-out forwards;

  pointer-events: none;

  z-index: 10;

}



@keyframes sparkle {

  0% {

    opacity: 1;

    transform: translate(-50%, -50%) scale(0.5);

  }



  100% {

    opacity: 0;

    transform: translate(-50%, -50%) scale(2);

  }

}



/* ============================================

   INTERPRETATION CARDS

   ============================================ */

.interpretation-card {

  background: rgba(10, 10, 26, 0.85);

  border: 1px solid rgba(212, 175, 55, 0.3);

  border-radius: var(--radius-lg);

  padding: var(--space-xl);

  margin-bottom: var(--space-lg);

  backdrop-filter: blur(10px);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  text-align: left;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.3s ease;

}



.interpretation-card:hover {

  border-color: var(--color-mystic-gold);

  transform: translateY(-3px);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.15);

}



.interpretation-position {

  display: inline-block;

  background: linear-gradient(135deg, rgba(157, 78, 221, 0.3), rgba(247, 37, 133, 0.2));

  color: var(--color-starlight);

  font-size: var(--text-sm);

  font-weight: 600;

  padding: var(--space-xs) var(--space-md);

  border-radius: var(--radius-full);

  margin-bottom: var(--space-md);

  letter-spacing: 0.05em;

}



.interpretation-header {

  display: flex;

  align-items: center;

  gap: var(--space-lg);

  margin-bottom: var(--space-lg);

}



.interpretation-emoji {

  font-size: 3rem;

  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));

}



.interpretation-name {

  font-family: var(--font-heading);

  font-size: var(--text-2xl);

  color: var(--color-mystic-gold);

  margin-bottom: var(--space-xs);

}



.interpretation-meaning {

  font-size: var(--text-sm);

  color: var(--color-aurora-green);

  margin: 0;

  font-style: italic;

}



.interpretation-text {

  font-size: var(--text-base);

  color: var(--color-silver-mist);

  line-height: 1.8;

  margin: 0;

}



/* Summary Card */

.interpretation-summary {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(10, 10, 26, 0.9) 100%);

  border: 2px solid var(--color-mystic-gold);

  border-radius: var(--radius-lg);

  padding: var(--space-xl);

  margin-top: var(--space-xl);

  text-align: center;

}



.interpretation-summary h4 {

  font-family: var(--font-heading);

  font-size: var(--text-xl);

  color: var(--color-mystic-gold);

  margin-bottom: var(--space-md);

}



.interpretation-summary p {

  color: var(--color-silver-mist);

  line-height: 1.8;

  margin: 0;

}



.interpretation-summary strong {

  color: var(--color-starlight);

}



/* Fade In Up Animation */

.fade-in-up {

  opacity: 0;

  transform: translateY(30px);

  animation: fadeInUp 0.6s ease forwards;

}



/* fadeInUp already defined in section 18 - removed duplicate */



/* Shaking Animation (Shuffle) */

.tarot-deck.shaking {

  animation: shake 0.6s cubic-bezier(.36, .07, .19, .97) infinite;

}



@keyframes shake {



  0%,

  100% {

    transform: translateX(0) rotate(0);

  }



  10% {

    transform: translateX(-8px) rotate(-2deg);

  }



  20% {

    transform: translateX(8px) rotate(2deg);

  }



  30% {

    transform: translateX(-6px) rotate(-1deg);

  }



  40% {

    transform: translateX(6px) rotate(1deg);

  }



  50% {

    transform: translateX(-4px) rotate(-0.5deg);

  }



  60% {

    transform: translateX(4px) rotate(0.5deg);

  }



  70% {

    transform: translateX(-2px) rotate(-0.25deg);

  }



  80% {

    transform: translateX(2px) rotate(0.25deg);

  }



  90% {

    transform: translateX(-1px) rotate(-0.1deg);

  }

}



/* Responsive adjustments */

@media (max-width: 768px) {

  .tarot-flip-card {

    width: 140px;

    height: 220px;

  }



  .tarot-card-emoji {

    font-size: 2.5rem;

  }



  .tarot-card-name {

    font-size: var(--text-base);

  }



  .interpretation-header {

    flex-direction: column;

    text-align: center;

  }



  .interpretation-card {

    padding: var(--space-lg);

  }



  .grid-3.tarot-spread {

    grid-template-columns: repeat(1, 1fr);

    gap: var(--space-xl);

  }

}



@media (max-width: 480px) {

  .tarot-flip-card {

    width: 120px;

    height: 190px;

  }



  .tarot-card-emoji {

    font-size: 2rem;

  }



  .tarot-card-content {

    padding: var(--space-md);

  }

}



/* ============================================

   TAROT REDESIGN - SPREAD SELECTION

   ============================================ */

.t-spread-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  margin-top: 3rem;

}



.t-spread-card {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 24px;

  padding: 2.5rem 2rem;

  text-align: center;

  position: relative;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  overflow: hidden;

  backdrop-filter: blur(10px);

  display: flex;

  flex-direction: column;

  align-items: center;

}



/* Hover Effects */

.t-spread-card:hover {

  transform: translateY(-8px);

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(212, 175, 55, 0.3);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),

    0 0 20px rgba(212, 175, 55, 0.1);

}



.t-spread-card.featured {

  background: rgba(255, 255, 255, 0.08);

  /* Slightly lighter */

  border-color: var(--color-mystic-gold);

  box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);

  /* Glow */

  transform: translateY(-5px);

  /* Lifted */

}



/* Featured Badge/Glow */

.t-spread-card.featured::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, transparent, var(--color-mystic-gold), transparent);

  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);

}



.t-spread-icon {

  font-size: 3rem;

  margin-bottom: 1.5rem;

  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));

}



.t-spread-title {

  font-family: var(--font-heading);

  font-size: 1.25rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin-bottom: 1rem;

  color: var(--color-starlight);

}



.t-spread-desc {

  font-size: 0.9rem;

  color: var(--color-silver-mist);

  line-height: 1.6;

  margin-bottom: 2rem;

  flex-grow: 1;

  /* Pushes button down */

  min-height: 3em;

}



.t-spread-price {

  font-size: 0.9rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 1.5rem;

  color: rgba(255, 255, 255, 0.5);

}



.t-spread-price.text-gold {

  color: var(--color-mystic-gold);

  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);

}



/* Glass Button inside Card */

.btn--glass {

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: var(--color-starlight);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.3s ease;

}



.btn--glass:hover {

  background: rgba(255, 255, 255, 0.2);

  border-color: rgba(255, 255, 255, 0.4);

}



.btn--full {

  width: 100%;

}



/* Responsive Grid */

@media (max-width: 900px) {

  .t-spread-grid {

    grid-template-columns: 1fr;

    max-width: 400px;

    margin-left: auto;

    margin-right: auto;

  }

}



/* ============================================

   TAROT REDESIGN - RESULT UI

   ============================================ */



.tarot-result-card {

  background: linear-gradient(135deg, rgba(20, 20, 35, 0.95), rgba(10, 10, 20, 0.98));

  border: 1px solid rgba(212, 175, 55, 0.15);

  border-radius: 16px;

  padding: 2.5rem;

  margin-bottom: 2rem;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  position: relative;

  overflow: hidden;

}



/* Subtle Golden Top Border */

.tarot-result-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, transparent, var(--color-mystic-gold), transparent);

  opacity: 0.5;

}



.tarot-result-header {

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-bottom: 1.5rem;

  margin-bottom: 1.5rem;

}



.tarot-result-title {

  font-family: var(--font-heading);

  font-size: 1.75rem;

  color: var(--color-mystic-gold);

  margin-bottom: 0.5rem;

  letter-spacing: 0.02em;

}



.tarot-result-meta {

  font-size: 0.85rem;

  color: var(--color-silver-mist);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  font-weight: 500;

}



.tarot-result-body {

  color: var(--color-silver-mist);

}



.astrologer-note {

  display: flex;

  align-items: center;

  margin-bottom: 1.5rem;

  padding-bottom: 0.5rem;

}



.tarot-main-text {

  font-size: 1.05rem;

  line-height: 1.8;

  color: #e0e0e0;

  margin-bottom: 2rem;

}



.tarot-practical-advice {

  margin-bottom: 2rem;

  padding: 1rem 0;

  border-top: 1px dashed rgba(255, 255, 255, 0.1);

  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);

  font-size: 0.95rem;

}







/* Grid Override for 10 cards */

.grid-5 {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 1rem;

}



@media (max-width: 900px) {

  .grid-5 {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 600px) {

  .grid-5 {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* ============================================

   22. CAROUSEL (Testimonials)

   ============================================ */

.carousel-container {

  position: relative;

  width: 100%;

  padding: 0 var(--space-2xl);

  /* Space for arrows */

}



.carousel-track-container {

  overflow: hidden;

  width: 100%;

}



.carousel-track {

  display: flex;

  padding: var(--space-md) 0;

  /* Space for shadow/hover */

  margin: 0;

  list-style: none;

  gap: var(--space-lg);

  transition: transform 0.5s ease-in-out;

}



.carousel-slide {

  flex: 0 0 calc((100% / 3) - (2 * var(--space-lg) / 3));

  /* Keep 3 items but maybe adjust gap if needed */

  max-width: calc((100% / 3) - (2 * var(--space-lg) / 3));

  /* To make them feel wider, we rely on reducing vertical padding above. 

     If we want them physically wider, we would need to show fewer items or make container huge.

     Let's try sticking to 3 but compacting the content. */

}



.carousel-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(10, 10, 26, 0.8);

  border: 1px solid var(--color-mystic-gold);

  color: var(--color-mystic-gold);

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.3s ease;

}



.carousel-btn:hover {

  background: var(--color-mystic-gold);

  color: var(--color-deep-space);

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);

}



.carousel-btn.prev {

  left: 0;

}



.carousel-btn.next {

  right: 0;

}



/* Responsive Carousel */

@media (max-width: 900px) {

  .carousel-slide {

    flex: 0 0 calc((100% / 2) - (var(--space-lg) / 2));

    /* 2 items */

    max-width: calc((100% / 2) - (var(--space-lg) / 2));

  }

}



@media (max-width: 600px) {

  .carousel-slide {

    flex: 0 0 100%;

    /* 1 item */

    max-width: 100%;

  }



  .carousel-container {

    padding: 0;

  }



  .carousel-btn {

    width: 30px;

    height: 30px;

    font-size: 1rem;

    background: rgba(10, 10, 26, 0.9);

  }



  .carousel-btn.prev {

    left: 10px;

  }



  .carousel-btn.next {

    right: 10px;

  }

}





/* ============================================

   23. COOKIE BANNER

   ============================================ */

.cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  background: rgba(10, 10, 26, 0.95);

  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(212, 175, 55, 0.3);

  padding: var(--space-lg);

  z-index: 1000;

  transform: translateY(100%);

  transition: transform 0.5s ease-out;

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);

}



.cookie-banner.visible {

  transform: translateY(0);

}



.cookie-banner__content {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: var(--space-xl);

}



.cookie-banner__text {

  color: var(--color-silver-mist);

  font-size: var(--text-sm);

  margin: 0;

}



.cookie-banner__actions {

  display: flex;

  gap: var(--space-md);

  flex-shrink: 0;

}



@media (max-width: 768px) {

  .cookie-banner__content {

    flex-direction: column;

    text-align: center;

    gap: var(--space-md);

  }



  .cookie-banner__actions {

    width: 100%;

    justify-content: center;

  }

}



/* ============================================

   24. TOAST NOTIFICATIONS

   ============================================ */

.toast-container {

  position: fixed;

  top: var(--space-xl);

  right: var(--space-xl);

  z-index: 9999;

  display: flex;

  flex-direction: column;

  gap: var(--space-sm);

  pointer-events: none;

}



.toast {

  background: rgba(10, 10, 26, 0.95);

  border: 1px solid var(--color-mystic-gold);

  color: var(--color-white);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-md);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  display: flex;

  align-items: center;

  gap: var(--space-md);

  min-width: 300px;

  backdrop-filter: blur(10px);

  animation: slideInRight 0.3s ease-out forwards;

  pointer-events: auto;

}



.toast--success {

  border-left: 4px solid #00c853;

}



.toast--error {

  border-left: 4px solid #ff1744;

}



.toast__icon {

  font-size: 1.5rem;

}



.toast__title {

  font-weight: 600;

  color: var(--color-mystic-gold);

  margin-bottom: 2px;

}



.toast__message {

  font-size: 0.9rem;

  color: var(--color-silver-mist);

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(100%);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeOutRight {

  from {

    opacity: 1;

    transform: translateX(0);

  }



  to {

    opacity: 0;

    transform: translateX(100%);

  }

}



/* ============================================

   25. OPTIMIZED CURSOR

   ============================================ */

/* cursor: none is handled by .cursor-active class (added by JS) */



.cursor-canvas {

  pointer-events: none;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9998;

}



.comet-cursor-head {

  width: 8px;

  height: 8px;

  background: #fff;

  border-radius: 50%;

  position: fixed;

  top: 0;

  left: 0;

  pointer-events: none;

  z-index: 9999;

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(212, 175, 55, 0.6);

  /* Improve performance with hardware acceleration */

  will-change: transform;

  /* Center the dot exactly on cursor coordinates */

  margin-left: -4px;

  margin-top: -4px;

  transition: width 0.3s, height 0.3s, background-color 0.3s;

}



.comet-cursor-head.hover {

  width: 20px;

  height: 20px;

  margin-left: -10px;

  margin-top: -10px;

  background: rgba(255, 215, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.8);

  backdrop-filter: blur(2px);

}



/* Hide on touch devices */

@media (pointer: coarse) {

  body {

    cursor: auto;

  }



  .comet-cursor-head,

  .cursor-canvas {

    display: none;

  }

}



/* ============================================

   26. LOADING STATES

   ============================================ */

.loading-spinner {

  width: 20px;

  height: 20px;

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  border-top-color: var(--color-mystic-gold);

  animation: spin 0.8s linear infinite;

  display: inline-block;

  vertical-align: text-bottom;

  margin-right: 8px;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.btn--loading {

  position: relative;

  color: transparent !important;

  pointer-events: none;

}



.btn--loading::after {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  top: 50%;

  left: 50%;

  margin-top: -10px;

  margin-left: -10px;

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  border-top-color: var(--color-mystic-gold);

  animation: spin 0.8s linear infinite;

  visibility: visible;

}



/* ============================================

   27. PROFILE PAGE STYLES

   ============================================ */



/* Profile Avatar */

.profile-avatar {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--color-cosmic-purple), var(--color-ethereal-violet));

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  border: 2px solid var(--color-mystic-gold);

  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);

  flex-shrink: 0;

}



/* Stats Grid */

.stats-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap: 1rem;

}



.stat-card {

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  position: relative;

  overflow: hidden;

}



.stat-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: var(--gradient-gold);

  transform: scaleX(0);

  transition: transform var(--transition-base);

}



.stat-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 30px rgba(157, 78, 221, 0.2);

}



.stat-card:hover::before {

  transform: scaleX(1);

}



.stat-value {

  font-family: var(--font-heading);

  background: var(--gradient-gold);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* Profile Tabs */

.tabs {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 1.5rem;

  background: rgba(0, 0, 0, 0.2);

  padding: 0.5rem;

  border-radius: var(--radius-lg);

  flex-wrap: wrap;

}



.tab {

  padding: 0.75rem 1.5rem;

  background: transparent;

  border: none;

  color: var(--color-silver-mist);

  font-family: var(--font-body);

  font-size: 0.9rem;

  font-weight: 500;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);

  white-space: nowrap;

}



.tab:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--color-starlight);

}



.tab.active {

  background: var(--gradient-gold);

  color: var(--color-deep-space);

  font-weight: 600;

}



/* Reading Items */

.reading-item {

  transition: transform var(--transition-fast), border-color var(--transition-fast);

  border: 1px solid transparent;

}



.reading-item:hover {

  transform: translateX(5px);

  border-color: rgba(212, 175, 55, 0.3);

  background: rgba(212, 175, 55, 0.05);

}



/* Reading Modal */

#reading-modal .modal__content {

  animation: modalSlideIn 0.3s ease-out;

}



@keyframes modalSlideIn {

  from {

    opacity: 0;

    transform: translateY(-20px) scale(0.95);

  }



  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



/* Badge Styles */

.badge {

  display: inline-block;

  padding: 0.25rem 0.75rem;

  border-radius: var(--radius-full);

  font-size: 0.8rem;

  font-weight: 600;

  background: rgba(255, 255, 255, 0.1);

}



.badge--gold {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(184, 134, 11, 0.2));

  border: 1px solid var(--color-mystic-gold);

  color: var(--color-mystic-gold);

}



/* Glass Card variant for profile */

.glass-card {

  background: rgba(10, 17, 40, 0.6);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-lg);

  padding: var(--space-xl);

}



/* Responsive profile adjustments */

@media (max-width: 768px) {

  .stats-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .profile-avatar {

    width: 50px;

    height: 50px;

    font-size: 1.5rem;

  }



  .tabs {

    flex-direction: column;

  }



  .tab {

    text-align: center;

  }

}



/* ============================================

   TAROT SUMMARY ENHANCEMENTS

   ============================================ */



.tarot-summary-enhanced {

  background: rgba(10, 10, 26, 0.6);

  border-radius: var(--radius-lg);

  padding: var(--space-xl);

  margin-top: var(--space-2xl);

  border: 1px solid rgba(212, 175, 55, 0.2);

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(10px);

}



.tarot-summary-enhanced::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, transparent, var(--color-mystic-gold), transparent);

  opacity: 0.7;

}



.summary-header {

  text-align: center;

  margin-bottom: var(--space-xl);

}



.summary-icon {

  font-size: 3rem;

  margin-bottom: var(--space-sm);

  filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.5));

}



.summary-subtitle {

  color: var(--color-silver-mist);

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  opacity: 0.8;

}



.summary-content {

  background: rgba(0, 0, 0, 0.2);

  border-radius: var(--radius-md);

  padding: var(--space-lg);

  color: var(--color-silver-mist);

  line-height: 1.8;

  font-size: 1.05rem;

  border-left: 2px solid var(--color-mystic-gold);

}



/* 3-Card Specific Styles (Timeline) */

.tarot-summary-3card .summary-timeline {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-md);

  margin-bottom: var(--space-xl);

  flex-wrap: wrap;

}



.timeline-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  background: rgba(255, 255, 255, 0.03);

  padding: 1rem;

  border-radius: var(--radius-md);

  border: 1px solid rgba(255, 255, 255, 0.05);

  min-width: 120px;

}



.timeline-emoji {

  font-size: 1.5rem;

}



.timeline-label {

  font-size: 0.75rem;

  text-transform: uppercase;

  color: var(--color-mystic-gold);

  letter-spacing: 0.05em;

}



.timeline-card {

  font-weight: bold;

  color: var(--color-starlight);

  text-align: center;

}



.timeline-connector {

  color: var(--color-mystic-gold);

  font-size: 1.5rem;

  opacity: 0.5;

}



/* Celtic Cross Specific Styles (Dashboard) */

.tarot-summary-celtic {

  background: linear-gradient(135deg, rgba(15, 10, 30, 0.95), rgba(5, 5, 15, 0.98));

  border: 1px solid rgba(157, 78, 221, 0.3);

  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);

}



.celtic-header {

  text-align: center;

  margin-bottom: 2rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-bottom: 1rem;

}



.celtic-cross-icon {

  display: flex;

  justify-content: center;

  gap: 1rem;

  font-size: 1.5rem;

  color: var(--color-mystic-gold);

  margin-bottom: 0.5rem;

}



.celtic-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

  margin-bottom: 2rem;

}



.celtic-section {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: var(--radius-md);

  padding: 1rem;

}



.celtic-section h5 {

  color: var(--color-mystic-gold);

  font-family: var(--font-heading);

  margin-bottom: 0.75rem;

  font-size: 1rem;

  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);

  padding-bottom: 0.5rem;

}



.celtic-cards-mini {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  font-size: 0.85rem;

  color: var(--color-silver-mist);

  align-items: center;

}



.card-separator {

  color: rgba(255, 255, 255, 0.2);

  font-size: 0.8rem;

}



.outcome-card {

  color: var(--color-starlight);

  font-weight: bold;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}



.celtic-footer {

  text-align: center;

  margin-top: 2rem;

  font-size: 0.8rem;

  color: rgba(255, 255, 255, 0.3);

  letter-spacing: 0.2em;

  display: flex;

  justify-content: center;

  gap: 1rem;

  text-transform: uppercase;

}



/* Loading Animations */

.summary-loading {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  padding: 2rem;

}



.loading-orb {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--color-mystic-gold), transparent);

  filter: blur(5px);

  animation: pulseOrb 2s infinite;

}



@keyframes pulseOrb {

  0% {

    transform: scale(0.8);

    opacity: 0.5;

  }



  50% {

    transform: scale(1.2);

    opacity: 0.8;

  }



  100% {

    transform: scale(0.8);

    opacity: 0.5;

  }

}



.loading-crystal {

  font-size: 2rem;

  animation: float 2s infinite ease-in-out;

}



/* Responsive adjustments */

@media (max-width: 768px) {

  .celtic-grid {

    grid-template-columns: 1fr;

  }



  .timeline-connector {

    transform: rotate(90deg);

    margin: 0.5rem 0;

  }



  .tarot-summary-3card .summary-timeline {

    flex-direction: column;

  }

}



/* ============================================ 

   TAROT CARD UNIFICATION FIXES 

   ============================================ */

.tarot-flip-card {

  width: 220px;

  height: 370px;

  perspective: 1000px;

  margin: 0 auto;

}



.tarot-flip-front,

.tarot-flip-back {

  width: 100%;

  height: 100%;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.tarot-flip-front img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tarot-card-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



@media (max-width: 900px) {

  .tarot-flip-card {

    width: 180px;

    height: 300px;

  }

}



@media (max-width: 600px) {

  .tarot-flip-card {

    width: 140px;

    height: 235px;

  }

}



/* ============================================

   PROFILE PAGE REDESIGN STYLES

   ============================================ */



/* User Card Styling */

.profile-user-card {

  margin-bottom: 2rem;

}



.profile-user-info {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1.5rem;

}



.profile-user-left {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  flex: 1;

  min-width: 250px;

}



.profile-user-details {

  flex: 1;

}



.profile-user-email {

  margin: 0;

  font-size: 1.4rem;

  font-family: var(--font-heading);

  background: var(--gradient-gold);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.profile-user-plan {

  margin: 0.5rem 0 0;

  opacity: 0.8;

  font-size: 0.95rem;

}



.profile-user-right {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.profile-credits {

  font-size: 1.1rem;

  padding: 0.5rem 1rem;

}



/* Profile Grid (Biorhythms + Journal) */

.profile-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 1.5rem;

  margin-bottom: 2rem;

}



.card-title {

  color: var(--color-mystic-gold);

  font-family: var(--font-heading);

  margin: 0 0 1rem;

  font-size: 1.2rem;

}



/* Biorhythm Card */

#biorhythm-container {

  padding: 1.5rem;

}



.biorhythm-chart {

  position: relative;

  height: 180px;

  width: 100%;

  margin-bottom: 1rem;

}



.biorhythm-chart canvas {

  width: 100%;

  height: 100%;

}



/* Journal Card */

.journal-submit-btn {

  width: 100%;

  margin-top: 0.5rem;

}



.journal-recent {

  margin-top: 1.5rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.journal-recent-title {

  font-size: 0.9rem;

  opacity: 0.7;

  margin: 0 0 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.journal-entries-list {

  max-height: 180px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.journal-empty {

  opacity: 0.5;

  font-size: 0.9rem;

  text-align: center;

  padding: 1rem;

}



/* Profile Tabs - Modern Horizontal */

.profile-tabs {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 1.5rem;

  background: rgba(0, 0, 0, 0.3);

  padding: 0.5rem;

  border-radius: var(--radius-lg);

  flex-wrap: wrap;

  border: 1px solid rgba(255, 255, 255, 0.05);

}



.profile-tab {

  flex: 1;

  min-width: 150px;

  padding: 0.875rem 1.25rem;

  background: transparent;

  border: none;

  color: var(--color-silver-mist);

  font-family: var(--font-body);

  font-size: 0.95rem;

  font-weight: 500;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  position: relative;

  overflow: hidden;

}



.profile-tab::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: var(--gradient-gold);

  transform: scaleX(0);

  transition: transform var(--transition-fast);

}



.profile-tab:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--color-starlight);

}



.profile-tab:hover::before {

  transform: scaleX(1);

}



.profile-tab.active {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(184, 134, 11, 0.2));

  border: 1px solid var(--color-mystic-gold);

  color: var(--color-mystic-gold);

  font-weight: 600;

}



.profile-tab.active::before {

  transform: scaleX(1);

}



.profile-tab-icon {

  font-size: 1.2rem;

}



.profile-tab-label {

  white-space: nowrap;

}



/* Responsive Updates */

@media (max-width: 900px) {

  .profile-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .profile-user-info {

    flex-direction: column;

    align-items: flex-start;

  }



  .profile-user-left {

    width: 100%;

  }



  .profile-user-right {

    width: 100%;

    justify-content: space-between;

  }



  .profile-tabs {

    flex-direction: column;

  }



  .profile-tab {

    min-width: auto;

  }

}



/* ============================================

   PROFILE PAGE - ELEGANT REDESIGN

   ============================================ */



/* User Card - Refined Typography */

.profile-user-card {

  margin-bottom: 1.5rem !important;

  padding: 1.5rem !important;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

}



.profile-user-card:hover {

  border-color: rgba(212, 175, 55, 0.3);

}



.profile-avatar {

  width: 60px !important;

  height: 60px !important;

  font-size: 1.8rem !important;

  box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);

}



/* Email - Less Dominant */

.profile-user-email {

  font-size: 1.1rem !important;

  font-weight: 500 !important;

  opacity: 0.95;

}



/* Plan Badge - More Prominent */

.profile-user-plan {

  font-size: 0.95rem !important;

  padding: 0.25rem 0.75rem;

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.15));

  border: 1px solid rgba(212, 175, 55, 0.4);

  border-radius: var(--radius-full);

  display: inline-block;

  margin-top: 0.5rem;

}



.profile-user-info {

  gap: 1.5rem !important;

}



/* Breathing Space - Stats Grid */

.stats-grid {

  gap: 1rem !important;

  margin-bottom: 1.5rem !important;

}



.stat-card {

  padding: 1.25rem !important;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.stat-card:hover {

  border-color: rgba(212, 175, 55, 0.4);

  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.1);

}



.stat-icon {

  font-size: 1.8rem !important;

  margin-bottom: 0.5rem !important;

  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));

}



.stat-value {

  font-size: 1.6rem !important;

}



.stat-label {

  font-size: 0.9rem !important;

  opacity: 0.75;

}



/* Elegant Profile Grid - Breathing Space */

.profile-grid {

  gap: 1.5rem !important;

  margin-bottom: 1.5rem !important;

}



/* ManifestaÄŤnĂ­ DenĂ­k - Elegant Dark Glass with Gold Border */

.glass-card {

  padding: 1.5rem !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  position: relative;

}



.glass-card:hover {

  border-color: rgba(212, 175, 55, 0.3) !important;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

}



/* Subtle Gold Left Border for Journal */

.profile-grid .glass-card:last-child {

  border-left: 3px solid rgba(212, 175, 55, 0.4) !important;

}



.profile-grid .glass-card:last-child:hover {

  border-left-color: var(--color-mystic-gold) !important;

}



.card-title {

  font-size: 1.1rem !important;

  margin: 0 0 1rem !important;

  font-weight: 600;

  letter-spacing: 0.02em;

}



/* Biorhythm - Elegant Size */

.biorhythm-chart {

  height: 150px !important;

  margin-bottom: 0.75rem !important;

}



/* Journal - Keep Gold Button */

.journal-submit-btn {

  margin-top: 0.75rem !important;

  padding: 0.75rem 1.25rem !important;

  font-weight: 600;

  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

}



.journal-submit-btn:hover {

  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);

  transform: translateY(-2px);

}



.journal-recent {

  margin-top: 1rem !important;

  padding-top: 1rem !important;

  border-top: 1px solid rgba(212, 175, 55, 0.15);

}



.journal-recent-title {

  color: rgba(212, 175, 55, 0.8);

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.journal-entries-list {

  max-height: 140px !important;

}



/* Elegant Horizontal Tabs */

.profile-tabs {

  margin-bottom: 1.5rem !important;

  padding: 0.5rem !important;

  background: rgba(0, 0, 0, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.profile-tab {

  padding: 0.75rem 1.25rem !important;

  font-size: 0.95rem !important;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-base);

  border: 1px solid transparent;

}



.profile-tab:hover {

  border-color: rgba(212, 175, 55, 0.3);

  background: rgba(255, 255, 255, 0.05);

}



.profile-tab.active {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.15)) !important;

  border: 1px solid rgba(212, 175, 55, 0.5) !important;

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);

}



.profile-tab-icon {

  font-size: 1.1rem !important;

  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));

}



/* Readings List - Subtle Gold Accent */

.reading-item {

  border-left: 2px solid transparent;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.reading-item:hover {

  border-left-color: var(--color-mystic-gold);

  background: rgba(212, 175, 55, 0.05);

}



/* Form Inputs - Elegant */

.form-input {

  margin-bottom: 1rem !important;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



select.form-input {

  background-color: rgba(10, 10, 26, 0.8) !important;

  color: var(--color-starlight);

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 1rem center;

  padding-right: 2.5rem;

  cursor: pointer;

}



select.form-input option {

  background-color: var(--color-deep-space);

  color: var(--color-starlight);

}



.form-input:focus {

  border-color: rgba(212, 175, 55, 0.5);

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);

}



/* Tab Content Cards - Subtle Gold Border */

.tab-content .glass-card {

  border-left: 3px solid rgba(212, 175, 55, 0.3) !important;

}



.tab-content .glass-card h3 {

  color: var(--color-mystic-gold);

  font-family: var(--font-heading);

  font-size: 1.3rem;

  margin-bottom: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid rgba(212, 175, 55, 0.2);

}



/* Responsive - Maintain Elegance */

@media (max-width: 768px) {

  .profile-grid {

    gap: 1rem !important;

  }



  .glass-card {

    padding: 1rem !important;

  }



  .stat-card {

    padding: 1rem !important;

  }

}



/* ============================================

   SOFT GATE & PAYWALL STYLES

   ============================================ */



.message--blurred {

  position: relative;

  overflow: hidden;

}



.blur-text {

  filter: blur(5px);

  user-select: none;

  opacity: 0.7;

  margin-top: 0.5rem;

}



.premium-lock-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(10, 10, 26, 0.6);

  backdrop-filter: blur(2px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 1rem;

  z-index: 10;

  border-radius: inherit;

}



.premium-lock-overlay .lock-icon {

  font-size: 2rem;

  margin-bottom: 0.5rem;

  animation: pulse-scale 2s infinite;

}



.premium-lock-overlay h3 {

  color: var(--color-mystic-gold);

  font-size: 1.1rem;

  margin-bottom: 0.5rem;

}



.premium-lock-overlay p {

  color: var(--color-silver-mist);

  font-size: 0.9rem;

  margin-bottom: 1rem;

}



@keyframes pulse-scale {

  0% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.1);

  }



  100% {

    transform: scale(1);

  }

}



/* ============================================

   CUSTOM SCROLLBAR

   ============================================ */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: rgba(10, 10, 26, 0.5);

  border-radius: 4px;

}



::-webkit-scrollbar-thumb {

  background: rgba(212, 175, 55, 0.3);

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.05);

}



::-webkit-scrollbar-thumb:hover {

  background: var(--color-mystic-gold);

  box-shadow: 0 0 10px var(--color-mystic-gold);

}



/* Journal List Specific */

.journal-entries-list {

  max-height: 200px;

  overflow-y: auto;

  padding-right: 5px;

}







/* LOADING SPINNER FIX */

.loading-spinner {

  display: inline-block;

  width: 16px;

  height: 16px;

  border: 2px solid currentColor;

  border-right-color: transparent;

  border-radius: 50%;

  animation: spin 0.75s linear infinite;

  margin-right: 8px;

  vertical-align: text-bottom;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}





.btn--processing {

  cursor: wait;

  opacity: 0.9;

  pointer-events: none;

  /* Ensure text is visible and no duplicate spinner */

  color: inherit !important;

}



.btn--processing::after {

  display: none;

}



/* ==========================================

   PROFILE PAGE OVERHAUL - New Components

   ========================================== */



/* Zodiac Sign Badge */

.profile-user-zodiac {

  margin: 0.35rem 0 0;

  font-size: 0.95rem;

  color: var(--color-mystic-gold);

  font-weight: 500;

  letter-spacing: 0.5px;

}



/* Empty State - Consistent */

.empty-state {

  text-align: center;

  padding: 2.5rem 1rem;

}



.empty-state__icon {

  font-size: 3.5rem;

  margin-bottom: 0.75rem;

  display: block;

}



.empty-state__title {

  margin-bottom: 0.5rem;

  color: var(--color-starlight);

  font-size: 1.1rem;

}



.empty-state__text {

  opacity: 0.6;

  font-size: 0.9rem;

  max-width: 320px;

  margin: 0 auto;

}



/* Reading Modal - Proper Styling (replaces inline styles) */

.reading-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.85);

  z-index: 9999;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(10px);

  overflow-y: auto;

  padding: 2rem;

}



.reading-modal__content {

  background: var(--color-cosmic-purple);

  padding: 2rem;

  border-radius: 15px;

  border: 1px solid rgba(155, 89, 182, 0.3);

  width: 100%;

  max-width: 700px;

  position: relative;

  margin: auto;

  animation: modalSlideIn 0.3s ease-out;

}



.reading-modal .modal__close {

  position: absolute;

  top: 1rem;

  right: 1rem;

  cursor: pointer;

  color: white;

  background: none;

  border: none;

  font-size: 1.5rem;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  transition: background 0.2s;

}



.reading-modal .modal__close:hover {

  background: rgba(255, 255, 255, 0.1);

}



.reading-modal .modal__close:focus-visible {

  outline: 2px solid var(--color-mystic-gold);

  outline-offset: 2px;

}



.reading-modal__actions {

  display: flex;

  gap: 1rem;

  margin-top: 2rem;

  justify-content: flex-end;

}



/* Danger Button */

.btn--danger {

  background: #c0392b;

  color: white;

}



.btn--danger:hover {

  background: #a93226;

}



/* Readings Header (title + filter) */

.readings-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1rem;

  gap: 1rem;

  flex-wrap: wrap;

}



.readings-header h3 {

  margin: 0;

}



.readings-filter {

  max-width: 200px;

  padding: 0.4rem 0.75rem;

  font-size: 0.85rem;

}



/* Reading Item - BEM structure */

.reading-item {

  margin-bottom: 0.75rem;

  padding: 1rem;

  cursor: pointer;

}



.reading-item__inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

}



.reading-item__left {

  display: flex;

  align-items: center;

  gap: 1rem;

  min-width: 0;

}



.reading-item__icon {

  font-size: 2rem;

  flex-shrink: 0;

}



.reading-item__date {

  margin: 0.25rem 0 0;

  opacity: 0.7;

  font-size: 0.85rem;

}



.reading-item__actions {

  display: flex;

  gap: 0.5rem;

  align-items: center;

  flex-shrink: 0;

}



/* Pagination */

.readings-pagination {

  text-align: center;

  padding: 1rem 0 0;

}



/* Settings Form */

.settings-form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  max-width: 420px;

}



.settings-section-title {

  color: var(--color-mystic-gold);

  margin: 0.5rem 0 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 0.5rem;

}



.settings-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}



/* Journal Entry - BEM structure */

.journal-entry {

  background: rgba(255, 255, 255, 0.05);

  padding: 0.75rem 1rem;

  border-radius: 8px;

  margin-bottom: 0.5rem;

  border-left: 3px solid var(--color-mystic-gold);

}



.journal-entry--new {

  animation: fadeIn 0.5s ease-out;

}



.journal-entry__date {

  font-size: 0.8rem;

  opacity: 0.6;

  margin: 0 0 0.3rem;

}



.journal-entry__text {

  font-style: italic;

  margin: 0;

  word-break: break-word;

}



/* Bio Summary */

.bio-summary-card {

  margin-top: 1rem;

  padding: 0.75rem;

  background: rgba(0, 0, 0, 0.2);

  border-radius: 8px;

  font-size: 0.85rem;

}



.bio-summary-card p {

  margin: 0.25rem 0;

}



.bio-summary-label {

  opacity: 0.8;

}



/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {



  .stat-card,

  .reading-item,

  .journal-submit-btn,

  .reading-modal__content {

    animation: none !important;

    transition: none !important;

  }

}



/* Mobile: Settings Row */

@media (max-width: 480px) {

  .settings-row {

    grid-template-columns: 1fr;

  }



  .readings-header {

    flex-direction: column;

    align-items: stretch;

  }



  .readings-filter {

    max-width: 100%;

  }



  .reading-item__inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .reading-item__actions {

    width: 100%;

    justify-content: flex-end;

  }



  .stats-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .reading-modal__content {

    padding: 1.25rem;

  }



  .reading-modal {

    padding: 1rem;

  }



  .reading-modal__actions {

    flex-direction: column;

  }

}



/* ==========================================

   AVATAR PICKER

   ========================================== */

.profile-avatar {

  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.2s;

  border: 2px solid transparent;

}



.profile-avatar:hover {

  transform: scale(1.1);

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);

  border-color: var(--color-mystic-gold);

}



.avatar-picker {

  margin-top: 1rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  animation: fadeIn 0.2s ease-out;

}



.avatar-picker__label {

  font-size: 0.85rem;

  opacity: 0.7;

  margin-bottom: 0.75rem;

}



.avatar-picker__grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));

  gap: 0.5rem;

}



.avatar-option {

  width: 48px;

  height: 48px;

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.05);

  border: 2px solid transparent;

  border-radius: 12px;

  cursor: pointer;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s 0.2s;

}



.avatar-option:hover {

  background: rgba(212, 175, 55, 0.15);

  border-color: rgba(212, 175, 55, 0.4);

  transform: scale(1.15);

}



.avatar-option--active {

  background: rgba(212, 175, 55, 0.2);

  border-color: var(--color-mystic-gold);

  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);

}



/* ==========================================

   SUBSCRIPTION MANAGEMENT

   ========================================== */

.subscription-card {

  border: 1px solid rgba(212, 175, 55, 0.3);

}



.subscription-info {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.subscription-plan {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

}



.subscription-plan__name {

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--color-starlight);

}



.subscription-period {

  opacity: 0.8;

  font-size: 0.9rem;

  margin: 0;

}



.subscription-actions {

  display: flex;

  gap: 0.75rem;

  flex-wrap: wrap;

  margin-top: 0.5rem;

}



/* Badge variants for subscription status */

.badge--success {

  background: rgba(46, 204, 113, 0.2);

  color: #2ecc71;

  border: 1px solid rgba(46, 204, 113, 0.3);

  padding: 0.2rem 0.6rem;

  border-radius: 20px;

  font-size: 0.8rem;

}



.badge--info {

  background: rgba(52, 152, 219, 0.2);

  color: #3498db;

  border: 1px solid rgba(52, 152, 219, 0.3);

  padding: 0.2rem 0.6rem;

  border-radius: 20px;

  font-size: 0.8rem;

}



.badge--warning {

  background: rgba(241, 196, 15, 0.2);

  color: #f1c40f;

  border: 1px solid rgba(241, 196, 15, 0.3);

  padding: 0.2rem 0.6rem;

  border-radius: 20px;

  font-size: 0.8rem;

}



.badge--danger {

  background: rgba(231, 76, 60, 0.2);

  color: #e74c3c;

  border: 1px solid rgba(231, 76, 60, 0.3);

  padding: 0.2rem 0.6rem;

  border-radius: 20px;

  font-size: 0.8rem;

}



@media (max-width: 480px) {

  .avatar-picker__grid {

    grid-template-columns: repeat(6, 1fr);

  }



  .subscription-actions {

    flex-direction: column;

  }



  .subscription-actions .btn {

    width: 100%;

    text-align: center;

  }

}



/* Focus visible for accessibility */

.btn:focus-visible,

.form-input:focus-visible,

.profile-tab:focus-visible {

  outline: 2px solid var(--color-mystic-gold);

  outline-offset: 2px;

}



/* ============================================

   ACCESSIBILITY: Reduced Motion Support

   ============================================ */

@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}



/* ============================================

   ADDITIONS: Carousel pagination dots

   ============================================ */

.carousel-dots {

  display: flex;

  justify-content: center;

  gap: 0.5rem;

  margin-top: 1.5rem;

}



.carousel-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.2);

  border: none;

  cursor: pointer;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  padding: 0;

}



.carousel-dot.active {

  background: var(--color-mystic-gold);

  transform: scale(1.3);

  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);

}



/* ============================================

   ADDITIONS: Steps visual connector

   ============================================ */

.steps {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: var(--space-xl);

  position: relative;

}



.steps::before {

  content: '';

  position: absolute;

  top: 2rem;

  left: calc(16.667% + 1.5rem);

  right: calc(16.667% + 1.5rem);

  height: 2px;

  background: linear-gradient(to right, var(--color-mystic-gold), var(--color-ethereal-violet), var(--color-mystic-gold));

  opacity: 0.3;

  z-index: 0;

}



@media (max-width: 768px) {

  .steps {

    grid-template-columns: 1fr;

  }



  .steps::before {

    display: none;

  }

}



/* ============================================

   ADDITIONS: Cookie banner wider for GDPR checkboxes

   ============================================ */

.cookie-banner {

  max-width: 700px !important;

}



.cookie-banner__actions {

  flex-wrap: wrap;

  gap: 0.5rem;

  justify-content: center;

}



/* ============================================

   ADDITIONS: Auth Modal forgot password transition

   ============================================ */

#password-field-wrapper,

#reset-password-fields,

#forgot-password-link {

  transition: opacity var(--transition-base);

}



/* ============================================

   PERSONALIZED GREETING - Main page hero

   ============================================ */

#personalized-greeting {

  display: none;

  flex-direction: column;

  align-items: flex-start;

  gap: var(--space-md);

  margin-bottom: var(--space-lg);

  font-size: var(--text-lg);

  color: var(--color-mystic-gold-light);

  text-decoration: none;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  cursor: pointer;

}



#personalized-greeting:hover {

  color: var(--color-mystic-gold);

  transform: translateX(4px);

}



#personalized-greeting.personalized-greeting--visible {

  display: inline-flex;

}



/* ============================================

   STREAK BADGE - Retention Gamification

   ============================================ */

#mh-streak-badge {

  position: fixed;

  top: 20px;

  right: 20px;

  background: linear-gradient(135deg, #ff6b35, #ffd700);

  color: white;

  padding: 12px 20px;

  border-radius: 20px;

  font-weight: bold;

  font-size: var(--text-base);

  z-index: 1000;

  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);

  opacity: 1;

  transition: opacity var(--transition-base);

}



#mh-streak-badge--milestone {

  background: linear-gradient(135deg, #ffd700, #9d4edd);

  box-shadow: 0 4px 20px rgba(157, 78, 221, 0.4);

}



@keyframes mh-streak-bounce {

  0% {

    transform: scale(0.8);

    opacity: 0;

  }

  50% {

    transform: scale(1.1);

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}



/* ============================================

   RETENTION: Cancellation Modal & Pause Flow

   ============================================ */

.retention-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(5, 5, 16, 0.7);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2000;

  animation: retention-modal-fade-in 0.3s ease-out;

}



@keyframes retention-modal-fade-in {

  from {

    opacity: 0;

    transform: scale(0.95);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes retention-modal-fade-out {

  from {

    opacity: 1;

    transform: scale(1);

  }

  to {

    opacity: 0;

    transform: scale(0.95);

  }

}



.retention-modal {

  background: linear-gradient(135deg, #1a0a2e 0%, #0f0520 100%);

  border: 1px solid rgba(235, 192, 102, 0.2);

  border-radius: var(--radius-xl);

  padding: var(--space-2xl);

  max-width: 500px;

  width: 90%;

  max-height: 80vh;

  overflow-y: auto;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  position: relative;

}



.retention-modal__close {

  position: absolute;

  top: var(--space-lg);

  right: var(--space-lg);

  background: transparent;

  border: none;

  color: rgba(255, 255, 255, 0.5);

  font-size: var(--text-2xl);

  cursor: pointer;

  transition: color var(--transition-fast);

}



.retention-modal__close:hover {

  color: rgba(255, 255, 255, 0.8);

}



.retention-modal__title {

  font-family: var(--font-heading);

  font-size: var(--text-2xl);

  margin-bottom: var(--space-md);

  color: var(--color-mystic-gold);

}



.retention-modal__subtitle {

  color: rgba(255, 255, 255, 0.7);

  font-size: var(--text-base);

  margin-bottom: var(--space-lg);

}



/* Form options */

.retention-form__options {

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

  margin-bottom: var(--space-lg);

}



.retention-form__option {

  display: flex;

  align-items: flex-start;

  gap: var(--space-md);

  padding: var(--space-md);

  border: 1px solid rgba(235, 192, 102, 0.15);

  border-radius: var(--radius-lg);

  cursor: pointer;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.retention-form__option:hover {

  background: rgba(235, 192, 102, 0.05);

  border-color: rgba(235, 192, 102, 0.3);

}



.retention-form__option input[type="radio"] {

  margin-top: 4px;

  cursor: pointer;

  accent-color: var(--color-mystic-gold);

}



.retention-form__option input[type="radio"]:checked + .retention-form__label {

  color: var(--color-mystic-gold);

  font-weight: 600;

}



.retention-form__label {

  font-weight: 500;

  color: rgba(255, 255, 255, 0.9);

}



.retention-form__hint {

  display: block;

  font-size: var(--text-xs);

  color: rgba(255, 255, 255, 0.5);

  margin-top: 2px;

}



.retention-form__textarea {

  width: 100%;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(235, 192, 102, 0.15);

  border-radius: var(--radius-lg);

  color: rgba(255, 255, 255, 0.9);

  padding: var(--space-md);

  font-family: var(--font-body);

  font-size: var(--text-sm);

  margin-bottom: var(--space-lg);

  resize: none;

}



.retention-form__textarea::placeholder {

  color: rgba(255, 255, 255, 0.3);

}



.retention-form__actions {

  display: flex;

  gap: var(--space-md);

  flex-direction: column;

}



.retention-form__actions .btn {

  width: 100%;

}



/* Offers */

.retention-offer {

  background: rgba(235, 192, 102, 0.1);

  border: 1px solid rgba(235, 192, 102, 0.3);

  border-radius: var(--radius-lg);

  padding: var(--space-lg);

  margin-top: var(--space-lg);

  text-align: center;

}



.retention-offer h3 {

  color: var(--color-mystic-gold);

  margin-bottom: var(--space-md);

}



.retention-offer p {

  color: rgba(255, 255, 255, 0.8);

  margin-bottom: var(--space-md);

  font-size: var(--text-sm);

}



.retention-offer__code {

  font-family: 'Courier New', monospace;

  background: rgba(0, 0, 0, 0.3);

  padding: var(--space-sm) var(--space-md);

  border-radius: var(--radius-md);

  display: inline-block;

  margin: var(--space-md) 0;

}



.retention-offer__code code {

  color: var(--color-mystic-gold-light);

  font-weight: bold;

}



.retention-offer .btn {

  width: 100%;

  margin-top: var(--space-md);

}



/* Toast notifications */

.retention-toast {

  position: fixed;

  bottom: 20px;

  left: 20px;

  background: rgba(76, 201, 240, 0.9);

  color: white;

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-lg);

  z-index: 2001;

  animation: retention-toast-fade-in 0.3s ease-out;

  max-width: 300px;

  word-wrap: break-word;

}



.retention-toast--success {

  background: rgba(76, 175, 80, 0.9);

}



.retention-toast--error {

  background: rgba(244, 67, 54, 0.9);

}



.retention-toast--info {

  background: rgba(33, 150, 243, 0.9);

}



@keyframes retention-toast-fade-in {

  from {

    opacity: 0;

    transform: translateX(-20px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes retention-toast-fade-out {

  from {

    opacity: 1;

    transform: translateX(0);

  }

  to {

    opacity: 0;

    transform: translateX(-20px);

  }

}



/* RESPONSIVE: Retention Modal on Mobile */

@media (max-width: 768px) {

  .retention-modal-overlay {

    padding: var(--space-md);

  }



  .retention-modal {

    max-width: 100%;

    max-height: 90vh;

    border-radius: var(--radius-lg);

    padding: var(--space-lg);

  }



  .retention-modal__title {

    font-size: var(--text-xl);

  }



  .retention-form__option {

    padding: var(--space-sm) var(--space-md);

  }



  .retention-form__textarea {

    font-size: var(--text-sm);

  }



  .retention-offer {

    padding: var(--space-md);

  }



  .retention-toast {

    bottom: 10px;

    left: 10px;

    right: 10px;

    max-width: none;

    width: auto;

  }

}



/* RESPONSIVE: Retention Modal on Small Phones */

@media (max-width: 480px) {

  .retention-modal {

    padding: var(--space-md);

    border-radius: var(--radius-md);

  }



  .retention-modal__title {

    font-size: var(--text-lg);

    margin-bottom: var(--space-sm);

  }



  .retention-modal__subtitle {

    font-size: var(--text-sm);

    margin-bottom: var(--space-md);

  }



  .retention-form__option {

    padding: var(--space-xs) var(--space-sm);

    flex-direction: column;

    gap: var(--space-xs);

  }



  .retention-form__label {

    font-size: var(--text-sm);

  }



  .retention-form__hint {

    font-size: var(--text-xs);

    margin-top: 2px;

  }



  .retention-form__textarea {

    padding: var(--space-sm);

    font-size: var(--text-xs);

  }



  .retention-form__actions {

    gap: var(--space-sm);

  }



  .retention-offer h3 {

    font-size: var(--text-base);

  }



  .retention-offer p {

    font-size: var(--text-xs);

  }



  .retention-toast {

    bottom: 5px;

    left: 5px;

    right: 5px;

    max-width: none;

    font-size: var(--text-sm);

    padding: var(--space-sm) var(--space-md);

  }

}



/* ============================================

   SIGN PICKER WIDGET - Personalization

   ============================================ */

.sign-picker {

  background: rgba(10, 10, 26, 0.6);

  border: 1px solid rgba(235, 192, 102, 0.15);

  border-radius: var(--radius-lg);

  margin-bottom: var(--space-lg);

}



.sign-picker__header {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: var(--space-md);

  gap: var(--space-md);

}



.sign-picker__label {

  color: rgba(255, 255, 255, 0.5);

  font-size: var(--text-sm);

}



.sign-picker__button {

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-full);

  border: 1px solid var(--color-mystic-gold);

  background: rgba(212, 175, 55, 0.15);

  color: var(--color-mystic-gold);

  cursor: pointer;

  font-size: var(--text-base);

  font-weight: 500;

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

  display: flex;

  align-items: center;

  gap: var(--space-sm);

}



.sign-picker__button:hover {

  background: rgba(212, 175, 55, 0.25);

  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);

}



.sign-picker__change-btn {

  padding: var(--space-sm) var(--space-md);

  border-radius: var(--radius-full);

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: transparent;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  font-size: var(--text-xs);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.sign-picker__change-btn:hover {

  border-color: rgba(255, 255, 255, 0.4);

  color: rgba(255, 255, 255, 0.8);

}



.sign-picker__expanded {

  display: none;

  flex-wrap: wrap;

  gap: var(--space-sm);

  justify-content: center;

  align-items: center;

  padding: var(--space-md);

  border-top: 1px solid rgba(235, 192, 102, 0.15);

}



.sign-picker__expanded.active {

  display: flex;

}



.sign-picker__sign-btn {

  padding: var(--space-sm) var(--space-md);

  border-radius: var(--radius-full);

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: transparent;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  font-size: var(--text-xs);

  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s var(--transition-fast);

}



.sign-picker__sign-btn:hover {

  border-color: rgba(235, 192, 102, 0.3);

  color: rgba(235, 192, 102, 0.7);

}



.sign-picker__sign-btn.active {

  border-color: var(--color-mystic-gold);

  background: rgba(212, 175, 55, 0.15);

  color: var(--color-mystic-gold);

}