/* ==========================================================================
   GiveRefer — Auth (Login) redesign
   Scoped under .gr-auth. Uses px (legacy html{font-size:10px} contaminates rem).
   High-specificity + !important where legacy upgrade/css/main.css and
   style.css (#wrapper h1, button{...!important}) would otherwise win.
   Brand tokens mirror giverefer-chrome.css.
   ========================================================================== */

.gr-auth {
  --gra-pink: #ec2d7a;
  --gra-magenta: #c026d3;
  --gra-violet: #6d28d9;
  --gra-fg: #1c1530;
  --gra-muted: #6b6580;
  --gra-border: #ece8f2;
  --gra-gradient: linear-gradient(100deg, #ec2d7a 0%, #c026d3 50%, #6d28d9 100%);

  position: relative;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(900px 500px at 85% 12%, rgba(192, 38, 211, 0.10), transparent 60%),
    radial-gradient(700px 480px at 8% 90%, rgba(236, 45, 122, 0.08), transparent 60%),
    linear-gradient(180deg, #faf7ff 0%, #f5f0fb 100%);
  padding: 56px 16px 72px;
  overflow: hidden;
}

/* ---- Card shell with gradient border ---- */
.gr-auth__card {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 2px;                      /* gradient border thickness */
  background: var(--gra-gradient);
  box-shadow: 0 30px 80px -30px rgba(108, 40, 217, 0.35);
}
.gr-auth__inner {
  position: relative;
  border-radius: 26px;
  background:
    radial-gradient(620px 420px at 55% 50%, rgba(236, 45, 122, 0.07), transparent 62%),
    radial-gradient(600px 380px at 80% 16%, rgba(192, 38, 211, 0.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='300' viewBox='0 0 320 300'%3E%3Cg fill='%23c026d3' fill-opacity='0.16'%3E%3Cpath d='M30 20c.3 2.7 1 4.7 3.7 5.3-2.7.6-3.4 2.6-3.7 5.3-.3-2.7-1-4.7-3.7-5.3 2.7-.6 3.4-2.6 3.7-5.3z'/%3E%3Cpath d='M250 60c.3 2.7 1 4.7 3.7 5.3-2.7.6-3.4 2.6-3.7 5.3-.3-2.7-1-4.7-3.7-5.3 2.7-.6 3.4-2.6 3.7-5.3z'/%3E%3Cpath d='M120 250c.3 2.7 1 4.7 3.7 5.3-2.7.6-3.4 2.6-3.7 5.3-.3-2.7-1-4.7-3.7-5.3 2.7-.6 3.4-2.6 3.7-5.3z'/%3E%3Cpath d='M300 200c.3 2.7 1 4.7 3.7 5.3-2.7.6-3.4 2.6-3.7 5.3-.3-2.7-1-4.7-3.7-5.3 2.7-.6 3.4-2.6 3.7-5.3z'/%3E%3Ccircle cx='180' cy='30' r='2.2'/%3E%3Ccircle cx='60' cy='150' r='2.2'/%3E%3Ccircle cx='280' cy='130' r='2.2'/%3E%3Ccircle cx='200' cy='270' r='2.2'/%3E%3Ccircle cx='90' cy='90' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #fdfbff 0%, #f7f1fc 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-color: #fdfbff;
  padding: 56px 56px 60px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}

/* decorative sparkles */
.gr-auth__spark {
  position: absolute;
  color: var(--gra-magenta);
  opacity: 0.55;
  pointer-events: none;
}
.gr-auth__spark--1 { top: 40px;  right: 120px; width: 26px; height: 26px; opacity: .65; }
.gr-auth__spark--2 { top: 90px;  right: 60px;  width: 16px; height: 16px; color: var(--gra-pink); }
.gr-auth__spark--3 { top: 150px; right: 150px; width: 12px; height: 12px; opacity: .5; }
.gr-auth__spark--4 { bottom: 70px; left: 46%;  width: 14px; height: 14px; color: var(--gra-violet); opacity: .45; }

/* ============================ LEFT: form ============================ */
.gr-auth__form-col { position: relative; z-index: 2; max-width: 460px; }

.gr-auth h1.gr-auth__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 46px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.5px;
  background-image: var(--gra-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.gr-auth__subtitle {
  font-size: 17px;
  color: var(--gra-muted);
  margin: 0 0 30px;
  font-weight: 400;
}

/* short gradient divider with dot (register) */
.gr-auth__divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -18px 0 28px;
}
.gr-auth__divider::before {
  content: "";
  width: 120px; height: 3px; border-radius: 3px;
  background-image: var(--gra-gradient);
}
.gr-auth__divider::after {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gra-magenta);
}

.gr-auth__field {
  position: relative;
  margin-bottom: 18px;
}
.gr-auth__field-icon {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--gra-magenta);
  pointer-events: none;
}
.gr-auth .gr-auth__input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--gra-border);
  border-radius: 16px;
  background: #fff;
  padding: 0 18px 0 52px;
  font-size: 16px;
  color: var(--gra-fg);
  box-shadow: 0 6px 18px -10px rgba(108, 40, 217, 0.18);
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
  font-family: inherit;
}
.gr-auth .gr-auth__input::placeholder { color: #a59fb5; text-transform: none; }
.gr-auth .gr-auth__input:focus {
  border-color: var(--gra-magenta);
  box-shadow: 0 0 0 4px rgba(192, 38, 211, 0.12);
}

/* password show/hide eye toggle */
.gr-auth__field--pw .gr-auth__input { padding-right: 50px; }
.gr-auth button.gr-auth__eye {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  color: var(--gra-muted) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.gr-auth button.gr-auth__eye:hover { color: var(--gra-magenta) !important; }
.gr-auth__eye svg { width: 20px; height: 20px; }
.gr-auth__eye .gr-auth__eye-off { display: none; }
.gr-auth__eye.is-visible .gr-auth__eye-on { display: none; }
.gr-auth__eye.is-visible .gr-auth__eye-off { display: block; }

/* terms checkbox row (register) */
.gr-auth__terms {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 18px;
  font-size: 15px;
  color: var(--gra-fg);
  cursor: pointer;
}
.gr-auth__terms input {
  width: 17px; height: 17px;
  accent-color: var(--gra-magenta);
  cursor: pointer;
  flex: none;
}
.gr-auth__terms a { color: var(--gra-pink) !important; font-weight: 700; text-decoration: none; }
.gr-auth__terms a:hover { text-decoration: underline; }

/* recaptcha */
.gr-auth__recaptcha { margin: 0 0 22px; max-width: 100%; overflow: hidden; }
.gr-auth__recaptcha .g-recaptcha { transform-origin: 0 0; }
/* the widget is a fixed ~304px iframe — scale it down so it never overflows narrow screens */
@media (max-width: 360px) {
  .gr-auth__recaptcha .g-recaptcha { transform: scale(0.85); }
}
@media (max-width: 320px) {
  .gr-auth__recaptcha .g-recaptcha { transform: scale(0.78); }
}

.gr-auth__forgot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gra-violet) !important;
  text-decoration: none;
}
.gr-auth__forgot svg { width: 16px; height: 16px; }
.gr-auth__forgot:hover { color: var(--gra-magenta) !important; text-decoration: none; }

