/* Mythri Residency - Rich & Elegant theme overrides */
:root{
  --brand: #6b4eff;
  --brand-2: #a78bfa;
  --dark: #0f172a;
  --muted: #64748b;
}

:root {
  /* existing vars ... */
  --nav-h: 64px;        /* mobile/tablet header height */
}
@media (min-width: 992px) {
  :root { --nav-h: 72px; }  /* a bit taller on lg+ if needed */
}


body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: #fafafa;
  color: #0f172a;
}

.navbar-brand { font-weight: 700; letter-spacing: 0.3px; }

/* --- HERO: responsive height & safe padding (no overlap) --- */
.hero {
  position: relative;
  overflow: clip;                 /* more reliable than hidden on mobile */
  border-radius: 1.25rem;

  /* keep your gradients */
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(167,139,250,.35), transparent 60%),
    linear-gradient(135deg, #eef2ff, #faf5ff);

  display: flex;
  align-items: center;

  /* responsive height */
  height: auto;
  min-height: 70vh;
  padding: clamp(1.75rem, 4.5vw, 3.5rem) 1rem;
}

/* Prefer dynamic viewport units to avoid iOS Safari 100vh bugs */
@supports (min-height: 100dvh) {
  .hero { min-height: 70dvh; }
}

/* On phones/tablets, add extra top padding to clear sticky header */
@media (max-width: 991.98px) {
  .hero { padding-top: calc(clamp(1.75rem, 4.5vw, 3.5rem) + var(--nav-h)); }
}


.hero .headline { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; }

.badge-soft { background: rgba(107,78,255,0.12); color: var(--brand); border: 1px solid rgba(107,78,255,0.18); }

.card { border-radius: 1rem; box-shadow: 0 10px 30px rgba(2,6,23,0.06); border: 1px solid #eef2ff; }

.feature-icon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #f5f3ff; border: 1px solid #ede9fe;
}

.section-title { font-weight: 700; letter-spacing: 0.2px; }

footer { border-top: 1px solid #e2e8f0; }


/* Sleek gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #eef2ff;
  box-shadow: 0 8px 24px rgba(2,6,23,0.05);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.55) 100%);
  color: #fff; font-size: .9rem;
}

/* Full-bleed helper so section breaks out of the main container */
.fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Map + Contact panels */
.map-panel {
  min-height: 380px;        /* mobile fallback */
  height: 100%;
}
@media (min-width: 992px) {  /* lg+ */
  .map-panel { min-height: 560px; }
}

/* Contact side */
.contact-panel {
  min-height: 380px;
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(167,139,250,0.20), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: clamp(20px, 4vw, 48px);
}
@media (min-width: 992px) {
  .contact-panel { min-height: 560px; }
}

.contact-card {
  width: min(640px, 92%);
  background: #fff;
  border: 1px solid #eef2ff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.08);
  padding: clamp(18px, 3vw, 28px);
}

/* Modernized form */
.contact-modern .form-control {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}
.contact-modern .form-control:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 .25rem rgba(167,139,250,.25);
}
.contact-modern .form-floating > label {
  color: #64748b;
}
.contact-modern .btn-lg {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(107,78,255,0.15);
}


/* Map section: full-bleed with header container above the iframe */
.map-section .map-frame {
  width: 100%;
  height: 380px;            /* mobile */
}
@media (min-width: 768px) {
  .map-section .map-frame { height: 520px; }
}
@media (min-width: 1200px) {
  .map-section .map-frame { height: 600px; }
}

/* Right-side "Why contact us" list */
.contact-why li {
  padding: 8px 0;
  color: var(--dark);
}

/* Center all section headers */
.section-title {
  text-align: center;
  margin-bottom: 1rem;
}

/* Center-align the "Why contact us" block */
.contact-why,
.contact-why li,
#contact h3,
#contact p,
#contact .small {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#contact .col-lg-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== Hero background slider ===== */
/* Background slider layer */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;                /* avoids swipe/tap stealing */
  border-radius: inherit;              /* matches hero rounding */
}
.hero-bg .carousel-inner,
.hero-bg .carousel-item,
.hero-bg img { height: 100%; }
.hero-bg img { object-fit: cover; }

