/* RecensLabs — book a call (JS-free slot calendar) */

.booking-section{padding:48px 0 64px;}
.booking-success{background:rgba(26,179,148,0.14); border:1px solid rgba(26,179,148,0.5); color:var(--navy); border-radius:var(--r-lg); padding:16px 16px; font-size:var(--fs-base); line-height:1.5; margin-bottom:24px;}
.booking-empty{background:var(--white); border:1px solid var(--paper-dim); border-radius:var(--r-lg); padding:28px; font-size:var(--fs-base); color:var(--slate); line-height:1.6;}
.booking-empty a{color:var(--indigo); font-weight:600;}

.booking-grid{display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:start;}

/* Day rail */
.day-rail{display:flex; flex-direction:column; gap:8px; position:sticky; top:96px;}
.rail-label{font-family:var(--font-mono); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.05em; color:var(--slate-light); margin-bottom:4px;}
.day-pill{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--white); border:1px solid var(--paper-dim); border-radius:var(--r-lg); padding:12px 16px; transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;}
.day-pill:hover{border-color:var(--indigo-soft); transform:translateX(2px);}
.day-pill.active{background:var(--indigo); border-color:var(--indigo); color:var(--white);}
.day-dow{font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;}
.day-date{font-size:var(--fs-sm); color:var(--slate);}
.day-pill.active .day-date{color:var(--paper-dim);}

/* Form card */
.booking-form{background:var(--white); border:1px solid var(--paper-dim); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-lg);}
.booking-day-title{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; margin-bottom:16px;}
.booking-slot-error{margin-bottom:14px;}

/* Slot grid — pure-CSS radio selection */
.slot-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:10px; margin-bottom:24px;}
.slot-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.slot{display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--fs-sm); padding:12px 0; border:1px solid var(--paper-dim); border-radius:var(--r-lg); background:var(--white); color:var(--lp-dark); font-weight:600; cursor:pointer; transition:border-color 0.14s ease, background 0.14s ease, color 0.14s ease;}
.slot:hover{border-color:var(--indigo-soft);}
.slot-input:checked + .slot{background:var(--indigo); border-color:var(--indigo); color:var(--white); font-weight:700;}
.slot-input:focus-visible + .slot{outline:2px solid var(--indigo); outline-offset:2px;}
/* Open times are white buttons. They used to share the taken ones' grey fill,
   so a free day read as fully booked. */
.booking-grid, .booking-form{scroll-margin-top:120px;}
/* Already booked: kept in place, struck through and inert. */
.slot-input:disabled + .slot,
.slot-taken{background:var(--paper-dim); border-color:var(--paper-dim); color:var(--slate); text-decoration:line-through; cursor:not-allowed; opacity:0.7;}
/* Hovering one says no in INSPINIA's danger red. */
.slot-input:disabled + .slot:hover,
.slot-taken:hover{border-color:var(--danger); color:var(--danger); opacity:1;}
.slot-none{grid-column:1 / -1; color:var(--slate); font-size:var(--fs-sm);}

/* Booker details */
.booking-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;}
.booking-fields .field{display:flex; flex-direction:column; gap:8px;}
.booking-fields .field.full{grid-column:1 / -1;}
.booking-fields label{font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
.booking-fields label .opt{text-transform:none; color:var(--slate-light);}
.booking-fields input, .booking-fields textarea{font-family:var(--font-body); font-size:var(--fs-base); padding:12px 14px; border:1px solid var(--paper-dim); border-radius:var(--r-md); background:var(--white); outline:none; color:var(--ink); width:100%; transition:border-color 0.15s ease, background 0.15s ease;}
.booking-fields input:focus, .booking-fields textarea:focus{border-color:var(--indigo); background:var(--white);}
.booking-fields textarea{resize:vertical; line-height:1.5;}
.booking-submit{width:100%;}
.field-error{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--danger);}

@media(max-width:760px){
  .booking-grid{grid-template-columns:1fr;}
  .day-rail{position:static; flex-direction:row; flex-wrap:wrap;}
  .booking-fields{grid-template-columns:1fr;}
}