/* =========================================================
   Friendozo V2 — Video Login
   ========================================================= */

:root{
    color-scheme:dark;
    --bg:#030816;
    --panel:rgba(7,16,31,.82);
    --panel-strong:rgba(7,16,31,.94);
    --text:#f8faff;
    --muted:#9ba7bd;
    --line:rgba(131,151,186,.23);

    --pink:#f12bd8;
    --purple:#8a43ff;
    --blue:#0ab7f7;

    --gradient:linear-gradient(100deg,var(--pink) 0%,var(--purple) 52%,var(--blue) 100%);
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
}

body{
    min-height:100vh;
    min-height:100svh;
    overflow-x:hidden;

    color:var(--text);
    background:var(--bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input{
    font:inherit;
}

a{
    color:inherit;
    text-decoration:none;
}

.login-bg-video{
    position:fixed;
    inset:0;
    z-index:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    background:#030816;
}

.login-video-overlay{
    position:fixed;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(2,7,18,.38) 0%,
            rgba(2,7,18,.48) 43%,
            rgba(2,7,18,.76) 67%,
            rgba(2,7,18,.92) 100%
        );
}

.login-video-vignette{
    position:fixed;
    inset:0;
    z-index:2;

    pointer-events:none;

    background:
        radial-gradient(circle at 18% 26%,rgba(10,183,247,.10),transparent 32%),
        radial-gradient(circle at 82% 38%,rgba(138,67,255,.13),transparent 28%),
        linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28));
}

.login-shell{
    position:relative;
    z-index:3;

    width:min(1500px,100%);
    min-height:100vh;
    min-height:100svh;

    margin:0 auto;
    padding:46px clamp(28px,5vw,88px);

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,460px);
    align-items:center;
    gap:clamp(36px,7vw,120px);
}

.login-brand-panel{
    min-width:0;
    align-self:stretch;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:18px 0 24px;
}

.login-brand-logo{
    width:clamp(210px,18vw,310px);
    height:auto;

    display:block;

    filter:drop-shadow(0 12px 34px rgba(0,0,0,.32));
}

.login-brand-copy{
    max-width:700px;
    padding-bottom:clamp(30px,12vh,145px);
}

.login-kicker{
    display:inline-block;

    margin-bottom:18px;

    color:#c6d1e4;

    font-size:12px;
    font-weight:750;
    letter-spacing:2.8px;
}

.login-brand-copy h1{
    margin:0;

    max-width:750px;

    color:#fff;

    font-size:clamp(52px,6vw,94px);
    font-weight:820;
    line-height:.96;
    letter-spacing:-3.8px;

    text-shadow:0 16px 48px rgba(0,0,0,.38);
}

.login-brand-copy h1 span{
    color:transparent;

    background:var(--gradient);
    background-clip:text;
    -webkit-background-clip:text;
}

.login-brand-copy p{
    margin:24px 0 0;

    max-width:560px;

    color:#d7dfed;

    font-size:clamp(17px,1.5vw,21px);
    line-height:1.65;

    text-shadow:0 5px 18px rgba(0,0,0,.35);
}

.login-card-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.login-card{
    position:relative;

    width:100%;

    padding:34px 34px 28px;

    overflow:hidden;

    border:1px solid rgba(132,153,190,.24);
    border-radius:24px;

    background:
        linear-gradient(180deg,rgba(9,20,39,.89),rgba(5,13,27,.94));

    box-shadow:
        0 35px 100px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.018) inset;

    backdrop-filter:blur(24px) saturate(125%);
    -webkit-backdrop-filter:blur(24px) saturate(125%);
}

.login-card::before{
    content:"";

    position:absolute;
    top:0;
    left:10%;
    right:10%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(241,43,216,.58),
        rgba(138,67,255,.58),
        rgba(10,183,247,.58),
        transparent
    );
}

.login-card-logo-wrap{
    display:none;
}

.login-card-logo{
    width:172px;
    height:auto;
}

.login-card-heading{
    margin-bottom:27px;
}

.login-eyebrow{
    display:block;

    margin-bottom:8px;

    color:#d04cff;

    font-size:13px;
    font-weight:750;
    letter-spacing:.5px;
}

.login-card-heading h2{
    margin:0;

    color:#fff;

    font-size:32px;
    line-height:1.15;
    letter-spacing:-.7px;
}

.login-card-heading p{
    margin:9px 0 0;

    color:var(--muted);

    font-size:14px;
}

.login-alert{
    margin-bottom:17px;
    padding:12px 14px;

    border:1px solid rgba(255,84,115,.28);
    border-radius:12px;

    color:#ffd0d9;
    background:rgba(255,63,102,.10);

    font-size:13px;
    line-height:1.5;
}

.login-form{
    display:grid;
    gap:18px;
}

.field-group{
    display:grid;
    gap:8px;
}

.field-label{
    color:#dce3ef;

    font-size:12.5px;
    font-weight:650;
}