/* Overlay layer */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;                /* overlay shouldn’t block taps */
  border-radius: inherit;
}

/* Content layer */
.hero-content {
  position: relative; z-index: 2;
  margin: 0;
  text-align: left;
  /* avoid accidental clipping from parent overflow on small screens */
  isolation: isolate;
}


.hero .headline { font-size: clamp(28px, 7vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.hero .lead     { font-size: clamp(14px, 3.6vw, 18px); }

@media (max-width: 575.98px) {
  .hero { border-radius: 0; }                  /* avoids clipped corners on very small widths */
  .hero-content .btn { width: 100%; margin-bottom: .5rem; }
}


/* ===== Modernized Contact form look ===== */
.contact-modern .card {
  /* glass card with gradient border */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #c7d2fe, #e9d5ff, #c7f9e5) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(2,6,23,0.08);
}
.contact-modern .form-floating > .form-control,
.contact-modern .form-floating > textarea.form-control {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
}
.contact-modern .form-control:focus {
  border-color: #a78bfa;her
  box-shadow: 0 0 0 .25rem rgba(167,139,250,.25);
}
.contact-modern .form-floating > label {
  color: #64748b;
  opacity: .9;
}
.contact-modern .btn-lg {
  border-radius: 14px;
  padding-block: .9rem;
  box-shadow: 0 16px 36px rgba(107,78,255,0.20);
  transition: transform .06s ease;
}
.contact-modern .btn-lg:active { transform: translateY(1px); }

/* small highlights row (optional badges under contact heading) */
.contact-highlights {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; justify-content: center;
}
.contact-highlights .badge {
  background: #f5f3ff; color: #6b4eff; border: 1px solid #ede9fe; border-radius: 999px;
}

/* --- HERO vertical centering --- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  /* keep your gradients/backgrounds as-is */
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(167,139,250,.35), transparent 60%),
    linear-gradient(135deg, #eef2ff, #faf5ff);

  display: flex;
  align-items: center;

  /* responsive height (no fixed 40rem) */
  height: auto;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
}

/* tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero { min-height: 60vh; padding: 3rem 1.5rem; }
}

/* small phones */
@media (max-width: 575.98px) {
  .hero {
    border-radius: 0;                  /* avoids clipped edges on tiny screens */
    min-height: 50vh;
    padding: 2rem 1rem;
  }
}

/* center the inner content and cap width */
.hero-content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hero .lead { margin-left: auto; margin-right: auto; }

/* --- Contact section background to show glass effect --- */
#contact {
  /* subtle textured backdrop so the glass card is visible */
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(167,139,250,0.20), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* --- True glassmorphism for the contact card --- */
.contact-modern.card {
  background: rgba(255, 255, 255, 0.35);       /* translucent */
  border: 1px solid rgba(255, 255, 255, 0.55); /* light border */
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(2,6,23,0.12);
  backdrop-filter: blur(14px) saturate(135%);   /* the glass! */
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* keep fields modern */
.contact-modern .form-floating > .form-control,
.contact-modern .form-floating > textarea.form-control {
  background-color: rgba(255,255,255,0.85);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.contact-modern .form-control:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 .25rem rgba(167,139,250,.25);
}

/* nicer submit button */
.contact-modern .btn-lg {
  border-radius: 14px;
  padding-block: .9rem;
  box-shadow: 0 16px 36px rgba(107,78,255,0.20);
}

/* --- Modern glass navbar --- */
.navbar-glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e9edf5;
}
.navbar-glass .navbar-brand {
  font-weight: 800;
  letter-spacing: .2px;
}
.navbar-glass .nav-link {
  padding: .5rem .9rem;
  border-radius: 10px;
  color: #0f172a;
  transition: background-color .2s ease, color .2s ease;
}
.navbar-glass .nav-link:hover,
.navbar-glass .nav-link:focus {
  background: rgba(107,78,255,0.08);
  color: #6b4eff;
}

/* --- Hero: left align + nicer spacing --- */
.hero {
  display: flex;            /* keep vertical centering from earlier */
  align-items: center;
}
.hero-content {
  text-align: left;         /* LEFT ALIGN */
  margin-left: 0;
  margin-right: 0;
}
.hero .lead {
  margin-left: 0;           /* LEFT ALIGN paragraph */
  margin-right: 0;
}


.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg .carousel-item,
.hero-bg img { height: 100%; }

/* center a bit higher on mobile so subjects stay visible behind text */
@media (max-width: 575.98px) {
  .hero-bg img { object-position: center 30%; }
}


.hero-content { position: relative; z-index: 2; text-align: left; }
.hero .headline { font-size: clamp(28px, 7vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.hero .lead { font-size: clamp(14px, 3.8vw, 18px); }

/* stack CTAs on narrow screens */
@media (max-width: 575.98px) {
  .hero-content .btn { width: 100%; margin-bottom: .5rem; }
}


/* --- Transparent "ghost" button for Availability --- */
.btn-ghost {
  background: transparent;
  border: 0px solid rgba(107,78,255,0.35);
  color: #0f172a;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus {
  background: #0d6efd;
  border-color: #6b4eff;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(107,78,255,0.18);
}


/* --- HERO background opacity --- */
.hero-bg img {
  object-fit: cover;
  filter: brightness(0.55) opacity(0.65); /* darker + 85% opacity */
  transition: filter .3s ease;
}
.hero-bg img:hover {
  filter: brightness(0.65) opacity(1);    /* a little brighter on hover */
}

/* --- Contact section background image --- */
#contact {
  position: relative;
  background: url("assets/img/contact-bg.jpg") center/cover no-repeat;
}
#contact::before {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.7); /* light overlay so form stays readable */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#contact .row {
  position: relative; /* so content sits above overlay */
  z-index: 1;
}

/* --- Shorter Send Message button --- */
.contact-modern .btn-lg {
  border-radius: 14px;
  padding-block: .65rem;      /* shorter height */
  font-size: 1rem;            /* slightly smaller text */
  box-shadow: 0 10px 22px rgba(107,78,255,0.20);
}

/* --- Modernized Features section --- */
.feature-card {
  border: 1px solid #eef2ff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(2,6,23,0.10);
}
.feature-icon {
  width: 60px;
  height: 60px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 1.8rem;
  color: #6b4eff;
  background: #f5f3ff;
  border-radius: 14px;
}
/* --- Section background & spacing --- */
.features-wrap {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(167,139,250,0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-radius: 24px;
}

/* --- Elevated feature cards with gradient edge --- */
.feature-card {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #c7d2fe, #e9d5ff, #c7f9e5) border-box;
  border: 1px solid transparent;
  box-shadow: 0 16px 40px rgba(2,6,23,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(2,6,23,0.12);
}

/* Icon tile */
.feature-icon {
  width: 64px; height: 64px;
  margin-inline: auto;
  display: grid; place-items: center;
  font-size: 1.75rem; color: #6b4eff;
  background: #f5f3ff; border: 1px solid #ede9fe;
  border-radius: 16px;
}

/* Micro-highlights */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.chip {
  font-size: .75rem; color: #0f172a;
  background: #f8fafc; border: 1px solid #e2e8f0;
  padding: .25rem .55rem; border-radius: 999px;
}

/* Subtle reveal animation */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.reveal-visible { opacity: 1; transform: none; transition: all .5s ease; }

/* === Availability: premium card === */
.calendar-card {
  border-radius: 20px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #c7d2fe, #e9d5ff, #c7f9e5) border-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 54px rgba(2,6,23,0.08);
}

/* Legend */
.legend .legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px;
  vertical-align: middle;
}
.legend-confirmed { background: #3cc88f; box-shadow: 0 0 0 3px rgba(60,200,143,.15); }
.legend-pending   { background: #ffb1b1; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.legend-today     { background: #6b4eff; box-shadow: 0 0 0 3px rgba(107,78,255,.15); }

/* FullCalendar polish */
#fc-calendar .fc {
  --fc-border-color: #eef2ff;
  --fc-button-text-color: #0f172a;
  --fc-button-bg-color: #ffffff;
  --fc-button-border-color: #e5e7eb;
  --fc-button-hover-bg-color: #f8fafc;
  --fc-today-bg-color: rgba(107,78,255,0.06);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: #ffffff;
  --fc-event-bg-color: rgba(107,78,255,0.08);
  --fc-event-border-color: rgba(107,78,255,0.16);
}

#fc-calendar .fc-toolbar { margin-bottom: 1rem; }
#fc-calendar .fc-toolbar-title {
  font-weight: 700; letter-spacing: .2px;
}

#fc-calendar .fc-button {
  border-radius: 10px;
  box-shadow: none;
}
#fc-calendar .fc-button-primary:not(:disabled):hover {
  color: #6b4eff; border-color: #d9d6ff;
}

