/* PartnerUp2Win Auth - "Sparkle / Glass" Design
   File: public/assets/css/public/auth-styles.css
*/

:root{
  --pu2w-red: #c64545;
  --pu2w-red-dark: #a83a3a;

  --pu2w-green: #5a7e3f;
  --pu2w-green-dark: #4d6e36;

  --pu2w-blue: #2f56b5;
  --pu2w-fb: #2f56b5;
  --pu2w-x: #2b2f3a;

  --pu2w-text: #1f2430;
  --pu2w-muted: #6b7280;

  --pu2w-card: rgba(255,255,255,.62);
  --pu2w-card-strong: rgba(255,255,255,.72);
  --pu2w-border: rgba(120,130,150,.25);

  --pu2w-radius: 18px;
}

*{ box-sizing:border-box; }

.partnerup2win-auth-container{
  min-height: 100vh;
  width: 100%;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 14px;
  overflow:hidden;

  /* ✅ Your image background */
  background-image: url("../images/auth-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.woo-slg-login-wrapper {
    display: block !important;
    margin-right: 5px;
    margin-bottom: 5px;
}
fieldset.woo-slg-social-container {
    border: unset !important;
}
/* Sparkle overlay (no image needed) */
.partnerup2win-auth-container::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.60) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.55) 0 2px, transparent 3px);
  background-size: 280px 280px, 320px 320px, 360px 360px, 420px 420px;
  opacity:.35;
  pointer-events:none;
  filter: blur(.2px);
}

/* IMPORTANT: Hide the right promo panel to match the mobile UI screenshots */
.auth-right-section{
  display:none !important;
}

/* Center area */
.auth-split-layout{
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 2;
}

.auth-left-section{
  width: 100%;
}

/* Main "glass" card */
.auth-wrapper{
  width: 100%;
  border-radius: var(--pu2w-radius);
  background: var(--pu2w-card);
  border: 1px solid var(--pu2w-border);
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    0 2px 10px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 18px 18px;
}

/* Optional top title like screenshot "Login / Register" */
.auth-wrapper::before{
  content:"Login / Register";
  display:block;
  text-align:center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #1f2430;
  margin: 2px 0 14px;
}

/* Segmented tabs like screenshot (Login red / Register green) */
.auth-tabs{
  display:flex;
  gap: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(120,130,150,.20);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) inset;
  margin: 14px 0 16px;
}

.auth-tab{
  flex:1;
  border: 0;
  cursor:pointer;
  font-weight: 700;
  font-size: 20px;
  padding: 14px 10px;
  border-radius: 12px;
  background: transparent;
  color: rgba(20,25,35,.55);
  transition: transform .08s ease, background .18s ease, color .18s ease;
}

.auth-tab:active{ transform: scale(.99); }

/* First tab = Login (red) */
.auth-tab:nth-child(1).active{
  background: linear-gradient(180deg, var(--pu2w-red) 0%, var(--pu2w-red-dark) 100%);
  color:#fff;
  box-shadow: 0 10px 18px rgba(198,69,69,.30);
}

/* Second tab = Register (green) */
.auth-tab:nth-child(2).active{
  background: linear-gradient(180deg, var(--pu2w-green) 0%, var(--pu2w-green-dark) 100%);
  color:#fff;
  box-shadow: 0 10px 18px rgba(90,126,63,.30);
}

/* Forms */
.auth-form{
  display:none;
  margin-top: 8px;
}
.auth-form.active{ display:block; }

.form-group{ margin-bottom: 14px; }

/* Hide big labels for cleaner "app" look (keep accessibility) */
.form-group label{
  position:absolute;
  left:-9999px;
}

/* Inputs */
.auth-wrapper input[type="text"],
.auth-wrapper input[type="email"],
.auth-wrapper input[type="password"],
.auth-wrapper input[type="number"],
.auth-wrapper select{
  width: 100%;
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(120,130,150,.22);
  background: rgba(255,255,255,.72);
  color: var(--pu2w-text);
  padding: 0 14px;
  font-size: 18px;
  outline: none;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.auth-wrapper input::placeholder{ color: rgba(30,35,45,.55); }

.auth-wrapper input:focus,
.auth-wrapper select:focus{
  border-color: rgba(60,90,190,.35);
  box-shadow: 0 0 0 4px rgba(60,90,190,.12), 0 10px 18px rgba(0,0,0,.06);
}

/* Checkbox line */
.checkbox-group{
  margin-top: 10px;
}
.checkbox-group label{
  position: static;
  left:auto;
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 15px;
  color: rgba(20,25,35,.85);
}
.checkbox-group input[type="checkbox"]{
  width: 18px; height: 18px;
}

/* Primary button (Login / Create Account) */
.btn.btn-primary{
  width: 100%;
  height: 58px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--pu2w-red) 0%, var(--pu2w-red-dark) 100%);
  box-shadow: 0 16px 26px rgba(198,69,69,.28);
}

