:root {
  --zq-purple: #7c3aed;
  --zq-purple-strong: #5b21b6;
  --zq-purple-soft: #e4d4ff;
  --zq-purple-glow: rgba(124, 58, 237, 0.38);
  --zq-text: #f7f0ff;
  --zq-muted: #c7b6df;
  --zq-sans: Arial, Helvetica, sans-serif;
  --zq-serif: "Times New Roman", Times, serif;
}

html,
body {
  font-family: var(--zq-sans) !important;
  background-color: #05030a !important;
  color: #fff;
}

body {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 26%),
    radial-gradient(circle at 84% 12%, rgba(192, 132, 252, 0.11), transparent 22%),
    linear-gradient(180deg, #05030a 0%, #0b0514 42%, #12081f 100%) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-8xl,
.text-7xl,
.text-6xl,
.text-4xl,
.text-3xl,
.swal2-title,
.radial-progress,
.brand-luxury {
  font-family: var(--zq-serif) !important;
  letter-spacing: 0.02em;
}

::selection {
  background: #fff;
  color: #12081f;
}

::-moz-selection {
  background: #fff;
  color: #12081f;
}

.bg-main,
.hover\:bg-main:hover,
.navMob.active,
[type="button"],
[type="reset"],
[type="submit"],
button,
.green,
.floating-wpp .floating-wpp-popup .floating-wpp-head,
.swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, var(--zq-purple) 0%, #9f67ff 100%) !important;
  background-color: var(--zq-purple) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.text-main,
.text-blue-400,
.text-blue-500,
.text-blue-600,
.hover\:text-main:hover,
.navMain.active,
.valid\:text-main:valid,
.peer:valid ~ .peer-valid\:text-main,
.peer:focus ~ .peer-focus\:text-main,
.text-green-400,
.text-green-500,
.text-green-600 {
  color: var(--zq-purple) !important;
}

a,
a:visited,
label,
p,
li,
legend,
small,
span,
.text-gray-300,
.text-gray-500 {
  color: #fff !important;
}

a,
a:visited,
a span,
.text-main,
.hover\:text-main:hover,
.navMain.active,
.valid\:text-main:valid,
.peer:valid ~ .peer-valid\:text-main,
.peer:focus ~ .peer-focus\:text-main,
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-green-400,
.text-green-500,
.text-green-600 {
  color: var(--zq-purple) !important;
}

.border-main,
.focus\:border-main:focus {
  border-color: var(--zq-purple) !important;
}

.shadow-main {
  --tw-shadow-color: var(--zq-purple-glow) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.bg-sub,
.max-md\:bg-sub,
.bg-neutral-950,
.bg-neutral-900,
.bg-gray-950,
.bg-gray-900 {
  background-color: rgba(13, 7, 24, 0.96) !important;
}

.bg-gray-100 {
  background-color: #f3ecff !important;
}

.text-gray-300,
.text-gray-500 {
  color: var(--zq-muted) !important;
}

input,
textarea,
select {
  color: #fff !important;
  caret-color: var(--zq-purple-soft);
}

input:valid,
textarea:valid,
select:valid,
input.valid\:text-main:valid,
textarea.valid\:text-main:valid,
select.valid\:text-main:valid {
  color: #fff !important;
}

select {
  appearance: auto;
  background-image: none !important;
  color-scheme: dark;
}

select option,
select optgroup {
  background-color: #160d27;
  color: #f7f0ff;
}

input:focus,
textarea:focus,
select:focus {
  outline: solid 1px var(--zq-purple) !important;
  border-color: var(--zq-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: #9f8dbb !important;
}

.toggle-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%)
    center / 100% 100% no-repeat;
}

.toggle-password ion-icon {
  display: none !important;
}

.toggle-password::before {
  content: "";
  width: 1.05rem;
  height: 0.7rem;
  border: 2px solid #fff;
  border-radius: 100% / 85%;
  box-sizing: border-box;
}

.toggle-password::after {
  content: "";
  position: absolute;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.toggle-password.is-revealed {
  background: none;
}

.input-group-prepend,
.input-group-text {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: transparent !important;
  z-index: 4;
}

.sk-three-bounce .sk-child {
  background-color: var(--zq-purple) !important;
}

.iti__country-list {
  border-color: rgba(202, 170, 255, 0.2);
}

.swal2-popup,
.swal2-html-container {
  font-family: var(--zq-sans) !important;
}

.swal2-title {
  color: var(--zq-purple) !important;
}