/* ================================================================== *
 * Province Map — Interactive SA province selection                    *
 * DM brand colours: navy #2B3A67, green #7AB648                      *
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Map container
 * ------------------------------------------------------------------ */

.province-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.province-map-container {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dm-surface, #f8fafc);
  border: 1.5px solid var(--dm-border, #e2e8f0);
  box-shadow: 0 4px 16px rgba(43, 58, 103, 0.10);
  transition: box-shadow 0.3s ease;
}

.province-map-container:hover {
  box-shadow: 0 6px 24px rgba(43, 58, 103, 0.15);
}

/* ------------------------------------------------------------------ *
 * SVG map
 * ------------------------------------------------------------------ */

.sa-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Province paths — states: default, hover, selected, focus
 * ------------------------------------------------------------------ */

.province {
  fill: currentColor;
  color: var(--province-default-fill, #dbe3f4);
  stroke: #ffffff;
  stroke-width: 1.5px;
  cursor: pointer;
  transition:
    color 0.22s ease,
    filter 0.22s ease,
    transform 0.18s ease;
  transform-origin: center center;
  transform-box: fill-box;
  outline: none;
}

.province:hover {
  color: var(--dm-navy, #2B3A67);
  filter: drop-shadow(0 2px 6px rgba(43, 58, 103, 0.35));
  transform: scale(1.02);
}

.province:focus-visible {
  color: var(--dm-navy, #2B3A67);
  stroke: var(--dm-green, #7AB648);
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 0 3px rgba(122, 182, 72, 0.4));
}

.province.selected {
  color: var(--dm-green, #7AB648);
  filter: drop-shadow(0 2px 8px rgba(122, 182, 72, 0.45));
  transform: scale(1.025);
}

.province.selected:hover {
  color: var(--dm-green-dim, #5e9a34);
}

/* Dark mode adjustments */
[data-theme="dark"] .province {
  color: #3a4980;
}

[data-theme="dark"] .province:hover {
  color: #4a5fa8;
}

[data-theme="dark"] .province.selected {
  color: var(--dm-green, #7AB648);
}

[data-theme="dark"] .province-map-container {
  background: var(--dm-surface, #1e2148);
  border-color: #3a4080;
}

/* ------------------------------------------------------------------ *
 * Province labels (SVG text elements)
 * ------------------------------------------------------------------ */

.province-label {
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  fill: #2B3A67;
  pointer-events: none;
  user-select: none;
  transition: fill 0.22s ease;
}

[data-theme="dark"] .province-label {
  fill: #c8d0e8;
}

/* ------------------------------------------------------------------ *
 * Selected province display
 * ------------------------------------------------------------------ */

.map-selection-display {
  margin-top: 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-selection-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(122, 182, 72, 0.12);
  border: 1.5px solid var(--dm-green, #7AB648);
  border-radius: 8px;
  color: var(--dm-green-dim, #5e9a34);
  font-size: 0.875rem;
  font-weight: 600;
  animation: selectionFadeIn 0.25s ease;
}

.map-selection-badge .check-icon {
  font-size: 1rem;
  color: var(--dm-green, #7AB648);
}

.map-selection-prompt {
  color: var(--text-muted, #6b7280);
  font-size: 0.875rem;
}

@keyframes selectionFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ *
 * Branch picker
 * ------------------------------------------------------------------ */

.branch-picker-container {
  margin-top: 16px;
  padding: 16px;
  background: var(--dm-surface, #f8fafc);
  border: 1.5px solid var(--dm-border, #e2e8f0);
  border-radius: 10px;
  animation: selectionFadeIn 0.25s ease;
}

[data-theme="dark"] .branch-picker-container {
  background: #1e2148;
  border-color: #3a4080;
}

.branch-picker-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dm-navy, #2B3A67);
  margin-bottom: 10px;
}

[data-theme="dark"] .branch-picker-label {
  color: #c8d0e8;
}

/* Single-branch confirmation */
.branch-auto-selected {
  padding: 10px 14px;
  background: rgba(122, 182, 72, 0.08);
  border: 1px solid rgba(122, 182, 72, 0.3);
  border-radius: 8px;
}

.branch-selected-label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-primary, #1e293b);
}

.branch-check {
  color: var(--dm-green, #7AB648);
  font-weight: 700;
  margin-right: 4px;
}

/* Multi-branch options */
.branch-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.branch-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--dm-border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.branch-option:hover {
  border-color: var(--dm-navy, #2B3A67);
  background: rgba(43, 58, 103, 0.04);
}

.branch-option:has(.branch-radio:checked) {
  border-color: var(--dm-green, #7AB648);
  background: rgba(122, 182, 72, 0.08);
}

.branch-radio {
  accent-color: var(--dm-green, #7AB648);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.branch-option-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #1e293b);
}

.branch-option-code {
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
}

/* ------------------------------------------------------------------ *
 * Form error display for hidden region/branch fields
 * ------------------------------------------------------------------ */

.map-field-error {
  display: block;
  color: var(--color-error, #dc2626);
  font-size: 0.82rem;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .province-map-wrapper {
    max-width: 100%;
  }

  .province-label {
    font-size: 8px;
  }

  .map-selection-badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}