/*!
 * Mastercard-inspired design system
 * Warm cream canvas, extreme radii, orbit + trajectory, ink-black CTAs
 * Applied as an override layer on top of the Bootstrap theme (public layout only)
 * Reference: /DESIGN.md
 */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* Mastercard palette */
  --mc-canvas: #F3F0EE;
  --mc-lifted: #FCFBFA;
  --mc-white: #FFFFFF;
  --mc-bone: #F4F4F4;

  --mc-ink: #141413;
  --mc-charcoal: #262627;
  --mc-slate: #696969;
  --mc-granite: #555555;
  --mc-graphite: #565656;
  --mc-taupe: #D1CDC7;

  --mc-border: var(--mc-border);
  --mc-border-strong: var(--mc-border-strong);

  --mc-orange: #CF4500;
  --mc-orange-light: #F37338;
  --mc-clay: #9A3A0A;
  --mc-link: #3860BE;

  --mc-font: "Sofia Sans", Arial, sans-serif;

  --mc-radius-lg: 40px;
  --mc-radius-pill: 9999px;
  --mc-radius-20: 20px;
  --mc-radius-16: 16px;
  --mc-radius-12: 12px;

  --mc-shadow-deep: rgba(0, 0, 0, 0.08) 0px 24px 48px;
  --mc-shadow-soft: rgba(0, 0, 0, 0.06) 0px 12px 28px;

  /* Remap Bootstrap theme (light, cream) */
  --bs-primary: var(--mc-ink);
  --bs-primary-rgb: 20, 20, 19;
  --bs-secondary: var(--mc-orange);
  --bs-secondary-rgb: 207, 69, 0;
  --bs-body-color: var(--mc-charcoal);
  --bs-body-color-rgb: 38, 38, 39;
  --bs-body-bg: var(--mc-canvas);
  --bs-border-color: var(--mc-border);
  --bs-border-radius: 16px;
  --bs-border-radius-sm: 12px;
  --bs-border-radius-lg: 24px;
  --bs-border-radius-xl: 40px;
  --bs-success: #2E7D32;
  --bs-success-rgb: 46, 125, 50;
  --bs-danger: #B3261E;
  --bs-danger-rgb: 179, 38, 30;
  --bs-warning: var(--mc-orange-light);
  --bs-warning-rgb: 243, 115, 56;
  --bs-info: var(--mc-link);
  --bs-info-rgb: 56, 96, 190;
  --bs-dark: var(--mc-ink);
  --bs-dark-rgb: 20, 20, 19;
  --bs-light: var(--mc-lifted);
  --bs-light-rgb: 252, 251, 250;
  --bs-link-color: var(--mc-link);
  --bs-link-hover-color: #2C4E9B;
  --bs-focus-ring-color: rgba(243, 115, 56, 0.35);
  --bs-btn-border-radius: var(--mc-radius-20);
  --bs-btn-border-radius-sm: 16px;
  --bs-btn-border-radius-lg: var(--mc-radius-pill);
  --mc-primary-soft: #EFEBE8;
}

html {
  scroll-padding-top: 96px;
}

body {
  font-family: var(--mc-font);
  background-color: var(--mc-canvas);
  color: var(--mc-charcoal);
  font-weight: 450;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Typography — MarkForMC stand-in, medium 500 headlines, tight tracking
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-title, .navbar-brand {
  font-family: var(--mc-font);
  color: var(--mc-ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}

h1, .h1, .display-6 { font-size: 46px; line-height: 1.05; }
h2, .h2, .display-4 { font-size: 36px; line-height: 1.1; }
h3, .h3 { font-size: 26px; line-height: 1.2; }
h4, .h4 { font-size: 21px; line-height: 1.3; }
h5, .h5 { font-size: 18px; line-height: 1.4; }
h6, .h6 { font-size: 15px; line-height: 1.5; font-weight: 600; }

.lead { font-size: 19px; font-weight: 450; color: var(--mc-granite); }

a { color: var(--mc-link); }
a:hover { color: var(--mc-link); }

.text-primary { color: var(--mc-ink) !important; }
.text-secondary { color: var(--mc-granite) !important; }
.text-body { color: var(--mc-charcoal) !important; }
.text-muted { color: var(--mc-slate) !important; }
.text-accent { color: var(--mc-orange) !important; }
.text-success { color: var(--bs-success) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-warning { color: var(--mc-orange) !important; }
.text-info { color: var(--bs-info) !important; }

/* Eyebrow label — tiny accent dot + uppercase tracking */
.eyebrow, .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mc-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-clay);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
}
.eyebrow::before, .chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mc-orange);
}
.eyebrow:hover, .chip:hover {
  background: transparent;
  color: var(--mc-clay);
}

