/* ==========================================================================
   SUNSHINE MAKEUP STUDIO - QUICK APPOINTMENT PROMO BANNER (FLOATING LUXURY CARD)
   ========================================================================== */

:root {
  --hf-burgundy: #A42A46;
  --hf-burgundy-gradient: linear-gradient(90deg, #BA1B4D 0%, #870F35 100%);
  --hf-burgundy-hover: linear-gradient(90deg, #C91D55 0%, #99123E 100%);
  --hf-badge-bg: #FCE8E2;
  --hf-card-bg: linear-gradient(180deg, #FFF8F5 0%, #FDF1EA 100%);
  --hf-card-border: #F3E2D8;
  --hf-input-bg: #F7EFEA;
  --hf-input-border: #EBE0D8;
  --hf-input-icon: #9E8C90;
  --hf-text-dark: #26191B;
  --hf-text-muted: #6E5C60;
  --hf-font-serif: 'Playfair Display', Georgia, serif;
  --hf-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hf-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Main Floating Container */
.sunshine-promo-form-section {
  position: relative;
  z-index: 10;
  margin-top: -65px; /* Overlaps hero slider elegantly */
  margin-bottom: 35px;
  font-family: var(--hf-font-sans);
}

/* 2. Elevated Blush Card Container */
.sunshine-promo-card {
  background: var(--hf-card-bg);
  border-radius: 28px;
  border: 1.5px solid var(--hf-card-border);
  box-shadow: 0 20px 50px rgba(139, 29, 56, 0.09), 0 4px 15px rgba(0, 0, 0, 0.03);
  padding: 34px 42px 24px 42px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s var(--hf-ease), transform 0.35s var(--hf-ease);
}

.sunshine-promo-card:hover {
  box-shadow: 0 26px 60px rgba(139, 29, 56, 0.13), 0 6px 20px rgba(0, 0, 0, 0.04);
}

/* 3. Botanical Leaf Watermarks (Top Left & Top Right) */
.sunshine-card-leaf-bg {
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.sunshine-card-leaf-bg.left-leaf {
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 10C20 30 60 40 80 80C60 100 30 130 -10 150' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Cpath d='M80 80C90 40 120 10 160 -10' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Cpath d='M20 30C45 15 75 25 90 45' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='3 3'/%3E%3Cpath d='M40 85C65 70 95 80 110 100' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left;
}

.sunshine-card-leaf-bg.right-leaf {
  top: 0;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M170 10C140 30 100 40 80 80C100 100 130 130 170 150' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Cpath d='M80 80C70 40 40 10 0 -10' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Cpath d='M140 30C115 15 85 25 70 45' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='3 3'/%3E%3Cpath d='M120 85C95 70 65 80 50 100' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
}

/* 4. Promo Header */
.sunshine-promo-header {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.sunshine-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hf-badge-bg);
  color: var(--hf-burgundy);
  border: 1px solid rgba(164, 42, 70, 0.15);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sunshine-promo-badge .badge-sparkle {
  color: var(--hf-burgundy);
  font-size: 10px;
}

.sunshine-promo-title {
  font-family: var(--hf-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--hf-text-dark);
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.sunshine-promo-title .discount-highlight {
  color: var(--hf-burgundy);
  font-weight: 800;
  display: inline-block;
}

.sunshine-promo-subtitle {
  font-family: var(--hf-font-sans);
  font-size: 14px;
  color: var(--hf-text-muted);
  font-weight: 400;
  margin: 0;
}

/* 5. Form Fields & Grid Layout */
.sunshine-promo-form {
  position: relative;
  z-index: 2;
}

.sunshine-promo-form .form-row-custom {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.18fr;
  gap: 16px;
  align-items: center;
}

.sunshine-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.sunshine-input-group .input-icon {
  position: absolute;
  left: 18px;
  color: var(--hf-input-icon);
  font-size: 14px;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 3;
}

.sunshine-input-group .form-control {
  width: 100%;
  height: 54px;
  background-color: var(--hf-input-bg);
  border: 1.5px solid var(--hf-input-border);
  border-radius: 14px;
  padding: 0 16px 0 46px;
  font-family: var(--hf-font-sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--hf-text-dark);
  transition: all 0.3s var(--hf-ease);
  box-shadow: none;
}

.sunshine-input-group .form-control::placeholder {
  color: var(--hf-input-icon);
  font-weight: 400;
  opacity: 0.9;
}

.sunshine-input-group .form-control:focus {
  background-color: #FFFFFF;
  border-color: var(--hf-burgundy);
  box-shadow: 0 0 0 4px rgba(164, 42, 70, 0.12);
  outline: none;
}

.sunshine-input-group:focus-within .input-icon {
  color: var(--hf-burgundy);
}

/* 6. Glowing Burgundy Submit Button */
.sunshine-promo-btn {
  width: 100% !important;
  height: 54px !important;
  background: var(--hf-burgundy-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--hf-font-sans) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 8px 0 28px !important;
  box-shadow: 0 8px 24px rgba(186, 27, 77, 0.38) !important;
  transition: all 0.3s var(--hf-ease) !important;
  cursor: pointer !important;
}

.sunshine-promo-btn span:not(.btn-arrow-circle) {
  color: #FFFFFF !important;
  font-family: var(--hf-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.sunshine-promo-btn .btn-arrow-circle {
  width: 38px !important;
  height: 38px !important;
  background-color: #FFFFFF !important;
  color: #870F35 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.sunshine-promo-btn:hover {
  background: var(--hf-burgundy-hover) !important;
  box-shadow: 0 12px 30px rgba(186, 27, 77, 0.52) !important;
  transform: translateY(-2px) !important;
}

.sunshine-promo-btn:hover .btn-arrow-circle {
  transform: translateX(3px) !important;
  color: #BA1B4D !important;
}

/* 7. Bottom Features Row */
.sunshine-promo-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  padding-top: 4px;
  position: relative;
  z-index: 2;
}

.sunshine-promo-features .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hf-text-muted);
  font-size: 13px;
  font-weight: 500;
}

.sunshine-promo-features .feature-item i {
  color: var(--hf-burgundy);
  font-size: 15px;
}

.sunshine-promo-features .feature-divider {
  width: 1px;
  height: 16px;
  background-color: var(--hf-card-border);
  display: inline-block;
}

/* 8. Responsive Breakpoints */
@media (max-width: 1199.98px) {
  .sunshine-promo-card {
    padding: 30px 32px 22px 32px;
  }
  .sunshine-promo-title {
    font-size: 23px;
  }
  .sunshine-promo-form .form-row-custom {
    gap: 12px;
  }
  .sunshine-promo-features {
    gap: 20px;
    font-size: 12.5px;
  }
}

@media (max-width: 991.98px) {
  .sunshine-promo-form-section {
    margin-top: -45px;
    margin-bottom: 30px;
  }
  .sunshine-promo-card {
    padding: 28px 24px 22px 24px;
    border-radius: 24px;
  }
  .sunshine-promo-title {
    font-size: 20px;
  }
  .sunshine-promo-subtitle {
    font-size: 13px;
  }
  .sunshine-promo-form .form-row-custom {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .sunshine-promo-btn-wrap {
    grid-column: span 2;
  }
  .sunshine-promo-features {
    gap: 16px;
  }
}

@media (max-width: 767.98px) {
  .sunshine-promo-features {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .sunshine-promo-features .feature-divider {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .sunshine-promo-form-section {
    margin-top: -25px;
    margin-bottom: 25px;
  }
  .sunshine-promo-card {
    padding: 24px 18px 18px 18px;
    border-radius: 20px;
  }
  .sunshine-promo-title {
    font-size: 17px;
    line-height: 1.35;
  }
  .sunshine-promo-subtitle {
    font-size: 12.5px;
    margin-bottom: 16px;
  }
  .sunshine-promo-badge {
    font-size: 10px;
    padding: 3px 12px;
    letter-spacing: 1px;
  }
  .sunshine-promo-form .form-row-custom {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sunshine-promo-btn-wrap {
    grid-column: span 1;
  }
  .sunshine-input-group .form-control {
    height: 48px;
    font-size: 13px;
    border-radius: 12px;
  }
  .sunshine-promo-btn {
    height: 48px !important;
    padding: 0 6px 0 22px !important;
  }
  .sunshine-promo-btn span:not(.btn-arrow-circle) {
    font-size: 13px !important;
  }
  .sunshine-promo-btn .btn-arrow-circle {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }
  .sunshine-promo-features {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }
}