#fc-calendar .fc-daygrid-day {
  transition: background-color .15s ease, box-shadow .15s ease;
}
#fc-calendar .fc-daygrid-day:hover {
  background: #fbfbff;
  box-shadow: inset 0 0 0 2px #f0f0ff;
}

/* weekend tint for readability */
#fc-calendar .fc-day-sat .fc-daygrid-day-number,
#fc-calendar .fc-day-sun .fc-daygrid-day-number { opacity: .9; }

/* background-ranges for bookings (pending/confirmed) */
.fc-bg-confirmed { background: blue !important; }
.fc-bg-pending   { background: red !important; }

/* selection highlight */
#fc-calendar .fc-highlight { background: rgba(107,78,255,0.18); }

/* today ring */
#fc-calendar .fc-day-today { box-shadow: inset 0 0 0 2px rgba(107,78,255,.25); }

/* small, round event pills if shown */
#fc-calendar .fc-daygrid-event {
  border-radius: 12px; padding: 2px 6px; font-size: .75rem;
}


/* Compact inputs for the picker row */
#availability .form-control-sm {
  border-radius: 10px;
}

/* Optional: subtle outline on hover to match your theme */
#availability .form-control-sm:hover,
#availability .form-control-sm:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 .15rem rgba(167,139,250,.20);
}

