/* Trip.com Lander - bright + cheerful, built for /trip/ folder */

:root{
  --ink: #0f172a;
  --muted: #475569;
  --soft: #f7fafc;
  --border: rgba(15, 23, 42, .12);
  --primary: #0d6efd;
}

html, body{
  background: #ffffff;
  color: var(--ink);
}

.bg-soft{
  background: var(--soft);
}

/* HERO */
.hero{
  position: relative;
  background: url("../img/hero.jpg") center/cover no-repeat;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  /* ✅ 25% dim: black overlay at 0.25 */
  background: rgba(0,0,0,.25);
}

.hero .container{
  z-index: 2;
}

/* Hero card */
.hero-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
}

/* Pills */
.pill{
  display:inline-block;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: .9rem;
}

/* Feature cards */
.feature{
  border-radius: 18px;
}

.icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: #eef6ff;
  font-size: 1.2rem;
}

/* Steps */
.step-num{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #eef6ff;
  color: #0b5ed7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

/* Callout */
.callout{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.mini{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .8rem .9rem;
  background: #fff;
  color: var(--muted);
}

/* Check marks */
.check{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #eaf7ee;
  color: #1a7f37;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  margin-top: 2px;
}

/* Quotes */
.quote{
  border-radius: 18px;
}

.stars{
  letter-spacing: 1px;
}

/* Better typography defaults */
.text-muted{ color: var(--muted) !important; }
.text-dark-emphasis{ color: rgba(15,23,42,.88) !important; }

.navbar .nav-link{
  color: rgba(15,23,42,.75);
}
.navbar .nav-link:hover{
  color: rgba(15,23,42,.95);
}

/* Buttons */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-outline-dark{
  border-color: rgba(15,23,42,.28);
}

/* Accordion */
.accordion{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.accordion-button{
  font-weight: 700;
}