/* Fantasposi Premium Theme */
:root {
  /* Nuova Palette Premium */
  --color-bg-primary: #fff1f2;
  /* Rose 50 */
  --color-bg-secondary: #ffffff;
  --color-text-primary: #881337;
  /* Rose 900 */
  --color-text-secondary: #be123c;
  /* Rose 700 */
  --color-accent-sposa: #db2777;
  /* Pink 600 */
  --color-accent-sposo: #0d9488;
  /* Teal 600 */
  --color-glass-bg: rgba(255, 255, 255, 0.7);
  --color-glass-border: rgba(255, 255, 255, 0.5);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --font-script: 'Great Vibes', cursive;
  --font-body: 'Outfit', sans-serif;

  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism Utilities */
.glass-panel {
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-md);
}

.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 228, 230, 0.5);
}

/* Custom Gradients */
.gradient-sposa {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #9d174d;
}

.gradient-sposo {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0f766e;
}

.gradient-brand {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: white;
}

/* Animations */
@keyframes coinPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.anim-pop {
  animation: coinPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.anim-slide-up {
  animation: slideInUp 0.4s ease-out forwards;
}

.anim-delay-1 {
  animation-delay: 0.1s;
}

.anim-delay-2 {
  animation-delay: 0.2s;
}

.anim-delay-3 {
  animation-delay: 0.3s;
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.anim-zoom-in {
  animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Custom Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 1.25rem;
  /* w-5 */
  height: 1.25rem;
  /* h-5 */
}

/* Menu Custom Styles */
#menu-content h1 {
  font-family: var(--font-script);
  color: var(--color-accent-sposa);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

#menu-content h2 {
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-align: center;
  border-bottom: 2px solid #fecdd3;
  display: inline-block;
  padding-bottom: 0.2rem;
}

#menu-content p {
  margin-bottom: 0.5rem;
  text-align: center;
  font-weight: 500;
}

#menu-content strong {
  color: var(--color-accent-sposo);
}

/* Toast Notification */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: white;
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  border-left: 4px solid #10b981;
}

.toast.error {
  border-left: 4px solid #ef4444;
}

/* Loader */
.loader-overlay {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.heart-loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  transform-origin: 40px 40px;
}

.heart-loader div {
  top: 32px;
  left: 32px;
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--color-accent-sposa);
  animation: heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.heart-loader div:after,
.heart-loader div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  background: var(--color-accent-sposa);
}

.heart-loader div:before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}

.heart-loader div:after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}

@keyframes heart {
  0% {
    transform: scale(0.95);
  }

  5% {
    transform: scale(1.1);
  }

  39% {
    transform: scale(0.85);
  }

  45% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(0.9);
  }
}