/**
 * Contact form additions: service checkbox grid, image upload widget,
 * inline validation errors, required-field asterisk.
 *
 * Reuses the existing DC Clinic design tokens (--dc-gold, --dc-surface-low,
 * --dc-radius, --dc-space-*, --dc-font-body, --dc-text-*) defined in
 * assets/css/style.css — no new colors, radii, or typography introduced.
 *
 * Enqueued only on the Contact page (see dcclinic_conditional_assets()).
 */

.dc-required {
  color: var(--dc-error);
}

.dc-form-error {
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
  font-size: var(--dc-text-caption);
  color: var(--dc-error);
}

.dc-form-control.is-invalid,
.dc-form-textarea.is-invalid {
  border-color: var(--dc-error);
}

.dc-form-control.is-invalid:focus,
.dc-form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1);
}

/* ---- Service checkbox grid ---- */

.dc-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 16px;
}

.dc-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--dc-surface);
  border: 1.5px solid rgba(99, 89, 67, 0.12);
  border-radius: 8px;
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-body);
  color: var(--dc-on-surface);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
}

.dc-checkbox:hover {
  border-color: var(--dc-gold);
}

.dc-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--dc-gold);
  flex-shrink: 0;
}

.dc-checkbox:has(input:checked) {
  border-color: var(--dc-gold);
  background: var(--dc-surface-low);
}

/* ---- Image upload widget ---- */

.dc-upload__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dc-surface-low);
  border: 1.5px dashed var(--dc-outline);
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-label);
  font-weight: 600;
  color: var(--dc-navy-deep);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
}

.dc-upload__btn:hover {
  border-color: var(--dc-gold);
  background: #fff;
}

.dc-upload__btn .material-symbols-outlined {
  color: var(--dc-gold);
  font-size: 22px;
}

.dc-upload__hint {
  margin: 8px 0 0;
  font-size: var(--dc-text-caption);
  color: var(--dc-on-surface-variant);
  opacity: 0.75;
}

.dc-upload__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-upload__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--dc-surface);
  border: 1px solid rgba(99, 89, 67, 0.1);
  border-radius: 8px;
}

.dc-upload__thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--dc-surface-low);
}

.dc-upload__filename {
  flex: 1;
  min-width: 0;
  font-size: var(--dc-text-label);
  color: var(--dc-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-upload__filesize {
  font-size: var(--dc-text-caption);
  color: var(--dc-on-surface-variant);
  opacity: 0.7;
  flex-shrink: 0;
}

.dc-upload__remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--dc-error);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-label);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.dc-upload__remove:hover {
  background: rgba(186, 26, 26, 0.08);
}

/* ---- Submit / result state ---- */

#dc-contact-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.dc-contact-form__result {
  margin-top: 20px;
}

.dc-contact-form__result:empty {
  margin-top: 0;
}

.dc-contact-form__result--success {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(76, 145, 91, 0.1);
  color: #2e5e3a;
  font-size: var(--dc-text-body);
}

.dc-contact-form__result--error {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(186, 26, 26, 0.08);
  color: var(--dc-error);
  font-size: var(--dc-text-body);
}

@media (max-width: 576px) {
  .dc-checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Full-bleed map section (page-contact.php) — edge-to-edge, no container/rounding */
.dc-contact-map-full {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.dc-contact-map-full iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
@media (max-width: 767px) {
  .dc-contact-map-full iframe { height: 340px; }
}