/* ==== Booking modal (premium) ==== */
.booking-modal {
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eef2ff;
  box-shadow: 0 30px 80px rgba(2,6,23,0.25);
}
.booking-header {
  position: relative;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(107,78,255,.9), rgba(167,139,250,.85));
  color: #fff;
}
.booking-header .step-badge {
  font-weight: 600;
  letter-spacing: .2px;
}
.booking-header .btn-close {
  position: absolute; right: 12px; top: 12px;
  filter: invert(1) grayscale(100%);
  opacity: .8;
}
.booking-body { background: linear-gradient(180deg, #fff 0%, #fafbff 100%); }

/* left aside with soft image overlay (optional bg) */
.booking-aside {
  background:
    linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.25)),
    url("assets/img/hero2.jpg") center/cover no-repeat;
  color: #fff;
}
.booking-aside-inner {
  padding: 22px;
}
.check-dot {
  width: 18px; height: 18px; display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; line-height: 1;
}
.mini-summary {
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
  padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
}
.mini-summary .item { display: flex; flex-direction: column; font-size: .9rem; }
.mini-summary .label { opacity: .8; font-size: .75rem; }

/* right form visual polish */
.booking-form { padding: 18px 18px 24px; }
.booking-form .form-label { font-weight: 600; color: #0f172a; }
.booking-form .form-control, .booking-form textarea.form-control {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
}
.booking-form .form-control:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 .25rem rgba(167,139,250,.22);
}
.booking-footer .btn-ghost {
  background: transparent;
  border: 1px solid rgba(107,78,255,0.25);
  color: #00000;
}
.booking-footer .btn-ghost:hover {
  background: rgba(64, 27, 240, 0.68);
  color: #ffffff; border-color: #6b4eff;
}

/* ==== Calendar — extra beautification ==== */
#fc-calendar .fc {
  --fc-border-color: #eef2ff;
  --fc-today-bg-color: rgba(107,78,255,0.06);
}
#fc-calendar {
  --cell-radius: 12px;
}


/* Day cell polish (no transform to avoid repaint flash) */
#fc-calendar .fc-daygrid-day-frame {
  border-radius: 12px;
  transition: background-color .12s ease, box-shadow .12s ease;
}
#fc-calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: #fbfbff;                 /* very light */
  box-shadow: inset 0 0 0 1px #f0f0ff; /* thinner ring, no jump */
}

