/* =================================================================
   DishFlow — accediaccount.css
   Luxury full-page login — stile hotel 5 stelle
   Glassmorphism card · Cormorant + DM Sans · Animazioni fluide
   ================================================================= */

:root {
    --gold:   #c9a84c;
    --goldh:  #e8c96a;
    --gold-d: rgba(201,168,76,.15);
    --white:  #ffffff;
    --gray:   #94a3b8;
    --gray2:  #475569;
    --ease:   cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
body {
    font-family:'DM Sans', sans-serif;
    background:#080c14;
    color:var(--white);
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
img { display:block; }

/* ═══════════════════════════════════════════════════════════════
   SFONDO FOTOGRAFICO
═══════════════════════════════════════════════════════════════ */
.bg-stage {
    position:fixed; inset:0; z-index:0;
}
.bg-slide {
    position:absolute; inset:-5%;
    background-size:cover; background-position:center;
    opacity:0;
    transition:opacity 1.6s ease;
    animation:kenBurns 14s ease-in-out infinite alternate;
    will-change:transform;
}
.bg-slide.active { opacity:1; }
.bg-slide:nth-child(2) { animation-delay:-4s; }
.bg-slide:nth-child(3) { animation-delay:-8s; }

@keyframes kenBurns {
    from { transform:scale(1.05) translate(0,0); }
    to   { transform:scale(1.13) translate(-1%,-1%); }
}

/* Overlay multi-layer */
.bg-overlay {
    position:fixed; inset:0; z-index:1;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 70%),
        linear-gradient(135deg, rgba(8,12,20,.88) 0%, rgba(8,12,20,.5) 50%, rgba(8,12,20,.75) 100%);
}

/* Griglia filigrana */
.filigree {
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.035) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse at 30% 50%, transparent 20%, black 70%);
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════════ */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 48px;
    animation:fadeDown .7s var(--ease) both;
}
@keyframes fadeDown {
    from { opacity:0; transform:translateY(-12px); }
    to   { opacity:1; transform:translateY(0); }
}
.nav-logo {
    display:flex; align-items:center;
}
.nav-logo img { height:36px; object-fit:contain; }
.nav-logo-txt {
    font-family:'Cormorant Garamond', serif;
    font-size:1.5rem; font-weight:600; color:var(--white); letter-spacing:.5px;
}
.nav-logo-txt em { font-style:italic; color:var(--gold); }

.nav-right { display:flex; align-items:center; gap:16px; }
.nav-hint  { font-size:.80rem; color:rgba(255,255,255,.45); }
.nav-register {
    font-size:.82rem; font-weight:600; color:var(--white);
    border:1px solid rgba(255,255,255,.22); border-radius:50px;
    padding:8px 22px; backdrop-filter:blur(8px);
    background:rgba(255,255,255,.06);
    transition:all .25s ease;
}
.nav-register:hover {
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.4);
    transform:translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT MAIN
═══════════════════════════════════════════════════════════════ */
.main {
    position:relative; z-index:2;
    height:100vh;
    display:flex; align-items:center;
    padding:0 8vw;
    gap:7vw;
}

/* ─── Testo editoriale ───────────────────────────────────────── */
.editorial {
    flex:1; min-width:0;
    animation:fadeLeft .9s var(--ease) .2s both;
}
@keyframes fadeLeft {
    from { opacity:0; transform:translateX(-28px); }
    to   { opacity:1; transform:translateX(0); }
}

.editorial-kicker {
    display:flex; align-items:center; gap:14px;
    font-size:.70rem; font-weight:500; color:var(--gold);
    letter-spacing:3px; text-transform:uppercase; margin-bottom:20px;
}
.kicker-line {
    display:block; width:40px; height:1px; background:var(--gold); opacity:.7;
}

.editorial-title {
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(3rem, 5.5vw, 5.2rem);
    font-weight:300; line-height:1.08;
    color:var(--white); margin-bottom:22px; letter-spacing:-.5px;
}
.editorial-title em {
    font-style:italic; font-weight:400;
    background:linear-gradient(90deg, #e8c96a 0%, #c9a84c 40%, #e8c96a 100%);
    background-size:200%;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position:200% center; } }

