/* Override Bootstrap's select background image */
.form-select {
    background-image: url('../images/select-arrow.svg') !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Override other Bootstrap form control states if needed */
.form-select:focus {
    background-image: url('../images/select-arrow.svg') !important;
}

/* Ensure proper padding for the select element */
.form-select {
    padding-right: 2.25rem !important;
}

/* Radio button styles */
.form-check-input[type="radio"] {
    background-image: url('../images/radio-unchecked.svg') !important;
    border: none;
    background-color: transparent;
}

.form-check-input[type="radio"]:checked {
    background-image: url('../images/radio-checked.svg') !important;
    border-color: #0d6efd;
    background-color: #0d6efd;
}

/* Focus states */
.form-check-input[type="radio"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

/* Hover states */
.form-check-input[type="radio"]:not(:disabled):not(:checked):hover {
    border-color: #86b7fe;
    cursor: pointer;
}

/* Disabled states */
.form-check-input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Warning state for form controls (orange for CDV null) - High specificity to override Bootstrap */
input.form-control.is-warning,
input.form-control.is-warning:focus,
input.form-control.is-warning:hover {
    border-color: #fd7e14 !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fd7e14'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m6 3v2'/%3e%3cpath d='m6 8.5h.01'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
}

select.form-select.is-warning,
select.form-select.is-warning:focus,
select.form-select.is-warning:hover {
    border-color: #fd7e14 !important;
    background-image: url('../images/select-arrow.svg'), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fd7e14'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m6 3v2'/%3e%3cpath d='m6 8.5h.01'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 0.75rem center, right calc(0.375em + 2.25rem) center !important;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
}



.invalid-feedback.warning-feedback {
    color: #fd7e14;
}

.valid-feedback.warning-feedback {
    color: #fd7e14;
} 

/* =====================
   TINGO Brand Theme
   From brand guide (screenshots provided)
   - Primary: #575756 (dark grey), black #000000
   - Secondary accents: red, orange, yellow, green, blue, indigo, violet
   - Web font per guide: Arial family for electronic use
   ===================== */

:root {
  --tingo-primary-gray: #575756;
  --tingo-black: #000000;
  --tingo-accent-red: #ff0000;
  --tingo-accent-orange: #ffa500;
  --tingo-accent-yellow: #ffff00;
  --tingo-accent-green: #008000;
  --tingo-accent-blue: #0000ff;
  --tingo-accent-indigo: #4b0082;
  --tingo-accent-violet: #ee82ee;
  /* Default primary alias used across overrides */
  --tingo-primary: var(--tingo-primary-gray);
}

/* Typography: use Arial family for web per brand's electronic use */
body, input, select, textarea, button, .btn, .form-control {
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

/* Buttons and primary accents */
.btn-primary {
  background-color: var(--tingo-primary) !important;
  border-color: var(--tingo-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #444444 !important; /* slightly darker */
  border-color: #444444 !important;
}

.btn-outline-primary {
  color: var(--tingo-primary) !important;
  border-color: var(--tingo-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--tingo-primary) !important;
  color: #ffffff !important;
}

.text-primary { color: var(--tingo-primary) !important; }
.border-primary { border-color: var(--tingo-primary) !important; }

/* Progress step colours */
.progress-step.active {
  border-color: var(--tingo-primary) !important;
  color: var(--tingo-primary) !important;
}
.progress-step.completed {
  border-color: var(--tingo-accent-green) !important;
  background: var(--tingo-accent-green) !important;
  color: #ffffff !important;
}

/* Subtle multicolor accent bar under the header */
.wizard-header::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg,
    rgba(255,0,0,0.20) 0%,
    rgba(255,165,0,0.20) 14%,
    rgba(255,255,0,0.20) 28%,
    rgba(0,128,0,0.20) 42%,
    rgba(0,0,255,0.20) 57%,
    rgba(75,0,130,0.20) 72%,
    rgba(238,130,238,0.20) 86%,
    rgba(87,87,86,0.20) 100%
  );
}

/* Radio/checkbox checked states */
.form-check-input:checked {
  background-color: var(--tingo-primary) !important;
  border-color: var(--tingo-primary) !important;
}

/* Links */
a { color: var(--tingo-primary); }
a:hover, a:focus { color: #3f3f3e; }

/* Table header using Bootstrap's table-primary */
.table-primary {
  --bs-table-bg: #e9e9e9 !important; /* light grey */
  --bs-table-striped-bg: #e3e3e3 !important;
  --bs-table-striped-color: #000 !important;
  --bs-table-active-bg: #dddddd !important;
  --bs-table-hover-bg: #e5e5e5 !important;
  color: #000 !important;
  border-color: #d3d3d3 !important;
}

/* Progress line with subtle rainbow tint for visual interest */
.progress-steps::before {
  background: linear-gradient(90deg,
    rgba(255,0,0,0.12) 0%,
    rgba(255,165,0,0.12) 16%,
    rgba(255,255,0,0.12) 32%,
    rgba(0,128,0,0.12) 48%,
    rgba(0,0,255,0.12) 64%,
    rgba(75,0,130,0.12) 80%,
    rgba(238,130,238,0.12) 100%
  ) !important;
}

/* Subtle brand accents for professional look */
.form-control:focus, .form-select:focus {
  border-color: var(--tingo-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(87, 87, 86, 0.25) !important; /* soft grey glow */
}

/* Section headers get a thin left border accent to bring brand colour in without overwhelming */
.form-section h3 {
  border-left: 4px solid var(--tingo-primary);
  padding-left: 0.5rem;
}

/* Step-specific header accents (very subtle guidance) */
#step1 .form-section h3 { border-left-color: var(--tingo-accent-red); }
#step2 .form-section h3 { border-left-color: var(--tingo-accent-orange); }
#step3 .form-section h3 { border-left-color: var(--tingo-accent-yellow); }
#step4 .form-section h3 { border-left-color: var(--tingo-accent-green); }
#step5 .form-section h3 { border-left-color: var(--tingo-accent-blue); }
#step6 .form-section h3 { border-left-color: var(--tingo-accent-indigo); }
#step7 .form-section h3 { border-left-color: var(--tingo-accent-violet); }

/* Primary buttons remain strong, others are neutral */
.btn-outline-primary { color: var(--tingo-primary) !important; border-color: var(--tingo-primary) !important; }
.btn-outline-primary:hover { background: var(--tingo-primary) !important; color: #fff !important; }

/* Range slider styling for professional look */
.form-range {
  height: 1.25rem;
  background: transparent;
  padding: 0;
}

/* Remove the default track fill and create custom track */
.form-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #dee2e6 0%, #dee2e6 100%);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.form-range::-moz-range-track {
  background: #dee2e6;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* Style the thumb */
.form-range::-webkit-slider-thumb {
  background: var(--tingo-primary);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -0.5rem;
  -webkit-appearance: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.form-range::-moz-range-thumb {
  background: var(--tingo-primary);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Add visual stops/ticks using datalist styling */
.form-range {
  position: relative;
}

/* Container for slider with ticks */
.slider-container {
  position: relative;
  padding-bottom: 1.5rem;
}

.slider-ticks {
  position: absolute;
  width: 100%;
  height: 0.5rem;
  top: 0.375rem;
  left: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem;
}

.slider-tick {
  width: 2px;
  height: 0.75rem;
  background: #6c757d;
  margin-top: -0.125rem;
}