/**
 * Flora Bloom – green floral design system (ecommerce-flower-shop)
 * API colors (--primary-50..900, --secondary-*, --neutral-*) are injected on :root by color-manager.ts
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --flora-cream: 120 35% 97%;
  --flora-sage: 140 28% 42%;
  --flora-mint: 145 42% 88%;
  --flora-forest: 150 32% 28%;
  --flora-leaf: 135 45% 55%;

  --gradient-hero: linear-gradient(135deg, hsl(120 35% 97%), hsl(145 40% 94%));
  --gradient-floral: linear-gradient(135deg, hsl(140 28% 42% / 0.08), hsl(145 42% 88% / 0.15));
  --gradient-card: linear-gradient(135deg, #fff, hsl(120 30% 98%));
  --shadow-soft: 0 4px 20px hsl(150 20% 20% / 0.07);
  --shadow-bloom: 0 8px 30px hsl(140 28% 42% / 0.18);
  --shadow-elegant: 0 12px 40px hsl(145 42% 88% / 0.2);
  --radius-flora: 0.75rem;
  --transition-bloom: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --sopek-hero-bg: var(--primary-600);

  --primary-main: var(--primary-500);
  --primary-hover: var(--primary-600);
  --secondary-main: var(--secondary-500);

  --background-primary: hsl(var(--flora-cream));
  --background-secondary: hsl(145 35% 94%);
  --background-card: #FFFFFF;

  --text-primary: hsl(var(--flora-forest));
  --text-secondary: hsl(150 15% 40%);
  --text-muted: hsl(150 10% 55%);
  --text-inverse: #FFFFFF;

  --border-light: hsl(140 20% 90%);
  --border-medium: hsl(140 18% 82%);
  --border-selected: hsl(var(--flora-leaf));

  --button-primary-background: var(--primary-500);
  --button-primary-background-hover: var(--primary-600);
  --button-primary-text: #FFFFFF;
  --card-border: var(--border-light);

  --navigation-background: hsl(120 35% 97% / 0.95);
  --navigation-border: var(--border-light);
  --navigation-text: hsl(150 15% 40%);
  --navigation-text-hover: var(--primary-600);
}

.theme-flower-shop,
.theme-flower-shop * { font-family: var(--font-body); }
.theme-flower-shop h1,
.theme-flower-shop h2,
.theme-flower-shop h3,
.theme-flower-shop .flora-heading { font-family: var(--font-heading); }

.theme-bg-page { background-color: var(--background-primary); }
.theme-bg-card { background-color: var(--background-card); }
.theme-text-heading { color: var(--text-primary); }
.theme-text-body { color: var(--text-secondary); }
.theme-border { border-color: var(--border-light); }
.theme-product-price { color: var(--primary-600); font-weight: 600; font-family: var(--font-heading); }

.theme-btn-primary, .theme-add-to-cart {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border-radius: 9999px;
  font-weight: 500;
  transition: var(--transition-bloom);
}
.theme-btn-primary:hover:not(:disabled), .theme-add-to-cart:hover:not(:disabled) {
  background-color: var(--button-primary-background-hover);
  transform: scale(1.02);
}

.flora-hero__title-accent { color: var(--primary-500); }

.flora-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.75rem; border: 1px solid var(--border-medium); border-radius: 9999px;
  background: transparent; color: var(--text-primary); font-weight: 500;
  text-decoration: none; transition: var(--transition-bloom);
}
.flora-btn-outline:hover { border-color: var(--primary-500); color: var(--primary-600); transform: scale(1.02); }

.flora-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.75rem; border: none; border-radius: 9999px;
  background: var(--primary-500); color: #fff; font-weight: 500;
  text-decoration: none; transition: var(--transition-bloom);
}
.flora-btn-primary:hover { background: var(--primary-600); transform: scale(1.02); }

.flower-card { transition: var(--transition-bloom); transform-origin: center; }
.flower-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-bloom); }

.loading-spinner {
  width: 36px; height: 36px; border: 2px solid var(--primary-100);
  border-top-color: var(--primary-500); border-radius: 50%;
  animation: flora-spin 0.8s linear infinite;
}
@keyframes flora-spin { to { transform: rotate(360deg); } }
@keyframes flora-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes flora-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flora-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 0.7; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } }

.flora-petal { position: absolute; width: 8px; height: 8px; border-radius: 50% 0; opacity: 0.5; animation: flora-fall linear infinite; }
.flora-petal--sage { background: hsl(var(--flora-sage)); }
.flora-petal--mint { background: hsl(var(--flora-mint)); }
.flora-petal--leaf { background: hsl(var(--flora-leaf)); }
.animate-float { animation: flora-float 6s ease-in-out infinite; }
.animate-fade-up { animation: flora-fade-up 0.8s ease forwards; }

.form-input, .fs-input {
  width: 100%; padding: 0.875rem 1rem;
  border: 1px solid var(--border-light); border-radius: var(--radius-flora);
  background: #fff; font-size: 0.9375rem; transition: border-color 0.2s;
}
.form-input:focus, .fs-input:focus {
  outline: none; border-color: var(--primary-400);
  box-shadow: 0 0 0 3px hsl(140 28% 42% / 0.12);
}
.form-label, .fs-label {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 0.5rem;
}

.flora-legal-page { background: var(--background-primary); }
.flora-legal-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-light); }
.flora-legal-hero__blobs::before, .flora-legal-hero__blobs::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; pointer-events: none;
}
.flora-legal-hero__blobs::before { top: -2rem; left: 12%; width: 12rem; height: 12rem; background: hsl(var(--flora-mint)); }
.flora-legal-hero__blobs::after { bottom: -2rem; right: 10%; width: 16rem; height: 16rem; background: hsl(var(--flora-leaf) / 0.35); }
.flora-legal-hero__eyebrow {
  margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-600);
}
.flora-legal-hero__title {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.1; color: var(--text-primary); margin: 0;
}
.flora-legal-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-flora); box-shadow: var(--shadow-soft); overflow: hidden;
}
.flora-legal-content { padding: 2rem; line-height: 1.7; }
@media (min-width: 640px) { .flora-legal-content { padding: 2.5rem; } }
.flora-legal-content h1 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1.5rem; }
.flora-legal-content h2 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; color: var(--text-primary); margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
.flora-legal-content h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 2rem 0 0.75rem; }
.flora-legal-content p { margin-bottom: 1.25rem; color: var(--text-secondary); line-height: 1.75; }
.flora-legal-content ul, .flora-legal-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.flora-legal-content li { margin-bottom: 0.5rem; color: var(--text-secondary); line-height: 1.75; }
.flora-legal-content strong { font-weight: 600; color: var(--text-primary); }
.flora-legal-content a { color: var(--primary-600); text-decoration: none; font-weight: 500; }
.flora-legal-content a:hover { text-decoration: underline; }