/* ============================================================
   Buttons / CTAs — ink black, 20px radius, pills in body
   ============================================================ */
.btn {
  border-radius: var(--mc-radius-20);
  padding: 12px 28px;
  min-height: 46px;
  font-family: var(--mc-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus, .btn:active:focus {
  box-shadow: 0 0 0 3px var(--mc-orange-light) !important;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background-color: var(--mc-ink);
  border: 1px solid var(--mc-ink);
  color: var(--mc-lifted);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:active:focus {
  background-color: #000000;
  border-color: #000000;
  color: var(--mc-lifted);
}

.btn-primary-soft, .btn-primary-soft:hover, .btn-primary-soft:focus {
  background-color: var(--mc-primary-soft);
  border: 1px solid transparent;
  color: var(--mc-ink);
}

.btn-outline-primary {
  background-color: var(--mc-lifted);
  border: 1px solid var(--mc-ink);
  color: var(--mc-ink);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--mc-ink);
  border-color: var(--mc-ink);
  color: var(--mc-lifted);
}

.btn-dark {
  background-color: var(--mc-ink);
  border: 1px solid var(--mc-ink);
  color: var(--mc-lifted);
}
.btn-dark:hover, .btn-dark:focus {
  background-color: #000000;
  border-color: #000000;
  color: var(--mc-lifted);
}

.btn-light {
  background-color: var(--mc-white);
  border: 1px solid var(--mc-border);
  color: var(--mc-ink);
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--mc-bone);
  border-color: var(--mc-border);
  color: var(--mc-ink);
}

.btn-outline-secondary, .btn-secondary {
  background-color: transparent;
  border: 1px solid var(--mc-ink);
  color: var(--mc-ink);
}
.btn-outline-secondary:hover, .btn-secondary:hover,
.btn-outline-secondary:focus, .btn-secondary:focus {
  background-color: var(--mc-ink);
  color: var(--mc-lifted);
  border-color: var(--mc-ink);
}

.btn-ghost, a.btn-ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--mc-slate);
}
.btn-ghost:hover, .btn-ghost:focus {
  background-color: var(--mc-bone);
  color: var(--mc-ink);
  border-color: transparent;
}

.btn-sm {
  min-height: 38px;
  padding: 7px 20px;
  font-size: 14px;
  border-radius: var(--mc-radius-pill);
}

.btn-lg {
  min-height: 54px;
  padding: 10px 36px;
  font-size: 17px;
  border-radius: var(--mc-radius-20);
}

.btn-round, .btn.btn-round {
  border-radius: 50%;
  padding: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-round.btn-primary, .btn-round.btn-dark {
  background-color: var(--mc-ink);
  border-color: var(--mc-ink);
  color: var(--mc-lifted);
}

.btn:disabled, .btn.disabled { opacity: 0.35; cursor: not-allowed; }

.btn-link, .btn-link:hover, .btn-link:focus {
  border-radius: 0;
  padding: 0;
  min-height: 0;
  color: var(--mc-ink);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  box-shadow: none;
}
.btn-link:hover { color: var(--mc-orange); }

/* ============================================================
   Cards — lifted cream paper, big radii, deep shadows
   ============================================================ */
.card {
  background-color: var(--mc-lifted);
  color: var(--mc-charcoal);
  border: 1px solid transparent;
  border-radius: var(--mc-radius-20);
  box-shadow: var(--mc-shadow-soft);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover { box-shadow: var(--mc-shadow-deep); }
.card.shadow { box-shadow: var(--mc-shadow-soft); }
.card.shadow:hover { box-shadow: var(--mc-shadow-deep); }

.card .card-title a { color: var(--mc-ink); text-decoration: none; }
.card .card-title a:hover { color: var(--mc-orange); text-decoration: none; }

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--mc-border);
  font-family: var(--mc-font);
  font-weight: 600;
  color: var(--mc-ink);
}
.card-footer {
  background-color: transparent;
  border-top: 1px solid transparent;
}

.card.feature-card {
  border-radius: var(--mc-radius-20);
  border: 1px solid var(--mc-border);
  box-shadow: var(--mc-shadow-soft);
}
.card.feature-card:hover { box-shadow: var(--mc-shadow-deep); }