#register-form .btn.btn-primary{
  background: linear-gradient(180deg, var(--pu2w-red) 0%, var(--pu2w-red-dark) 100%);
}

/* Links */
.form-footer{
  text-align:center;
  margin-top: 20px;
}
.form-footer a{
  color: rgba(20,25,35,.85);
  text-decoration: none;
  font-weight: 600;
}
.form-footer a:hover{ text-decoration: underline; }

/* --- Social login section (shortcode output) --- */
/* Wrap and make each provider a big full-width bar like screenshot */
.partnerup2win-auth-container .woo-slg-social-container,
.partnerup2win-auth-container .wp-social-login-widget,
.partnerup2win-auth-container .nsl-container,
.partnerup2win-auth-container .wc-social-login,
.partnerup2win-auth-container .social-login{
  margin: 0 0 14px;
}

/* Common button styling for multiple plugins */
.partnerup2win-auth-container a.woo-slg-login,
.partnerup2win-auth-container .woo-slg-social-container a,
.partnerup2win-auth-container .wp-social-login-provider-list a,
.partnerup2win-auth-container .nsl-container a,
.partnerup2win-auth-container .wc-social-login a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap: 12px;
  width: 100%;
  height: 58px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  text-decoration:none !important;
  border: 1px solid rgba(120,130,150,.22);
  background: rgba(255,255,255,.75);
  color: #1f2430 !important;
  box-shadow: 0 12px 20px rgba(0,0,0,.08);
  margin: 10px 0 !important;
}

/* Try to detect providers and color them */
.partnerup2win-auth-container a[href*="facebook"],
.partnerup2win-auth-container a[class*="facebook"],
.partnerup2win-auth-container a[title*="Facebook"]{
  background: linear-gradient(180deg, #365fd1 0%, #2f56b5 100%) !important;
  color:#fff !important;
}

.partnerup2win-auth-container a[href*="google"],
.partnerup2win-auth-container a[class*="google"],
.partnerup2win-auth-container a[title*="Google"]{
  background: rgba(255,255,255,.80) !important;
  color:#1f2430 !important;
}

.partnerup2win-auth-container a[href*="twitter"],
.partnerup2win-auth-container a[href*="x.com"],
.partnerup2win-auth-container a[class*="twitter"],
.partnerup2win-auth-container a[class*="x"]{
  background: linear-gradient(180deg, #363b48 0%, #2b2f3a 100%) !important;
  color:#fff !important;
}

/* Email option */
.partnerup2win-auth-container a[href*="email"],
.partnerup2win-auth-container a[class*="email"]{
  background: linear-gradient(180deg, #3c63c9 0%, #2f56b5 100%) !important;
  color:#fff !important;
}

/* OR separator */
.auth-wrapper .or-sep{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0 10px;
  color: rgba(30,35,45,.55);
  font-weight: 700;
  justify-content:center;
}
.auth-wrapper .or-sep::before,
.auth-wrapper .or-sep::after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(120,130,150,.25);
}

/* Messages / loading */
.auth-loading{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background: rgba(255,255,255,.55);
  border-radius: var(--pu2w-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}
.auth-loading.active{ display:flex; }

.loading-spinner{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.55);
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

.auth-messages{ margin-top: 14px; }
.auth-message{
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid rgba(120,130,150,.20);
  background: rgba(255,255,255,.78);
}
.auth-message.success{ box-shadow: 0 10px 18px rgba(60,160,90,.15); }
.auth-message.error{ box-shadow: 0 10px 18px rgba(200,60,60,.15); }

/* Modal */
.auth-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.auth-modal.active{ display:flex; }

.modal-content{
  width:min(520px, 100%);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(120,130,150,.22);
  border-radius: 18px;
  box-shadow: 0 25px 65px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px;
}
.modal-header h3{ margin:0 0 6px; }
.modal-body p{ margin: 8px 0; }
.btn.btn-secondary{
  width:100%;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(120,130,150,.25);
  background: rgba(255,255,255,.72);
  font-weight: 800;
  cursor:pointer;
}
.modal-footer{ margin-top: 12px; }

/* Make it feel like the screenshot on mobile */
@media (max-width: 560px){
  .auth-wrapper{ padding: 18px 14px 14px; }
  .auth-wrapper::before{ font-size: 30px; }
  .auth-tab{ font-size: 18px; padding: 12px 10px; }
  .btn.btn-primary{ font-size: 20px; height: 56px; }
}