/* 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; }

.massage-booking-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.massage-booking-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: #edf5f2;
  color: #31584d;
  font-size: .86rem;
  font-weight: 850;
}

.massage-booking-steps li b {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d6e8e1;
  color: #075f4c;
}

.massage-booking-steps li.active { background: #e2f7ef; color: #073e32; }
.massage-booking-steps li.active b { background: #087b61; color: #fff; }

.massage-booking-dock { display: none; }

/* 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; }
  body { padding-bottom: 142px; }
  .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; }
  .massage-booking-dock {
    position: fixed;
    z-index: 1190;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(126px, .8fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #b8d9ce;
    border-radius: 16px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 28px rgba(7, 62, 50, .22);
    backdrop-filter: blur(10px);
  }
  .massage-booking-dock[hidden] { display: none; }
  .massage-booking-dock div { min-width: 0; }
  .massage-booking-dock small { display: block; color: #46685f; font-weight: 750; }
  .massage-booking-dock strong { display: block; margin-top: 2px; color: #071e18; font-size: 1.15rem; white-space: nowrap; }
  .massage-booking-dock button { min-height: 50px; border: 0; border-radius: 12px; background: #087b61; color: #fff; font-size: 1rem; font-weight: 900; }
}

/* 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; }
  .massage-booking-steps { gap: 5px; }
  .massage-booking-steps li { justify-content: center; padding: 8px 5px; font-size: .75rem; text-align: center; }
  .massage-booking-steps li b { flex-basis: 23px; width: 23px; height: 23px; }
}

@media (max-width: 360px) {
  .app-header { gap: 8px; padding: 11px 10px; }
  .app-header > div:first-child { min-width: 0; }
  .app-header h1 { font-size: 18px; line-height: 1.2; white-space: nowrap; }
  .header-language select { min-width: 88px; width: 88px; padding-left: 7px; padding-right: 19px; font-size: 12px; }
  .count-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gender-count-grid { grid-template-columns: 1fr; }
}

/* Put the conversion action before long-form discovery content on phones. */
@media (max-width: 760px) {
  body:not(.shared-role) main { display: flex; flex-direction: column; }
  body:not(.shared-role) #customerView { order: 1; }
  body:not(.shared-role) .massage-search-answer { order: 2; margin-top: 14px; }
  body:not(.shared-role) .outcall-hero { min-height: 0; }
  body:not(.shared-role) .outcall-hero img { display: none; }
  body:not(.shared-role) .outcall-trust { padding: 10px 12px; }
  body:not(.shared-role) .outcall-kicker,
  body:not(.shared-role) .outcall-trust h2,
  body:not(.shared-role) .outcall-trust p { display: none; }
  body:not(.shared-role) .outcall-trust-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0; }
  body:not(.shared-role) .outcall-trust-points span { min-height: 40px; justify-content: center; padding: 5px; text-align: center; font-size: 11px; }
  body:not(.shared-role) fieldset:has(> #guestCount) { display: none; }

  body.shared-therapist.has-booking #therapistView > article:nth-child(2) { order: 1; }
  body.shared-therapist.has-booking #therapistView > article:first-child { order: 2; }
  body.shared-role .outcall-hero,
  body.shared-role .massage-search-answer { display: none; }
}