/* booking/styles.css */

/* ===== Design tokens (match your brand) ===== */
:root{
  --brand: #00CDAC;
  --ink: #1e1e1e;
  --ink-muted: #5a5a5a;
  --brand-strong: color-mix(in srgb, var(--brand) 85%, black);
  --bg-soft: color-mix(in srgb, var(--brand) 6%, white);
}

html, body{ height: 100%; }
body{
  margin: 0;
  font-family: "Raleway", sans-serif;
  line-height: 1.8;
  color: var(--ink);
  background: #f3fbf9;
  background: var(--bg-soft);
}

/* ===== Nav ===== */
.nav-brand{
  background-color: var(--brand);
  color: #fff;
}
.nav-link{ color: #fff !important; }
.w3-bar .w3-button{ padding: 16px; }

/* ===== Layout ===== */
.page{
  padding-top: 80px; /* navbar offset */
  padding-left: 16px;
  padding-right: 16px;
}

.hero{ padding: 18px 0 8px; }
.hero-card{
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.brand-heading{ color: var(--brand-strong); }
.hero-title{
  margin: 0 0 6px;
  font-weight: 800;
}
.hero-subtitle{
  margin: 0 0 16px;
  color: var(--ink-muted);
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.brand-btn{
  background-color: var(--brand);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 16px;
}
.brand-btn:hover{ filter: brightness(0.95); }

.status{ margin: 6px 0 0; }

.tips{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px){
  .tips{ grid-template-columns: 1fr; }
}
.tip{
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.05);
}
.tip-title{ font-weight: 800; margin-bottom: 4px; }
.tip-body{ color: var(--ink-muted); font-size: 14px; }

.section{ padding: 14px 0 0; }
.card{
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.section-title{ margin: 0; font-weight: 800; }
.muted{ color: var(--ink-muted); }

/* Embed container */
.embed-wrap{
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
iframe{
  width: 100%;
  height: 760px;
  border: 0;
}
@media (max-width: 700px){
  iframe{ height: 860px; }
}

/* Footer */
.footer{
  text-align: center;
  padding: 24px 10px 34px;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.footer p{ margin: 4px 0; }