/* Bigger day numbers, muted outside days */
#fc-calendar .fc-daygrid-day-number { font-weight: 600; }
#fc-calendar .fc-day-other .fc-daygrid-day-number { opacity: .45; }

/* Background ranges with gradient */
.fc-bg-confirmed { 
  background: green !important;
  border-radius: var(--cell-radius);
}
.fc-bg-pending { 
  background: red !important;
  border-radius: var(--cell-radius);
}

/* Animated selection tint */
#fc-calendar .fc-highlight {
  background: rgba(107,78,255,0.18);
  animation: selPulse .5s ease;
}
@keyframes selPulse { from { opacity: .5; } to { opacity: 1; } }

/* Toolbar buttons: pill look */
#fc-calendar .fc-button {
  border-radius: 999px;
  padding: .35rem .8rem;
}

/* Tiny dot indicators appended via JS */
.fc-booked-dot {
  width: 6px; height: 6px; border-radius: 999px; display: inline-block; margin-left: 6px;
}
.fc-booked-dot.pending   { background: #f59e0b; }
.fc-booked-dot.confirmed { background: #3cc88f; }

/* ===== Global button beautification ===== */
.btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease-in-out;
}

/* Primary button (Book Now etc.) */
.btn-primary {
  background: linear-gradient(135deg, #6b4eff, #a78bfa);
  border: none;
  box-shadow: 0 6px 18px rgba(107,78,255,0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5a3ed9, #9467e9);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(107,78,255,0.35);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(107,78,255,0.2);
}

/* Ghost/secondary buttons */
.btn-ghost, .btn-outline-secondary {
  background: transparent;
  border: 1px solid rgba(107,78,255,0.35);
  color: #0f172a;
}
.btn-ghost:hover, .btn-outline-secondary:hover {
  background: rgba(64, 27, 240, 0.68);
  border-color: #6b4eff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(107,78,255,0.2);
}

/* Small buttons */
.btn-sm {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
}

/* Large buttons */
.btn-lg {
  font-size: 1.05rem;
  padding: 0.8rem 1.4rem;
  border-radius: 14px;
}

/* Admin button in navbar */
.btn-admin {
  background: linear-gradient(135deg, #3cc88f, #22a872);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(34,168,114,0.25);
}
.btn-admin:hover {
  background: linear-gradient(135deg, #2fa374, #1e8a62);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34,168,114,0.35);
}


/* ===== FullCalendar: match site buttons & beautify ===== */

/* Toolbar container polish */
#fc-calendar .fc-header-toolbar {
  margin-bottom: 1rem;
  padding: .4rem .6rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  border: 1px solid #eef2ff;
}

/* Make FC buttons look like our global .btn styles */
#fc-calendar .fc-button {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 0.45rem 0.9rem;
  transition: all .2s ease-in-out;
  box-shadow: none;
  border: none;
}

/* Primary look for key buttons */
#fc-calendar .fc-prev-button,
#fc-calendar .fc-next-button,
#fc-calendar .fc-today-button {
  background: linear-gradient(135deg, #6b4eff, #a78bfa);
  color: #fff;
  box-shadow: 0 6px 18px rgba(107,78,255,0.25);
}
#fc-calendar .fc-prev-button:hover,
#fc-calendar .fc-next-button:hover,
#fc-calendar .fc-today-button:hover {
  background: linear-gradient(135deg, #5a3ed9, #9467e9);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(107,78,255,0.35);
}

/* View switch pills: ghost → active = primary */
#fc-calendar .fc-dayGridMonth-button,
#fc-calendar .fc-dayGridWeek-button {
  background: transparent;
  border: 1px solid rgba(107,78,255,0.35);
  color: #0f172a;
}
#fc-calendar .fc-dayGridMonth-button:hover,
#fc-calendar .fc-dayGridWeek-button:hover {
  background: rgba(107,78,255,0.08);
  color: #6b4eff;
  border-color: #6b4eff;
  box-shadow: 0 4px 12px rgba(107,78,255,0.2);
}
#fc-calendar .fc-button-active {
  background: linear-gradient(135deg, #6b4eff, #a78bfa) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(107,78,255,0.25) !important;
}

/* Month fade-in */
#fc-calendar .fc-view-harness > .fc-view {
  animation: fcFade .22s ease;
}
@keyframes fcFade { from { opacity: 0 } to { opacity: 1 } }

