/* =========================================================
   BRAND (C: “in between” forest green)
   ========================================================= */
:root{
  --brand: #1f7a4a;        /* forest green (mid) */
  --brand-hover: #17613b;  /* darker hover */
  --brand-soft: #e7f6ee;   /* pale green bg */
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: var(--brand);
  transition: background 150ms ease;
}
.btn-brand:hover{ background: var(--brand-hover); }

.btn-brand--small{ padding: 0.5rem 0.85rem; font-size: 0.85rem; }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  background: #fff;
}
.btn-outline:hover{ background: #f8fafc; }

.btn-nav{
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  font-size: 0.875rem;
  background: #fff;
}
.btn-nav:hover{ background: #f8fafc; }

/* =========================================================
   SAVE BANNER
   ========================================================= */
.save-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  border: 1px solid #dbeafe00; /* keeps it subtle */
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(0deg, #ffffff, var(--brand-soft));
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

/* =========================================================
   PRICING CARDS
   ========================================================= */
.price-card{
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
}

/* =========================================================
   CALENDAR STYLES
   ========================================================= */
.day-cell{
  position: relative;
  height: 2.5rem;               /* h-10 */
  width: 100%;
  border-radius: 0.75rem;       /* rounded-xl */
  border: 1px solid #e2e8f0;    /* slate-200 */
  background: #fff;
  color: #0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  transition: background 120ms ease;
}
.day-cell:hover{ background: #f8fafc; }

.day-in-range{
  background: #f1f5f9 !important; /* slate-100 */
}

.day-range-edge{
  background: var(--brand) !important;
  color: #fff !important;
}

.day-booked{
  background: #f1f5f9 !important;
  color: #94a3b8 !important; /* slate-400 */
}
.day-disabled{
  cursor: not-allowed;
  opacity: 0.9;
}
.day-dot{
  position:absolute;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  height: 0.35rem;
  width: 0.35rem;
  border-radius: 999px;
  background: #cbd5e1;
}

/* =========================================================
   MAP (APPROXIMATE, AIRBNB-STYLE PRIVACY)
   ========================================================= */
.map-shell{
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;        /* rounded-3xl */
  border: 1px solid #e2e8f0;    /* slate-200 */
  background: #f1f5f9;          /* slate-100 */
  height: 380px;
}

.map-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Vignette fade */
.map-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0.35) 75%,
      rgba(255,255,255,0.75) 100%);
  mix-blend-mode: screen;
}

/* Privacy ring: large circle + house icon */
.map-privacy-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.16); /* soft dark overlay */
  box-shadow: 0 0 0 9999px rgba(255,255,255,0); /* noop, just future-proof */
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-house{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #0f172a; /* slate-900 */
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 25px rgba(15,23,42,0.20);
  opacity: 0.95;
}

/* Modal open: prevent background scroll */
body.modal-open {
  overflow: hidden;
}