/**
 * Theme Overrides - CSS styling for themed form elements
 *
 * This file contains CSS overrides that work in conjunction with theme styles
 * to ensure proper styling of complex components (input-groups, etc.)
 */

/**
 * Checkbox and Radio Input Styling
 *
 * Base styles for checkboxes and radio buttons that allow accent-color theming.
 * Negates Bootstrap defaults and enables native HTML accent-color property.
 */
.gf-checkbox-radio-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
  transition: none !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* Remove Bootstrap's ::before pseudo-element for checked state */
.gf-checkbox-radio-input:checked::before {
  content: none !important;
}

/* Ensure accent-color is always applied with high specificity */
.form-check-input.gf-checkbox-radio-input {
  accent-color: inherit !important;
}

/**
 * Phone input group styling
 *
 * Base styles for phone input groups that work with theme-applied styles.
 * The JavaScript in overrides.js applies dynamic theme-aware styling on top of these.
 */
.griffinforms-phone-input-group .input-group-text {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.griffinforms-phone-input-group input[type="tel"] {
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.griffinforms-formpage-container .form-floating>.form-control-plaintext~label,
.griffinforms-formpage-container .form-floating>.form-control:focus~label,
.griffinforms-formpage-container .form-floating>.form-control:not(:placeholder-shown)~label,
.griffinforms-formpage-container .form-floating>.form-select~label {
  transform: scale(.85) translateY(-.95rem) translateX(.3rem) !important;
  color: inherit !important;
}

.griffinforms-formpage-container .form-floating>.form-control-plaintext~label::after,
.griffinforms-formpage-container .form-floating>.form-control:focus~label::after,
.griffinforms-formpage-container .form-floating>.form-control:not(:placeholder-shown)~label::after,
.griffinforms-formpage-container .form-floating>.form-select~label::after {
content: none !important;
}

.gf-xs .griffinforms-optiongroups-container,
.gf-sm .griffinforms-optiongroups-container {
  flex-direction: column !important;
  align-items: stretch !important;
}

.gf-xs .griffinforms-optiongroup-container,
.gf-sm .griffinforms-optiongroup-container {
  width: 100% !important;
  margin-right: 0 !important;
}

.gf-xs .form-check,
.gf-sm .form-check {
  padding-left: 0.75em !important;
  min-height: 1.25rem !important;
}

/**
 * Responsive layout helpers
 * Classes (gf-xs, gf-sm, gf-md, gf-lg) are applied at runtime via overrides.js
 */
.gf-xs [data-gf-row="container"],
.gf-sm [data-gf-row="container"] {
  flex-direction: column !important;
}

.gf-xs .griffinforms-formpage-child,
.gf-sm .griffinforms-formpage-child {
  width: 100% !important;
  max-width: 100% !important;
}

.gf-xs .griffinforms-button-row,
.gf-sm .griffinforms-button-row {
  flex-direction: column !important;
  gap: 12px;
}

.gf-xs .griffinforms-button-row > *,
.gf-sm .griffinforms-button-row > * {
  width: 100%;
}

/* Payment review screen: buttons full-width on small screens */
.gf-xs .griffinforms-payment-review-actions,
.gf-sm .griffinforms-payment-review-actions {
  flex-direction: column !important;
  gap: 12px !important;
}

.gf-xs .griffinforms-payment-review-actions > *,
.gf-sm .griffinforms-payment-review-actions > * {
  width: 100% !important;
}

.gf-md .griffinforms-button-row {
  gap: 16px;
}

.gf-xs .griffinforms-form-header,
.gf-sm .griffinforms-form-header {
  margin-bottom: 1.5rem;
}

.gf-xs [data-gf-page-type="page"] {
  padding: 12px !important;
  margin: 0 !important;
}

.gf-xs .griffinforms-formpage-container.col-md-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.gf-xs [class*="mb-"] {
  margin-bottom: 0.5rem !important;
}

.gf-xs [class*="py-"] {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.gf-xs {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.gf-xs .gf-address-wrapper .row > [class*="col-"],
.gf-sm .gf-address-wrapper .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}