.card.bg-dark, .bg-dark {
  background-color: var(--mc-ink);
  border-color: transparent;
}
.card.bg-dark .card-title,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3,
.card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6 {
  color: var(--mc-lifted);
}

/* ============================================================
   Badges & pills
   ============================================================ */
.badge, .badge.bg-primary, .badge.bg-dark {
  font-family: var(--mc-font);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border-radius: var(--mc-radius-pill);
  padding: 6px 14px;
}
.badge.bg-dark, .badge.bg-primary {
  background-color: var(--mc-ink) !important;
  color: var(--mc-lifted);
}
.badge.bg-primary-soft, .bg-primary-soft {
  background-color: var(--mc-primary-soft) !important;
  color: var(--mc-clay) !important;
}
.badge.bg-success, .bg-success-soft,
.badge.bg-info {
  border-radius: var(--mc-radius-pill);
}

/* ============================================================
   Forms — soft fields, rounded, focused outline orange
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--mc-radius-12);
  border: 1px solid var(--mc-border);
  background-color: var(--mc-lifted);
  color: var(--mc-charcoal);
  font-family: var(--mc-font);
  font-size: 15.5px;
  padding: 12px 16px;
  min-height: 48px;
}
.form-control::placeholder { color: var(--mc-taupe); }
.form-control:hover, .form-select:hover { border-color: var(--mc-border-strong); }
.form-control:focus, .form-select:focus {
  border: 2px solid var(--mc-orange-light);
  box-shadow: 0 0 0 4px rgba(243, 115, 56, 0.12) !important;
  color: var(--mc-charcoal);
  background-color: var(--mc-white);
  padding: 11px 15px;
}

.form-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--mc-granite);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}

/* Auth pages (sign-in / register): black input borders in light mode */
.auth-card .form-control,
.auth-card .form-select {
  border: 1px solid #000000;
}
.auth-card .form-control:hover,
.auth-card .form-select:hover {
  border-color: #000000;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border: 2px solid #000000;
}

.input-group-text {
  background-color: var(--mc-lifted);
  border: 1px solid var(--mc-border);
  color: var(--mc-ink);
  border-radius: var(--mc-radius-12);
}

.form-check-input:checked {
  background-color: var(--mc-ink);
  border-color: var(--mc-ink);
}

.form-control.is-invalid { border: 2px solid var(--bs-danger); }

