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

/* =====================================================================
   RIDOLLAHI ISLAMIC FOUNDATION - member sign-in + registration
   Only applies where body carries class "rif-auth" (index.twig, signup.twig)
   ===================================================================== */
:root{
  --rg-deep:#0F2E22;
  --rg-dark:#123528;
  --rg-green:#1B4332;
  --rg-mid:#1B7A3C;
  --rg-soft:#2D6A4F;
  --rg-gold:#C9A84C;
  --rg-ink:#1A2E1F;
  --rg-muted:#7b8a80;
  --rg-line:#e6ebe8;
  --rg-page:#f2f5f3;
}

body.rif-auth{
  margin:0 !important;
  padding:0 !important;
  min-height:100vh;
  display:block !important;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--rg-ink);
  background-color:var(--rg-page) !important;
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1.4px, transparent 1.4px),
    linear-gradient(180deg,var(--rg-dark) 0, var(--rg-green) 300px, var(--rg-page) 300px, var(--rg-page) 100%) !important;
  background-size:22px 22px, 100% 100% !important;
  background-position:0 0, 0 0 !important;
  background-repeat:repeat, no-repeat !important;
  background-attachment:scroll !important;
}

/* top bar */
body.rif-auth:before{
  content:'Ridollahi Islamic Foundation';
  position:fixed;
  top:0; left:0; right:0;
  height:48px;
  display:flex;
  align-items:center;
  padding:0 20px;
  box-sizing:border-box;
  background:var(--rg-deep);
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  z-index:20;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}

body.rif-auth #content{ padding-top:48px; }

/* ---------- card ---------- */
body.rif-auth .form-container{
  width:100%;
  max-width:452px;
  margin:38px auto 34px !important;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 22px 50px rgba(10,35,25,.22);
  padding:30px 30px 26px;
  box-sizing:border-box;
  text-align:center;
  position:relative;
}

/* ---------- crest block ---------- */
body.rif-auth .rif-crest{ margin:0 0 4px; }
body.rif-auth .rif-crest a{ display:inline-block; line-height:0; }
body.rif-auth .rif-crest img{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:5px;
  box-sizing:border-box;
  box-shadow:0 4px 14px rgba(10,35,25,.16);
}
body.rif-auth .rif-name{
  font-family:'Lora',Georgia,serif;
  font-size:26px;
  line-height:1.25;
  font-weight:700;
  color:var(--rg-green);
  margin:16px 0 0;
  letter-spacing:-.2px;
}
body.rif-auth .rif-kicker{
  margin:8px 0 0;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--rg-muted);
}
body.rif-auth .rif-tagline{
  margin:8px 0 0;
  font-size:14px;
  font-weight:600;
  color:var(--rg-mid);
}

/* ---------- page heading + divider ---------- */
body.rif-auth .form-title{
  position:relative;
  margin:22px 0 0;
  padding-top:20px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--rg-soft);
}
body.rif-auth .form-title:before{
  content:'';
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:var(--rg-line);
}
body.rif-auth .form-container br{ display:none; }

/* ---------- fields ---------- */
body.rif-auth .form-wrap{ margin-top:20px; text-align:left; }
body.rif-auth .form-field{ position:relative; margin:0 0 15px; border:none; }
body.rif-auth .form-field label,
body.rif-auth .form-wrap label{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--rg-muted);
  margin:0 0 7px;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:none !important;
  width:auto !important;
  height:auto !important;
  line-height:1.4 !important;
  text-align:left !important;
}
body.rif-auth .form-field label .asterisk,
body.rif-auth .form-wrap label .asterisk{ color:#c0392b; }

body.rif-auth .form-field input,
body.rif-auth .form-field select,
body.rif-auth .form-wrap input,
body.rif-auth .form-wrap select{
  width:100%;
  box-sizing:border-box;
  height:48px !important;
  padding:0 14px;
  font-size:14.5px;
  font-family:inherit;
  color:var(--rg-ink);
  background:#f7f9f8 !important;
  border:1.5px solid var(--rg-line) !important;
  border-radius:9px !important;
  outline:none;
  box-shadow:none !important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.rif-auth .form-field input[type="hidden"],
body.rif-auth .form-wrap input[type="hidden"]{ display:none !important; height:0 !important; }
body.rif-auth .form-field input::placeholder,
body.rif-auth .form-wrap input::placeholder{ color:#b3bfb7; }
body.rif-auth .form-field input:focus,
body.rif-auth .form-field select:focus,
body.rif-auth .form-wrap input:focus,
body.rif-auth .form-wrap select:focus{
  background:#ffffff !important;
  border-color:var(--rg-mid) !important;
  box-shadow:0 0 0 3px rgba(27,122,60,.13) !important;
}
body.rif-auth input:-webkit-autofill,
body.rif-auth input:-webkit-autofill:hover,
body.rif-auth input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #f7f9f8 inset !important;
  -webkit-text-fill-color:#1A2E1F !important;
  caret-color:#1A2E1F;
}

/* ---------- button ---------- */
body.rif-auth .form-container button{
  width:100%;
  margin-top:8px !important;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,var(--rg-mid),var(--rg-green) 85%);
  box-shadow:0 10px 22px rgba(18,53,40,.26);
  transition:transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
body.rif-auth .form-container button:hover{ filter:brightness(1.07); box-shadow:0 13px 26px rgba(18,53,40,.34); }
body.rif-auth .form-container button:active{ transform:translateY(1px); }
body.rif-auth .form-container button i{ font-size:18px; color:var(--rg-gold); }

/* ---------- footer links ---------- */
body.rif-auth aside{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--rg-line);
  display:flex;
  flex-direction:column;
  gap:9px;
  align-items:center;
  text-align:center;
}
body.rif-auth aside a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:500;
  color:var(--rg-soft);
  text-decoration:none;
  transition:color .15s ease;
}
body.rif-auth aside a:hover{ color:var(--rg-mid); text-decoration:underline; }
body.rif-auth aside a i{ font-size:16px; color:var(--rg-gold); }

