/* ==========================================================================
   BanarasBhraman Forms
   --------------------------------------------------------------------------
   Consumes the theme's design tokens, with fallbacks so the plugin still
   renders sensibly if it is ever used under a different theme.
   ========================================================================== */

.bb-form {
  display: grid;
  gap: var(--bb-space-3, 0.75rem);
}

.bb-form__row {
  display: grid;
  gap: var(--bb-space-1, 0.25rem);
  margin: 0;
}

/* Visually hidden, not display:none — screen readers still get the real
   label; sighted users get the same text as the field's placeholder. */
.bb-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bb-form__control {
  width: 100%;
  min-height: var(--bb-size-touch-target, 2.75rem);
  padding: var(--bb-space-2, 0.5rem) var(--bb-space-3, 0.75rem);
  background-color: var(--bb-color-surface, #fff);
  border: var(--bb-border-width, 1px) solid var(--bb-color-border-strong, #CFC5BF);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-text, #14100E);
  font-size: var(--bb-text-sm, 0.875rem);
}

/* 16px minimum on touch devices, otherwise iOS zooms the page on focus. */
@media (hover: none) {
  .bb-form__control { font-size: 1rem; }
}

.bb-form__control:focus-visible {
  outline: var(--bb-border-width-thick, 2px) solid var(--bb-color-focus, #D03000);
  outline-offset: 1px;
  border-color: transparent;
}

textarea.bb-form__control {
  min-height: auto;
  resize: vertical;
}

.bb-form__row.has-error .bb-form__control {
  border-color: var(--bb-color-danger-600, #A3231B);
}

.bb-form__error {
  color: var(--bb-color-danger-600, #A3231B);
  font-size: var(--bb-text-xs, 0.75rem);
}

.bb-form__errors {
  padding: var(--bb-space-3, 0.75rem) var(--bb-space-4, 1rem);
  background-color: var(--bb-color-danger-100, #FBE7E5);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-danger-600, #A3231B);
  font-size: var(--bb-text-sm, 0.875rem);
}

.bb-form__success {
  padding: var(--bb-space-4, 1rem) var(--bb-space-5, 1.25rem);
  background-color: var(--bb-color-success-100, #E3F3E9);
  border-radius: var(--bb-radius-md, 0.5rem);
  color: var(--bb-color-success-600, #1B6E3C);
  font-size: var(--bb-text-sm, 0.875rem);
  font-weight: var(--bb-font-weight-medium, 500);
}

/* Honeypot: removed from the visual and accessibility trees, but still a
   real, fillable field for anything scripting the DOM. Not display:none —
   some bots skip hidden inputs. */
.bb-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bb-form__captcha {
  /* The Google widget is a fixed 304px; let it scroll rather than overflow
     a narrow booking sidebar. */
  max-width: 100%;
  overflow-x: auto;
}

.bb-form__submit {
  margin-block-start: var(--bb-space-1, 0.25rem);
}

.bb-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* The spinner is a flex item alongside the existing label (.bb-btn is
   inline-flex with its own gap) rather than replacing the text, so the
   button still reads "Send enquiry" while it works. currentColor picks up
   each button's own text colour automatically — brand orange, WhatsApp
   white, whichever — with no extra theming needed here. */
.bb-form__submit.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: bb-form-spin 0.7s linear infinite;
}

@keyframes bb-form-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-form__submit.is-loading::before { animation-duration: 1.6s; }
}