/* Search card on home (advance filters) */
.bg-mode {
  background-color: var(--mc-lifted);
  color: var(--mc-charcoal);
}
.form-control-border {
  padding: 8px 10px;
  transition: background-color 0.2s ease;
  border-radius: var(--mc-radius-12);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert { border-radius: var(--mc-radius-16); border: 1px solid transparent; font-size: 15px; }
.alert-success { background-color: #EAF3EA; border-color: #CFE3CF; color: #2E7D32; }
.alert-danger { background-color: #FBECEA; border-color: #F3D4D1; color: #B3261E; }
.alert-warning { background-color: #FDF0E7; border-color: #F8DCC5; color: #9A3A0A; }
.alert-info { background-color: #E9EEF8; border-color: #C9D5EC; color: #2C4E9B; }

/* ============================================================
   Floating pill navigation
   ============================================================ */
.mc-nav-wrap {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1030;
  padding-inline: 20px;
  pointer-events: none;
}

.mc-nav {
  pointer-events: auto;
  max-width: 1180px;
  margin-inline: auto;
  background-color: rgba(252, 251, 250, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(20, 20, 19, 0.06);
  border-radius: var(--mc-radius-pill);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 16px 36px;
  padding: 10px 14px 10px 22px;
}

.mc-nav .navbar-brand { padding: 0; }
.mc-nav .navbar-brand img { height: 34px; width: auto; object-fit: contain; }

.mc-nav .navbar-toggler {
  background-color: var(--mc-primary-soft);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.mc-nav .navbar-collapse { flex-grow: 0; margin-inline: auto; }

.mc-nav .navbar-nav .nav-link {
  font-family: var(--mc-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--mc-charcoal);
  padding: 8px 18px;
  border-radius: var(--mc-radius-pill);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mc-nav .navbar-nav .nav-link:hover,
.mc-nav .navbar-nav .nav-link:focus {
  color: var(--mc-ink);
  background-color: var(--mc-primary-soft);
  text-decoration: none;
}
.mc-nav .navbar-nav .nav-link.active {
  color: var(--mc-ink);
  background-color: var(--mc-primary-soft);
}

.mc-nav .dropdown-menu {
  border-radius: var(--mc-radius-16);
  border: 1px solid var(--mc-border);
  box-shadow: var(--mc-shadow-soft);
  background-color: var(--mc-white);
}
.mc-nav .dropdown-item {
  color: var(--mc-charcoal);
  padding: 9px 16px;
  font-size: 15px;
  border-radius: var(--mc-radius-12);
}
.mc-nav .dropdown-item:hover, .mc-nav .dropdown-item:focus {
  background-color: var(--mc-primary-soft);
  color: var(--mc-ink);
}
.mc-nav .avatar-img, .mc-nav .avatar { border-radius: 50%; }

/* keep page content clear of the floating pill */
body { padding-top: 88px; }

@media (max-width: 1199.98px) {
  body { padding-top: 80px; }
  .mc-nav {
    border-radius: 40px;
    flex-wrap: wrap;
    align-items: center;
  }
  .mc-nav .navbar-collapse {
    width: 100%;
    background-color: var(--mc-lifted);
    border-radius: 24px;
    margin-top: 10px;
    padding: 10px;
  }
  .mc-nav .navbar-nav .nav-link { padding: 10px 16px; }
}

/* ============================================================
   Hero — editorial cream, circular portrait, orbit satelites
   ============================================================ */
.hero-promo, .ms-hero {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mc-charcoal);
}

.hero-promo .hero-title, .ms-hero .hero-title {
  font-family: var(--mc-font);
  font-weight: 500;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--mc-ink);
}
.hero-promo .lead, .ms-hero .lead { max-width: 560px; }

.hero-promo .btn, .ms-hero .btn {
  background-color: var(--mc-ink);
  border: 1px solid var(--mc-ink);
  color: var(--mc-lifted);
}

/* Circular watermarked portrait with orbit arc + satellite CTA */
.mc-stage {
  position: relative;
  padding-block: 30px;
}
.mc-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-font);
  font-weight: 500;
  font-size: clamp(90px, 12vw, 170px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(20, 20, 19, 0.055);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.mc-orbit { position: relative; width: 340px; max-width: 78vw; margin-inline: auto; }
.mc-orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 160px;
  max-width: 150vw;
  transform: translate(-50%, -50%) rotate(-14deg);
  border: 1.5px solid rgba(243, 115, 56, 0.5);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}
.mc-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 90px;
  transform: translate(-50%, -50%) rotate(10deg);
  border: 1px solid rgba(157, 58, 10, 0.25);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}
.mc-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--mc-lifted);
  box-shadow: var(--mc-shadow-deep);
  background: var(--mc-bone);
}
.mc-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(243, 240, 238, 0.9) 100%);
  pointer-events: none;
}
.mc-satellite {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mc-white);
  color: var(--mc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mc-shadow-soft);
  border: 1px solid var(--mc-border);
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  z-index: 2;
}
.mc-satellite i, .mc-satellite .bi { font-size: 16px; }
.mc-satellite:hover {
  background: var(--mc-ink);
  color: var(--mc-lifted);
  transform: translateY(-2px);
  text-decoration: none;
}
.mc-satellite-s1 { top: -4px; right: 6px; }
.mc-satellite-s2 { bottom: 12px; left: -10px; }

/* ============================================================
   Hostel cards on home — circular orbits over photos, ink CTAs
   ============================================================ */
.tiny-slider.rounded-2, .tiny-slider-inner, .tiny-slider-inner > div {
  border-radius: var(--mc-radius-16);
  overflow: hidden;
}
.card.p-2 .tiny-slider { border-radius: var(--mc-radius-16); }

/* round arrows on sliders */
.arrow-round .tns-controls button,
.arrow-round button[data-controls],
.tns-controls button {
  border-radius: 50%;
  border: 1px solid var(--mc-border);
  background-color: var(--mc-white);
  color: var(--mc-ink);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mc-shadow-soft);
}

/* section spacing for "#hotel-view" anchor under fixed nav */
#hotel-view { scroll-margin-top: 110px; }

/* ============================================================
   Pagination — pill links
   ============================================================ */