.editorial-sub {
    font-size:.95rem; font-weight:300;
    color:rgba(255,255,255,.5); line-height:1.8; margin-bottom:36px;
}

/* Dots slide */
.slide-nav { display:flex; gap:10px; align-items:center; }
.sn-dot {
    width:8px; height:8px; border-radius:50%; padding:0;
    background:rgba(255,255,255,.25);
    transition:all .35s var(--ease);
}
.sn-dot.active {
    background:var(--gold); width:28px; border-radius:4px;
    box-shadow:0 0 10px rgba(201,168,76,.45);
}

/* ─── Glassmorphism card ─────────────────────────────────────── */
.glass-card {
    width:100%; max-width:440px; flex-shrink:0;
    background:rgba(8,12,20,.72);
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    padding:40px 38px 32px;
    box-shadow:
        0 0 0 1px rgba(201,168,76,.08),
        0 32px 80px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.08);
    animation:fadeRight .9s var(--ease) .3s both;
    /* bordo dorato sottile in cima */
    position:relative; overflow:hidden;
}
.glass-card::before {
    content:'';
    position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,168,76,.6), transparent);
}
@keyframes fadeRight {
    from { opacity:0; transform:translateX(28px) scale(.98); }
    to   { opacity:1; transform:translateX(0) scale(1); }
}

.card-head { margin-bottom:26px; }
.card-eyebrow {
    font-size:.68rem; font-weight:600; color:var(--gold);
    text-transform:uppercase; letter-spacing:2.5px; margin-bottom:5px;
    display:flex; align-items:center; gap:8px;
}
.card-eyebrow::before {
    content:''; width:16px; height:1px; background:var(--gold); opacity:.7;
}
.card-title {
    font-family:'Cormorant Garamond', serif;
    font-size:2.2rem; font-weight:600; line-height:1.1;
}

/* Role toggle */
.role-toggle {
    display:flex; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:4px; gap:4px; margin-bottom:24px;
}
.role-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 12px; border-radius:10px;
    font-size:.82rem; font-weight:500; color:rgba(255,255,255,.45);
    transition:all .25s var(--ease);
}
.role-btn svg { width:14px; height:14px; flex-shrink:0; }
.role-btn.active {
    background:var(--gold); color:#080c14; font-weight:700;
    box-shadow:0 4px 18px rgba(201,168,76,.28);
}
.role-btn.active svg { stroke:#080c14; }
.role-btn:not(.active):hover {
    color:rgba(255,255,255,.75); background:rgba(255,255,255,.06);
}

/* Fields */
form { display:flex; flex-direction:column; gap:14px; }

.field { display:flex; flex-direction:column; gap:7px; }
.flabel {
    font-size:.72rem; font-weight:600;
    color:rgba(255,255,255,.55); letter-spacing:.5px;
}
.flabel-row {
    display:flex; align-items:center; justify-content:space-between;
}
.fpwd-forgot {
    font-size:.72rem; color:var(--gold); opacity:.85;
    transition:opacity .2s;
}
.fpwd-forgot:hover { opacity:1; }

.finput-wrap { position:relative; display:flex; align-items:center; }
.ficon {
    position:absolute; left:15px; width:15px; height:15px;
    stroke:rgba(255,255,255,.25); pointer-events:none;
    transition:stroke .2s ease;
}
.finput {
    width:100%; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10); border-radius:12px;
    padding:13px 15px 13px 42px;
    color:var(--white); font-size:.90rem; font-family:'DM Sans', sans-serif;
    outline:none;
    transition:border-color .25s, background .25s, box-shadow .25s;
}
.finput::placeholder { color:rgba(255,255,255,.22); }
.finput:focus {
    border-color:rgba(201,168,76,.55);
    background:rgba(255,255,255,.09);
    box-shadow:0 0 0 3px rgba(201,168,76,.10);
}
.finput-wrap:focus-within .ficon { stroke:rgba(201,168,76,.7); }

