/* ===========================
   SD Design Tokens + Utilities
   =========================== */

/* Tokens */
:root {
  --di-bg: #121212;
  --di-panel: #242424;
  --di-input: #3f3d3d78;
  --di-text: #e3e4edd2;
  --di-muted: #6F7287;
  --di-primary: #2979FF;
  --di-secondary: #7249FF;
  --di-accent: #FFD400;
  --di-border: #2E3042;
}

/* Utilities (match your master) */
.bg-di-bg { background-color: var(--di-bg) !important; }
.bg-di-panel { background-color: var(--di-panel) !important; }
.bg-di-input { background-color: var(--di-input) !important; }
.text-di-text { color: var(--di-text) !important; }
.text-di-muted { color: var(--di-muted) !important; }
.bg-di-primary { background-color: var(--di-primary) !important; }
.bg-di-secondary { background-color: var(--di-secondary) !important; }
.text-di-accent { color: var(--di-accent) !important; }
.border-di-border { border-color: var(--di-border) !important; }

/* Hover utility (keep Tailwind-style escaped class) */
.hover\:bg-di-panel:hover { background-color: var(--di-panel) !important; }

/* Floating label: when input has content, float the label */
.peer:not(:placeholder-shown) ~ label {
  top: 0.5rem;
  font-size: 0.75rem;
  color: var(--di-primary);
}

/* Autofill background fix (inputs + selects, all states) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--di-input) inset !important;
  box-shadow: 0 0 0 1000px var(--di-input) inset !important;
  -webkit-text-fill-color: var(--di-text) !important;
  color: var(--di-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Base document tweaks from master */
html { font-size: 18px; }
body {
  margin: 0;
  padding: 0;
  background: var(--di-bg);
}

/* Select dropdown options theme */
select option {
  background-color: var(--di-panel);
  color: var(--di-text);
}

/* ===========================
   3rd-party component alignment
   (react-phone-input-2)
   =========================== */
.react-tel-input .form-control {
  background-color: var(--di-input) !important;
  color: var(--di-text) !important;
  border: 1px solid var(--di-border) !important;
  border-radius: 0.5rem !important;
  height: 48px !important;
  padding-top: 1.25rem !important;   /* pt-5 */
  padding-bottom: 0.5rem !important; /* pb-2 */
  padding-left: 20px !important;     /* space for flag */
  font-size: 1rem !important;
}
.react-tel-input .flag-dropdown {
  background: var(--di-input) !important;
  border: 1px solid var(--di-border) !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
  height: 48px !important;
}
.react-tel-input .selected-flag {
  height: 48px !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
}
.react-tel-input .country-list {
  background: var(--di-panel) !important;
  color: var(--di-text) !important;
  border: 1px solid var(--di-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 2px 8px #0003;
  padding: 0.25rem 0;
}
.react-tel-input .country-list .country {
  color: var(--di-text) !important;
  padding: 0.5rem 1rem;
  transition: background 0.2s;
}
.react-tel-input .country-list .country:hover,
.react-tel-input .country-list .country.highlight {
  background: var(--di-primary) !important;
  color: var(--di-text) !important;
}