.pagination { gap: 6px; }
.pagination .page-link {
  border: 1px solid var(--mc-border);
  color: var(--mc-ink);
  border-radius: 50% !important;
  min-width: 42px;
  height: 42px;
  text-align: center;
  background-color: var(--mc-lifted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.pagination .page-item.active .page-link {
  background-color: var(--mc-ink);
  border-color: var(--mc-ink);
  color: var(--mc-lifted);
}

/* ============================================================
   Tables
   ============================================================ */
.table { color: var(--mc-charcoal); font-size: 15px; }
.table thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-slate);
  border-bottom: 1px solid var(--mc-border);
  background-color: var(--mc-canvas);
}
.table td { border-bottom: 1px solid var(--mc-border); }
.table-hover tbody tr:hover { background-color: var(--mc-primary-soft); }

/* ============================================================
   Page title band (breadcrumb) — cream, ink, no color block
   ============================================================ */
section.bg-primary.py-3 {
  background-color: var(--mc-canvas) !important;
  border-bottom: 1px solid var(--mc-border);
}
section.bg-primary.py-3 h1,
section.bg-primary.py-3 .text-white { color: var(--mc-ink) !important; }
section.bg-primary.py-3 .breadcrumb-item a.text-white { color: var(--mc-charcoal) !important; }
section.bg-primary.py-3 .breadcrumb-item.active.text-white { color: var(--mc-orange) !important; }

/* ============================================================
   Footer — dark warm ink, large conversational headline, 4 columns
   ============================================================ */
footer.footer-site {
  background-color: var(--mc-ink);
  color: rgba(243, 240, 238, 0.82);
  border-top: 0;
  border-radius: 40px 40px 0 0;
  margin-top: 72px;
}
.footer-site .mc-footer-headline {
  font-family: var(--mc-font);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--mc-lifted);
  max-width: 640px;
}
.footer-site h5, .footer-site h6,
.footer-site .mc-footer-headline {
  color: var(--mc-lifted);
}
.footer-site a {
  color: rgba(243, 240, 238, 0.82);
  text-decoration: none;
}
.footer-site a:hover { color: var(--mc-orange-light); text-decoration: none; }
.footer-site .nav-link { color: rgba(243, 240, 238, 0.82); }
.footer-site .nav-link:hover { color: var(--mc-orange-light); }
.footer-site hr { border-color: rgba(243, 240, 238, 0.14); }

/* Footer credit link keeps the lifted/cream base, hover matches the other footer links */
.footer-site a.mc-footer-credit {
  color: var(--mc-lifted);
}
.footer-site a.mc-footer-credit:hover {
  color: var(--mc-orange-light) !important;
}

.footer-site .btn-sm.bg-facebook,
.footer-site .btn-sm.bg-youtube,
.footer-site .btn-sm.bg-twitter,
.footer-site .btn-sm.bg-whatsapp {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-lifted);
  background-color: rgba(243, 240, 238, 0.12);
  border: 1px solid transparent;
}
.footer-site .btn-sm.bg-facebook:hover,
.footer-site .btn-sm.bg-youtube:hover,
.footer-site .btn-sm.bg-twitter:hover,
.footer-site .btn-sm.bg-whatsapp:hover {
  background-color: var(--mc-orange);
  color: var(--mc-lifted);
}

/* ============================================================
   Dashboard / admin sidebar — cream rail, ink pill active states
   ============================================================ */
.sidebar-docs {
  background-color: var(--mc-lifted);
  border-right: 1px solid var(--mc-border);
}

