/* 21st.dev-inspired premium layer for Pashynska Photography booking.
   Patterns adapted conceptually: Aurora Background, Sparkles, Dotted Surface,
   Paper Texture, soft glow cards, high-contrast animated CTAs.
   CSS-only: no heavy shaders/WebGL, safe for mobile booking flow. */

:root {
  --premium-cream: #fffaf7;
  --premium-lilac: #d9c8ff;
  --premium-lilac-2: #bfa8f5;
  --premium-pink: #ffd7e5;
  --premium-rose: #c4857a;
  --premium-mint: #d9efe4;
  --premium-ink-shadow: rgba(28, 25, 23, 0.11);
  --premium-glow-rose: rgba(196, 133, 122, 0.22);
  --premium-glow-lilac: rgba(162, 129, 255, 0.16);
  --premium-glass: rgba(255, 255, 255, 0.78);
  --premium-border: rgba(255, 255, 255, 0.72);
}

html { scroll-behavior: smooth; }

body {
  isolation: isolate;
  position: relative;
  background:
    radial-gradient(circle at 14% -8%, rgba(217, 200, 255, 0.48), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 215, 229, 0.48), transparent 30%),
    radial-gradient(circle at 70% 92%, rgba(217, 239, 228, 0.38), transparent 35%),
    linear-gradient(180deg, #fffaf7 0%, #faf7f5 44%, #f6eee9 100%) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Dotted Surface / Grid Pattern: barely visible texture */
body::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(124, 58, 237, 0.075) 1px, transparent 0),
    linear-gradient(rgba(196, 133, 122, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 133, 122, 0.035) 1px, transparent 1px);
  background-size: 22px 22px, 88px 88px, 88px 88px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), transparent 82%);
}

/* Paper Texture + Aurora glow */
body::after {
  opacity: 0.62;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.9), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}

@supports (backdrop-filter: blur(18px)) {
  .nav,
  .top-bar {
    background: rgba(255, 250, 247, 0.78) !important;
    backdrop-filter: blur(20px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
    border-bottom-color: rgba(196, 133, 122, 0.12) !important;
  }
}

/* Premium glass cards across landing/payment/success/events */
:where(.hero-card, .card, .event-card, .how .step, .faq details, .timer-box, .summary, .transfer-box, .bank-msg-wrap, .how-to, .drawer) {
  background-color: var(--premium-glass) !important;
  border-color: rgba(196, 133, 122, 0.12) !important;
  box-shadow:
    0 18px 54px rgba(28, 25, 23, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

:where(.hero-card, .card, .event-card, .how .step, .faq details, .transfer-box, .drawer) {
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

:where(.event-card, .how .step, .faq details, .card) {
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
:where(.event-card, .how .step, .faq details, .card):hover {
  border-color: rgba(196, 133, 122, 0.28) !important;
  box-shadow:
    0 24px 64px rgba(28, 25, 23, 0.11),
    0 0 0 1px rgba(255,255,255,0.6) inset !important;
}
}

.hero-stage,
.featured,
.event-card .photo,
.drawer .dphoto {
  box-shadow:
    0 24px 70px rgba(28, 25, 23, 0.13),
    0 0 0 1px rgba(255,255,255,0.42) inset !important;
}

.hero-card,
.transfer-box,
.calendar-panel {
  position: relative;
  overflow: hidden;
}

.hero-card::before,
.transfer-box::before,
.calendar-panel::after {
  content: "";
  position: absolute;
  inset: -35% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(217,200,255,0.34), transparent 67%);
  pointer-events: none;
}

/* 21st-style CTA: subtle animated rim, not noisy */
:where(.hero-cta, .event-card .price-bar .cta, .drawer .btn, .btn-primary, .copy-pill, .calendar-btn) {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(28, 25, 23, 0.16) !important;
}

:where(.hero-cta, .event-card .price-bar .cta, .drawer .btn, .btn-primary, .calendar-btn)::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.28) 42%, transparent 72%);
  animation: premium-shimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes premium-shimmer {
  0%, 58% { transform: translateX(-120%); }
  74%, 100% { transform: translateX(120%); }
}

:where(.hero-cta, .event-card .price-bar .cta, .drawer .btn, .btn-primary, .calendar-btn):hover {
  transform: translateY(-2px);
}

/* Softer chips/pills inspired by 21st side nav/category chips */
:where(.filters .chip, .hero-pill, .status-badge, .event-card .photo .status, .event-card .photo .countdown) {
  box-shadow: 0 8px 22px rgba(28, 25, 23, 0.08);
  border: 1px solid rgba(255,255,255,0.58);
}

:where(input, textarea, select, .email-copy, .bank-msg-wrap) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

:where(input, textarea, select):focus {
  box-shadow:
    0 0 0 4px rgba(196, 133, 122, 0.13),
    0 12px 28px rgba(196, 133, 122, 0.08) !important;
}

/* Success page: make calendar panel feel like a featured component */
.calendar-panel {
  border-color: rgba(196, 133, 122, 0.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(217, 200, 255, 0.32), transparent 34%),
    radial-gradient(circle at 100% 12%, rgba(255, 215, 229, 0.34), transparent 32%),
    rgba(255, 255, 255, 0.78) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  body::before { background-size: 18px 18px, 72px 72px, 72px 72px; }
  body::after { opacity: 0.38; }
  :where(.hero-card, .card, .event-card, .how .step, .faq details, .transfer-box) {
    box-shadow: 0 12px 34px rgba(28, 25, 23, 0.075) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}