/* ==========================================================================
   Shri Radha Krishna Brij Dham — devotional Vrindavan theme
   Palette: warm cream background, deep maroon/brown text, gold accent,
   peacock-teal used sparingly for decorative motifs only.
   ========================================================================== */

:root {
  --brand-cream: #fdf6e9;
  --brand-cream-dark: #f5e9d0;
  --brand-maroon: #7a1f2b;
  --brand-maroon-dark: #5c1620;
  --brand-brown: #3b2415;
  --brand-gold: #c99a3c;
  --brand-gold-light: #e8caa0;
  --brand-peacock: #145a56;
  --brand-peacock-light: #1f7a73;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--brand-cream);
  color: var(--brand-brown);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  color: var(--brand-maroon);
}

a {
  color: var(--brand-maroon);
}
a:hover {
  color: var(--brand-gold);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn-brand {
  background-color: var(--brand-maroon);
  border-color: var(--brand-maroon);
  color: var(--brand-cream);
}
.btn-brand:hover {
  background-color: var(--brand-maroon-dark);
  border-color: var(--brand-maroon-dark);
  color: #fff;
}
.btn-gold {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-brown);
  font-weight: 600;
}
.btn-gold:hover {
  background-color: #b5872f;
  border-color: #b5872f;
  color: var(--brand-brown);
}
.btn-whatsapp {
  background-color: #25d366;
  border-color: #25d366;
  color: #fff;
  font-weight: 600;
}
.btn-whatsapp:hover {
  background-color: #1ebc59;
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Navbar                                                                   */
/* ---------------------------------------------------------------------- */
.site-navbar {
  background-color: var(--brand-cream);
  border-bottom: 3px solid var(--brand-gold);
}
.site-navbar .navbar-brand {
  font-family: var(--font-heading);
  color: var(--brand-maroon) !important;
  font-weight: 700;
}
.site-navbar .nav-link {
  color: var(--brand-brown) !important;
  font-weight: 500;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
  color: var(--brand-maroon) !important;
}

/* ---------------------------------------------------------------------- */
/* Peacock feather decorative motif (pure CSS/SVG — no external assets)    */
/* ---------------------------------------------------------------------- */
.peacock-divider {
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' width='120' height='28'%3E%3Cg fill='none' stroke='%23145a56' stroke-width='1.2' opacity='0.55'%3E%3Cpath d='M10 24 C10 10, 20 2, 20 2 C20 2, 30 10, 30 24' /%3E%3Ccircle cx='20' cy='8' r='3' fill='%23c99a3c' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.9;
}

.peacock-corner {
  position: absolute;
  width: 90px;
  height: 90px;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23145a56' stroke-width='2'%3E%3Cpath d='M50 95 C50 60, 70 30, 50 5 C30 30, 50 60, 50 95Z'/%3E%3Ccircle cx='50' cy='20' r='7' fill='%23c99a3c' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.peacock-corner--top-right { top: 0; right: 0; transform: scaleX(-1); }
.peacock-corner--bottom-left { bottom: 0; left: 0; }

.om-flute-icon {
  color: var(--brand-gold);
  font-size: 1.4rem;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, var(--brand-maroon) 0%, var(--brand-maroon-dark) 100%);
  color: var(--brand-cream);
  overflow: hidden;
  border-bottom: 4px solid var(--brand-gold);
}
.hero-section .hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
}
.hero-section .hero-subheadline {
  color: var(--brand-gold-light);
  font-size: 1.15rem;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cg fill='none' stroke='%23c99a3c' stroke-width='1' opacity='0.15'%3E%3Cpath d='M100 190 C100 120, 140 60, 100 10 C60 60, 100 120, 100 190Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -40px top -20px;
  background-size: 260px;
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                    */
/* ---------------------------------------------------------------------- */
.card-devotional {
  background: #fff;
  border: 1px solid var(--brand-gold-light);
  border-radius: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-devotional:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(122, 31, 43, 0.15);
}
.section-title {
  text-align: center;
  margin-bottom: 2rem;
}
.section-title .subtitle {
  color: var(--brand-peacock);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Room status board (dashboard)                                           */
/* ---------------------------------------------------------------------- */
.room-status-card {
  border-radius: 0.4rem;
  padding: 0.75rem;
  text-align: center;
  font-weight: 600;
  color: #fff;
}
.room-status-AVAILABLE { background-color: #2e7d32; }
.room-status-OCCUPIED { background-color: #7a1f2b; }
.room-status-RESERVED { background-color: #c99a3c; color: #3b2415; }
.room-status-CLEANING { background-color: #0288d1; }
.room-status-MAINTENANCE { background-color: #6d4c41; }
.room-status-BLOCKED { background-color: #424242; }

/* ---------------------------------------------------------------------- */
/* Sticky mobile CTAs                                                      */
/* ---------------------------------------------------------------------- */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: none;
  background: #fff;
  border-top: 2px solid var(--brand-gold);
}
@media (max-width: 767.98px) {
  .sticky-cta-bar { display: flex; }
  body { padding-bottom: 64px; }
}

.footer-devotional {
  background-color: var(--brand-brown);
  color: var(--brand-cream);
}
.footer-devotional a {
  color: var(--brand-gold-light);
}
.footer-devotional a:hover {
  color: #fff;
}

/* Bootstrap-like styling for Django's built-in auth form widgets, which
   don't carry form-control classes by default. */
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
form input[type="tel"],
form input[type="date"],
form select,
form textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #fff;
}