/* Bookiolab — Booking UI (Front-end)
   Modern SaaS pastel layout with left stepper + right content (inspired by the provided mockup) */

.bookiolab{
  --bl-cream:#f6f1ea;
  --bl-surface:#e6dfdd;
  --bl-card:#ffffff;
  --bl-text:#1f2430;
  --bl-muted:rgba(31,36,48,.62);
  --bl-border:rgba(31,36,48,.12);
  --bl-shadow:0 18px 48px rgba(31,36,48,.10);
  --bl-radius:28px;
  --bl-radius-md:20px;
  --bl-radius-sm:16px;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--bl-text);
}

.bookiolab .bl-f-wrap{max-width:1180px;margin:22px auto;padding:0 14px;}
.bookiolab .bl-shell{
  background: linear-gradient(0deg, rgba(31,36,48,.04), rgba(31,36,48,.04)), var(--bl-cream);
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  box-shadow:var(--bl-shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:340px 1fr;
  min-height:640px;
}

@media (max-width:900px){
  .bookiolab .bl-shell{grid-template-columns:1fr; min-height:auto;}
}

.bookiolab .bl-side{
  background: linear-gradient(0deg, rgba(31,36,48,.28), rgba(31,36,48,.28)), var(--bl-secondary);
  padding:22px 18px 18px;
  color:rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bookiolab .bl-side-brand{
  display:flex;align-items:center;justify-content:flex-start;
  padding:6px 8px;
}

.bookiolab .bl-side-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-weight:900;letter-spacing:.2px;
}

.bookiolab .bl-side-steps{display:flex;flex-direction:column;gap:14px; padding:4px 6px 0;}
.bookiolab .bl-side-item{
  appearance:none;border:0;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:14px 14px;
  display:flex;align-items:center;gap:12px;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.bookiolab .bl-side-item:hover{background:rgba(255,255,255,.11);}
.bookiolab .bl-side-item[disabled]{opacity:.55;cursor:not-allowed;}

.bookiolab .bl-ico{
  width:38px;height:38px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
}
.bookiolab .bl-side-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.bookiolab .bl-side-title{font-weight:900;letter-spacing:.2px;font-size:16px;line-height:1.1;}
.bookiolab .bl-side-sub{font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.bookiolab .bl-side-state{
  width:26px;height:26px;border-radius:999px;
  border:4px solid rgba(255,255,255,.38);
  background:transparent;
  flex:0 0 auto;
}
.bookiolab .bl-side-item.is-done .bl-side-state{
  border:none;
  background:var(--bl-primary);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  position:relative;
}
.bookiolab .bl-side-item.is-done .bl-side-state:after{
  content:"";
  position:absolute;inset:0;
  background:rgba(255,255,255,.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4-10 10Z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4-10 10Z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.bookiolab .bl-side-item.is-active .bl-side-state{
  border-color:var(--bl-primary);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
.bookiolab .bl-side-item.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.20);}

.bookiolab .bl-side-collapse{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  background:transparent;border:0;
  color:rgba(255,255,255,.90);
  padding:12px 12px;
  border-radius:18px;
  cursor:pointer;
}
.bookiolab .bl-side-collapse:hover{background:rgba(255,255,255,.10);}
.bookiolab .bl-collapse-arrow{opacity:.9;}

@media (max-width:900px){
  .bookiolab .bl-side{padding:14px 14px 10px;}
  .bookiolab .bl-side-steps{display:none;}
  .bookiolab .bl-shell.is-side-open .bl-side-steps{display:flex;}
}

/* Main */
.bookiolab .bl-main{padding:20px 22px 22px;}
@media (max-width:900px){.bookiolab .bl-main{padding:16px 14px 16px;}}

.bookiolab .bl-main-head{
  display:flex;align-items:center;gap:12px;
  padding:6px 2px 14px;
  border-bottom:1px solid rgba(31,36,48,.10);
}
.bookiolab .bl-backbtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(31,36,48,.14);
  background:rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.bookiolab .bl-backbtn:hover{background:rgba(255,255,255,.45);}
.bookiolab .bl-main-title{
  font-weight:900;
  font-size:28px;
  letter-spacing:.2px;
}

.bookiolab .bl-main-body{padding-top:16px;}
.bookiolab .bl-panel{
  background:rgba(255,255,255,.32);
  border:1px solid rgba(31,36,48,.10);
  border-radius:var(--bl-radius-md);
  padding:18px;
}
@media (max-width:560px){.bookiolab .bl-panel{padding:14px;}}

.bookiolab .bl-section-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:14px;
  color:rgba(31,36,48,.92);
}

.bookiolab .bl-step{display:none;}
.bookiolab .bl-step.is-active{display:block;}

.bookiolab .bl-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.bookiolab .bl-lbl{font-size:12px;font-weight:900;letter-spacing:.25px;color:rgba(31,36,48,.72);text-transform:none;}
.bookiolab .bl-inp,.bookiolab .bl-sel{
  background:#fff;
  border:1px solid rgba(31,36,48,.12);
  border-radius:18px;
  padding:12px 14px;
  outline:none;
}
.bookiolab .bl-inp:focus,.bookiolab .bl-sel:focus{
  border-color:rgba(124,92,255,.35);
  box-shadow:0 0 0 3px rgba(124,92,255,.12);
}
.bookiolab .bl-ta{min-height:96px;resize:vertical;}

.bookiolab .bl-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:680px){.bookiolab .bl-row2{grid-template-columns:1fr;}}

.bookiolab .bl-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.bookiolab .bl-actions-split{justify-content:space-between;gap:10px;flex-wrap:wrap;}

.bookiolab .bl-btn{
  border:none;border-radius:18px;
  padding:12px 18px;
  font-weight:900;
  background:var(--bl-primary);
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  cursor:pointer;
}
.bookiolab .bl-btn:hover{opacity:.96;}
.bookiolab .bl-btn:disabled{opacity:.65;cursor:not-allowed;}
.bookiolab .bl-btn-ghost{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(31,36,48,.12);
  color:rgba(31,36,48,.86);
  box-shadow:none;
}
.bookiolab .bl-btn-ghost:hover{background:rgba(255,255,255,.70);}

/* Payment screen (step 4) */
.bookiolab .bl-pay{max-width:640px;}
.bookiolab .bl-pay-title{font-weight:900;font-size:18px;margin-bottom:12px;}
.bookiolab .bl-pay-box{
  background:rgba(255,255,255,.70);
  border:1px solid rgba(31,36,48,.12);
  border-radius:18px;
  padding:14px;
}
.bookiolab .bl-pay-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(31,36,48,.10);}
.bookiolab .bl-pay-row:last-of-type{border-bottom:none;}
.bookiolab .bl-pay-row-sub{opacity:.9;}
.bookiolab .bl-pay-left{min-width:0;}
.bookiolab .bl-pay-label{font-size:12px;font-weight:900;color:rgba(31,36,48,.64);letter-spacing:.22px;}
.bookiolab .bl-pay-value{font-size:16px;color:rgba(31,36,48,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:440px;}
@media (max-width:560px){.bookiolab .bl-pay-value{max-width:240px;}}
.bookiolab .bl-pay-right{font-weight:900;font-size:18px;color:rgba(31,36,48,.88);}
.bookiolab .bl-pay-coupon{margin-top:14px;}
.bookiolab .bl-pay-coupon-lbl{display:block;font-weight:900;color:rgba(31,36,48,.78);margin-bottom:8px;}
.bookiolab .bl-pay-coupon-row{display:flex;gap:10px;align-items:center;}
.bookiolab .bl-pay-coupon-row .bl-inp{flex:1;}
.bookiolab .bl-pay-total{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;
  border-top:1px solid rgba(31,36,48,.10);
}
.bookiolab .bl-pay-total-lbl{font-size:18px;font-weight:900;color:rgba(31,36,48,.88);}
.bookiolab .bl-pay-total-val{font-size:22px;font-weight:900;color:var(--bl-primary);}
.bookiolab .bl-pay-note{
  margin-top:14px;
  text-align:center;
  color:rgba(31,36,48,.55);
  font-weight:700;
}

/* Final card */
.bookiolab .bl-final-card{
  background:rgba(255,255,255,.70);
  border:1px solid rgba(31,36,48,.12);
  border-radius:18px;
  padding:14px;
  max-width:640px;
}
.bookiolab .bl-final-title{font-weight:900;font-size:16px;margin-bottom:6px;}
.bookiolab .bl-final-sub{color:rgba(31,36,48,.64);font-size:13px;margin-bottom:12px;}
.bookiolab .bl-final-actions{display:flex;gap:10px;flex-wrap:wrap;}
.bookiolab .bl-help{margin-top:8px;font-size:12px;color:rgba(31,36,48,.62);}


/* Step 2 — Date tiles + time grid (inspired by the last screenshot) */

.bookiolab .bl-step2{padding-top:6px;}
.bookiolab .bl-cap{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:12px;
  color:rgba(31,36,48,.55);
  margin:18px 0 12px;
}
.bookiolab .bl-cap.bl-mt{margin-top:26px;}
.bookiolab .bl-date-strip{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.bookiolab .bl-date-tile{
  flex:0 0 auto;
  width:92px;
  height:92px;
  border-radius:22px;
  border:1px solid rgba(31,36,48,.12);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 26px rgba(31,36,48,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  scroll-snap-align:start;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.bookiolab .bl-date-tile:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(31,36,48,.08);}
.bookiolab .bl-date-dow{
  font-weight:900;
  font-size:14px;
  color:rgba(31,36,48,.70);
}
.bookiolab .bl-date-num{
  font-weight:900;
  font-size:32px;
  line-height:1;
  color:rgba(31,36,48,.92);
}
.bookiolab .bl-date-tile.is-active{
  border:2px solid var(--bl-primary);
  background:rgba(60,67,237,.08);
}
.bookiolab .bl-date-tile.is-active .bl-date-dow,
.bookiolab .bl-date-tile.is-active .bl-date-num{color:var(--bl-primary);}
.bookiolab .bl-date-more{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.bookiolab .bl-link{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(31,36,48,.68);
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
  padding:6px 4px;
}
.bookiolab .bl-date-native{max-width:220px; display:none;}
.bookiolab .bl-date-more.is-open .bl-date-native{display:block;}
.bookiolab .bl-time-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.bookiolab .bl-time-btn{
  border-radius:18px;
  border:1px solid rgba(31,36,48,.12);
  background:rgba(255,255,255,.88);
  padding:18px 10px;
  font-weight:900;
  font-size:18px;
  color:rgba(31,36,48,.88);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  box-shadow:0 10px 26px rgba(31,36,48,.05);
}
.bookiolab .bl-time-btn:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(31,36,48,.08);}
.bookiolab .bl-time-btn.is-active{
  border:2px solid var(--bl-primary);
  color:var(--bl-primary);
  background:rgba(60,67,237,.06);
}
.bookiolab .bl-btn[disabled]{opacity:.40; cursor:not-allowed; filter:saturate(.4);}
.bookiolab .bl-sr-only{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}
@media (max-width: 720px){
  .bookiolab .bl-time-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .bookiolab .bl-date-tile{width:88px;height:88px;}
}