.sidebar-docs .nav-link {
  border-radius: var(--mc-radius-pill);
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mc-charcoal);
  padding: 10px 16px;
}
.sidebar-docs .nav-link:hover {
  background-color: var(--mc-primary-soft);
  color: var(--mc-ink);
}
.sidebar-docs .nav-link.bg-primary.text-white {
  background-color: var(--mc-ink) !important;
  color: var(--mc-lifted) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 14px;
}
.sidebar-docs .small.text-muted.text-uppercase {
  color: var(--mc-slate) !important;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* Dashboard topbar */
main > .bg-body.border-bottom.px-4 {
  background-color: var(--mc-lifted) !important;
  border-bottom-color: var(--mc-border) !important;
}
main > .bg-body.border-bottom.px-4 small.text-muted { color: var(--mc-slate) !important; }

/* Dashboard content band */
main > .bg-light.p-4, section.bg-light.p-4 { background-color: var(--mc-canvas) !important; }

/* Dashboard cards row */
[class*='bg-light'].rounded-3, .bg-light.rounded-4, .bg-light.rounded-3 {
  border-radius: var(--mc-radius-20) !important;
}

/* Console heading band used by some admin pages */
.pb-0.pt-5.mb-4 .h1, .pb-0.pt-5.mb-4 h1 { font-weight: 500; letter-spacing: -0.02em; }

/* ============================================================
   Maps, accordions, lightbox — keep GLightbox, restyle accents
   ============================================================ */
.hostel-map { border-radius: var(--mc-radius-20); overflow: hidden; }
.accordion-item {
  background-color: var(--mc-lifted);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-12) !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.accordion-button:not(.collapsed) {
  background-color: var(--mc-primary-soft);
  color: var(--mc-ink);
  box-shadow: none;
}

.gallery-overlay-inner {
  background-color: rgba(20, 20, 19, 0.92);
  border-radius: var(--mc-radius-pill);
}

.breadcrumb-dots .breadcrumb-item + .breadcrumb-item::before {
  color: var(--mc-slate);
}

/* Links inside nav lists etc. */
.nav-divider .nav-item { color: var(--mc-charcoal); font-size: 15px; }

/* Misc brand touches */
.spinner-grow.text-primary { color: var(--mc-ink) !important; }

/* Choice / flatpickr theming stays functional on cream */
.choices__inner, .flatpickr-input {
  border-radius: var(--mc-radius-12) !important;
  border-color: var(--mc-border) !important;
}

/* ============================================================
   Theme toggle — round soft pill (header + admin topbar)
   ============================================================ */
.mc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mc-border);
  background-color: var(--mc-lifted);
  color: var(--mc-ink);
  font-size: 17px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mc-theme-toggle:hover {
  background-color: var(--mc-primary-soft);
  color: var(--mc-ink);
  transform: translateY(-1px);
}

/* ============================================================
   Dark mode — warm near-black canvas, cream ink, ember accents
   ============================================================ */
[data-bs-theme="dark"] {
  --mc-canvas: #131210;
  --mc-lifted: #1D1B19;
  --mc-white: #242220;
  --mc-bone: #2A2824;

  --mc-ink: #F3F0EE;
  --mc-charcoal: #E7E3DE;
  --mc-slate: #A6A19A;
  --mc-granite: #D8D3CD;
  --mc-graphite: #C9C4BE;
  --mc-taupe: #8A857E;

  --mc-orange: #FF6B2C;
  --mc-orange-light: #FF8B55;
  --mc-clay: #FF9A6B;
  --mc-link: #9DB4F5;

  --mc-primary-soft: #2A2824;
  --mc-border: #3A352F;
  --mc-border-strong: #524C45;

  --mc-shadow-deep: rgba(0, 0, 0, 0.55) 0px 24px 48px;
  --mc-shadow-soft: rgba(0, 0, 0, 0.45) 0px 12px 28px;

  --bs-primary: var(--mc-ink);
  --bs-primary-rgb: 243, 240, 238;
  --bs-secondary: var(--mc-orange);
  --bs-secondary-rgb: 255, 107, 44;
  --bs-body-color: var(--mc-charcoal);
  --bs-body-color-rgb: 231, 227, 222;
  --bs-body-bg: var(--mc-canvas);
  --bs-body-bg-rgb: 19, 18, 16;
  --bs-border-color: var(--mc-border);
  --bs-light: var(--mc-lifted);
  --bs-light-rgb: 29, 27, 25;
  --bs-dark: var(--mc-ink);
  --bs-dark-rgb: 243, 240, 238;
  --bs-link-color: var(--mc-link);
  --bs-link-hover-color: #C3D1FA;
  --bs-warning: var(--mc-orange-light);
  --bs-warning-rgb: 255, 139, 85;
  --bs-success: #5CBE62;
  --bs-success-rgb: 92, 190, 98;
  --bs-danger: #FF6B64;
  --bs-danger-rgb: 255, 107, 100;
  --bs-info: var(--mc-link);
  --bs-info-rgb: 157, 180, 245;
  --bs-focus-ring-color: rgba(255, 139, 85, 0.35);

  --bs-emphasis-color: var(--mc-ink);
  --bs-emphasis-color-rgb: 243, 240, 238;
  --bs-secondary-color: var(--mc-slate);
  --bs-secondary-color-rgb: 166, 161, 154;
  --bs-tertiary-color: var(--mc-slate);
  --bs-tertiary-color-rgb: 166, 161, 154;
  --bs-badge-color: #131210;
  --bs-table-color: var(--mc-charcoal);
  --bs-table-color-rgb: 231, 227, 222;
  --bs-table-striped-color: var(--mc-charcoal);
  --bs-table-active-color: var(--mc-charcoal);
  --bs-table-hover-color: var(--mc-charcoal);
  --bs-table-striped-bg: rgba(243, 240, 238, 0.035);
  --bs-table-hover-bg: rgba(243, 240, 238, 0.055);
  --bs-table-active-bg: rgba(243, 240, 238, 0.06);
  --bs-table-border-color: var(--mc-border);
}

