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

/*
 * Themed validation parity:
 * Keep no-theme Bootstrap behavior intact while giving themed controls
 * a token-driven invalid state.
 */
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid:not([type="checkbox"]):not([type="radio"]),
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid.form-control,
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid.form-select,
.griffinforms-form-container:not(.gf-no-theme) textarea.gf-validation-invalid {
  border-color: var(--gf-validation-error-color, #dc3545) !important;
  background-color: var(--gf-validation-error-bg, rgba(220, 53, 69, 0.1)) !important;
  box-shadow: 0 0 0 0.2rem var(--gf-validation-error-ring, rgba(220, 53, 69, 0.2)) !important;
}

.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid-group .form-control,
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid-group .form-select,
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid-group textarea {
  border-color: var(--gf-validation-error-color, #dc3545) !important;
}

.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid-group .input-group-text,
.griffinforms-form-container:not(.gf-no-theme) .gf-validation-invalid-group button {
  border-color: var(--gf-validation-error-color, #dc3545) !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-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.griffinforms-phone-input-group .griffinforms-phone-country-select {
  flex: 0 0 28%;
  max-width: 28%;
  min-width: 120px;
  border-right-width: var(--gf-phone-border-width, 1px) !important;
  border-right-style: var(--gf-phone-border-style, solid) !important;
  border-right-color: var(--gf-phone-border-color, #dee2e6) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="flag_code_name"] {
  flex: 0 0 35%;
  max-width: 35%;
  min-width: 140px;
  max-width: 220px;
}

.griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="flag_code"] {
  flex: 0 0 28%;
  max-width: 28%;
  min-width: 120px;
  max-width: 180px;
}

.griffinforms-phone-input-group .griffinforms-phone-country-select[data-gf-phone-display-mode="code_only"] {
  flex: 0 0 16%;
  max-width: 16%;
  min-width: 76px;
  max-width: 110px;
}

.griffinforms-phone-input-group .griffinforms-phone-country-select.form-select {
  color: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: var(--gf-phone-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='2,4 6,8 10,4' fill='none' stroke='%236c757d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) !important;
  background-position: calc(100% - 14px) 50% !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
  padding-right: 44px !important;
}

.gf-xs .griffinforms-phone-input-group .griffinforms-phone-country-select.form-select[data-gf-phone-display-mode="code_only"],
.gf-sm .griffinforms-phone-input-group .griffinforms-phone-country-select.form-select[data-gf-phone-display-mode="code_only"] {
  background-image: none !important;
  padding-right: 12px !important;
}

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

.griffinforms-phone-input-group input[type="tel"].form-control {
  margin-left: 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;
}