/* ThailandMate massage: touch-first booking controls and readable mobile layout. */
.assignment-choice {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.assignment-choice legend {
  margin: 0 0 8px;
  color: #111;
  font-size: 1rem;
  font-weight: 900;
}

.assignment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.assignment-options button {
  min-height: 52px;
  padding: 9px 10px;
  border: 2px solid #b8d9ce;
  border-radius: 12px;
  background: #fff;
  color: #173b32;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.assignment-options button.active {
  border-color: #087b61;
  background: #087b61;
  color: #fff;
  box-shadow: 0 4px 12px rgba(8, 123, 97, .2);
}

.assignment-choice small {
  display: block;
  margin-top: 8px;
  color: #345c50;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.45;
}

.previous-therapist-picker {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px;
  border: 1px solid #b8d9ce;
  border-radius: 14px;
  background: #f4fcf8;
}

.previous-therapist-picker[hidden] { display: none; }
.previous-therapist-picker h3 { margin: 2px 0 5px; color: #111; font-size: 1.08rem; }
.previous-therapist-picker p { margin: 0 0 11px; color: #345c50; font-size: .9rem; font-weight: 700; line-height: 1.45; }
.previous-therapist-picker .profile-card.selected { border: 2px solid #087b61; background: #e8f8f1; }
.previous-therapist-picker .profile-card button { min-height: 42px; }

/* The visual number/gender chips are labels. Keep their native radio controls
   accessible but physically tiny, otherwise the global input{width:100%}
   rule can create a wide invisible strip on Fold-sized screens. */
.count-options input[type="radio"],
.gender-choice input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app-header, main, .role-tabs, .panel, .form-grid, .form-grid > *, .quote-box { min-width: 0; }
  /* Do not cap the booking page on Fold / split-screen mobile browsers. */
  main { width: 100%; max-width: none; }
  input, select, textarea, button { max-width: 100%; }
  .assignment-options { grid-template-columns: 1fr; }
  .assignment-options button { min-height: 50px; font-size: 1rem; }
  .gender-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gender-choice span { min-height: 46px; display: grid; place-items: center; }
}

/* Fold unfolded view: it is physically wide, but is still used like a phone.
   Keep the page full-width and use a calm two-column form rather than a narrow
   phone column floating on the left. */
@media (min-width: 761px) and (max-width: 980px) {
  html, body { width: 100%; max-width: none; overflow-x: hidden; }
  .app-header, .role-tabs, .outcall-hero, main { width: 100%; max-width: none; }
  .app-header { padding: 18px 24px; }
  main { margin: 0; padding: 16px 20px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-field, .contact-field { grid-column: 1 / -1; }
  .assignment-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gender-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .location-field, .contact-field { grid-column: 1; }
  .customer-gender-choice, .count-choice, .gender-choice, .assignment-choice { grid-column: 1; }
  .gender-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .count-options label { position: relative; min-width: 0; }
  .count-options span { min-height: 44px; display: grid; place-items: center; }
  .quote-box { display: grid; grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 360px) {
  .count-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gender-count-grid { grid-template-columns: 1fr; }
}