/**
 * Lendesca Apply — custom styles
 *
 * Matches the React Fintech-Homepage app design:
 *   - Dark (#0F2F2B) immersive background
 *   - Large serif headings, yellow accents
 *   - Transparent inputs with bottom-border only
 *   - Segmented credit score slider
 *
 * Tailwind utilities handle the bulk of styling.
 * This file covers what utility classes cannot express.
 */

/* ── Apply page body ──────────────────────────────────────────────────────── */

.lendesca-apply-page {
  overflow-x: hidden;
  background-color: #0F2F2B;
  margin: 0;
  padding: 0;
}

/* ── Button glow effect (matches React shadow) ───────────────────────────── */

.lsp-btn-glow {
  box-shadow: 0 4px 24px rgba(242, 242, 58, 0.3);
}

.lsp-btn-glow:hover {
  box-shadow: 0 6px 32px rgba(242, 242, 58, 0.4);
}

/* ── Selected chip glow ───────────────────────────────────────────────────── */

.lsp-chip-selected {
  box-shadow: 0 0 20px rgba(242, 242, 58, 0.3);
}

/* ── Credit slider (segmented color track with custom thumb) ──────────────── */

.lsp-slider-track {
  position: relative;
}

.lsp-credit-slider-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  height: 100%;
}

.lsp-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #22c55e;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  z-index: 20;
  pointer-events: none;
  margin-left: -12px;
  transition: left 0.15s ease, border-color 0.15s ease;
}

/* ── SBA Learn More modal ─────────────────────────────────────────────────── */

.lsp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lsp-backdrop-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Session-expired banner ───────────────────────────────────────────────── */

.lsp-session-expired {
  position: fixed;
  inset: 0;
  background: #0F2F2B;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

/* ── Override @tailwindcss/forms plugin for transparent bottom-border inputs ── */

.lendesca-apply-page input[type="text"],
.lendesca-apply-page input[type="email"],
.lendesca-apply-page input[type="tel"] {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding-left: 0.5rem;
}

.lendesca-apply-page input[type="text"]:focus,
.lendesca-apply-page input[type="email"]:focus,
.lendesca-apply-page input[type="tel"]:focus {
  outline: none;
  box-shadow: none;
  ring: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: #F2F23A;
}

.lendesca-apply-page textarea:focus {
  outline: none;
  box-shadow: none;
}

/* ── Smooth transitions ───────────────────────────────────────────────────── */

.lendesca-apply-page * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Opacity utilities that may not be in Tailwind build ──────────────────── */
/* These are fallbacks in case the Tailwind build hasn't picked up the new
   opacity modifier classes yet. They use the exact same values. */

.bg-lendesca-signal\/15 { background-color: rgba(242, 242, 58, 0.15); }
.bg-lendesca-signal\/20 { background-color: rgba(242, 242, 58, 0.2); }
.text-lendesca-signal\/80 { color: rgba(242, 242, 58, 0.8); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.text-white\/30 { color: rgba(255, 255, 255, 0.3); }
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.hover\:border-white\/40:hover { border-color: rgba(255, 255, 255, 0.4); }
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-white\/70:hover { color: rgba(255, 255, 255, 0.7); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
.placeholder\:text-white\/30::placeholder { color: rgba(255, 255, 255, 0.3); }
.focus\:border-lendesca-signal:focus { border-color: #F2F23A; }