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

:root {
  --color-primary: #be4b5c;
  --color-primary-dark: #9e3343;
  --color-primary-hover: #a83b4b;
  --color-primary-light: #fbebee;
  --color-rose-petal: #f6d2d8;
  --color-rose-bg: #fff8f9;
  --color-rose-card: #ffffff;
  --color-border: #f4cfd5;
  --color-text: #2c2527;
  --color-text-muted: #6e6366;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --radius-card: 20px;
  --radius-btn: 9999px;
  --shadow-rose: 0 10px 30px -5px rgba(190, 75, 92, 0.22);
}

html, body {
  font-family: var(--font-main);
  color: var(--color-text);
  background-color: var(--color-rose-bg);
  background-image: url('../images/rose-pattern.svg');
  background-repeat: repeat;
  background-size: 380px 380px;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* Rose Themed Buttons */
.btn-rose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #d36476 0%, #b83e52 100%);
  color: #ffffff !important;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-btn);
  box-shadow: 0 8px 20px -3px rgba(190, 75, 92, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  cursor: pointer;
}

.btn-rose:hover {
  background: linear-gradient(135deg, #c45365 0%, #a23143 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -3px rgba(190, 75, 92, 0.48);
}

.btn-rose:active {
  transform: translateY(0);
}

.btn-rose-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #ffffff;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-btn);
  transition: all 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-rose-outline:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
}

/* Floral Rose Badge */
.rose-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fdf2f4;
  color: #b83e52;
  border: 1px solid #f6cdd4;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rose-icon-inline {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Big Silhouette Watermark for the Offer Section */
.silhouette-bg-container {
  position: relative;
  overflow: hidden;
}

.silhouette-bg-watermark {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  width: 480px;
  height: 580px;
  background-image: url('../images/silhouette-body.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* Offer Card styling */
.offer-card {
  position: relative;
  background: #ffffff;
  border: 2px solid #f8d7dc;
  border-radius: 28px;
  box-shadow: 0 16px 40px -10px rgba(190, 75, 92, 0.18);
  overflow: hidden;
  z-index: 2;
}

.offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #d36476, #e58b98, #b83e52);
}

/* Rose Wave Accent Header */
.wave-divider {
  width: 100%;
  height: 36px;
  background-image: url('../images/wave-lines.svg');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.35;
}

/* Input Styles */
.input-rose {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 1.5px solid #ebd2d7;
  border-radius: 14px;
  background-color: #ffffff;
  color: #2c2527;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.input-rose:focus {
  border-color: #be4b5c;
  box-shadow: 0 0 0 4px rgba(190, 75, 92, 0.12);
}

.input-rose.is-invalid {
  border-color: #e53e3e !important;
  background-color: #fff8f8;
}

.input-rose.is-valid {
  border-color: #38a169 !important;
}

.input-error-msg {
  font-size: 0.8125rem;
  margin-top: 0.35rem;
  display: none;
  font-weight: 600;
}

.input-error-msg.show {
  display: block;
  color: #e53e3e;
}

.input-error-msg.show.success {
  display: block;
  color: #2f855a;
}

/* Botanical Card */
.botanical-card {
  background: #ffffff;
  border: 1px solid #f6dce1;
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(190, 75, 92, 0.04);
}

.botanical-card:hover {
  transform: translateY(-4px);
  border-color: #f0bec7;
  box-shadow: 0 12px 30px rgba(190, 75, 92, 0.12);
}

/* Rose Icon Box */
.rose-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fdf2f4;
  color: #be4b5c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid #f8d3d9;
}

/* Accordion */
details summary {
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}