/* Day cell polish */
#fc-calendar { --cell-radius: 12px; }
/*#fc-calendar .fc-daygrid-day-frame {*/
/*  border-radius: var(--cell-radius);*/
/*  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;*/
/*}*/
/*#fc-calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {*/
/*  background: #fbfbff;*/
/*  box-shadow: inset 0 0 0 2px #f0f0ff;*/
/*  transform: translateY(-1px);*/
/*}*/
#fc-calendar .fc-daygrid-day-number { font-weight: 600; }
#fc-calendar .fc-day-other .fc-daygrid-day-number { opacity: .45; }

/* Gradient background ranges */
.fc-bg-confirmed {
  background: linear-gradient(180deg, rgba(11, 232, 35, 0.72), rgba(6, 139, 21, 0.72)) !important;
  border-radius: var(--cell-radius);
}
.fc-bg-pending {
  background: linear-gradient(180deg, rgba(245, 11, 11, 0.57), rgba(255, 7, 7, 0.32)) !important;
  border-radius: var(--cell-radius);
}

/* Selection pulse */
#fc-calendar .fc-highlight { background: rgba(107,78,255,.18); animation: selPulse .5s ease; }
@keyframes selPulse { from { opacity:.5 } to { opacity:1 } }

/* Tiny status dots next to day numbers */
.fc-booked-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; margin-left: 6px; }
.fc-booked-dot.pending   { background: #f59e0b; }
.fc-booked-dot.confirmed { background: #3cc88f; }


/* Make sure the day number (tooltip target) is hoverable */
#fc-calendar .fc-daygrid-day-number {
  cursor: help;
  pointer-events: auto;
}


/* ===== Gallery page ===== */
.gallery-hero .section-title { text-align: center; }

.filter-pills .pill {
  background: transparent;
  border: 1px solid rgba(107,78,255,0.35);
  color: #0f172a;
  border-radius: 999px;
  padding: .45rem 1rem;
}
.filter-pills .pill:hover {
  background: rgba(107,78,255,0.08);
  color: #6b4eff;
  border-color: #6b4eff;
  box-shadow: 0 4px 12px rgba(107,78,255,0.2);
}
.filter-pills .pill.active {
  background: linear-gradient(135deg, #6b4eff, #a78bfa);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(107,78,255,0.25);
}

.gallery-wrap {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(167,139,250,0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-radius: 24px;
  padding: 1rem 0 2rem;
}

/* Responsive grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* Tiles */
.gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eef2ff;
  background: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;     /* uniform square grid */
  object-fit: cover;       /* crop neatly */
  display: block;
  transition: filter .25s ease, transform .25s ease;
}
.gallery-item:hover img { filter: brightness(.95); transform: scale(1.02); }

/* Caption overlay */
.gallery-cap {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0f172a;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(2,6,23,.1);
  pointer-events: none;
}

/* ===== Gallery Masonry (CSS columns) ===== */
.gallery-grid {
  column-count: 1;
  column-gap: 16px;
}
@media (min-width: 576px)  { .gallery-grid { column-count: 2; } }
@media (min-width: 992px)  { .gallery-grid { column-count: 3; } }
@media (min-width: 1400px) { .gallery-grid { column-count: 4; } }

/* Tiles inside columns */
.gallery-item {
  display: inline-block;               /* needed for column masonry */
  width: 100%;
  margin: 0 0 16px;                    /* gap between rows */
  break-inside: avoid;                 /* keep tiles intact */
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eef2ff;
  background: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,0.05);
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
  opacity: 1;
}
.gallery-item.is-hidden { display: none !important; } /* for paging */
.gallery-item.fade-in { animation: gfade .35s ease; }
@keyframes gfade { from { opacity: .2; transform: translateY(4px);} to { opacity: 1; transform: none; } }

.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,6,23,0.12); }

.gallery-item img {
  width: 100%;
  height: auto;                        /* natural height for masonry */
  display: block;
  object-fit: cover;
  transition: filter .25s ease, transform .25s ease;
}
.gallery-item:hover img { filter: brightness(.95); transform: scale(1.02); }