/* ---------- flash panels ---------- */
body.rif-auth .panel{
  text-align:left;
  border-radius:10px;
  padding:12px 14px;
  margin:18px 0 0;
  border:none;
}
body.rif-auth .panel .title{
  margin:0 0 3px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:7px;
}
body.rif-auth .panel p{ margin:0; font-size:13.5px; line-height:1.5; }
body.rif-auth .panel.error{ background:#fdecea; border-left:4px solid #c0392b; color:#7b241c; }
body.rif-auth .panel.error .title{ color:#c0392b; }
body.rif-auth .panel.success,
body.rif-auth .panel.confirm{ background:#e9f5ed; border-left:4px solid var(--rg-mid); color:var(--rg-green); }
body.rif-auth .panel.success .title,
body.rif-auth .panel.confirm .title{ color:var(--rg-mid); }

/* ---------- notice board ---------- */
body.rif-auth .notice-board{
  width:100%;
  max-width:452px;
  margin:0 auto 22px !important;
  padding:0 !important;
  box-sizing:border-box;
  background:none !important;
  border:none;
}
body.rif-auth .notice-board li.slick-slide{
  background:#ffffff !important;
  border-radius:12px !important;
  border-left:4px solid var(--rg-gold) !important;
  box-shadow:0 8px 20px rgba(10,35,25,.10);
  padding:14px 16px !important;
  box-sizing:border-box;
}
body.rif-auth .notice-board li h5 span{ color:var(--rg-green) !important; font-weight:600; }
body.rif-auth .notice-board li time{ color:var(--rg-muted) !important; font-size:11px; }
body.rif-auth .notice-board li time i{ color:var(--rg-gold) !important; }
body.rif-auth .notice-board li p{ color:var(--rg-ink) !important; font-size:13.5px; line-height:1.55; }

/* ---------- page footer ---------- */
body.rif-auth footer{
  width:100%;
  max-width:452px;
  margin:0 auto !important;
  padding:0 6px 26px;
  box-sizing:border-box;
  text-align:center;
  font-size:11.5px;
  line-height:1.7;
  color:var(--rg-muted) !important;
  background:none !important;
}
body.rif-auth footer p{ margin:0; color:inherit !important; }
body.rif-auth footer strong{ color:var(--rg-green) !important; font-weight:600; }
body.rif-auth footer a{ color:var(--rg-soft) !important; text-decoration:none; font-weight:500; }
body.rif-auth footer a:hover{ text-decoration:underline; }

/* ---------- phones ---------- */
@media (max-width:520px){
  body.rif-auth{
    background-image:
      radial-gradient(rgba(255,255,255,.055) 1.4px, transparent 1.4px),
      linear-gradient(180deg,var(--rg-dark) 0, var(--rg-green) 232px, var(--rg-page) 232px, var(--rg-page) 100%) !important;
  }
  body.rif-auth .form-container{
    margin:24px 14px 26px !important;
    width:auto;
    max-width:none;
    padding:26px 20px 22px;
    border-radius:14px;
  }
  body.rif-auth .rif-name{ font-size:22px; }
  body.rif-auth .rif-crest img{ width:76px; height:76px; }
  body.rif-auth .notice-board,
  body.rif-auth footer{ max-width:none; margin-left:14px !important; margin-right:14px !important; width:auto; }
}


/* ---- corrections ---- */
body.rif-auth .rif-name{
  text-transform:none !important;
  font-variant:normal !important;
}
body.rif-auth .form-title{
  margin-bottom:6px !important;
}
body.rif-auth .form-wrap{ margin-top:22px !important; }
body.rif-auth .rif-tagline{ margin-bottom:2px; }

body.rif-auth .form-container > p[style]{
  color:var(--rg-muted) !important;
  font-size:12.5px;
  margin:8px 0 0;
}
body.rif-auth .form-container > p[style] .asterisk{ color:#c0392b !important; }


/* ---- gender / any select on these pages ---- */
body.rif-auth .form-wrapper select,
body.rif-auth .form-field select{
  width:100%;
  box-sizing:border-box;
  height:48px !important;
  padding:0 14px;
  font-size:14.5px;
  font-family:inherit;
  color:var(--rg-ink);
  background:#f7f9f8 !important;
  border:1.5px solid var(--rg-line) !important;
  border-radius:9px !important;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#2D6A4F 50%),linear-gradient(135deg,#2D6A4F 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px !important;
  background-size:6px 6px, 6px 6px !important;
  background-repeat:no-repeat !important;
}
body.rif-auth .form-wrapper input,
body.rif-auth .form-wrapper label{ font-family:inherit; }

/* ---- show / hide password ---- */
body.rif-auth .rif-pw{ position:relative; display:block; }
body.rif-auth .rif-pw input{ padding-right:74px !important; }
body.rif-auth .form-container .rif-pw-toggle,
body.rif-auth .rif-pw-toggle{
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  margin:0 !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border:none !important;
  border-radius:7px !important;
  background:#eaf1ec !important;
  color:#2D6A4F !important;
  font-family:'Poppins',sans-serif !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  cursor:pointer;
}
body.rif-auth .form-container .rif-pw-toggle:hover,
body.rif-auth .rif-pw-toggle:hover{ background:#dbe8df !important; filter:none !important; }

body.rif-auth .rif-pw{ display:block !important; line-height:0 !important; font-size:0 !important; }
body.rif-auth .rif-pw input{ display:block !important; line-height:normal; font-size:14.5px !important; }


/* ---- referrer block on registration ---- */
body.rif-auth .rif-referrer{
  margin:4px 0 18px;
  padding:16px 16px 6px;
  background:#f6faf7;
  border:1px solid var(--rg-line);
  border-left:4px solid var(--rg-gold);
  border-radius:10px;
}
body.rif-auth .rif-referrer-q{
  margin:0 0 14px;
  font-size:13.5px;
  font-style:italic;
  font-weight:500;
  color:var(--rg-soft);
  line-height:1.5;
}
body.rif-auth .rif-referrer-note{
  margin:2px 0 10px;
  font-size:12px;
  line-height:1.55;
  color:var(--rg-muted);
}
body.rif-auth .rif-referrer .form-field input{ background:#ffffff !important; }


/* ---- referrer box + password toggle on the member profile page ---- */
.rif-referrer{
  margin:4px 0 18px;
  padding:16px 16px 6px;
  background:#f6faf7;
  border:1px solid #e6ebe8;
  border-left:4px solid #C9A84C;
  border-radius:10px;
}
.rif-referrer-q{
  margin:0 0 14px;
  font-size:13.5px;
  font-style:italic;
  font-weight:500;
  color:#2D6A4F;
  line-height:1.5;
}
.rif-referrer-note{
  margin:2px 0 10px;
  font-size:12px;
  line-height:1.55;
  color:#7b8a80;
}
.rif-pw{ position:relative; display:block !important; line-height:0 !important; font-size:0 !important; }
.rif-pw input{ display:block !important; line-height:normal; font-size:14.5px !important; padding-right:74px !important; }
button.rif-pw-toggle{
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  margin:0 !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border:none !important;
  border-radius:7px !important;
  background:#eaf1ec !important;
  color:#2D6A4F !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  cursor:pointer;
}
button.rif-pw-toggle:hover{ background:#dbe8df !important; }


/* ---- placeholder text sized to fit the box ---- */
body.rif-auth .form-field input::placeholder,
body.rif-auth .form-wrapper input::placeholder,
.rif-referrer input::placeholder{
  font-size:12.5px !important;
  letter-spacing:0 !important;
  opacity:.75;
}
@media (max-width:520px){
  body.rif-auth .form-field input::placeholder,
  body.rif-auth .form-wrapper input::placeholder,
  .rif-referrer input::placeholder{ font-size:11.5px !important; }
}