:root{
  --floral-bg: url("assets/floral-watercolor-background.png");
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.05);
  --ink: #2c2c2c;

  /* Theme Colors */
  --pastel-rose: #f2c6cf;
  --pastel-sage: #cfe6da;
  --floral-accent: #dcaeb5;
}

html, body { 
    height: 100%; 
    scroll-behavior: smooth;
}

body { 
    color: var(--ink); 
    font-family: system-ui, -apple-system, sans-serif;
    padding-top: 100px; /* Pushes content down so navbar doesn't cover it */
}

/* 1) PAGE BACKGROUND */
.site-bg{
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.6)),
    var(--floral-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 2) NAVBAR */
.nav-glass{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50px; /* Pill shape for navbar */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.btn-nav {
    color: var(--ink);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    transition: all 0.3s;
}
.btn-nav:hover {
    background-color: var(--pastel-sage);
    color: #000;
}

/* 3) GLASS CONTAINERS */
.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border-radius: 1.5rem;
  backdrop-filter: blur(12px);
}

.section-anchor{ scroll-margin-top: 100px; }

.brand-title{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  color: #4a4a4a;
}

/* 4) FLORAL BUTTONS (Replaces Blue) */
.btn-floral{
  background: linear-gradient(135deg, var(--pastel-rose), var(--pastel-sage));
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}
.btn-floral:hover{
  transform: translateY(-2px);
  filter: brightness(0.95);
}
.btn-floral:active{
    transform: translateY(0);
}
.text-floral {
    color: #bfa0a6;
}
.btn-outline-floral {
    border-color: var(--floral-accent);
    color: var(--ink);
}
.btn-outline-floral:hover {
    background-color: var(--pastel-rose);
    border-color: var(--pastel-rose);
}

/* 5) CARDS & UI */
.card-soft{
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.04);
  background: rgba(255,255,255,.9);
}

.count-box{
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.small-muted{ color: rgba(0,0,0,.55); font-size: 0.9rem; }

/* Dividers */
.floral-divider-small {
    height: 2px;
    width: 50px;
    background: linear-gradient(90deg, var(--pastel-rose), var(--pastel-sage));
}

/* Footer Image Mobile Fix */
.footer-img {
    max-height: 150px;
    width: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 -5px 10px rgba(255,255,255,0.5));
}

/* Form Styles */
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fdfdfd;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pastel-rose);
    box-shadow: 0 0 0 4px rgba(242,198,207,0.25);
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .brand-title { font-size: 2rem; }
    .footer-img { max-height: 100px; width: 100%; object-fit: contain;}
    .nav-glass { border-radius: 1.5rem; } /* Less rounded on open menu mobile */
}