/* ==========================================================================
   hukolitups — Rebyslim Serbia (sr-Latn)
   Floral Botanical Yellow Styling & Animated Stem Buttons
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root {
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Warm Yellow & Amber Botanical Palette */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;

  /* Warm Earth & Honey */
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-warm-dark: #1c1917;
  --color-warm-surface: #292524;
  --color-warm-card: #201e1d;

  /* Stem & Leaf Botanicals */
  --color-stem: #65a30d;
  --color-stem-dark: #3f6212;
  --color-leaf-light: #bef264;
  --color-leaf: #84cc16;

  /* Base Text */
  --color-text-main: #1c1917;
  --color-text-muted: #57534e;
  --color-bg-base: #fffdf5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
}

body {
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--color-bg-base);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(254, 240, 138, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(253, 224, 71, 0.35) 0%, transparent 45%),
    url('../images/yellow-flower-watermark.svg');
  background-repeat: repeat;
  background-size: auto, auto, 280px 280px;
}

/* ==========================================================================
   Flower Stem Buttons (Стебелек цветка с анимацией)
   ========================================================================== */

.btn-stem {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-main);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 40px 20px 38px 18px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px -4px rgba(202, 138, 4, 0.35);
  overflow: visible;
  user-select: none;
  z-index: 1;
}

/* Yellow Primary Stem Button */
.btn-stem-yellow {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 30%, #eab308 70%, #ca8a04 100%);
  color: #422006 !important;
  border: 2.5px solid #65a30d;
}

/* Leaf nodes along the stem contour */
.btn-stem::before,
.btn-stem::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 9px;
  background: #65a30d;
  border-radius: 12px 0 12px 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

/* Top-right leaf bud */
.btn-stem::before {
  top: -6px;
  right: 18px;
  transform: rotate(-15deg);
  border: 1px solid #bef264;
}

/* Bottom-left leaf bud */
.btn-stem::after {
  bottom: -6px;
  left: 20px;
  transform: rotate(165deg);
  border: 1px solid #bef264;
}

/* Hover State - STEM ANIMATION */
.btn-stem:hover {
  border-color: #84cc16;
  border-radius: 18px 40px 18px 38px;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px -4px rgba(202, 138, 4, 0.5), 0 0 18px rgba(132, 204, 22, 0.4);
  animation: stemFlex 2s infinite ease-in-out;
}

.btn-stem:hover::before {
  transform: rotate(25deg) scale(1.25);
  background-color: #84cc16;
}

.btn-stem:hover::after {
  transform: rotate(195deg) scale(1.25);
  background-color: #84cc16;
}

.btn-stem:active {
  transform: translateY(1px) scale(0.98);
}

@keyframes stemFlex {
  0%, 100% {
    border-radius: 18px 40px 18px 38px;
  }
  50% {
    border-radius: 38px 18px 40px 18px;
  }
}

/* Secondary Stem Button */
.btn-stem-outline {
  background: rgba(254, 249, 195, 0.85);
  backdrop-filter: blur(8px);
  color: #713f12 !important;
  border: 2px solid #65a30d;
}

.btn-stem-outline:hover {
  background: #fef08a;
  color: #422006 !important;
}

/* Floral Icon Container Inside Buttons */
.btn-floral-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transition: transform 0.4s ease;
}

.btn-stem:hover .btn-floral-icon {
  transform: rotate(35deg) scale(1.15);
}

/* ==========================================================================
   Yellow Floral Backgrounds & Floating Petals
   ========================================================================== */

.floral-hero-bg {
  position: relative;
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 25%, #fde047 60%, #fefce8 100%);
  border-bottom: 2px solid #facc15;
  overflow: hidden;
}

.floral-hero-bg::before {
  content: '';
  position: absolute;
  right: -5%;
  top: -10%;
  width: 650px;
  height: 650px;
  background-image: url('../images/yellow-flower-bg.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.28;
  pointer-events: none;
  animation: floatFlower 18s ease-in-out infinite alternate;
}

.floral-hero-bg::after {
  content: '';
  position: absolute;
  left: -8%;
  bottom: -15%;
  width: 500px;
  height: 500px;
  background-image: url('../images/yellow-flower-bg.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
  transform: rotate(180deg);
  animation: floatFlowerReverse 22s ease-in-out infinite alternate;
}

@keyframes floatFlower {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) rotate(8deg) scale(1.03); }
  100% { transform: translateY(8px) rotate(-6deg) scale(0.98); }
}

@keyframes floatFlowerReverse {
  0% { transform: translateY(0) rotate(180deg) scale(1); }
  50% { transform: translateY(12px) rotate(190deg) scale(1.02); }
  100% { transform: translateY(-10px) rotate(172deg) scale(0.97); }
}

