/* ===================================================================
   BOOKING MODAL
   The "start a session" dialog: hours stepper, add-ons, live summary.
=================================================================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,12,16,.6);display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;backdrop-filter:blur(2px);
}
.modal{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:16px;
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:30px;box-shadow:var(--shadow-lift);
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.modal-head h2{font-family:var(--ff-display);font-size:22px;margin:0;font-weight:600;color:var(--text-on-navy);}
.modal-close{background:none;border:none;color:var(--text-on-navy-dim);font-size:22px;line-height:1;padding:2px;}
.modal-close:hover{color:var(--coral);}

.modal .field{margin-bottom:18px;}
.modal .field label{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--text-on-navy-dim);text-transform:uppercase;margin-bottom:7px;}
.modal .field input{
  width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line-navy);
  background:var(--surface-navy-raised);color:var(--text-on-navy);font-size:15px;font-family:var(--ff-body);
}
.modal .field input:focus{border-color:var(--lamp);}
.modal .field select{
  width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line-navy);
  background:var(--surface-navy-raised);color:var(--text-on-navy);font-size:15px;font-family:var(--ff-body);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA2AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.modal .field select:focus{border-color:var(--lamp);}

.stepper-row{
  display:flex;align-items:center;justify-content:space-between;background:var(--surface-navy-raised);
  border:1px solid var(--line-navy);border-radius:10px;padding:12px 16px;margin-bottom:18px;
}
.stepper-row .label{font-size:14px;font-weight:600;color:var(--text-on-navy);}
.stepper-row .label small{display:block;font-weight:400;color:var(--text-on-navy-dim);font-size:12px;margin-top:2px;}
.stepper{display:flex;align-items:center;gap:12px;}
.stepper button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-navy);background:transparent;color:var(--text-on-navy);font-size:16px;line-height:1;}
.stepper button:hover{border-color:var(--lamp);color:var(--lamp);}
.stepper .val{font-family:var(--ff-mono);font-size:16px;min-width:20px;text-align:center;color:var(--text-on-navy);}

.addons-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-on-navy-dim);margin:22px 0 10px;font-family:var(--ff-mono);}
.addon-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-navy);}
.addon-row:last-child{border-bottom:none;}
.addon-name{font-size:14px;color:var(--text-on-navy);}
.addon-price{font-family:var(--ff-mono);font-size:12.5px;color:var(--text-on-navy-dim);}

.summary{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line-navy);}
.summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-on-navy-dim);margin-bottom:6px;}
.summary-row.total{font-size:17px;font-weight:600;color:var(--text-on-navy);margin-top:10px;font-family:var(--ff-mono);}

.modal-actions{display:flex;gap:12px;margin-top:24px;}
.modal-actions .btn{flex:1;justify-content:center;}

/* ---------------------------------------------------------------
   WALK-IN CHECKOUT — the details here (destination, item count,
   total) are exactly what staff double-check before confirming an
   order, so give them a distinct panel and much stronger size/
   contrast instead of the dim default .summary-row styling. Scoped
   to this modal only so the booking/membership summaries elsewhere
   are unaffected.
--------------------------------------------------------------- */
#walkinCheckoutModalOverlay .modal{max-width:520px;}
#walkinCheckoutModalOverlay .summary{
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);
  border-radius:12px;padding:16px 18px;margin-top:0;
}
#walkinCheckoutModalOverlay .summary-row{
  font-size:16px;font-weight:600;color:var(--text-on-navy);margin-bottom:10px;
}
#walkinCheckoutModalOverlay .summary-row:last-child{margin-bottom:0;}
#walkinCheckoutModalOverlay .summary-row span:last-child{font-family:var(--ff-mono);}
#walkinCheckoutModalOverlay .summary-row.total{
  font-size:24px;font-weight:800;color:var(--lamp);padding-top:14px;margin-top:6px;
  border-top:1px dashed var(--line-navy);
}
/* "Deliver to" is the single easiest detail to send to the wrong
   table — call it out with its own bold, high-contrast line above
   the items/total block rather than blending into the summary. */
#walkinCheckoutDestination{font-size:17px;font-weight:800;color:var(--lamp);}