/* Float nav surface + invert brand mark for dark */
[data-bs-theme="dark"] .mc-nav {
  background-color: rgba(29, 27, 25, 0.85);
  border-color: rgba(243, 240, 238, 0.08);
}
[data-bs-theme="dark"] .mc-nav .navbar-brand img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
[data-bs-theme="dark"] .sidebar-docs .navbar-brand img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Watermark + portrait gradient tuned for dark */
[data-bs-theme="dark"] .mc-watermark { color: rgba(243, 240, 238, 0.06); }
[data-bs-theme="dark"] .mc-portrait::after {
  background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(19, 18, 16, 0.92) 100%);
}

/* Dark solid pills (rating / availability) stay legible */
[data-bs-theme="dark"] .badge.bg-dark.text-white {
  background-color: var(--mc-primary-soft) !important;
  color: var(--mc-charcoal) !important;
}

/* Footer stays near-black; headline forced cream */
[data-bs-theme="dark"] footer.footer-site { background-color: #0E0D0C; }
[data-bs-theme="dark"] .footer-site .mc-footer-headline,
[data-bs-theme="dark"] .footer-site h5,
[data-bs-theme="dark"] .footer-site h6,
[data-bs-theme="dark"] .footer-site .btn-sm.bg-facebook,
[data-bs-theme="dark"] .footer-site .btn-sm.bg-youtube,
[data-bs-theme="dark"] .footer-site .btn-sm.bg-twitter,
[data-bs-theme="dark"] .footer-site .btn-sm.bg-whatsapp {
  color: #F3F0EE;
}
/* Inline-styled footer link beats var(--mc-lifted) becoming dark-on-dark */
[data-bs-theme="dark"] footer.footer-site a {
  color: rgba(243, 240, 238, 0.82) !important;
}
[data-bs-theme="dark"] footer.footer-site a:hover {
  color: var(--mc-orange-light) !important;
}

/* Footer body copy stays cream-on-ink in both themes (template forces #374151) */
.footer-site p,
.footer-site .text-primary-hover {
  color: rgba(243, 240, 238, 0.82);
}

/* Status badges / warning-info labels stay dark-on-light-fill */
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .bg-info.text-dark,
[data-bs-theme="dark"] .bg-warning.bg-opacity-25.text-dark {
  color: #131210 !important;
}
/* Admin "UNLOCK ACCESS" badge: bg-primary = cream fill in dark, force dark text */
[data-bs-theme="dark"] .badge.bg-primary.text-white {
  color: #131210 !important;
}
/* Ink/cream buttons go white with dark text in dark mode (base hover flips bg to #000) */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active,
[data-bs-theme="dark"] .btn-primary:active:focus,
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-dark:hover,
[data-bs-theme="dark"] .btn-dark:focus,
[data-bs-theme="dark"] .btn-dark:active,
[data-bs-theme="dark"] .btn-dark:active:focus {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #131210;
}

/* Admin sidebar active pill — ember accent for dark contrast */
[data-bs-theme="dark"] .sidebar-docs .nav-link.bg-primary.text-white {
  background-color: var(--mc-orange) !important;
  color: #131210 !important;
  box-shadow: rgba(255, 107, 44, 0.25) 0px 6px 14px;
}

/* Alerts readable on dark */
[data-bs-theme="dark"] .alert-success { background-color: #13291A; border-color: #1F3D26; color: #8FD99A; }
[data-bs-theme="dark"] .alert-danger { background-color: #331613; border-color: #4E2019; color: #FF9A93; }
[data-bs-theme="dark"] .alert-warning { background-color: #301D10; border-color: #4A2D1A; color: #F3A270; }
[data-bs-theme="dark"] .alert-info { background-color: #141F35; border-color: #23334F; color: #AEC5EE; }