.gr-auth__remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-size: 15px;
  color: var(--gra-fg);
  cursor: pointer;
}
.gr-auth__remember input {
  width: 17px; height: 17px;
  accent-color: var(--gra-magenta);
  cursor: pointer;
}

/* LOGIN NOW button — must beat upgrade/css/main.css button{...!important} */
.gr-auth button.gr-auth__submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-width: 300px;
  height: 62px;
  padding: 0 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-image: var(--gra-gradient) !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(192, 38, 211, 0.6) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gr-auth button.gr-auth__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -12px rgba(192, 38, 211, 0.7) !important;
}
.gr-auth__submit svg { width: 20px; height: 20px; }

.gr-auth__register {
  margin: 22px 0 0;
  font-size: 15.5px;
  color: var(--gra-fg);
}
.gr-auth__register a {
  color: var(--gra-pink) !important;
  font-weight: 700;
  text-decoration: none;
}
.gr-auth__register a:hover { text-decoration: underline; }

/* validation / flash */
.gr-auth__alert {
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
  font-weight: 500;
}
.gr-auth__alert--error { background: #fde8ef; color: #b1245a; border: 1px solid #f6c2d5; }
.gr-auth__alert--success { background: #e7f9ee; color: #1a8a4d; border: 1px solid #bfe9cf; }

/* ============================ RIGHT: visual ============================ */
.gr-auth__visual-col {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}
/* solo genie (forgot/reset helper pages) — no promo column */
.gr-auth__visual-col--solo {
  grid-template-columns: 1fr;
  justify-items: center;
}
.gr-auth__visual-col--solo .gr-auth__genie { max-width: 380px; }

.gr-auth__genie-wrap { position: relative; display: flex; justify-content: center; }
/* soft pink magic swirl glow behind the genie */
.gr-auth__genie-wrap::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 130%; height: 118%;
  background:
    radial-gradient(closest-side, rgba(236, 45, 122, 0.22), transparent 72%),
    radial-gradient(closest-side at 60% 60%, rgba(192, 38, 211, 0.18), transparent 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.gr-auth__genie {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 26px 36px rgba(109, 40, 217, 0.35));
}
.gr-auth__genie--tall { max-width: 360px; }
.gr-auth__genie--hero { max-width: 400px; }

.gr-auth__promo { position: relative; }
.gr-auth h2.gr-auth__promo-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 44px !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  color: #2a1b54 !important;
  margin: 0 0 30px !important;
  letter-spacing: -0.5px;
}
.gr-auth__promo-title .accent {
  position: relative;
  background-image: var(--gra-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.gr-auth__promo-title .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px; border-radius: 4px;
  background-image: var(--gra-gradient);
}

.gr-auth__feature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.gr-auth__feature-icon {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(236, 45, 122, 0.10);
  color: var(--gra-magenta);
  box-shadow: 0 8px 20px -10px rgba(192, 38, 211, 0.4);
}
.gr-auth__feature-icon svg { width: 26px; height: 26px; }
.gr-auth__feature-text { line-height: 1.25; }
.gr-auth__feature-text strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--gra-fg);
}
.gr-auth__feature-text span {
  font-size: 15px;
  color: var(--gra-muted);
}

/* ============================ Responsive ============================ */
@media (max-width: 991px) {
  .gr-auth__inner {
    grid-template-columns: 1fr;
    padding: 40px 28px 44px;
    gap: 32px;
  }
  .gr-auth__form-col { max-width: none; margin: 0 auto; width: 100%; }
  .gr-auth__visual-col { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gr-auth__genie { max-width: 220px; }
  .gr-auth h2.gr-auth__promo-title { font-size: 32px !important; }
  .gr-auth__feature { justify-content: center; text-align: left; }
  .gr-auth__spark--1, .gr-auth__spark--2, .gr-auth__spark--3 { display: none; }
}

@media (max-width: 575px) {
  .gr-auth { padding: 32px 10px 48px; }
  .gr-auth__inner { padding: 30px 20px 34px; border-radius: 20px; }
  .gr-auth h1.gr-auth__title { font-size: 36px !important; }
  .gr-auth__subtitle { font-size: 15.5px; }
  .gr-auth button.gr-auth__submit { width: 100%; min-width: 0; }
  .gr-auth__genie { max-width: 180px; }
  .gr-auth h2.gr-auth__promo-title { font-size: 27px !important; }
}