/* -----------------------------------------
   Fonts
----------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');


/* -----------------------------------------
   Root Variables & Bootstrap Overrides
----------------------------------------- */
:root {
  --bs-primary: #0269ac !important;
  --bs-warning: #ffcc00 !important;
  --bs-success: #00a676 !important;
  --bs-danger: #d72638 !important;

  --fs-body: 14px;
  --fs-title: 16px;
  --fs-price: 16px;
  --fs-meta: 12px;

  transition: background-color 0.5s ease, color 0.5s ease;
}




.bottom-bar {
  /* fallback for old iOS */
  padding-bottom: calc(0.01rem + constant(safe-area-inset-bottom)) !important;
  /* modern syntax */
  padding-bottom: calc(0.01rem + env(safe-area-inset-bottom)) !important;
}



/* ≥576px (SM and up) — use fluid clamp() */
@media (min-width: 576px) {
  :root {
    --fs-body: clamp(15px, 1.1vw, 16px) !important;
    --fs-title: clamp(17px, 1.4vw, 20px) !important;
    --fs-price: clamp(16px, 1.3vw, 18px) !important;
    --fs-meta: clamp(13px, 1vw, 14px) !important;
  }
}



[data-bs-theme="dark"] {
  --bs-primary: #045286 !important;
  --bs-warning: #d4a017 !important;
  --bs-success: #007a5e !important;
  --bs-danger: #a71d2a !important;
  /* --bs-body-bg: #0C1D32 !important;
     --bs-body-bg-rgb: 12, 29, 50 !important;
     --bs-light-bg-subtle: #1A2B3F !important; */
}

[data-bs-theme="light"] {
  --bs-primary: #0269ac !important;
  --bs-warning: #ffcc00 !important;
  --bs-success: #00a676 !important;
  --bs-danger: #d72638 !important;
  /* --bs-body-bg: #FFFBFC !important; */
}

/* -----------------------------------------
   Base HTML & Body
----------------------------------------- */
html {
  font-size: 100%;
  /* Keep browser defaults */
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: #ffffff !important;
  color: #333333 !important;
}

/* -----------------------------------------
   Typography
----------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

.curly-title {
  font-family: "Macondo", cursive;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.3rem;
}


a,
.nav-link,
button,
input,
select,
textarea {
  font-family: inherit !important;
  font-weight: 500;
  letter-spacing: 0;
}

.text-dark {
  color: #333333 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

/* Letter-spacing utilities */
.ls-1 {
  letter-spacing: .05rem;
}

.ls-2 {
  letter-spacing: .1rem;
}

.ls-3 {
  letter-spacing: .2rem;
}

.ls-n1 {
  letter-spacing: -.05rem;
}

/* -----------------------------------------
   Airbnb-style Utility Text Classes
----------------------------------------- */
.text-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.text-subtle {
  font-size: var(--fs-meta);
  color: #6b7280;
  letter-spacing: 0.01em;
}

.text-price {
  font-size: var(--fs-price);
  font-weight: 600;
}

.text-night {
  font-size: var(--fs-meta);
  color: #4b5563;
}

.text-strike {
  text-decoration: line-through;
  color: #6b7280;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -----------------------------------------
   Bootstrap Custom Colors / Overrides
----------------------------------------- */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.bg-primary-subtle-2 {
  background-color: #e8f0fc !important;
}

.bg-primary-subtle-3 {
  background-color: #fafcff !important;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}


/* -----------------------------------------
   Layout
----------------------------------------- */
#header_layout {
  width: 100%;
  height: 2vh;
  background-image: url('/img/header-layout.png');
  background-repeat: repeat-x;
  background-size: contain;
}

.hero {
  width: 100%;
  height: 75vh;
  /* background-size: cover; */
}

.hero-title,
.hero-description {
  text-shadow: 3px 2px 18px rgba(0, 0, 0, 1);
}

.main {
  flex: 1;
}


/* Loader */
#appLoader {
  display: none
}

body.is-loading #appLoader {
  display: flex
}