:root{
  --rf-auth-bg:#020916;
  --rf-auth-panel:rgba(4,17,35,.79);
  --rf-auth-line:rgba(72,173,255,.30);
  --rf-auth-blue:#22bdf4;
  --rf-auth-blue2:#2f64ee;
  --rf-auth-text:#f7fbff;
  --rf-auth-muted:#93a7bc;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--rf-auth-bg)}
body.rf-auth-body{margin:0!important;overflow-x:hidden;background:#020916;color:var(--rf-auth-text)}
.rf-auth-page{
  min-height:100svh;
  width:100%;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,500px);
  direction:ltr;
  overflow:hidden;
  background:#020916;
  font-family:inherit;
}
.rf-auth-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:url("../../images/royayefilm-auth-bg.webp");
  background-size:cover;
  background-position:center 54%;
  background-repeat:no-repeat;
}
.rf-auth-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,7,16,.16) 0%,rgba(1,7,16,.12) 42%,rgba(1,7,16,.54) 68%,rgba(1,7,16,.80) 100%),
    linear-gradient(180deg,rgba(2,10,22,.05),rgba(2,10,22,.28));
}
.rf-auth-brand{
  position:absolute;
  left:42px;
  top:34px;
  z-index:5;
  direction:ltr;
}
.rf-auth-brand img{display:block;width:215px;max-width:26vw;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.34))}
.rf-auth-form-side{
  grid-column:2;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 34px;
  direction:rtl;
}
.rf-auth-card{
  width:100%;
  max-width:470px;
  padding:24px 30px 25px;
  border:1px solid rgba(70,172,255,.38);
  border-radius:28px;
  background:linear-gradient(155deg,rgba(8,31,60,.84),rgba(2,12,28,.78));
  box-shadow:0 26px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(9px) saturate(115%);
  -webkit-backdrop-filter:blur(9px) saturate(115%);
}
.rf-auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:0 0 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.rf-auth-tab{
  position:relative;
  text-align:center;
  padding:10px 8px 14px;
  color:#8598ad;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
}
.rf-auth-tab.is-active{color:#4acbff}
.rf-auth-tab.is-active::after{
  content:"";
  position:absolute;
  left:16%;right:16%;bottom:-1px;height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#20d6ff,#5267ff);
  box-shadow:0 0 14px rgba(32,190,255,.55);
}
.rf-auth-alert{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(248,113,113,.28);
  color:#fecaca;
  font-size:13px;
  line-height:1.75;
}
.rf-auth-field{margin-bottom:14px}
.rf-auth-label{display:block;margin:0 2px 7px;color:#c0ccda;font-size:13px;font-weight:700}
.rf-auth-control{position:relative}
.rf-auth-control .rf-field-icon{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  color:#4cc8ff;
  opacity:.95;
  pointer-events:none;
}
.rf-auth-input{
  width:100%;
  height:53px;
  border-radius:15px;
  border:1px solid rgba(117,158,199,.30);
  background:rgba(1,9,22,.53);
  color:#fff;
  padding:0 48px 0 48px;
  outline:none;
  font:inherit;
  font-size:14px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.rf-auth-input::placeholder{color:#6f8297}
.rf-auth-input:focus{
  border-color:rgba(42,188,249,.82);
  background:rgba(2,14,30,.70);
  box-shadow:0 0 0 3px rgba(34,185,246,.10);
}
.rf-auth-password-toggle{
  position:absolute;
  left:10px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;
  border:0;border-radius:9px;
  background:transparent;
  color:#91a7bf;
  display:grid;place-items:center;
  cursor:pointer;padding:0;
}
.rf-auth-password-toggle svg{width:20px;height:20px;display:block}
.rf-auth-password-toggle .rf-eye-off{display:none}
.rf-auth-password-toggle.is-visible .rf-eye{display:none}
.rf-auth-password-toggle.is-visible .rf-eye-off{display:block}
.rf-auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:3px 0 18px;
  font-size:12.5px;
  color:#a2b2c4;
}
.rf-auth-remember{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.rf-auth-remember input{accent-color:#19baf3;width:17px;height:17px;margin:0}
.rf-auth-link{color:#4acbff;text-decoration:none;white-space:nowrap}
.rf-auth-submit{
  width:100%;height:54px;
  border:0;border-radius:15px;
  cursor:pointer;
  color:#fff;
  font:inherit;font-weight:900;font-size:15px;
  background:linear-gradient(105deg,#178fd8,#176bdc 56%,#315ff0);
  box-shadow:0 10px 28px rgba(17,111,221,.25),inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .18s ease,filter .18s ease;
}
.rf-auth-submit:hover{filter:brightness(1.07)}
.rf-auth-submit:active{transform:translateY(1px)}
.rf-auth-switch{margin:17px 0 0;text-align:center;color:#92a3b7;font-size:13px}
.rf-auth-switch a{color:#4bc9ff;text-decoration:none;font-weight:900}
.rf-auth-art{grid-column:1;min-height:100svh;pointer-events:none}

@media (max-width:980px) and (min-width:781px){
  .rf-auth-page{grid-template-columns:minmax(0,1fr) minmax(360px,440px)}
  .rf-auth-form-side{padding:38px 24px}
  .rf-auth-brand{left:28px;top:26px}
  .rf-auth-brand img{width:185px}
}

@media (max-width:780px){
  html,body,body.rf-auth-body{min-height:100%;background:#020916}
  .rf-auth-page{
    display:flex;
    flex-direction:column;
    min-height:100svh;
    width:100%;
    overflow:visible;
    padding:0 0 max(24px,env(safe-area-inset-bottom));
    background:transparent;
  }
  .rf-auth-page::before{
    background-size:cover;
    background-position:center 48%;
  }
  .rf-auth-page::after{
    background:
      linear-gradient(180deg,rgba(1,8,18,.02) 0%,rgba(1,8,18,.08) 28%,rgba(1,8,18,.30) 48%,rgba(1,8,18,.72) 78%,rgba(1,8,18,.92) 100%),
      radial-gradient(circle at 50% 31%,rgba(33,194,247,.08),transparent 38%);
  }
  .rf-auth-brand{
    position:relative;
    left:auto;top:auto;
    width:100%;
    padding-top:max(28px,env(safe-area-inset-top));
    display:flex;
    justify-content:center;
    z-index:4;
  }
  .rf-auth-brand img{width:190px;max-width:56vw}
  .rf-auth-art{display:none}
  .rf-auth-form-side{
    grid-column:auto;
    min-height:0;
    width:100%;
    display:block;
    margin-top:clamp(118px,24svh,205px);
    padding:0 14px;
    position:relative;
    z-index:3;
  }
  .rf-auth-card{
    width:100%;
    max-width:560px;
    margin:0 auto;
    padding:18px 18px 20px;
    border-radius:24px;
    background:linear-gradient(160deg,rgba(7,28,54,.80),rgba(2,13,29,.78));
    backdrop-filter:blur(8px) saturate(112%);
    -webkit-backdrop-filter:blur(8px) saturate(112%);
    box-shadow:0 18px 50px rgba(0,0,0,.33),inset 0 1px 0 rgba(255,255,255,.04);
  }
  .rf-auth-tabs{margin-bottom:16px}
  .rf-auth-input{height:51px}
  .rf-auth-submit{height:52px}
  .rf-auth-row{gap:8px;font-size:12px}
}

@media (max-width:430px){
  .rf-auth-brand img{width:175px}
  .rf-auth-form-side{margin-top:clamp(100px,20svh,170px);padding-inline:12px}
  .rf-auth-card{padding:17px 15px 19px;border-radius:22px}
  .rf-auth-label{font-size:12.5px}
  .rf-auth-input{font-size:13.5px}
  .rf-auth-row{flex-wrap:wrap;row-gap:10px}
}

@media (max-width:360px){
  .rf-auth-form-side{margin-top:88px;padding-inline:9px}
  .rf-auth-card{padding-inline:12px}
  .rf-auth-tab{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}


/* V4 layout tuning: wider/taller fields + card moved upward */
.rf-auth-card{
  width:min(100%,520px);
}

.rf-auth-input{
  height:62px !important;
  min-height:62px !important;
  border-radius:18px !important;
  padding-inline-start:54px !important;
  padding-inline-end:54px !important;
  font-size:15px !important;
}

.rf-auth-control ion-icon{
  right:18px !important;
  font-size:22px !important;
}

.rf-auth-password-toggle{
  left:12px !important;
  width:38px !important;
  height:38px !important;
}

.rf-auth-label{
  font-size:14px !important;
  margin-bottom:9px !important;
}

@media (min-width:781px){
  .rf-auth-form-side{
    align-items:flex-start !important;
    padding-top:10vh !important;
  }

  .rf-auth-card{
    width:min(100%,520px) !important;
  }
}

@media (max-width:780px){
  .rf-auth-brand{
    padding-top:22px !important;
  }

  .rf-auth-brand img{
    width:168px !important;
  }

  .rf-auth-art{
    min-height:23svh !important;
  }

  .rf-auth-form-side{
    margin-top:-24px !important;
    align-items:flex-start !important;
  }

  .rf-auth-card{
    width:100% !important;
    max-width:none !important;
    padding:18px 20px 20px !important;
  }

  .rf-auth-input{
    height:64px !important;
    min-height:64px !important;
  }
}

@media (max-width:420px){
  .rf-auth-page{
    padding-inline:12px !important;
  }

  .rf-auth-art{
    min-height:20svh !important;
  }

  .rf-auth-form-side{
    margin-top:-18px !important;
  }

  .rf-auth-card{
    border-radius:24px !important;
  }
}


/* V5: exact centering + tighter logo/card spacing */
@media (max-width:780px){
  .rf-auth-page{
    position:relative !important;
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 14px max(22px,env(safe-area-inset-bottom)) !important;
  }

  .rf-auth-brand{
    position:absolute !important;
    top:26px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    z-index:5 !important;
    text-align:center !important;
  }

  .rf-auth-brand img{
    display:block !important;
    width:205px !important;
    max-width:58vw !important;
    height:auto !important;
    margin:0 auto !important;
  }

  .rf-auth-form-side{
    width:100% !important;
    max-width:620px !important;
    margin:0 auto !important;
    padding:174px 0 0 !important;
    display:block !important;
    position:relative !important;
    z-index:3 !important;
  }

  .rf-auth-card{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
  }
}

@media (max-width:430px){
  .rf-auth-page{
    padding-inline:12px !important;
  }

  .rf-auth-brand{
    top:22px !important;
  }

  .rf-auth-brand img{
    width:190px !important;
    max-width:62vw !important;
  }

  .rf-auth-form-side{
    padding-top:158px !important;
  }
}

@media (min-width:781px){
  .rf-auth-page{
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
  }

  .rf-auth-brand{
    top:34px !important;
    right:auto !important;
    left:5.5% !important;
    transform:none !important;
  }

  .rf-auth-form-side{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top:8vh !important;
  }

  .rf-auth-card{
    margin-inline:auto !important;
  }
}


/* =========================================================
   FINAL AUTH LAYOUT — centered, narrower, lighter glass
   ========================================================= */

html, body.rf-auth-body {
  min-height: 100%;
  background: #020916;
}

body.rf-auth-body {
  margin: 0 !important;
}

.rf-auth-page {
  min-height: 100svh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 3vh, 34px) 18px !important;
  position: relative !important;
  overflow: hidden !important;
}

.rf-auth-page::before {
  background:
    linear-gradient(180deg, rgba(0,7,18,.12), rgba(0,7,18,.30)),
    url("../../images/royayefilm-auth-bg.webp") center center / cover no-repeat !important;
}

.rf-auth-page::after {
  background:
    radial-gradient(circle at 50% 40%, rgba(25,185,245,.08), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,7,17,.18)) !important;
}

.rf-auth-home {
  top: 18px !important;
  left: 18px !important;
}

.rf-auth-brand {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.rf-auth-brand img {
  width: clamp(180px, 22vw, 240px) !important;
  max-width: 64vw !important;
  height: auto !important;
  margin: 0 auto !important;
}

.rf-auth-form-side {
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.rf-auth-art {
  display: none !important;
}

.rf-auth-card {
  width: min(86vw, 500px) !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 20px 24px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(72, 190, 255, .42) !important;
  background:
    linear-gradient(155deg, rgba(13,44,78,.58), rgba(3,18,38,.56)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

.rf-auth-tabs {
  margin-bottom: 14px !important;
}

.rf-auth-tab {
  padding: 10px 8px 13px !important;
  font-size: 15px !important;
}

.rf-auth-field {
  margin-bottom: 13px !important;
}

.rf-auth-label {
  direction: rtl !important;
  text-align: right !important;
  font-size: 13.5px !important;
  margin: 0 3px 7px !important;
}

.rf-auth-control {
  direction: rtl !important;
}

.rf-auth-input {
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 16px !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  text-align: right !important;
  direction: rtl !important;
  padding: 0 50px 0 48px !important;
  background: rgba(1,12,29,.42) !important;
  border: 1px solid rgba(123,173,215,.30) !important;
}

.rf-auth-input[type="email"] {
  direction: ltr !important;
  text-align: left !important;
}

.rf-auth-input:focus {
  background: rgba(2,17,38,.58) !important;
  border-color: rgba(51,196,252,.80) !important;
  box-shadow: 0 0 0 3px rgba(32,186,244,.10) !important;
}

.rf-auth-control > ion-icon {
  right: 16px !important;
  font-size: 21px !important;
}

.rf-auth-password-toggle {
  left: 10px !important;
}

.rf-auth-row {
  direction: rtl !important;
  margin: 4px 0 16px !important;
}

.rf-auth-submit {
  height: 54px !important;
  border-radius: 15px !important;
}

.rf-auth-switch {
  margin-top: 16px !important;
}

.rf-auth-title,
.rf-auth-subtitle,
.rf-auth-footnote {
  display: none !important;
}

/* Keep logo + card as one centered composition */
.rf-auth-page {
  flex-direction: column !important;
  gap: 20px !important;
}

/* Smooth and cheap transitions only */
.rf-auth-card,
.rf-auth-input,
.rf-auth-submit,
.rf-auth-tab {
  transition-property: opacity, transform, border-color, background-color, box-shadow !important;
  transition-duration: .16s !important;
  transition-timing-function: ease-out !important;
}

/* Mobile */
@media (max-width: 780px) {
  .rf-auth-page {
    min-height: 100svh !important;
    padding:
      max(16px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom)) !important;
    gap: 18px !important;
  }

  .rf-auth-brand img {
    width: 190px !important;
    max-width: 58vw !important;
  }

  .rf-auth-card {
    width: min(86vw, 470px) !important;
    max-width: 470px !important;
    padding: 18px 20px 20px !important;
    border-radius: 26px !important;
    backdrop-filter: blur(13px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(13px) saturate(120%) !important;
  }

  .rf-auth-input {
    height: 54px !important;
    min-height: 54px !important;
  }

  .rf-auth-submit {
    height: 52px !important;
  }
}

/* Short mobile screens: keep everything visible without pushing the card down */
@media (max-width: 780px) and (max-height: 760px) {
  .rf-auth-page {
    justify-content: flex-start !important;
    padding-top: 18px !important;
    gap: 12px !important;
    overflow-y: auto !important;
  }

  .rf-auth-brand img {
    width: 165px !important;
  }

  .rf-auth-card {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }

  .rf-auth-input {
    height: 50px !important;
    min-height: 50px !important;
  }

  .rf-auth-field {
    margin-bottom: 10px !important;
  }

  .rf-auth-row {
    margin-bottom: 12px !important;
  }
}

/* Desktop: keep centered and slightly narrower */
@media (min-width: 781px) {
  .rf-auth-page {
    gap: 22px !important;
  }

  .rf-auth-card {
    width: min(420px, 34vw) !important;
    max-width: 440px !important;
  }

  .rf-auth-brand img {
    width: 220px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-auth-card,
  .rf-auth-input,
  .rf-auth-submit,
  .rf-auth-tab {
    transition: none !important;
  }
}
/* Final mobile alignment */
@media (max-width: 780px) {
    .rf-auth-card {
        transform: translate(14px, 35px) !important;
    }
}
/* تنظیم دقیق موقعیت لوگو */
@media (max-width: 780px) {
    .rf-auth-logo {
        transform: translateX(15px) !important;
    }
}