/**
 * Bootstrap Fallback Styles for Unthemed Forms
 *
 * These styles apply when no form theme is assigned (gf-no-theme class).
 * Provides Bootstrap-based styling as a sensible default for forms without custom themes.
 *
 * Architecture:
 * - Scoped entirely within .gf-no-theme class
 * - Uses data attributes for element targeting (data-gf-field-type, data-gf-button-type, data-gf-element)
 * - Only loads when form has no theme assigned
 * - Bootstrap 5 color palette used for consistency
 *
 * Note: Most form styles are provided by Bootstrap classes:
 * - Text inputs use .form-control
 * - Textareas use .form-control
 * - Select dropdowns use .form-select
 * - Buttons use .btn, .btn-primary, .btn-secondary
 * - Alerts use .alert, .alert-success
 *
 * This file only provides custom styling not covered by Bootstrap defaults.
 */

/* Checkbox and Radio Inputs */
.gf-no-theme [data-gf-field-type="checkbox_radio"] input[type="checkbox"],
.gf-no-theme [data-gf-field-type="checkbox_radio"] input[type="radio"] {
  accent-color: #0d6efd;
  cursor: pointer;
}

/* Phone input group sizing for no-theme forms */
.gf-no-theme .griffinforms-phone-input-group .griffinforms-phone-country-select {
  flex: 0 0 28% !important;
  max-width: 28% !important;
  width: 28% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

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

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

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