/* Caption overlay (unchanged) */
.gallery-cap {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0f172a;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(2,6,23,.1);
  pointer-events: none;
}

/* Pills (unchanged) */
.filter-pills .pill { /* keep your previous pill styles */ }


/* === GLightbox: image-only view + rounded corners === */

/* Hide all caption/description text inside the lightbox */
.glightbox-container .gdesc,
.glightbox-container .gdesc-inner,
.glightbox-container .gslide-title {
  display: none !important;
}

/* Round the zoomed image (and its container so it clips cleanly) */
.glightbox-container .gslide-image,
.glightbox-container .gslide-image img {
  border-radius: 18px;
}
.glightbox-container .gslide-image {
  overflow: hidden; /* ensures the rounded corners clip the image */
}

/* Optional: slightly darker backdrop + soft drop shadow for the zoomed image */
.glightbox-container .glightbox-overlay {
  background: rgba(5, 10, 25, 0.92) !important;
}
.glightbox-container .gslide-image img {
  box-shadow: 0 20px 70px rgba(2, 6, 23, 0.45);
}

/*Hero CTA staking */
/* Hero CTA buttons stacked */
.hero-cta {
  display: flex;
  flex-direction: column;     /* stack vertically */
  gap: .75rem;                /* space between buttons */
  max-width: 260px;           /* keeps them aligned nicely */
  margin-top: 1.5rem;
}

/* On larger screens, still stack (looks elegant + avoids cramping) */
@media (min-width: 992px) {
  .hero-cta {
    flex-direction: column;
    align-items: flex-start;  /* keep left-aligned with text */
  }
  .hero-cta .btn { width: 100%; }
}

/* Mobile phones: full width buttons */
@media (max-width: 575.98px) {
  .hero-cta .btn { width: 100%; }
}

/* ===== Calendar: better mobile/tablet responsiveness ===== */

/* Tighten toolbar + center on small screens */
@media (max-width: 575.98px) {
  #fc-calendar .fc-header-toolbar {
    padding: .35rem .5rem;
    gap: .4rem;
  }
  #fc-calendar .fc-toolbar-chunk {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #fc-calendar .fc-toolbar-title {
    font-size: clamp(16px, 4.8vw, 22px);
    text-align: center;
  }
  #fc-calendar .fc-button {
    padding: .35rem .6rem;
    font-size: .85rem;
    border-radius: 10px;
  }
}

/* Make the grid breathe less on mobile so it fits */
@media (max-width: 575.98px) {
  #fc-calendar .fc-daygrid-day-frame { border-radius: 10px; }
  #fc-calendar .fc-daygrid-day-number { padding: 2px 4px; font-weight: 600; }
  #fc-calendar .fc-daygrid-day-top { align-items: center; }
  #fc-calendar .fc-daygrid-block-event { margin: 1px 2px; }
  #fc-calendar .fc-highlight { animation: none; } /* reduce jank while selecting */
}

/* Tablet tuning */
@media (min-width: 576px) and (max-width: 991.98px) {
  #fc-calendar .fc-toolbar-title { font-size: clamp(18px, 2.8vw, 24px); }
  #fc-calendar .fc-button { padding: .4rem .75rem; }
}

/* Legend + mini range picker stack nicely under the calendar on small screens */
@media (max-width: 575.98px) {
  #availability .legend { text-align: center; margin-top: .5rem; width: 70%; }
  #availability .picker-row { 
    display: grid; grid-template-columns: 1fr; gap: .5rem;
  }
  #availability .form-control-sm { width: 100%; }
}

/* Mobile: arrows flanking month title (centered toolbar) */
@media (max-width: 575.98px) {
  #fc-calendar .fc-header-toolbar {
    justify-content: center;
    gap: .35rem;
    padding: .35rem .5rem;
  }
  #fc-calendar .fc-toolbar-title {
    font-size: clamp(16px, 4.6vw, 22px);
    margin: 0 .35rem;   /* space between arrows and title */
    line-height: 1.2;
  }
  #fc-calendar .fc-button {
    padding: .3rem .5rem;    /* smaller icon buttons */
    border-radius: 10px;
    min-width: auto;
  }
}

