/* Rasna Login Portal - styles */

:root{
  --rotp-card:#0f0f1a;
  --rotp-border:rgba(255,255,255,.08);
  --rotp-text:#f2f2ff;
  --rotp-muted:rgba(242,242,255,.68);
  --rotp-red:#ff3b3b;
  --rotp-red2:#ff6b6b;
  --rotp-blue:#4285F4;
  --rotp-shadow:0 18px 60px rgba(0,0,0,.55);
}

.rotp-wrap{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 14px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,60,60,.18), transparent 55%),
    radial-gradient(900px 520px at 80% 20%, rgba(66,133,244,.12), transparent 55%),
    linear-gradient(180deg, #0b0b12 0%, #05050b 100%);
  color:var(--rotp-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Template page: keep the same portal background behind the theme header too */
body.rotp-portal-template{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,60,60,.18), transparent 55%),
    radial-gradient(900px 520px at 80% 20%, rgba(66,133,244,.12), transparent 55%),
    linear-gradient(180deg, #0b0b12 0%, #05050b 100%);
}
body.rotp-portal-template .rotp-wrap{background:transparent; padding-top:8px;}
/* Move the whole portal (including title) slightly upward on the template page */
body.rotp-portal-template .rotp-card{margin-top:-40px;}

/* Desktop: lift a bit more than mobile */
@media (min-width: 992px){
  body.rotp-portal-template .rotp-wrap{padding-top:2px;}
  body.rotp-portal-template .rotp-card{margin-top:-220px;}
}
body.rotp-portal-template header,
body.rotp-portal-template #masthead,
body.rotp-portal-template .site-header{background:transparent !important;}

/* Hide theme floating social buttons (from theme footer) on portal template */
body.rotp-portal-template .social-floating-buttons{display:none !important;}

.rotp-bg-glow{position:absolute;inset:0;pointer-events:none;opacity:.9;filter:blur(40px);background:radial-gradient(circle at 30% 20%, rgba(255,59,59,.25), transparent 45%),radial-gradient(circle at 70% 30%, rgba(66,133,244,.15), transparent 50%);}

.rotp-card{
  position:relative;
  width:100%;
  max-width:420px;
  margin-top:-18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--rotp-border);
  border-radius:18px;
  box-shadow:var(--rotp-shadow);
  padding:20px 18px 18px;
  backdrop-filter: blur(10px);
}

.rotp-card.rotp-busy{
  filter: blur(2px);
  transform: scale(.995);
}

.rotp-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.rotp-logo{
  width:40px;height:40px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%, var(--rotp-red2), var(--rotp-red));
  box-shadow:0 0 0 6px rgba(255,59,59,.12), 0 0 30px rgba(255,59,59,.25);
  font-weight:800;
}
.rotp-title{font-size:18px;font-weight:800;line-height:1.1;}
.rotp-sub{font-size:12px;color:var(--rotp-muted);margin-top:2px;}

.rotp-tabs{display:flex;gap:10px;margin:12px 0 10px;}
.rotp-tab{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--rotp-border);border-radius:12px;color:var(--rotp-text);padding:10px 12px;font-weight:700;cursor:pointer;transition:.2s ease;}
.rotp-tab.is-active{background:rgba(255,59,59,.12);border-color:rgba(255,59,59,.35);box-shadow:0 0 0 6px rgba(255,59,59,.08);}

.rotp-alert{margin:10px 0 6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,59,59,.35);background:rgba(255,59,59,.10);color:var(--rotp-text);font-size:13px;}
.rotp-alert.is-ok{border-color:rgba(70,220,150,.35);background:rgba(70,220,150,.10);}

.rotp-panels{margin-top:8px;}
.rotp-panel{display:none;}
.rotp-panel.is-active{display:block;}

/* Keep login layout intact. Portal positioning is handled by moving the whole card on the template page. */
.rotp-panel[data-rotp-panel="login"] #rotpLoginForm{transform:none !important;}

/* Register tab open: grow from bottom */
.rotp-panel[data-rotp-panel="register"].rotp-pop{transform-origin:50% 100%;animation:rotpReveal .32s ease-out both;}
@keyframes rotpReveal{0%{opacity:.0;transform:translateY(12px) scaleY(.94);}100%{opacity:1;transform:translateY(0) scaleY(1);}}

.rotp-form{display:flex;flex-direction:column;gap:10px;}
.rotp-label{font-size:12px;color:var(--rotp-muted);margin-top:2px;}
.rotp-input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--rotp-border);background:rgba(0,0,0,.18);color:var(--rotp-text);outline:none;transition:.2s ease;}
.rotp-input:focus{border-color:rgba(255,59,59,.45);box-shadow:0 0 0 6px rgba(255,59,59,.10);}

/* Register: allow name + email side-by-side on desktop (keeps mobile unchanged) */
.rotp-row{display:flex;flex-direction:column;gap:10px;}
.rotp-field{min-width:0;}

@media (min-width: 980px){
  .rotp-card{max-width:620px; margin-top:-28px;}
  .rotp-row.rotp-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
}

/* Stronger selectors to prevent theme input styles from overriding the portal design */
.rotp-wrap input.rotp-input{padding:12px 12px !important;border-radius:12px !important;border:1px solid var(--rotp-border) !important;background:rgba(0,0,0,.18) !important;color:var(--rotp-text) !important;box-shadow:none;}
.rotp-wrap label.rotp-label{display:block;}

.rotp-divider{display:flex;align-items:center;gap:10px;margin:6px 0;}
.rotp-divider:before,.rotp-divider:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08);}
.rotp-divider span{font-size:12px;color:rgba(242,242,255,.55);}

