/* =========================================================
   FLOW HAPPENS — BOOKING / ENROLMENT FLOW STYLES
   Used by reserva.html (enrolment form, checkout, calendar)
   ========================================================= */

body{ background:#EDE7DC; padding-bottom:80px; }

/* Small bar to get back to the main site — not in the original
   mockup, added because this page needs to be reachable/leaveable
   on a real site. Purely navigational, no other change. */
.backbar{
  padding:20px 20px 0; display:flex; justify-content:space-between; align-items:center;
  max-width:520px; margin:0 auto;
}
.backbar a{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14px;
}

.tabs{
  position:sticky; top:0; z-index:10; background:#EDE7DC;
  padding:16px 20px; display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap; border-bottom:1px solid var(--line);
}
.tab{
  background:#fff; border:1px solid var(--line); border-radius:30px;
  padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; color:var(--graytext);
}
.tab.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.screen{ display:none; max-width:520px; margin:40px auto 0; padding:0 20px; }
.screen.active{ display:block; }

.card{ background:#fff; border-radius:20px; padding:40px 34px; border:1px solid var(--line); }
@media (max-width:480px){ .card{ padding:28px 20px; border-radius:16px; } }

.step{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--petrol); font-weight:600; margin-bottom:10px; text-align:center; }
.card h2{ font-size:26px; text-align:center; margin-bottom:8px; }
.card > p.lead{ text-align:center; color:var(--graytext); font-size:14.5px; margin-bottom:30px; }

.planbadge{
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin-bottom:26px; display:flex; justify-content:space-between; align-items:center;
}
.planbadge .name{ font-weight:700; font-size:15px; }
.planbadge .price{ font-weight:700; color:var(--petrol); }
.planbadge .note{ font-size:12px; color:var(--graytext); }

label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; margin-top:18px; }
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:'Inter',sans-serif; font-size:14.5px; background:var(--cream);
}
textarea{ resize:vertical; min-height:70px; }

.langtoggle{ display:flex; gap:10px; margin-top:6px; }
.langtoggle button{
  flex:1; padding:10px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--cream); font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
}
.langtoggle button.sel{ background:var(--petrol); color:var(--cream); border-color:var(--petrol); }

.checkrow{ display:flex; align-items:flex-start; gap:10px; margin-top:24px; font-size:13px; color:#4a463f; }
.checkrow input{ margin-top:3px; }

.screen .btn, .calcard .btn{ display:block; width:100%; text-align:center; margin-top:26px; padding:15px; font-size:15px; }

.summary{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:26px; }
.summary .row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.summary .row.total{ border-top:1px solid var(--line); margin-top:10px; padding-top:12px; font-weight:700; font-size:16px; }

.cardfields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fullwidth{ grid-column:1/-1; }
.lockrow{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--graytext); margin-top:18px; justify-content:center; }

.form-error{
  margin-top:18px; padding:12px 14px; border-radius:10px;
  background:#fdf1ee; border:1px solid #eac9bf; color:#8a3d2c;
  font-size:13.5px; text-align:center;
}

/* -------------------- CALENDAR -------------------- */
.calcard{ background:#fff; border-radius:20px; overflow:hidden; border:1px solid var(--line); max-width:520px; }
.calhead{ background:var(--petrol); color:var(--cream); padding:28px 30px; text-align:center; }
.calhead h2{ font-size:22px; margin-bottom:6px; }
.calhead p{ font-size:13.5px; color:rgba(250,246,239,0.8); margin:0; }

.formattoggle{ display:flex; gap:10px; padding:20px 30px 0; }
.formattoggle button{
  flex:1; padding:12px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--cream); font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
}
.formattoggle button.sel{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.monthrow{ display:flex; justify-content:space-between; align-items:center; padding:20px 30px 6px; font-weight:600; font-size:15px; }
.daysgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:6px 30px 20px; }
.daysgrid .dlabel{ font-size:11px; color:var(--graytext); text-align:center; font-weight:600; }
.daysgrid .d{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13.5px; cursor:pointer; color:#4a463f; }
.daysgrid .d.avail{ background:var(--cream); }
.daysgrid .d.sel{ background:var(--terracotta); color:var(--ink); font-weight:700; }
.daysgrid .d.off{ color:#ccc4b4; }

.slots{ padding:6px 30px 30px; border-top:1px solid var(--line); }
.slots h4{ font-size:13px; color:var(--graytext); margin:18px 0 12px; font-weight:600; }
.slotgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slotgrid button{ padding:10px 6px; border-radius:8px; border:1.5px solid var(--line); background:var(--cream); font-size:13px; font-family:'Inter',sans-serif; cursor:pointer; }
.slotgrid button.sel{ background:var(--petrol); color:var(--cream); border-color:var(--petrol); }
.calfooter{ padding:0 30px 30px; }

/* -------------------- CALENDLY EMBED -------------------- */
/* The calendar screen needs more width than the 520px used by the
   form/checkout screens, so it gets its own max-width via this
   modifier class (added only to #screen-calendar in the HTML). */
.screen-calendar-wide{ max-width:1100px; }
.screen-calendar-wide .calcard{ max-width:1100px; }

.calendly-embed-wrap{
  width:100%;
  height:clamp(600px, 78vh, 760px);
  border-radius:0 0 20px 20px;
  overflow:hidden;
}
.calendly-inline-widget iframe{ width:100%; height:100%; border:none; }

@media (max-width:640px){
  .calendly-embed-wrap{ height:820px; }
}

@media (max-width:480px){
  .calhead{ padding:22px 20px; }
  .formattoggle{ padding:16px 20px 0; }
  .monthrow{ padding:16px 20px 6px; }
  .daysgrid{ padding:6px 20px 16px; }
  .slots, .calfooter{ padding-left:20px; padding-right:20px; }
  .slotgrid{ grid-template-columns:repeat(2,1fr); }
}