/* Floating Golden Petal Animation */
.floating-petal {
  position: absolute;
  width: 22px;
  height: 14px;
  background: radial-gradient(circle, #fde047 20%, #eab308 100%);
  border-radius: 50% 0 50% 0;
  opacity: 0.45;
  pointer-events: none;
  animation: petalDrift 14s linear infinite;
}

.petal-1 { top: 15%; left: 12%; animation-delay: 0s; animation-duration: 16s; }
.petal-2 { top: 40%; right: 18%; animation-delay: 3s; animation-duration: 18s; }
.petal-3 { top: 75%; left: 25%; animation-delay: 6s; animation-duration: 14s; }
.petal-4 { top: 25%; right: 35%; animation-delay: 2s; animation-duration: 20s; }

@keyframes petalDrift {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translate(30px, 40px) rotate(180deg);
    opacity: 0.55;
  }
  100% {
    transform: translate(60px, 90px) rotate(360deg);
    opacity: 0;
  }
}

/* Dark Contrast Section for Offer Showcase */
.bg-warm-dark {
  background: linear-gradient(180deg, #1c1917 0%, #292524 50%, #1c1917 100%);
  color: #f5f5f4;
  position: relative;
  overflow: hidden;
}

.bg-warm-dark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.05) 50%, transparent 75%);
  pointer-events: none;
}

/* ==========================================================================
   Typography & Accents
   ========================================================================== */

h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
}

.badge-yellow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fef08a;
  border: 1px solid #facc15;
  color: #713f12;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(202, 138, 4, 0.15);
}

.badge-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #ecfccb;
  border: 1px solid #a3e635;
  color: #365314;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 9999px;
}

/* Yellow Card Styling */
.yellow-card {
  background: #ffffff;
  border: 1.5px solid #fef08a;
  border-radius: 24px;
  padding: 24px;
  transition: all 0.35s ease;
  box-shadow: 0 4px 18px -2px rgba(234, 179, 8, 0.1);
  position: relative;
  overflow: hidden;
}

.yellow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #facc15, #84cc16, #facc15);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.yellow-card:hover {
  transform: translateY(-5px);
  border-color: #facc15;
  box-shadow: 0 16px 32px -4px rgba(234, 179, 8, 0.22);
}

.yellow-card:hover::before {
  opacity: 1;
}

/* ==========================================================================
   Ingredients Showcase (Sastav)
   ========================================================================== */

.ingredient-card {
  background: #ffffff;
  border: 1.5px solid #fef08a;
  border-radius: 22px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.08);
}

.ingredient-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #eab308;
  box-shadow: 0 12px 24px -4px rgba(202, 138, 4, 0.2);
}

.ingredient-icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fefce8;
  border: 2px solid #fde047;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ingredient-card:hover .ingredient-icon-wrap {
  transform: rotate(12deg) scale(1.1);
}

/* ==========================================================================
   Centered Offer Page Styles (Офер посередине)
   ========================================================================== */

.offer-center-wrap {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.product-glow-box {
  position: relative;
  display: inline-block;
  margin: 20px auto;
  padding: 24px;
  border-radius: 32px;
  background: radial-gradient(circle at center, rgba(254, 240, 138, 0.25) 0%, rgba(250, 204, 21, 0.08) 50%, transparent 75%);
}

.product-glow-box img {
  max-width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18));
  transition: transform 0.5s ease;
}

.product-glow-box:hover img {
  transform: scale(1.04) rotate(-1deg);
}

/* Price Box */
.price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 2px solid #facc15;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(202, 138, 4, 0.16);
}

.price-old {
  font-size: 1.25rem;
  font-weight: 700;
  color: #a8a29e;
  text-decoration: line-through;
}

.price-new {
  font-size: 2.25rem;
  font-weight: 900;
  color: #713f12;
  letter-spacing: -0.02em;
}

/* Order Form Card */
.order-card-centered {
  background: #ffffff;
  border-radius: 30px;
  padding: 36px 30px;
  box-shadow: 0 20px 45px -10px rgba(113, 63, 18, 0.18);
  border: 2px solid #fde047;
  position: relative;
}

/* Input Fields with Delicate Stem Styling */
.form-input-stem {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-main);
  color: #1c1917;
  background: #fffdf5;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  outline: none;
  transition: all 0.25s ease;
}

.form-input-stem:focus {
  background: #ffffff;
  border-color: #eab308;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25);
}

/* Timer Badge */
.timer-pulse {
  animation: pulseTimer 2s infinite ease-in-out;
}

@keyframes pulseTimer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

/* ==========================================================================
   Thank You Page (Hvala vam)
   ========================================================================== */

.thanks-box {
  background: #ffffff;
  border: 2px solid #fde047;
  border-radius: 32px;
  padding: 48px 32px;
  box-shadow: 0 24px 50px -12px rgba(202, 138, 4, 0.22);
  text-align: center;
  max-width: 650px;
  margin: 40px auto;
}

.success-flower-wrap {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef08a, #fde047);
  border: 3px solid #65a30d;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(101, 163, 13, 0.35);
  animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceIn {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ==========================================================================
   Mobile Nav & Responsiveness
   ========================================================================== */

@media (max-width: 768px) {
  .price-new {
    font-size: 1.85rem;
  }
  .btn-stem {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
  .order-card-centered {
    padding: 24px 18px;
  }
}