/*
 * Minimal custom utilities for progressive reveal SPA redesign.
 * All main styles via Tailwind classes + CDN config.
 */

/* ============================================
   Brand Color Variables (HelpMeOutOfDebt)
   ============================================ */
:root {
  --hmd-color-navy: #1A2645;
  --hmd-color-orange: #E87722;
  --hmd-color-blue: #8FA5C4;
  --hmd-color-grayBg: #F9FAFB;
  --hmd-color-red: #EF4444;
  --hmd-color-green: #10B981;
}

/* ============================================
   Standardized Button Classes
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 9999px; /* rounded-full */
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
}

.btn-primary {
  background-color: var(--hmd-color-orange);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

.btn-primary:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.03);
  background-color: #FA903A; /* Slightly lighter orange */
}

.btn-outline {
  background-color: transparent;
  color: var(--hmd-color-orange);
  border: 2px solid var(--hmd-color-orange);
}

.btn-outline:hover {
  background-color: var(--hmd-color-orange);
  color: white;
}

/* --- Range Slider (modern style) --- */
.custom-range-slider {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: #F1F5F9;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s;
}
.custom-range-slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E87722;
  box-shadow: 0 2px 8px rgba(232,119,34,0.13);
  border: 3px solid #fff;
  transition: background 0.2s;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin-top: -8px; /* Align center: track = 8px, thumb = 24px, so -(24-8)/2 */
}
.custom-range-slider:focus::-webkit-slider-thumb {
  outline: 2px solid #E87722;
  outline-offset: 2px;
}
.custom-range-slider::-webkit-slider-thumb:hover {
  background: #FA903A; /* Slightly lighter orange - hover state */
}
.custom-range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E87722;
  box-shadow: 0 2px 8px rgba(232,119,34,0.12);
  border: 3px solid #fff;
  cursor: pointer;
  margin-top: -8px;
}
.custom-range-slider::-ms-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E87722;
  box-shadow: 0 2px 8px rgba(232,119,34,0.12);
  border: 3px solid #fff;
  cursor: pointer;
  margin-top: 0px; /* Edge ignores this, but use for syntax alignment */
}
.custom-range-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg,#8FA5C4 60%,#e3e3e3 100%);
}
.custom-range-slider::-ms-fill-lower {
  background: #8FA5C4;
  border-radius: 8px;
}
.custom-range-slider::-ms-fill-upper {
  background: #e3e3e3;
  border-radius: 8px;
}
.custom-range-slider:focus {
  outline: none;
  box-shadow: 0 0 0 2px #E8772244;
}
/* Firefox */
.custom-range-slider::-moz-range-thumb {
  border: 3px solid #fff;
}
.custom-range-slider::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg,#8FA5C4 60%,#e3e3e3 100%);
}
.custom-range-slider:focus::-moz-range-thumb {
  outline: 2px solid #E87722;
}
/* Hide the outline behind the thumb for Edge/IE */
.custom-range-slider::-ms-thumb {
  outline: none;
}
.custom-range-slider:focus::-ms-fill-lower {
  background: #8FA5C4;
}
.custom-range-slider:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* tick marks for income (18 steps) and payments (8 steps) */
.ticks-income {
  background-image: repeating-linear-gradient(
    to right,
    #d1d5db 0,
    #d1d5db 1px,
    transparent 1px,
    transparent calc(100% / 18)
  );
}
.ticks-payments {
  background-image: repeating-linear-gradient(
    to right,
    #d1d5db 0,
    #d1d5db 1px,
    transparent 1px,
    transparent calc(100% / 8)
  );
}

/* --- Floating label transitions (for form) --- */
.form-label {
  transition: top 0.18s cubic-bezier(0.4,0,0.2,1), font-size 0.18s, color 0.18s;
}

/* --- Fade in animation utility --- */
.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* --- Modal accessibility: focus visible outline --- */
#thank-you-modal:focus-visible {
  outline: 2px solid #E87722;
  outline-offset: 2px;
}

.form-input-lg {
  min-height: 3.5rem; /* 56px */
  padding-top: 1.2rem;
  padding-bottom: 0.7rem;
  font-size: 1.125rem;
  background: transparent;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- Debt Health Score sphere (3D-ish) --- */
.score-sphere-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
}

.score-sphere-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(26, 38, 69, 0.15);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.4);
}

.score-sphere {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.45rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  box-shadow:
    inset 0 8px 18px rgba(255,255,255,0.35),
    inset 0 -10px 18px rgba(0,0,0,0.25),
    0 12px 28px rgba(0,0,0,0.22);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%),
              radial-gradient(circle at 70% 70%, rgba(0,0,0,0.35), rgba(0,0,0,0) 50%),
              var(--sphere-base, linear-gradient(135deg, #EF4444, #b91c1c));
  transform: scale(var(--sphere-scale, 1));
  transition: transform 0.25s ease, background 0.25s ease;
}

.score-sphere::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.score-sphere__value {
  position: relative;
  z-index: 1;
}

.score-sphere--low   { --sphere-base: linear-gradient(135deg, #10B981, #059669); }
.score-sphere--med   { --sphere-base: linear-gradient(135deg, #F59E0B, #D97706); }
.score-sphere--high  { --sphere-base: linear-gradient(135deg, #EF4444, #B91C1C); }