/*
 * login-popup.css - self-contained styles for partials/login-popup.php
 * (the #upLogin upf-modal). Load this on pages that do NOT ship the nextgen
 * custom.css (e.g. /create); /upload already gets identical rules from
 * custom.css so it does not need this file.
 *
 * The theme tokens the modal uses are defined locally on .upf-modal so the
 * popup renders correctly regardless of the host page's stylesheet.
 */
.upf-modal{
  --card:#ffffff;
  --text:#0B0F19;
  --au-navy:#1c1959;
  --bg-soft:#F6F7FB;
}
[data-bs-theme="dark"] .upf-modal{
  --card:#141a3a;
  --text:#F3F4F6;
  --bg-soft:#111533;
}

.upf-hide{display:none!important}
.upf-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px;background:rgba(10,10,30,.55);backdrop-filter:blur(4px);animation:upfFade .25s ease both}
.upf-dialog{position:relative;width:100%;max-width:440px;background:var(--card);border-radius:18px;padding:2rem 1.9rem 0;border:1px solid #ecedf4;box-shadow:0 50px 90px -30px rgba(10,10,40,.55);animation:upfPop .35s cubic-bezier(.2,.8,.3,1) both;overflow:hidden}
.upf-dialog::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#1a1a5e,#FFBE2F)}
.upf-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:#f4f5fa;color:#8a8a99;font-size:1rem;line-height:1;cursor:pointer;transition:.2s}
.upf-x:hover{background:#1a1a5e;color:#fff}
.upf-title{font-family:'Roboto Slab',serif;font-weight:500;text-align:center;color:var(--text);font-size:1.55rem;margin:.2rem 0 .35rem}
.upf-sub{text-align:center;color:#6b6b7b;font-size:.92rem;margin:0 0 1.25rem}
.upf-social{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.1rem}
.upf-social a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem .4rem;border:1px solid #e4e6ef;border-radius:10px;background:var(--card);color:var(--text);font-size:.88rem;font-weight:600;text-decoration:none;transition:.2s}
.upf-social a:hover{border-color:var(--au-navy);box-shadow:0 8px 18px rgba(16,24,40,.08);transform:translateY(-1px)}
.upf-social .s-google i{color:#EA4335}
.upf-social .s-facebook i{color:#1877F2}
.upf-social .s-twitter i{color:#1DA1F2}
.upf-social .s-google{border:1px solid #7e7e7e}
.upf-social .s-facebook{background:#176cf0;color:#fff}
.upf-social .s-facebook svg{filter:brightness(20)}
.upf-social .s-twitter{background:#111418;color:#fff}
.upf-social .s-twitter svg{filter:brightness(20)}
.upf-modal .s-ic{width:18px;height:18px;display:inline-block;vertical-align:-3px}
.upf-or{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;color:#9a9aa8;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.upf-or::before,.upf-or::after{content:"";flex:1;height:1px;background:#ececf3}
.upf-fld{margin-bottom:.85rem}
.upf-fld label{display:block;font-size:.82rem;font-weight:600;color:#4a4a5a;margin-bottom:.35rem}
.upf-inp{position:relative}
.upf-inp>i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#9a9aa8;font-size:.9rem}
.upf-inp input{width:100%;border:1px solid #e0e2ec;border-radius:10px;background:var(--card);padding:.78rem .9rem .78rem 2.4rem;font-size:.95rem;color:var(--text);transition:.2s}
.upf-inp input::placeholder{color:#a7a7b6}
.upf-inp input:focus{outline:0;border-color:#FFBE2F;box-shadow:0 0 0 3px rgba(255,190,47,.22)}
.upf-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.15rem 0 1.1rem;font-size:.86rem}
.upf-check{display:inline-flex;align-items:center;gap:.45rem;color:#4a4a5a;cursor:pointer}
.upf-check input{accent-color:var(--text)}
.upf-submit{width:100%;padding:.92rem;border:0;border-radius:10px;background:#1a1a5e;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:background .2s,transform .2s,box-shadow .2s}.upf-error{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .9rem;padding:.7rem .85rem;border-radius:10px;background:#fdecec;border:1px solid #f0b4b0;color:#c0392b;font-size:.86rem;line-height:1.4;font-weight:600}.upf-error i{margin-top:.1rem}.upf-submit[disabled]{opacity:.65;cursor:progress}
.upf-submit:hover{background:#12123f;transform:translateY(-1px);box-shadow:0 18px 34px -22px rgba(26,26,94,.9)}
.upf-forgot{color:var(--text);font-weight:600;text-decoration:none}
.upf-forgot:hover{color:#FFBE2F}
.upf-foot{margin:1.4rem -1.9rem 0;padding:1.05rem;background:var(--bg-soft);border-top:1px solid #ececf3;text-align:center;font-size:.92rem;color:#4a4a5a}
.upf-foot a{color:var(--text);font-weight:700;text-decoration:none}
.upf-foot a:hover{color:#FFBE2F}
@keyframes upfFade{from{opacity:0}to{opacity:1}}
@keyframes upfPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}