/* Mobile: keep ◀ Month ▶ on one line */
@media (max-width: 575.98px) {
  /* Center the only chunk on mobile */
  #fc-calendar .fc-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .5rem;
    gap: .35rem;
  }
  /* Make the (only) toolbar chunk a flex row */
  #fc-calendar .fc-header-toolbar .fc-toolbar-chunk {
    display: flex !important;        /* act like d-flex */
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .5rem;
    width: auto;
    flex: 0 1 auto;
  }
  /* Remove default h2 margins so it doesn't break the line */
  #fc-calendar .fc-header-toolbar .fc-toolbar-chunk > * { margin: 0; }

  /* Title sizing + no wrapping */
  #fc-calendar .fc-toolbar-title {
    font-size: clamp(16px, 4.8vw, 22px);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Compact arrow buttons */
  #fc-calendar .fc-button {
    padding: .35rem .6rem;
    border-radius: 10px;
    min-width: 2rem;
    flex: 0 0 auto;
  }
}


/*Footer CSS */
/* ===== Modern Footer ===== */
.site-footer {
  position: relative;
  margin-top: 3rem;
  padding: 2.5rem 0 1.25rem;
  background:
    radial-gradient(1200px 600px at 95% -10%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-top: 1px solid #eef2ff;
}
.site-footer .container { position: relative; z-index: 1; }

/* soft glow line at the top */
.footer-glow {
  position: absolute; inset: 0 0 auto 0; height: 8px;
  background: linear-gradient(90deg, rgba(107,78,255,.15), rgba(167,139,250,.25), rgba(60,200,143,.18));
  filter: blur(6px); opacity: .9;
}

/* brand row */
.footer-brand {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem;
}
.footer-brand .brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #f5f3ff; border: 1px solid #ede9fe;
  color: var(--brand); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}

/* link columns */
.footer-title {
  font-weight: 700; letter-spacing: .2px; margin-bottom: .5rem;
}
.footer-nav {
  list-style: none; margin: 0; padding: 0;
}
.footer-nav li { margin: .25rem 0; }
.footer-nav a {
  color: var(--dark); text-decoration: none;
  padding: .2rem 0; border-radius: 8px;
}
.footer-nav a:hover { color: var(--brand); background: rgba(107,78,255,.06); padding:5px; }

/* contact */
.footer-address { font-style: normal; color: var(--dark); }
.footer-address a { color: var(--brand); text-decoration: none; }
.footer-address a:hover { text-decoration: underline; }

/* social / icon buttons */
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid #eef2ff; background: #fff;
  color: var(--dark); box-shadow: 0 8px 18px rgba(2,6,23,.06);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover {
  transform: translateY(-2px);
  color: var(--brand);
  border-color: #e2e8f0;
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

/* bottom bar */
.footer-bottom {
  margin-top: 1.5rem; padding-top: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #eef2ff;
}
.footer-mini-nav {
  list-style: none; display: flex; gap: .75rem; margin: 0; padding: 0;
}
.footer-mini-nav a {
  color: var(--muted); text-decoration: none; font-size: .9rem;
}
.footer-mini-nav a:hover { color: var(--brand); }

/* back-to-top alignment on mobile */
@media (max-width: 575.98px) {
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* Built by credit */
.footer-bottom .built-by a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.footer-bottom .built-by a:hover {
  text-decoration: underline;
}



/* Two-column hero split */
.hero-split {
  /* keep spacing consistent with site */
}

/* Make images cover nicely inside Bootstrap ratio */
.object-cover { object-fit: cover; }

/* Slider card look */
.hero-media {
  overflow: hidden;
  border: 1px solid #eef2ff;
  background: #fff;
}

/* Tighter headline on smaller screens */
@media (max-width: 575.98px) {
  .hero .headline { font-size: clamp(28px, 6.5vw, 38px); line-height: 1.1; }
}

/* Remove old full-bleed overlay behavior for hero (since slider is in its own column now) */
.hero { background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%); border-radius: 1.25rem; }

/* Optional: subtle decorative glow behind the slider */
.hero-media::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 40%;
  background: radial-gradient(600px 220px at 20% 20%, rgba(167,139,250,0.16), transparent 60%);
  pointer-events: none;
}

/* Keep buttons stacked on xs, side-by-side on sm+  (already handled by flex classes) */