.rotp-btn{border:none;border-radius:12px;padding:12px 14px;color:#fff;font-weight:800;cursor:pointer;background:linear-gradient(135deg, var(--rotp-red), var(--rotp-red2));box-shadow:0 10px 28px rgba(255,59,59,.18);transition:.2s ease;}
.rotp-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,59,59,.22);}
.rotp-btn:active{transform:translateY(0);}
.rotp-btn-wide{width:100%;}

.rotp-social-btn{display:flex;align-items:center;gap:10px;justify-content:center;text-decoration:none;border-radius:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--rotp-text);font-weight:800;transition:.2s ease;}
.rotp-social-btn:hover{transform:translateY(-1px);}

/* Stylish glowing Google button */
.rotp-social-google{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
}
.rotp-social-google:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 52%);
  opacity:.48;
  pointer-events:none;
}
/* Removed top hairline (:after) because it looked like an unwanted bar above the button in some themes */
.rotp-social-google:hover{
  box-shadow:0 0 0 6px rgba(66,133,244,.10), 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  border-color:rgba(66,133,244,.35);
}
.rotp-social-google .rotp-social-ic{
  width:26px;height:26px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
}
.rotp-social-google .rotp-social-ic:before{
  content:"G";
  font-weight:900;
  color:var(--rotp-blue);
  font-size:16px;
  line-height:1;
  text-shadow:0 0 18px rgba(66,133,244,.40);
}

/* Avatar upload */
.rotp-avatar{margin-top:2px;}
.rotp-file{position:absolute;left:-9999px;}
/* Make only the round preview clickable */
.rotp-avatar-btn{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:default;}
.rotp-avatar-click{display:inline-block;cursor:pointer;}
.rotp-avatar-preview{cursor:pointer;}
.rotp-avatar-preview{
  width:96px;height:96px;border-radius:999px;
  border:2px dashed rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
  background:rgba(0,0,0,.18);
}
.rotp-avatar-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.rotp-avatar-placeholder{font-size:32px;color:rgba(242,242,255,.55);}
.rotp-avatar-spinner{
  position:absolute;inset:0;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,59,59,.85);
  opacity:0;
  animation:rotpSpin 1s linear infinite;
}
.rotp-avatar.is-uploading .rotp-avatar-spinner{opacity:1;}

@keyframes rotpSpin{to{transform:rotate(360deg);}}

.rotp-avatar-title{font-size:13px;font-weight:800;}
.rotp-file-name{margin-top:6px;text-align:center;font-size:12px;color:rgba(242,242,255,.55);}

/* Attention animation when missing photo */
.rotp-avatar-preview.rotp-attn{animation:rotpZoom 0.8s ease-in-out 0s 2;}
@keyframes rotpZoom{
  0%{transform:scale(1);}
  50%{transform:scale(1.10);}
  100%{transform:scale(1);}
}

/* Overlay */
.rotp-upload-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
}
.rotp-upload-box{
  width:92%;max-width:360px;
  background:rgba(15,15,26,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:16px 16px 14px;
  box-shadow:0 28px 90px rgba(0,0,0,.65);
}
.rotp-stage{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rotp-stage-ic{
  width:32px;height:32px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
  --rotp-stage-color: rgba(66,133,244,.95);
}
.rotp-stage-ic:before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:7px; bottom:7px;
  background-image:
    linear-gradient(var(--rotp-stage-color), var(--rotp-stage-color)),
    linear-gradient(var(--rotp-stage-color), var(--rotp-stage-color)),
    linear-gradient(var(--rotp-stage-color), var(--rotp-stage-color));
  background-repeat:no-repeat;
  background-position:0 100%, 50% 100%, 100% 100%;
  background-size:4px 55%, 4px 85%, 4px 65%;
  animation:rotpBars 1s ease-in-out infinite;
  border-radius:8px;
  filter:drop-shadow(0 0 12px rgba(0,0,0,.15));
}

@keyframes rotpBars{
  0%{background-size:4px 55%, 4px 85%, 4px 65%; opacity:.95;}
  25%{background-size:4px 80%, 4px 55%, 4px 85%;}
  50%{background-size:4px 65%, 4px 80%, 4px 55%;}
  75%{background-size:4px 85%, 4px 65%, 4px 80%;}
  100%{background-size:4px 55%, 4px 85%, 4px 65%;}
}

.rotp-upload-title{font-size:14px;font-weight:900;}

/* For Checking/Compressing: don't show fake progress bar */
.rotp-upload-box.is-indeterminate .rotp-upload-bar,
.rotp-upload-box.is-indeterminate .rotp-upload-percent{display:none;}

.rotp-upload-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.rotp-upload-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--rotp-red), var(--rotp-red2));width:0%;transition:width .15s linear;}
.rotp-upload-percent{margin-top:8px;font-size:12px;color:rgba(242,242,255,.65);text-align:right;}

.rotp-upload-spark{display:flex;gap:6px;justify-content:center;margin-top:10px;}
.rotp-upload-spark span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.14);animation:rotpDot 0.9s ease-in-out infinite;}
.rotp-upload-spark span:nth-child(2){animation-delay:.12s;}
.rotp-upload-spark span:nth-child(3){animation-delay:.24s;}
.rotp-upload-spark span:nth-child(4){animation-delay:.36s;}
@keyframes rotpDot{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(-6px);opacity:1;}}

/* Stage icon colors */
.rotp-stage-ic.is-checking{--rotp-stage-color: rgba(66,133,244,.95);}
.rotp-stage-ic.is-compressing{--rotp-stage-color: rgba(255,59,59,.90);}
.rotp-stage-ic.is-uploading{--rotp-stage-color: rgba(255,59,59,.90);}