.field-shell{
    position:relative;

    height:54px;

    display:flex;
    align-items:center;

    border:1px solid rgba(120,143,181,.27);
    border-radius:14px;

    background:rgba(6,15,29,.72);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.field-shell:focus-within{
    border-color:rgba(147,76,255,.82);

    background:rgba(7,17,33,.86);

    box-shadow:
        0 0 0 4px rgba(142,67,255,.10),
        0 0 24px rgba(117,69,255,.11);
}

.field-icon{
    width:48px;
    height:100%;

    display:grid;
    place-items:center;

    color:#71809a;
}

.field-icon svg{
    width:20px;
    height:20px;
}

.field-shell input{
    width:100%;
    height:100%;

    padding:0 14px 0 0;

    border:0;
    outline:none;

    color:#fff;
    background:transparent;

    font-size:14px;
}

.field-shell input::placeholder{
    color:#64738d;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff;
    caret-color:#fff;

    box-shadow:0 0 0 1000px #081527 inset;

    transition:background-color 5000s ease-in-out 0s;
}

.password-toggle{
    width:48px;
    height:100%;

    display:grid;
    place-items:center;

    flex:0 0 48px;

    border:0;
    outline:none;

    color:#78869f;
    background:transparent;

    cursor:pointer;
}

.password-toggle:hover{
    color:#fff;
}

.password-toggle svg{
    width:20px;
    height:20px;
}

.password-toggle .eye-closed{
    display:none;
}

.password-toggle.showing .eye-open{
    display:none;
}

.password-toggle.showing .eye-closed{
    display:block;
}

.login-submit{
    height:54px;
    margin-top:2px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border:0;
    border-radius:14px;

    color:#fff;
    background:var(--gradient);

    box-shadow:
        0 12px 34px rgba(110,64,255,.24);

    cursor:pointer;

    font-size:14px;
    font-weight:800;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.login-submit:hover{
    transform:translateY(-1px);

    box-shadow:
        0 16px 38px rgba(110,64,255,.34);

    filter:brightness(1.05);
}

.login-submit:active{
    transform:translateY(0);
}

.login-submit svg{
    width:19px;
    height:19px;
}

.login-footer-row{
    margin-top:22px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    color:#8491a9;

    font-size:13px;
}

.login-footer-row a{
    color:#d94cff;
    font-weight:700;
}

.login-footer-row a:hover{
    color:#f06dff;
}

.login-secure-note{
    margin-top:19px;
    padding-top:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border-top:1px solid rgba(121,143,178,.14);

    color:#64738a;

    font-size:10.5px;
    letter-spacing:.2px;
}

.secure-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#23df7b;

    box-shadow:0 0 9px rgba(35,223,123,.65);
}

@media(max-width:980px){
    .login-shell{
        grid-template-columns:1fr 420px;
        gap:40px;
        padding-inline:30px;
    }

    .login-brand-copy h1{
        font-size:55px;
        letter-spacing:-2.6px;
    }
}

@media(max-width:800px){
    .login-video-overlay{
        background:rgba(2,7,18,.72);
    }

    .login-shell{
        width:100%;
        grid-template-columns:1fr;

        justify-items:center;

        padding:28px 18px;
    }

    .login-brand-panel{
        display:none;
    }

    .login-card-wrap{
        width:100%;
        justify-content:center;
    }

    .login-card{
        width:min(460px,100%);
    }

    .login-card-logo-wrap{
        display:block;
        margin-bottom:25px;
    }

    .login-card-logo{
        width:175px;
    }
}

@media(max-width:520px){
    .login-shell{
        padding:16px 12px;
        align-items:center;
    }

    .login-card{
        padding:27px 20px 23px;

        border-radius:20px;
    }

    .login-card-heading{
        margin-bottom:23px;
    }

    .login-card-heading h2{
        font-size:28px;
    }

    .field-shell,
    .login-submit{
        height:52px;
    }

    .login-card-logo{
        width:155px;
    }
}

@media(prefers-reduced-motion:reduce){
    .login-bg-video{
        display:none;
    }

    .login-submit{
        transition:none;
    }
}


/* ===== Clean login final overrides ===== */

.login-brand-logo {
  width: clamp(260px, 20vw, 360px) !important;
  max-width: 360px !important;
  height: auto !important;
}

.login-card-logo {
  width: 190px !important;
  max-width: 70vw !important;
  height: auto !important;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 20px 0 14px;
  color: #8290aa;
  font-size: 11px;
  line-height: 1;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.11);
}

.login-divider span {
  white-space: nowrap;
}

.google-login-area,
.google-native-shell,
.google-login-area .g_id_signin {
  width: 100% !important;
}

.google-native-shell {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  border: 1px solid rgba(130,150,180,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

/* Placeholder used until a Google Client ID is configured */
.google-login-pretty,
.google-login-placeholder {
  appearance: none;
  width: 100% !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(130,150,180,.22) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.055) !important;
  color: #f5f7fb !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.google-login-pretty:hover,
.google-login-placeholder:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(144,82,255,.45) !important;
}

.google-gmark {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 26px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #4285f4 !important;
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.google-button-title {
  color: #f5f7fb !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media(max-width:800px) {
  .login-card-logo {
    width: 190px !important;
  }
}

@media(max-width:520px) {
  .login-card-logo {
    width: 175px !important;
  }
}


/* ===== Google text link — final ===== */
.google-text-login {
    width: 100%;
    margin-top: 4px;
    text-align: center;
    line-height: 1.4;
}

.google-text-login a,
.google-text-login button {
    appearance: none;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #aeb8cb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease;
}

.google-text-login a:hover,
.google-text-login a:focus,
.google-text-login button:hover,
.google-text-login button:focus {
    color: #d94cff;
    background: transparent;
    box-shadow: none;
    outline: none;
}