.elementor-19 .elementor-element.elementor-element-490f0295{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-490f0295 *//* =====================================================
   FINAL — USERWP LOGIN + FORGOT + CREATE (CENTER + ALIGN)
   Elementor Shortcode widget class: uwp-login-canada
===================================================== */

.uwp-login-canada{
  --ca-red:#E31837;
  --ca-red2:#C8102E;
  --dark:#0f172a;
  --muted:#64748b;
  --bg:#f6f7fb;
  --card:#ffffff;
  --line:rgba(15,23,42,.12);
  --shadow:0 25px 70px rgba(2,6,23,.15);
  --radius:20px;

  /* background area */
  background:linear-gradient(180deg,#ffffff 0%, var(--bg) 100%);
  padding:40px 16px;
  border-radius:22px;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ✅ hard center */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ✅ ONE fixed container for everything */
.uwp-login-canada::before{ content:none; }
.uwp-login-canada > *{ max-width:100%; }

/* ---------- LOGIN CARD (center) ---------- */
.uwp-login-canada :where(form, .uwp-login){
  width:420px !important;
  max-width:100% !important;

  margin:0 auto !important;
  background:var(--card) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:26px 22px !important;
  border:1px solid var(--line) !important;

  /* keep it first */
  order:1;
}

/* ---------- Heading ---------- */
.uwp-login-canada :where(h1,h2,h3){
  text-align:center !important;
  font-weight:900 !important;
  color:var(--dark) !important;
  letter-spacing:-.4px;
  margin:0 0 18px 0 !important;
}

.uwp-login-canada :where(h2)::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ca-red),rgba(227,24,55,.25));
}

/* ---------- Labels ---------- */
.uwp-login-canada :where(label){
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--muted) !important;
  margin:0 0 6px 0 !important;
  display:block !important;
}

/* ---------- Fields spacing ---------- */
.uwp-login-canada :where(.uwp-field, .form-row, p){
  margin:0 0 14px 0 !important;
}

/* ---------- Inputs ---------- */
.uwp-login-canada :where(input[type="text"], input[type="email"], input[type="password"]){
  width:100% !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  border-radius:14px !important;
  padding:13px 14px !important;
  font-size:14px !important;
  transition:.25s ease;
  outline:none !important;
}

.uwp-login-canada :where(input:focus){
  border-color:var(--ca-red) !important;
  box-shadow:0 0 0 4px rgba(227,24,55,.12) !important;
}

/* Remember me */
.uwp-login-canada :where(.uwp-remember, .rememberme){
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
  color:var(--muted) !important;
  margin:2px 0 16px 0 !important;
}

.uwp-login-canada :where(input[type="checkbox"]){
  width:16px !important;
  height:16px !important;
  border-radius:4px !important;
  accent-color: var(--ca-red);
}

/* Submit Button */
.uwp-login-canada :where(button, input[type="submit"]){
  width:100% !important;
  border:none !important;
  border-radius:14px !important;
  padding:14px !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;
  color:#fff !important;
  background:linear-gradient(90deg,var(--ca-red),var(--ca-red2)) !important;
  box-shadow:0 18px 35px rgba(227,24,55,.35) !important;
  cursor:pointer !important;
  text-transform:uppercase !important;
  transition:.25s ease !important;
  margin-top:4px !important;
}

.uwp-login-canada :where(button:hover, input[type="submit"]:hover){
  transform:translateY(-2px);
  filter:brightness(.96);
}

/* =====================================================
   ✅ LINKS AREA (Create + Forgot) — PERFECT ALIGN
   classes provided:
   .uwp-forgot-password-link
   .uwp-register-link
===================================================== */

/* Make a clean row wrapper using :has if browser supports?
   Not reliable. So we create our own "links row" by styling
   both anchors as if they are inside a row. */

.uwp-login-canada a.uwp-forgot-password-link,
.uwp-login-canada a.uwp-register-link{
  width:420px !important;
  max-width:100% !important;

  /* same look */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:12px 12px !important;
  border-radius:14px !important;

  font-size:13px !important;
  font-weight:900 !important;

  color:var(--ca-red2) !important;
  background:rgba(227,24,55,.06) !important;
  border:1px solid rgba(227,24,55,.18) !important;

  text-decoration:none !important;

  /* kill bootstrap margins */
  margin:0 !important;
}

/* Put them under the form */
.uwp-login-canada a.uwp-register-link{ order:3; }
.uwp-login-canada a.uwp-forgot-password-link{ order:4; }

/* spacing under form */
.uwp-login-canada a.uwp-register-link{ margin-top:14px !important; }
.uwp-login-canada a.uwp-forgot-password-link{ margin-top:10px !important; }

/* Hover */
.uwp-login-canada a.uwp-forgot-password-link:hover,
.uwp-login-canada a.uwp-register-link:hover{
  background:rgba(227,24,55,.10) !important;
  transform:translateY(-1px);
}

/* ✅ Desktop: show both links in one row (2 columns) */
@media (min-width: 700px){
  .uwp-login-canada{
    position:relative;
  }

  /* convert the two links into a 2-col row by giving them half width + gap */
  .uwp-login-canada a.uwp-register-link,
  .uwp-login-canada a.uwp-forgot-password-link{
    width:204px !important;              /* (420 - 12gap) / 2 approx */
  }

  /* create the row effect with inline-flex + gap */
  .uwp-login-canada a.uwp-register-link{
    margin-top:14px !important;
    margin-right:12px !important;
  }
  .uwp-login-canada a.uwp-forgot-password-link{
    margin-top:14px !important;
  }

  /* keep them same baseline */
  .uwp-login-canada a.uwp-register-link,
  .uwp-login-canada a.uwp-forgot-password-link{
    align-self:center !important;
  }
}

/* ✅ Mobile: full width stacked */
@media (max-width: 699px){
  .uwp-login-canada a.uwp-register-link,
  .uwp-login-canada a.uwp-forgot-password-link{
    width:420px !important;
    max-width:100% !important;
  }
}

/* Extra small */
@media (max-width: 520px){
  .uwp-login-canada{
    padding:26px 12px;
  }
  .uwp-login-canada :where(form, .uwp-login){
    padding:22px 18px !important;
  }
}/* End custom CSS */