/* Custom Form Renderer Styles */

@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&display=swap");

.cf-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cf-form * {
  box-sizing: border-box;
}

.cf-form-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: var(--color-gray-700, #333);
}

.cf-form-description {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 8px;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-field.cf-hidden {
  display: none;
}

.cf-field.cf-field-toggle {
  gap: 8px;
}

.cf-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-600, #555);
  margin-bottom: 2px;
}

.cf-form .required-indicator-star,
.cf-field-label .required-indicator-star {
  position: static !important;
  display: inline;
  top: auto;
  right: auto;
  transform: none;
  color: var(--color-error, #de3b40);
  font-size: inherit;
  margin-left: 3px;
  font-weight: 600;
  line-height: 1;
}

.cf-help-text {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  margin-bottom: 0;
}

/* The full text of a chosen option the select is too narrow to show; only shown when it is cut off. */
.cf-form .cf-select-chosen {
  display: none;
  margin-top: 4px;
  color: var(--color-gray-700, #333);
  overflow-wrap: anywhere;
}

.cf-form .cf-select-chosen.visible {
  display: block;
}

.cf-error {
  color: var(--color-error, #de3b40);
  font-size: 0.75rem;
  margin-top: 2px;
  display: none;
}

.cf-error.visible {
  display: block;
}

.cf-section-header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-gray-700, #333);
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-top: 12px;
  letter-spacing: 0.01em;
}

.cf-heading {
  margin: 16px 0 4px;
  color: var(--color-gray-700, #333);
  font-weight: 700;
  word-break: break-word;
}

.cf-form .cf-heading-h1 {
  font-size: 1.25rem;
}
.cf-form .cf-heading-h2 {
  font-size: 1.1rem;
}
.cf-form .cf-heading-h3 {
  font-size: 1rem;
}
.cf-heading-align-center {
  text-align: center;
}

/* Admin context inputs (reuse booky-form base styles) */
.cf-form .cf-input {
  padding: 6px 15px;
  border: 1px solid var(--color-border-medium, #ccc);
  border-radius: var(--radius-sm, 4px);
  width: 100%;
  line-height: 1.5;
  background-color: var(--color-light-textbox, #fff);
  font-size: 0.875rem;
}

.cf-form .cf-input:focus {
  outline: none;
  border: 2px solid var(--color-primary-400, #69a1b8);
  box-shadow: 0 0 0 3px rgba(105, 161, 184, 0.1);
  padding: 5px 14px;
}

.cf-form .cf-input:read-only,
.cf-form .cf-input:disabled {
  background-color: var(--color-read-only-textbox, #f5f5f5);
  cursor: not-allowed;
}

.cf-form .cf-textarea {
  padding: 6px 15px;
  border: 1px solid var(--color-border-medium, #ccc);
  border-radius: var(--radius-sm, 4px);
  width: 100%;
  line-height: 1.5;
  background-color: var(--color-light-textbox, #fff);
  font-size: 0.875rem;
  min-height: 80px;
  resize: vertical;
}

.cf-form .cf-textarea:focus {
  outline: none;
  border: 2px solid var(--color-primary-400, #69a1b8);
  box-shadow: 0 0 0 3px rgba(105, 161, 184, 0.1);
  padding: 5px 14px;
}

.cf-form .cf-textarea:read-only,
.cf-form .cf-textarea:disabled {
  background-color: var(--color-read-only-textbox, #f5f5f5);
  cursor: not-allowed;
}

.cf-form .cf-select {
  display: inline-block;
  width: 100%;
  padding: 6px 15px;
  line-height: 1.5;
  background-color: var(--color-light-textbox, #fff);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2369a1b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 8px 10px;
  border: 1px solid var(--color-border-medium, #ccc);
  border-radius: var(--radius-sm, 4px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0.875rem;
}

.cf-form .cf-select:focus {
  outline: none;
  border: 2px solid var(--color-primary-400, #69a1b8);
  box-shadow: 0 0 0 3px rgba(105, 161, 184, 0.1);
  padding: 5px 14px;
}

.cf-form .cf-select:disabled {
  background-color: var(--color-read-only-textbox, #f5f5f5);
  cursor: not-allowed;
}

/* Radio and checkbox groups */
.cf-form .cf-radio-group,
.cf-form .cf-checkbox-group,
.cf-form .cf-multi-select-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.cf-form .cf-radio-option,
.cf-form .cf-checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

.cf-form .cf-radio-option input[type="radio"],
.cf-form .cf-checkbox-option input[type="checkbox"] {
  display: inline-block !important;
  width: 18px !important;
  height: 18px;
  margin: 2px 0 0 0;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--color-primary, #69a1b8);
}

.cf-form .cf-radio-option label,
.cf-form .cf-checkbox-option label {
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  color: var(--color-gray-700, #333);
  word-break: break-word;
  flex: 1 1 auto;
  line-height: 1.4;
}

/* Toggle field (yes/no checkbox rendered as a switch) */
.cf-form .cf-toggle-label {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  max-width: 100%;
  margin: 0;
  line-height: 1.4;
}

.cf-form .cf-toggle-label-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-gray-700, #333);
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

.cf-form .toggle-input {
  display: none !important;
}

.cf-form .toggle {
  flex: 0 0 auto;
}

/* Customer portal context overrides */
.cf-form.cf-customer .cf-input,
.cf-form.cf-customer .cf-textarea,
.cf-form.cf-customer .cf-select {
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 1rem;
}

.cf-form.cf-customer .cf-input:focus,
.cf-form.cf-customer .cf-textarea:focus,
.cf-form.cf-customer .cf-select:focus {
  padding: 9px 14px;
}

.cf-form.cf-customer .cf-field-label {
  font-size: 0.95rem;
}

/* Read-only mode */
.cf-form.cf-read-only .cf-field-label {
  font-weight: 600;
}

.cf-form.cf-read-only .cf-read-only-value {
  font-size: 0.875rem;
  color: var(--color-gray-700, #333);
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  min-height: 24px;
}

.cf-form.cf-read-only .cf-read-only-empty {
  color: #aaa;
  font-style: italic;
}

/* ── Table field ── */

.cf-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cf-form .cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cf-form .cf-table th,
.cf-form .cf-table td {
  border: 1px solid var(--color-border-light, #e3e3e3);
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}

.cf-form .cf-table thead th {
  background: #f5f7f9;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-gray-600, #555);
  white-space: nowrap;
  min-width: 96px;
}

.cf-form .cf-table .cf-table-num-col,
.cf-form .cf-table .cf-table-num-cell {
  width: 34px;
  min-width: 34px;
  text-align: center;
  color: #888;
}

.cf-form .cf-table .cf-table-action-col,
.cf-form .cf-table .cf-table-action-cell {
  width: 34px;
  min-width: 34px;
  text-align: center;
}

/* :focus matched too — the customer portal widens a focused .cf-input, and inside a row
   that resizes the column and shifts the cells beside it out from under the pointer. */
.cf-form .cf-table .cf-table-cell,
.cf-form .cf-table .cf-table-cell:focus {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.cf-form .cf-table textarea.cf-table-cell {
  min-height: 38px;
}

/* Text cells wrap and grow with their text: the wrapper mirrors the value in a hidden copy
   that sizes the shared grid cell, and the textarea fills it. */
.cf-form .cf-table .cf-table-grow {
  display: grid;
  min-width: 150px;
}

.cf-form .cf-table .cf-table-grow > textarea.cf-table-cell,
.cf-form .cf-table .cf-table-grow::after {
  grid-area: 1 / 1 / 2 / 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 8px;
  border-width: 1px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cf-form .cf-table .cf-table-grow > textarea.cf-table-cell {
  /* The portal styles.css gives every textarea a fixed 150px height; the mirror sizes this one. */
  height: auto;
  resize: none;
  overflow: hidden;
}

.cf-form .cf-table .cf-table-grow::after {
  content: attr(data-value) " ";
  visibility: hidden;
  border-style: solid;
  border-color: transparent;
}

.cf-form .cf-table .cf-table-cell-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary-400, #69a1b8);
}

.cf-form .cf-table .cf-table-empty-cell {
  color: #aaa;
  font-style: italic;
  text-align: center;
}

.cf-form .cf-table .cf-table-cell-empty {
  color: #aaa;
}

.cf-table-empty {
  color: #aaa;
  font-style: italic;
  font-size: 0.85rem;
}

.cf-form .cf-table-row-remove-btn {
  background: none;
  border: none;
  color: var(--color-error, #de3b40);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.cf-form .cf-table-row-remove-btn:hover:not(:disabled) {
  background: #fce4e4;
}

.cf-form .cf-table-add-row-btn {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 0.8rem;
  padding: 4px 12px;
}

.cf-form .cf-table-row-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Draft indicator */
.cf-draft-badge {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

@media screen and (max-width: 600px) {
  .cf-form.cf-customer .cf-input,
  .cf-form.cf-customer .cf-textarea,
  .cf-form.cf-customer .cf-select {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .cf-form.cf-customer .cf-table .cf-table-cell,
  .cf-form.cf-customer .cf-table .cf-table-grow > textarea.cf-table-cell,
  .cf-form.cf-customer .cf-table .cf-table-grow::after {
    font-size: 16px; /* Prevent iOS zoom */
  }
}

/* Customer booking flow — forms step */

.ccf-loading {
  color: #888;
  font-size: 0.9rem;
  text-align: center;
  padding: 20px 0;
}

.ccf-forms-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 10px;
}

.ccf-form-block {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.ccf-form-title {
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.ccf-form-desc {
  font-weight: 400;
  font-size: 0.85rem;
  color: #666;
  margin: 4px 0 0 0;
}

.ccf-form-body {
  padding: 16px;
}

.ccf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.ccf-draft-btn {
  background: transparent;
  border: 1px solid #ccc;
  color: #555;
  flex: 0 0 auto;
}

.ccf-draft-btn:hover {
  background: #f5f5f5;
}

.ccf-continue-btn {
  flex: 1;
}

/* The customer portal doesn't load the admin buttons.css, so the form step
   styles its own buttons, scoped to the modal so nothing else on the page
   changes. Values match buttons.css and the core variables. */
.ccf-customer-modal-content .booky-button {
  padding: 0 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #ffffff !important;
  background: var(--color-primary, #67378b) !important;
  border: none !important;
  border-radius: var(--radius-md, 6px) !important;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease-in-out);
}

.ccf-customer-modal-content .booky-button:hover {
  background: var(--color-primary-hover, #552e73) !important;
}

.ccf-customer-modal-content .booky-button:hover:active {
  background: var(--color-primary-active, #44255c) !important;
}

.ccf-customer-modal-content .booky-button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

/* Secondary action (Save Draft) */
.ccf-customer-modal-content .booky-button.ghost-button {
  color: var(--color-primary, #67378b) !important;
  background: transparent !important;
  border: 1px solid var(--color-primary, #67378b) !important;
}

.ccf-customer-modal-content .booky-button.ghost-button:hover {
  background: #f5f0f8 !important;
}

/* "Edit Form" on the booking confirmation modal: same look as the modal's
   own Cancel button (#cancel-confirmation-btn in booky-book-services.css). */
#confirmation-modal #edit-form-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  height: 50px;
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
}

/* Form summary on confirmation page */

.ccf-summary {
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.ccf-summary-title {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.ccf-summary-form {
  padding: 10px 14px;
}

.ccf-summary-form + .ccf-summary-form {
  border-top: 1px solid #eee;
}

.ccf-summary-form-name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: #333;
}

.ccf-summary-field {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
}

.ccf-summary-label {
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccf-summary-value {
  color: #333;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Customer portal forms modals (booking step and My Bookings): a long form scrolls from its top. */

#ccf-customer-modal,
#ccf-booking-forms-modal {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ccf-customer-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 800px;
  margin: 10px auto;
  padding: 30px;
  overflow: visible;
}

@media (min-width: 600px) {
  .ccf-customer-modal-content {
    margin-top: 5vh !important;
  }
}

#ccf-customer-modal,
#ccf-booking-forms-modal {
  padding-top: unset !important;
}

.ccf-modal-header {
  margin-bottom: 16px;
}

/* The title and CLOSE X stay in reach while a long form scrolls beneath them. */
.ccf-customer-modal-content .ccf-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: -12px;
  padding: 12px 0;
  background: inherit;
}

.ccf-customer-modal-content .ccf-modal-header .ccf-close-btn {
  position: static;
  flex: 0 0 auto;
  margin: 0;
}

.ccf-customer-modal-content .cf-field {
  scroll-margin-top: 96px;
}

.ccf-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.ccf-customer-modal-content .ccf-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.ccf-customer-modal-content .ccf-continue-btn {
  min-width: 140px;
}

.ccf-customer-modal-content .ccf-close-btn,
.ccf-customer-modal-content .close-modal-btn-booky {
  position: absolute;
  top: 16px;
  right: 18px;
  background: transparent;
  border: none;
  color: #999;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition:
    color 0.15s ease,
    background 0.15s ease;
  z-index: 2;
}

.ccf-customer-modal-content .ccf-close-btn:hover,
.ccf-customer-modal-content .close-modal-btn-booky:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.04);
}

@media screen and (max-width: 600px) {
  #ccf-customer-modal,
  #ccf-booking-forms-modal {
    align-items: stretch !important;
    padding: 0;
  }

  .ccf-customer-modal-content {
    max-width: 100%;
    width: 100% !important;
    min-height: fit-content;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .ccf-customer-modal-content .ccf-close-btn,
  .ccf-customer-modal-content .close-modal-btn-booky {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    padding: 6px 10px;
    z-index: 6;
  }

  .ccf-customer-modal-content .ccf-modal-header {
    flex: 0 0 auto;
    padding: 12px 10px 12px 16px;
    margin: 0;
    border-bottom: 1px solid #ececec;
  }

  .ccf-customer-modal-content .ccf-modal-header .ccf-close-btn {
    padding: 6px 10px;
  }

  .ccf-customer-modal-content .ccf-forms-wrap {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    margin: 0;
    gap: 16px;
  }

  .ccf-customer-modal-content .ccf-actions {
    margin: 4px 0 0 0;
    padding: 16px 0 0 0;
    background: transparent;
    border-top: 1px solid #ececec;
    box-shadow: none;
    position: static;
  }

  .ccf-customer-modal-content .ccf-actions .booky-button {
    flex: 1 1 130px;
  }
}

/* Form responses overlay (My Bookings) */

.form-responses-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.form-responses-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: visible;
  margin: 0 auto;
}

.form-responses-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
}

.form-responses-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.form-responses-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
  line-height: 1;
}

.form-responses-close:hover {
  color: #333;
}

.form-responses-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-responses-block {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.form-responses-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.form-responses-date {
  font-weight: 400;
  font-size: 0.75rem;
  color: #888;
  overflow-wrap: anywhere;
}

.form-responses-block-body {
  padding: 14px;
}

/* Complete-forms modal (customer fills pending intake forms) */

.complete-forms-modal {
  max-width: 640px;
}

.complete-forms-intro {
  margin: 0 0 4px;
  color: #555;
  font-size: 0.9rem;
}

.complete-forms-step-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.14);
  border: 1px solid rgba(10, 132, 255, 0.28);
  color: rgba(10, 116, 230, 1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 4px;
}

.complete-forms-form-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.complete-forms-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid #ececec;
}

.complete-forms-footer .booky-button {
  margin: 0;
  width: auto;
}

@media (max-width: 900px) {
  .form-responses-overlay {
    padding: 0;
    align-items: flex-start;
    justify-content: center;
  }
  .form-responses-modal {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .complete-forms-modal {
    max-width: 100%;
  }
  .form-responses-header {
    padding: 14px 16px;
  }
  .form-responses-body {
    padding: 14px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .complete-forms-footer .booky-button {
    flex: 1 1 120px;
  }
}

.complete-forms-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.07);
  border: 1px dashed rgba(10, 132, 255, 0.35);
}

.complete-forms-banner-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.14);
  border: 1px solid rgba(10, 132, 255, 0.28);
  color: rgba(10, 116, 230, 1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.complete-forms-banner-text {
  color: #444;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Heading field ── */

.cf-heading {
  margin: 12px 0 4px 0;
  font-weight: 700;
  color: var(--color-gray-700, #222);
  line-height: 1.25;
}

.cf-heading.cf-heading-h1 {
  font-size: 1.5rem;
  margin-top: 16px;
}

.cf-heading.cf-heading-h2 {
  font-size: 1.2rem;
  margin-top: 12px;
}

.cf-heading.cf-heading-h3 {
  font-size: 1rem;
  margin-top: 10px;
}

.cf-heading.cf-heading-align-center {
  text-align: center;
}

.cf-heading.cf-heading-align-left {
  text-align: left;
}

/* ── Text Block field ── */

.cf-text-block-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-text-block-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-700, #333);
}

.cf-text-block {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-gray-700, #333);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}

.cf-text-block.cf-text-block-scroll {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
}

/* Subtle fade affordance at bottom while unread */
.cf-text-block-wrap[data-cf-read="false"] .cf-text-block-scroll {
  box-shadow: inset 0 -20px 16px -14px rgba(0, 0, 0, 0.12);
  border-color: #e0c98d;
  background: #fffef7;
}

/* Read-hint below the scrollable text block */
.cf-text-block-read-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a6d00;
  background: #fffbe6;
  border: 1px solid #e6c96b;
  border-radius: 6px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.cf-text-block-read-hint.cf-text-block-read-hint-complete {
  color: #2e7d32;
  background: #e8f5e9;
  border-color: rgba(46, 125, 50, 0.35);
}

.cf-text-block-read-arrow {
  display: inline-block;
  animation: cfReadBounce 1.4s ease-in-out infinite;
  font-size: 0.85rem;
}

.cf-text-block-read-check {
  font-size: 0.9rem;
  color: #2e7d32;
}

@keyframes cfReadBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* ── Signature field ── */

.cf-signature-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.cf-signature-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-signature-input {
  width: 100%;
}

.cf-signature-preview {
  min-height: 56px;
  padding: 10px 14px;
  background: #fff;
  border: 1px dashed #d0d0d0;
  border-radius: 6px;
  font-family: "Dancing Script", cursive;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #222;
  word-break: break-word;
}

.cf-signature-preview-empty {
  font-family: inherit;
  font-size: 0.85rem;
  color: #aaa;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-signature-consent {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-gray-600, #555);
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

.cf-signature-consent-cb {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-primary, #69a1b8);
  width: unset !important;
  margin-top: unset !important;
}

.cf-signature-consent span {
  padding-top: 4px;
}

.cf-signature-sign-btn {
  align-self: flex-start;
  min-width: 120px;
}

.cf-signature-sign-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cf-signature-signed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d7e9dc;
  border-left: 3px solid #3fa166;
  border-radius: 6px;
}

.cf-signature-cursive {
  font-family: "Dancing Script", cursive;
  font-size: 2.1rem;
  line-height: 1.2;
  color: #222;
  word-break: break-word;
}

.cf-signature-meta {
  font-size: 0.75rem;
  color: #666;
}

.cf-signature-signer {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2f6b45;
  word-break: break-word;
}

.cf-signature-signer-unverified {
  font-weight: 500;
  color: #b25b00;
}

.cf-signature-clear-link {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--color-primary, #4a90d9);
  padding: 0;
  margin-top: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.cf-signature-clear-link:hover {
  color: var(--color-primary-700, #357);
}

.cf-signature-awaiting {
  padding: 12px 14px;
  background: #fffbe6;
  border: 1px dashed #e6c96b;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #8a6d00;
  font-style: italic;
}

/* Gated signature — locked until preceding text_block(s) are read */
.cf-field[data-cf-sig-gated="true"] .cf-signature-body {
  display: none;
}

.cf-signature-gate-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f6f6f6;
  border: 1px dashed #c8c8c8;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #666;
}

.cf-signature-gate-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.cf-signature-gate-text {
  line-height: 1.3;
}

.cf-form.cf-read-only .cf-signature-signed {
  background: #fff;
}

/* ── Signed-form lock: answers freeze once any signature is captured ── */

.cf-lock-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f3f6fb;
  border: 1px solid #c9d6ea;
  border-left: 3px solid #2f3b4d;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #2f3b4d;
}

.cf-lock-notice-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.cf-lock-notice-text {
  line-height: 1.35;
}

.cf-form .cf-field-locked .cf-field-label,
.cf-form .cf-field-locked .cf-toggle-label-text {
  color: #8a8a8a;
}

.cf-form .cf-field-locked .cf-radio-option,
.cf-form .cf-field-locked .cf-checkbox-option,
.cf-form .cf-field-locked .cf-toggle-label {
  opacity: 0.65;
}

.cf-form .cf-field-locked .cf-radio-option label,
.cf-form .cf-field-locked .cf-checkbox-option label,
.cf-form .cf-field-locked .cf-toggle-label,
.cf-form .cf-field-locked input,
.cf-form .cf-field-locked select,
.cf-form .cf-field-locked textarea {
  cursor: not-allowed;
}

/* Customer portal context adjustments */
.cf-form.cf-customer .cf-signature-preview {
  font-size: 2.2rem;
  min-height: 64px;
}

.cf-form.cf-customer .cf-signature-cursive {
  font-size: 2.3rem;
}

/* "Forms to complete" on the customer booking cards (booky-customer-booking-forms.js).
   From collective's booky-book-services.css; only forms classes, nothing global. */
.appointment-forms-alert {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 0, 64, 0.05);
  border: 1px dashed rgba(255, 0, 64, 0.35);
}

.appointment-forms-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.forms-alert-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 0, 64, 0.12);
  border: 1px solid rgba(255, 0, 64, 0.25);
  color: rgba(255, 0, 64, 0.9);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.forms-alert-text {
  color: #444;
  font-size: 12px;
  font-weight: 700;
}

.appointment-forms-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-sign-chip {
  border: 1px solid rgba(255, 0, 64, 0.25);
  background: rgba(255, 255, 255, 0.8);
  color: rgba(255, 0, 64, 0.9);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease;
}

.form-sign-chip:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.form-sign-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* "Forms to complete" */
.appointment-card.has-pending-forms {
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 10px 22px rgba(10, 132, 255, 0.06);
}

.appointment-forms-alert.appointment-forms-alert-complete {
  background: rgba(10, 132, 255, 0.06);
  border: 1px dashed rgba(10, 132, 255, 0.35);
}

.forms-alert-pill.forms-alert-pill-complete {
  background: rgba(10, 132, 255, 0.12);
  border: 1px solid rgba(10, 132, 255, 0.25);
  color: rgba(10, 116, 230, 1);
}

.appointment-forms-alert-complete .form-sign-chip {
  border: 1px solid rgba(10, 132, 255, 0.3);
  color: rgba(10, 116, 230, 1);
}

/* Forms attached to a booking, in the member-list appointment detail panel */
.md-bd-forms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-bd-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-medium, #cecece);
  border-radius: var(--radius-md, 6px);
}

.md-bd-form-name {
  flex: 1;
  font-weight: 600;
}