/* Storefront theme for the forms-only Bootstrap build (assets/vendor/bootstrap/dkc-bootstrap-forms.css).
   Load AFTER the page's other stylesheets. Replaces dkc-modern-fields.css. */
:root {
  --dkc-field-accent: #18a9a5;
  --dkc-field-ring: rgba(24, 169, 165, .18);
  --dkc-field-radius: 12px;
  --dkc-field-radius-sm: 9px;
  --dkc-field-radius-lg: 14px;
  --bs-body-color: #25263e;
  --bs-body-bg: #fff;
  --bs-border-color: #dfe2eb;
  --bs-border-width: 1.5px;
  --bs-secondary-color: #8991a4;      /* placeholder text */
  --bs-secondary-bg: #f3f5f8;         /* disabled fields */
  --bs-tertiary-bg: #f6f7fa;          /* input-group add-ons */
  --bs-emphasis-color: #17254c;
  --bs-form-invalid-color: #c2304f;
  --bs-form-invalid-border-color: #d94a6c;
  --bs-form-valid-color: #15803d;
  --bs-form-valid-border-color: #2f9e5b;
}

.form-control, .form-select {
  min-height: 46px;
  padding-top: .65rem;
  padding-bottom: .65rem;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(32, 36, 59, .025);
}
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: #b8c6d4; }
textarea.form-control { min-height: 104px; resize: vertical; }
.form-control-sm, .form-select-sm { min-height: 36px; padding-top: .35rem; padding-bottom: .35rem; font-size: 13px; }

/* Search fields keep their pill shape and magnifier icon. */
.form-control[type="search"] {
  border-radius: 999px;
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 18px;
}
.form-control[type="search"].no-icon { padding-left: .875rem; background-image: none; border-radius: var(--dkc-field-radius); }

/* Labels that wrap their field (<label class="form-label">Name <input class="form-control"></label>). */
label.form-label { display: block; font-size: 14px; color: inherit; }
label.form-label > .form-control, label.form-label > .form-select, label.form-label > .dkc-password-field { margin-top: .375rem; }
.form-check { min-height: 1.5rem; }
.form-check-label, label.form-check { cursor: pointer; }
.form-check-input { cursor: pointer; }

/* Existing scripts flag problems with aria-invalid; show them the Bootstrap way. */
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--bs-form-invalid-border-color); }
.form-control[aria-invalid="true"]:focus, .form-select[aria-invalid="true"]:focus { box-shadow: 0 0 0 .25rem rgba(217, 74, 108, .15); }

/* 16px on phones stops iOS from zooming into fields. */
@media (max-width: 640px) {
  .form-control, .form-select { font-size: 16px; }
}

/* Checkboxes and radios need a stronger outline than text fields to be visible on white. */
.form-check-input { border-color: #9aa3b5; }
.form-check-input:checked { border-color: var(--dkc-field-accent); }