.elementor-60 .elementor-element.elementor-element-7b3bcf8e{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-5bf21f4c *//* ============================================================
   ULTIMATE MEMBER — PREMIUM REGISTER CSS
   Isko wahi jagah paste karo jahan login wala CSS paste kiya tha:
   WordPress Admin → Appearance → Customize → Additional CSS

   Agar login wala CSS pehle se lagaya hua hai to bas is poore
   block ko usi ke NEECHE paste kar do (dono ek saath chalenge,
   :root aur @import dobara likhne se koi problem nahi hoti).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --umx-navy:#0B1E39;
  --umx-navy-2:#122A4D;
  --umx-blue:#2F6FED;
  --umx-blue-dark:#1E56C9;
  --umx-teal:#12B8A6;
  --umx-offwhite:#F5F8FC;
  --umx-slate:#1B2A41;
  --umx-slate-light:#5C6B82;
  --umx-border:#E3E9F2;
}

/* Register form wrapper (Ultimate Member uses .um.um-register) */
.um.um-register{
  max-width:460px !important;
  margin:40px auto !important;
  background:#ffffff;
  border:none !important;
  border-radius:20px !important;
  padding:36px 32px 28px !important;
  box-shadow:0 24px 60px rgba(6,20,45,0.25), 0 2px 0 rgba(255,255,255,0.6) inset;
  position:relative;
}

.um.um-register::before{
  content:"";
  position:absolute;
  top:0;left:24px;right:24px;height:3px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--umx-blue), var(--umx-teal));
}

/* Field labels */
.um.um-register .um-field-label{
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--umx-slate) !important;
  letter-spacing:0.2px;
  margin-bottom:7px !important;
}

