:root{
  --ink:#0d4458; --dark:#082c39; --accent:#3498db; --teal:#1f6f8b;
  --white:#fff; --line:#e6ecef; --muted:#7a8791;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#2d3940; line-height:1.5;
  background:linear-gradient(160deg,#0d4458 0%,#082c39 100%); background-attachment:fixed;
  min-height:100vh;
}
.wrap{max-width:460px;margin:0 auto;padding:0 16px 40px}

/* Header */
.topbar{
  max-width:460px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:20px 16px 10px;
}
.topbar-logo{height:40px;width:auto}
.topbar-name{color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;letter-spacing:.3px}
.page-title{
  color:#fff;text-align:center;text-transform:uppercase;letter-spacing:2px;
  font-weight:400;font-size:1.35rem;line-height:1.25;margin:14px 0 22px;
}
.page-title strong{display:block;font-weight:800;font-size:1.75rem;letter-spacing:1px}

/* Cards */
.card{background:var(--white);border-radius:12px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* Calendar */
.calendar-card{padding:18px 16px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month{font-weight:700;color:var(--ink);font-size:1.05rem}
.cal-nav{
  border:none;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;
  width:40px;height:40px;border-radius:50%;cursor:pointer
}
.cal-nav:hover{background:#eef3f6}
.cal-nav:disabled{color:#cdd6db;cursor:default;background:transparent}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:var(--muted);
  font-size:.78rem;font-weight:600;margin-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{
  aspect-ratio:1;border:none;background:transparent;border-radius:8px;cursor:pointer;
  font-size:.95rem;color:#334;display:flex;align-items:center;justify-content:center;
}
.cal-day:hover:not(:disabled):not(.is-selected){background:#eef3f6}
.cal-day:disabled{color:#cfd8dd;cursor:default}
.cal-day.is-empty{visibility:hidden}
.cal-day.is-selected{background:var(--accent);color:#fff;font-weight:700}
.cal-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 2px var(--accent)}

/* Slots */
.slots-card{padding:16px}
.slots-title{color:var(--ink);font-size:1rem;text-align:center;margin-bottom:12px;font-weight:600}
.slots{display:flex;flex-direction:column;gap:10px}
.slot{
  border:1px solid var(--line);background:var(--white);border-radius:8px;
  padding:14px;text-align:center;font-size:1rem;color:var(--ink);cursor:pointer;
  transition:.15s;font-weight:600
}
.slot:hover{border-color:var(--accent);background:#f4f9fc}
.slots-empty{color:var(--muted);text-align:center;padding:10px 0;font-size:.95rem}
.slots-loading{color:var(--muted);text-align:center;padding:10px 0}

/* Host card */
.host-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--ink)}
.host-photo{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid rgba(255,255,255,.9)}
.host-initials{display:flex;align-items:center;justify-content:center;background:var(--accent);
  color:#fff;font-weight:700;font-size:1.4rem}
.host-name{color:#fff;font-weight:700;font-size:1.05rem}
.host-title{color:#bcd3dd;font-size:.85rem;margin-bottom:4px}
.host-phone{color:var(--accent);font-size:.95rem;text-decoration:none}
.host-phone:hover{text-decoration:underline}

/* Form */
.form-card{padding:20px 18px}
.form-when{color:var(--ink);font-size:1.15rem;margin:6px 0 16px;text-align:center}
.link-back{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.9rem;padding:0}
.link-back:hover{text-decoration:underline}
#book-form label{display:block;color:var(--ink);font-size:.85rem;font-weight:600;margin-bottom:12px}
.req{color:#d9534f;margin-left:2px}
#book-form input{
  width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:1rem;font-family:inherit;color:#2d3940
}
#book-form input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.row{display:flex;gap:12px}
.row label{flex:1}
.form-error{background:#fdecea;color:#a3231a;border-radius:8px;padding:10px 12px;font-size:.9rem;margin-bottom:12px}
.book-btn{
  width:100%;margin-top:4px;padding:15px;border:none;border-radius:8px;cursor:pointer;
  background:var(--accent);color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.5px;transition:.15s
}
.book-btn:hover{filter:brightness(1.08)}
.book-btn:disabled{opacity:.6;cursor:default}

/* Success */
.success-card{padding:34px 22px;text-align:center}
.success-check{
  width:66px;height:66px;border-radius:50%;background:#eafaf1;color:#2ea86a;
  font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px
}
.success-card h2{color:var(--ink);margin-bottom:10px}
.success-when{font-weight:700;color:var(--accent);font-size:1.1rem;margin-bottom:10px}
.success-card p{color:#4a5761;margin-bottom:14px}

.footpaid{text-align:center;color:rgba(255,255,255,.55);font-size:.8rem;padding:6px 0 24px}

/* --- Phone: compact so the calendar + Paola's card fit without scrolling --- */
@media (max-width:640px){
  .wrap{padding:0 12px 14px}
  .topbar{padding:10px 12px 4px;gap:10px}
  .topbar-logo{height:32px}
  .topbar-name{font-size:1.2rem}
  .page-title{font-size:.95rem;letter-spacing:1.5px;margin:6px 0 10px;line-height:1.2}
  .page-title strong{font-size:1.3rem;letter-spacing:.5px}
  .card{margin-bottom:9px;border-radius:10px}
  .calendar-card{padding:10px}
  .cal-head{margin-bottom:4px}
  .cal-month{font-size:.98rem}
  .cal-nav{width:32px;height:32px;font-size:1.35rem}
  .cal-dow{font-size:.7rem;margin-bottom:2px}
  .cal-grid{gap:2px}
  .cal-day{aspect-ratio:auto;height:36px;font-size:.88rem;border-radius:6px}
  .slots-card{padding:10px 12px}
  .slots-title{font-size:.92rem;margin-bottom:8px}
  .slot{padding:12px}
  .host-card{padding:11px 12px;gap:11px}
  .host-photo{width:50px;height:50px;border-width:2px}
  .host-initials{font-size:1.15rem}
  .host-name{font-size:1rem}
  .host-title{font-size:.8rem}
  .footpaid{padding:4px 0 10px;font-size:.75rem}
}