.ftoggle-pwd {
    position:absolute; right:12px;
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.3); transition:color .2s, background .2s;
}
.ftoggle-pwd svg { width:14px; height:14px; }
.ftoggle-pwd:hover { color:rgba(255,255,255,.7); background:rgba(255,255,255,.06); }

/* Remember */
.fremember {
    display:flex; align-items:center; gap:9px; cursor:pointer;
    font-size:.78rem; color:rgba(255,255,255,.4); user-select:none;
    margin-top:-2px;
}
.fremember input[type="checkbox"] { display:none; }
.fremember-box {
    width:17px; height:17px; border-radius:5px; flex-shrink:0;
    border:1.5px solid rgba(255,255,255,.15); background:transparent;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s ease;
}
.fremember input:checked + .fremember-box {
    background:var(--gold); border-color:var(--gold);
}
.fremember input:checked + .fremember-box::after {
    content:''; width:8px; height:5px;
    border-left:2px solid #080c14; border-bottom:2px solid #080c14;
    transform:rotate(-45deg) translate(1px,-1px); display:block;
}

/* Submit */
.fsubmit {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:15px;
    background:linear-gradient(135deg, #e8c96a 0%, #b8900a 100%);
    color:#080c14; border-radius:14px;
    font-family:'DM Sans', sans-serif; font-size:.94rem; font-weight:700;
    letter-spacing:.3px;
    box-shadow:0 8px 28px rgba(201,168,76,.28);
    transition:all .25s var(--ease); position:relative; overflow:hidden;
    margin-top:4px;
}
.fsubmit::after {
    content:'';
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition:left .5s ease;
}
.fsubmit:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(201,168,76,.38); }
.fsubmit:hover::after { left:150%; }
.fsubmit:active { transform:scale(.98); }

#submitArrow { width:16px; height:16px; transition:transform .25s; flex-shrink:0; }
.fsubmit:hover #submitArrow { transform:translateX(4px); }

.floader { display:flex; align-items:center; gap:5px; }
.floader span {
    width:6px; height:6px; border-radius:50%; background:#080c14;
    animation:ldot .8s ease-in-out infinite;
}
.floader span:nth-child(2) { animation-delay:.15s; }
.floader span:nth-child(3) { animation-delay:.3s; }
@keyframes ldot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Divider */
.fdivider {
    display:flex; align-items:center; gap:12px;
    font-size:.70rem; color:rgba(255,255,255,.25);
}
.fdivider span:first-child, .fdivider span:last-child {
    flex:1; height:1px; background:rgba(255,255,255,.08); display:block;
}

/* Social */
.fsocial { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fsocial-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    border-radius:12px; padding:11px 14px;
    font-size:.82rem; font-weight:500; color:rgba(255,255,255,.55);
    transition:all .2s ease;
}
.fsocial-btn svg { width:18px; height:18px; flex-shrink:0; }
.fsocial-btn:hover {
    background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18);
    color:var(--white); transform:translateY(-1px);
}

/* Footer card */
.card-foot {
    text-align:center; margin-top:20px;
    font-size:.70rem; color:rgba(255,255,255,.22);
}
.card-foot a { color:rgba(255,255,255,.35); transition:color .2s; }
.card-foot a:hover { color:var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    html, body { overflow:auto; }
    .main {
        flex-direction:column; justify-content:center;
        padding:100px 6vw 40px; gap:36px; min-height:100vh; height:auto;
    }
    .editorial { text-align:center; }
    .editorial-kicker { justify-content:center; }
    .editorial-title { font-size:clamp(2.4rem, 8vw, 3.8rem); }
    .slide-nav { justify-content:center; }
    .glass-card { max-width:480px; width:100%; }
    .editorial-sub { display:none; }
}
@media (max-width:480px) {
    .nav { padding:18px 24px; }
    .nav-hint { display:none; }
    .main { padding:88px 18px 32px; }
    .glass-card { padding:30px 22px 24px; border-radius:20px; }
    .fsocial { grid-template-columns:1fr; }
}