/* Text / email / password / tel inputs */
.um.um-register .um-field-area input[type="text"],
.um.um-register .um-field-area input[type="email"],
.um.um-register .um-field-area input[type="password"],
.um.um-register .um-field-area input[type="tel"],
.um.um-register .um-field-area select{
  width:100% !important;
  border:1.5px solid var(--umx-border) !important;
  border-radius:12px !important;
  background-color:var(--umx-offwhite) !important;
  padding:13px 14px !important;
  font-size:14.5px !important;
  font-family:'Inter', sans-serif !important;
  color:var(--umx-slate) !important;
  box-shadow:none !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.um.um-register .um-field-area input:focus,
.um.um-register .um-field-area select:focus{
  border-color:var(--umx-blue) !important;
  background-color:#fff !important;
  box-shadow:0 0 0 4px rgba(47,111,237,0.12) !important;
  outline:none !important;
}

/* Two-column layout for short fields like Name / Mobile Number,
   only if your fields are set to "1/2 width" in UM form builder */
.um.um-register .um-half{
  display:inline-block !important;
  width:48% !important;
}

/* Password strength meter Ultimate Member shows below the
   password field */
.um.um-register .um-password-strength-meter{
  border-radius:3px !important;
  height:3px !important;
  margin-top:8px !important;
}

/* Eye-toggle icon on password fields */
.um.um-register .um-icon-eye,
.um.um-register .um-icon-eye-slash{
  color:var(--umx-slate-light) !important;
}

/* Terms & conditions agreement checkbox row */
.um.um-register .um-agree-to-terms{
  font-size:12.5px !important;
  color:var(--umx-slate-light) !important;
  line-height:1.5 !important;
}
.um.um-register .um-agree-to-terms a{
  color:var(--umx-blue-dark) !important;
  font-weight:600 !important;
  text-decoration:none !important;
}

/* Create account / submit button */
.um.um-register .um-register-btn,
.um.um-register button[name="submit"],
.um.um-register .um-button{
  width:100% !important;
  border:none !important;
  border-radius:12px !important;
  padding:14px !important;
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:#fff !important;
  letter-spacing:0.2px;
  cursor:pointer;
  background:linear-gradient(90deg, var(--umx-blue), var(--umx-teal)) !important;
  box-shadow:0 10px 24px rgba(47,111,237,0.35) !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.um.um-register .um-register-btn:hover,
.um.um-register button[name="submit"]:hover,
.um.um-register .um-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(47,111,237,0.45) !important;
  filter:brightness(1.05);
}

/* "Already have an account? Login" link at bottom */
.um.um-register a{
  color:var(--umx-blue-dark) !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
}
.um.um-register a:hover{
  text-decoration:underline !important;
}

/* ============================================================
   FULL PAGE BACKGROUND + LOGO — ye woh cheez hai jo pehle CSS
   mein reh gayi thi. Ultimate Member khud <body> tag pe class
   "um-page-register" daal deta hai (tumhare inspect screenshot
   mein dikha tha), isliye seedha body ko target kar rahe hain —
   koi extra wrapper class lagane ki zarurat nahi.
   ============================================================ */
body.um-page-register{
  background:
    radial-gradient(circle at 15% 20%, rgba(47,111,237,0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(18,184,166,0.30), transparent 45%),
    linear-gradient(160deg, var(--umx-navy) 0%, var(--umx-navy-2) 55%, #0E2340 100%) !important;
  min-height:100vh !important;
  padding:100px 16px 60px !important;
  position:relative;
}

/* Faint dot-grid texture over the background */
body.um-page-register::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}

/* CART-ZENO wordmark above the form card */
body.um-page-register::after{
  content:"🛡  CART-ZENO";
  position:absolute;
  top:38px;left:50%;
  transform:translateX(-50%);
  font-family:'Sora', sans-serif !important;
  font-weight:700;
  font-size:19px;
  letter-spacing:0.5px;
  color:#ffffff;
  z-index:2;
}

/* Keep the form card above the background/texture layers */
.um.um-register{
  position:relative;
  z-index:1;
  max-width:460px !important;
  margin:0 auto !important;
  background-color:#ffffff !important;
  background-image:linear-gradient(90deg, var(--umx-blue), var(--umx-teal)) !important;
  background-repeat:no-repeat !important;
  background-size:calc(100% - 48px) 3px !important;
  background-position:24px 0 !important;
  border:none !important;
  border-radius:20px !important;
  padding:92px 32px 28px !important;
  box-shadow:0 24px 60px rgba(6,20,45,0.35), 0 2px 0 rgba(255,255,255,0.6) inset !important;
}

/* "Create your account" + subtitle — 100% CSS, no Elementor edit needed.
   Dono lines same style mein hain (taaki extra complexity na aaye),
   lekin phir bhi bahut premium dikhega. */
.um.um-register::before{
  content:"Create your account\A Join 1000+ partners earning daily commission";
  white-space:pre-line;
  position:absolute;
  top:26px;left:32px;right:32px;
  text-align:center;
  font-family:'Sora', sans-serif !important;
  font-weight:700;
  font-size:18px;
  line-height:1.6;
  color:var(--umx-slate);
}

/* If your theme wraps the form in a white section/container that
   is hiding the new background, uncomment and adjust these two
   lines by adding the exact wrapper class from your inspector: */
/*
.um-page-register .elementor-widget-shortcode,
.um-page-register .e-con-inner{
  background:transparent !important;
}
*/

/* Same optional dark background wrapper used on the login page —
   apply class "um-premium-bg" to the section/page holding the
   register shortcode if you want the navy gradient backdrop too */
.um-premium-bg{
  background:
    radial-gradient(circle at 15% 20%, rgba(47,111,237,0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(18,184,166,0.30), transparent 45%),
    linear-gradient(160deg, var(--umx-navy) 0%, var(--umx-navy-2) 55%, #0E2340 100%) !important;
  padding:60px 16px !important;
}

/* ============================================================
   "Login" button (bottom of register form) — secondary/outline
   style so it doesn't compete with the primary "Register" button.
   Confirmed exact class via inspector: a.um-button.um-alt
   ============================================================ */
.um.um-register a.um-button.um-alt{
  background:transparent !important;
  color:var(--umx-blue) !important;
  border:1.5px solid var(--umx-blue) !important;
  box-shadow:none !important;
}
.um.um-register a.um-button.um-alt:hover{
  background:var(--umx-offwhite) !important;
  color:var(--umx-blue-dark) !important;
  transform:none !important;
}

/* Confirm Password placeholder color — match the rest of the form */
.um.um-register .um-field-area input::placeholder{
  color:var(--umx-slate-light) !important;
  opacity:0.6 !important;
}

/* ============================================================
   FIELD ICONS — ab exact .elementor-60 .elementor-element.elementor-element-5bf21f4cs hain, HTML source se confirm
   kiye hue (data-key attribute use kiya hai, ye hamesha reliable
   rehta hai chahe form ID kuch bhi ho).
   ============================================================ */
.um.um-register .um-field-area{position:relative;}

.um.um-register .um-field-area input{
  padding-left:42px !important;
  background-repeat:no-repeat !important;
  background-position:14px center !important;
  background-size:17px 17px !important;
}

/* Username / First Name / Last Name → person icon */
.um-field[data-key="user_login"] .um-field-area input,
.um-field[data-key="first_name"] .um-field-area input,
.um-field[data-key="last_name"] .um-field-area input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") !important;
}

/* E-mail Address → envelope icon */
.um-field[data-key="user_email"] .um-field-area input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}

/* Password / Confirm Password → lock icon */
.um-field[data-key="user_password"] .um-field-area input,
.um-field[data-key="confirm_user_password"] .um-field-area input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
  padding-left:44px !important;
}

/* ============================================================
   SECURITY BADGE — "AES-256 SECURED SIGNUP" text jo Register/Login
   buttons ke neeche automatically add ho jayega (Elementor mein
   kuch add karne ki zarurat nahi, ye pure CSS se ban raha hai)
   ============================================================ */
.um.um-register::after{
  content:"●  AES-256 SECURED SIGNUP";
  display:block;
  text-align:center;
  margin-top:18px;
  font-family:'JetBrains Mono', monospace !important;
  font-size:10.5px;
  letter-spacing:0.4px;
  color:var(--umx-teal);
}/* End custom CSS */