/*==================================================
  SUNSHINE MAKEUP STUDIO - LUXURY COUNTER & MILESTONES
  Pixel-Perfect Velvet Burgundy & Gold Luxury Design
==================================================*/

:root {
  --cnt-burgundy-dark: #610A1E;
  --cnt-burgundy: #7E122B;
  --cnt-burgundy-badge: linear-gradient(145deg, #8E1635 0%, #610A1E 100%);
  --cnt-gold-ring: #DEBC97;
  --cnt-gold-plus: #C89D66;
  --cnt-card-bg: #FFFFFF;
  --cnt-card-border: #F5E5DC;
  --cnt-text-title: #1C1314;
  --cnt-text-sub: #736165;
  --cnt-font-serif: 'Playfair Display', Georgia, serif;
  --cnt-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cnt-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Main Section Container */
.sunshine-counter-section {
  position: relative;
  padding: 105px 0 95px !important;
  background: linear-gradient(180deg, #FFF9F6 0%, #FDF2EB 45%, #FBF0E7 100%) !important;
  overflow: hidden;
  font-family: var(--cnt-font-sans);
}

/* 2. Bottom Flowing Silk Wave SVG */
.sunshine-counter-wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
  z-index: 1;
}

/* 3. Side Botanical Decor & Sparkles */
.sunshine-counter-decor {
  position: absolute;
  top: 15%;
  width: 220px;
  height: 380px;
  pointer-events: none;
  z-index: 1;
}

.sunshine-counter-decor.left-decor {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='380' viewBox='0 0 220 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-30 40C20 90 60 170 80 260C90 310 80 350 70 380' stroke='%23BA1B4D' stroke-width='1.5' stroke-opacity='0.18'/%3E%3Cpath d='M20 90C45 80 75 90 90 115' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M45 150C75 140 110 155 125 185' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M65 210C100 200 135 220 150 250' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M80 260C110 265 140 295 145 325' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
}

.sunshine-counter-decor.right-decor {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='380' viewBox='0 0 220 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 40C200 90 160 170 140 260C130 310 140 350 150 380' stroke='%23BA1B4D' stroke-width='1.5' stroke-opacity='0.18'/%3E%3Cpath d='M200 90C175 80 145 90 130 115' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M175 150C145 140 110 155 95 185' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M155 210C120 200 85 220 70 250' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3Cpath d='M140 260C110 265 80 295 75 325' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.16' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.sunshine-counter-decor .sparkle {
  position: absolute;
  color: #D4AF7A;
  font-size: 14px;
  animation: sparkleTwinkle 3s infinite ease-in-out;
}

.sunshine-counter-decor.left-decor .sparkle-1 {
  top: 18%;
  left: 65px;
  animation-delay: 0s;
}

.sunshine-counter-decor.left-decor .sparkle-2 {
  top: 55%;
  left: 110px;
  font-size: 11px;
  animation-delay: 1.5s;
}

.sunshine-counter-decor.right-decor .sparkle-1 {
  top: 22%;
  right: 70px;
  animation-delay: 0.8s;
}

.sunshine-counter-decor.right-decor .sparkle-2 {
  top: 60%;
  right: 120px;
  font-size: 11px;
  animation-delay: 2.2s;
}

@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

/* 4. Luxury Stat Cards */
.sunshine-stat-card {
  background: var(--cnt-card-bg) !important;
  border-radius: 28px !important;
  border: 1.5px solid var(--cnt-card-border) !important;
  box-shadow: 0 16px 40px rgba(139, 29, 56, 0.08), 0 3px 10px rgba(0, 0, 0, 0.02) !important;
  padding: 50px 22px 28px 22px !important;
  margin-top: 36px !important;
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.35s var(--cnt-ease), box-shadow 0.35s var(--cnt-ease), border-color 0.35s ease !important;
  z-index: 2 !important;
  overflow: visible !important;
  height: calc(100% - 36px) !important;
}

/* Inner Top Left Soft Blush Glow */
.sunshine-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  border-top-left-radius: 26px;
  background: radial-gradient(circle at top left, #FCEEE8 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.sunshine-stat-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 50px rgba(139, 29, 56, 0.14), 0 6px 16px rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(212, 175, 122, 0.6) !important;
}

/* 5. Delicate Botanical Leaf in Card Corner */
.sunshine-stat-card-leaf {
  position: absolute;
  width: 90px;
  height: 90px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
}

.sunshine-stat-card-leaf.right-corner {
  bottom: 0;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M95 20C75 40 50 65 10 95' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.22'/%3E%3Cpath d='M75 40C60 30 40 40 30 55' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.2' stroke-dasharray='2 2'/%3E%3Cpath d='M50 65C40 55 20 65 15 80' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.2' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
}

.sunshine-stat-card-leaf.left-corner {
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-5 20C15 40 40 65 80 95' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.22'/%3E%3Cpath d='M15 40C30 30 50 40 60 55' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.2' stroke-dasharray='2 2'/%3E%3Cpath d='M40 65C50 55 70 65 75 80' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.2' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
}

/* 6. Overlapping Circular Icon Badge */
.sunshine-stat-icon {
  position: absolute !important;
  top: -34px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: var(--cnt-burgundy-badge) !important;
  border: 3.5px solid var(--cnt-gold-ring) !important;
  box-shadow: 0 8px 22px rgba(139, 29, 56, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: #FFFFFF !important;
  transition: transform 0.35s var(--cnt-ease), box-shadow 0.35s ease, border-color 0.35s ease !important;
  z-index: 3 !important;
  margin: 0 !important;
}

.sunshine-stat-icon i {
  color: #FFFFFF !important;
}

.sunshine-stat-card:hover .sunshine-stat-icon {
  transform: translateX(-50%) scale(1.08) !important;
  border-color: #E8C8A3 !important;
  box-shadow: 0 12px 28px rgba(139, 29, 56, 0.42), 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* 7. Numbers & Plus Sign */
.sunshine-stat-number {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  margin: 10px 0 6px 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.sunshine-stat-number .counter {
  font-family: var(--cnt-font-serif) !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: var(--cnt-burgundy) !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}

.sunshine-stat-plus {
  font-family: var(--cnt-font-serif) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--cnt-gold-plus) !important;
  margin-left: 2px !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}

/* 8. Title & Subtitle */
.sunshine-stat-title {
  font-family: var(--cnt-font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--cnt-text-title) !important;
  margin-bottom: 5px !important;
  line-height: 1.25 !important;
  position: relative !important;
  z-index: 2 !important;
}

.sunshine-stat-subtitle {
  font-family: var(--cnt-font-sans) !important;
  font-size: 13px !important;
  color: var(--cnt-text-sub) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 9. Responsive Breakpoints */
@media (max-width: 1199.98px) {
  .sunshine-stat-card {
    padding: 46px 16px 24px 16px !important;
  }
  .sunshine-stat-number .counter {
    font-size: 40px !important;
  }
  .sunshine-stat-title {
    font-size: 18.5px !important;
  }
}

@media (max-width: 991.98px) {
  .sunshine-counter-section {
    padding: 85px 0 75px !important;
  }
  .sunshine-stat-card {
    margin-top: 36px !important;
  }
  .sunshine-counter-decor {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .sunshine-counter-section {
    padding: 70px 0 60px !important;
  }
  .sunshine-stat-card {
    padding: 44px 14px 22px 14px !important;
    border-radius: 22px !important;
    margin-top: 34px !important;
  }
  .sunshine-stat-icon {
    width: 60px !important;
    height: 60px !important;
    top: -30px !important;
    font-size: 20px !important;
    border-width: 3px !important;
  }
  .sunshine-stat-number .counter {
    font-size: 36px !important;
  }
  .sunshine-stat-plus {
    font-size: 26px !important;
  }
  .sunshine-stat-title {
    font-size: 17px !important;
  }
  .sunshine-stat-subtitle {
    font-size: 12px !important;
  }
}