.appointment-modal .booking-style-choices { margin-top: 16px; padding-top: 14px; border-top: 1px solid #cddbd5; min-width: 0; }
.appointment-modal .booking-style-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.appointment-modal .booking-style-heading strong { font-size: 14px; }
.appointment-modal .booking-style-heading small { font-size: 11px; font-weight: 400; margin-left: 6px; color: #63756d; }
.appointment-modal .booking-style-clear { background: transparent; border: 0; padding: 4px; color: #16785f; font-size: 12px; text-decoration: underline; cursor: pointer; }
.appointment-modal .booking-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.appointment-modal .booking-style-tile { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: inherit; text-align: left; cursor: pointer; }
.appointment-modal .booking-style-photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid #d8e2dc; border-radius: 6px; background: #ecefec; }
.appointment-modal .booking-style-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.appointment-modal .booking-style-tile strong { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.appointment-modal .booking-style-tile:hover .booking-style-photo { border-color: #739c8a; }
.appointment-modal .booking-style-tile.is-selected .booking-style-photo { border-color: #058468; }
.appointment-modal .booking-style-tick { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #058468; color: #fff; }
.appointment-modal .booking-style-preview { width: min(675px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto; padding: 18px; border: 1px solid #d4e0da; border-radius: 8px; background: #fff; color: #172820; }
.appointment-modal .booking-style-preview::backdrop { background: #101d18aa; }
.appointment-modal .booking-style-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.appointment-modal .booking-style-preview h3 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.appointment-modal .booking-style-preview-head button { display: grid; place-items: center; flex: 0 0 36px; height: 36px; padding: 6px; color: inherit; background: transparent; border: 1px solid #c9d4ce; border-radius: 6px; cursor: pointer; }
.appointment-modal .booking-style-preview-image { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; height: min(56.25dvh, 487.5px); background: #f0f2ef; border-radius: 6px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.appointment-modal .booking-style-preview-image img { display: block; min-height: 0; min-width: 0; width: 100%; height: 100%; object-fit: contain; }
.appointment-modal .booking-style-preview-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.appointment-modal .booking-style-preview-thumbs button { display: grid; gap: 4px; padding: 4px; border: 1px solid #d3dfd9; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; min-width: 0; }
.appointment-modal .booking-style-preview-thumbs button[aria-pressed="true"] { border-color: #048268; background: #eaf8f2; }
.appointment-modal .booking-style-preview-thumbs img { display: block; width: 100%; height: 65px; object-fit: contain; }
.appointment-modal .booking-style-preview-thumbs span { font-size: 11px; overflow-wrap: anywhere; }
.appointment-modal .booking-style-preview p { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.appointment-modal .booking-style-preview-actions { display: flex; gap: 12px; margin-top: 14px; }
.appointment-modal .booking-style-preview-actions button { min-height: 44px; flex: 1; padding: 10px; border-radius: 6px; border: 1px solid #c9d9d1; font-size: 14px; font-weight: 700; background: #f4f8f5; color: #165e48; cursor: pointer; }
.appointment-modal .booking-style-preview-actions [data-style-preview-select] { background: #098a6f; color: #fff; border-color: #098a6f; }
.appointment-modal .booking-summary-style dd { display: flex; align-items: center; gap: 10px; }
.appointment-modal .booking-summary-style img { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; }
html[data-theme="black"] .appointment-modal .booking-style-preview { background: #202924; color: #f1f7f3; border-color: #62766a; }
html[data-theme="black"] .appointment-modal .booking-style-preview-image { background: #141d18; }
html[data-theme="black"] .appointment-modal .booking-style-heading small { color: #afc1b6; }
html[data-theme="black"] .appointment-modal .booking-style-clear { color: #8bd5b6; }
html[data-theme="black"] .appointment-modal .booking-style-preview-thumbs button[aria-pressed="true"] { background: #154531; color: #fff; }
@media (max-width: 540px) {
  .appointment-modal .booking-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-modal .booking-style-preview { padding: 14px; }
}