/* =================================================================
   DishFlow — registraaccount.css
   Multi-step registration · Mesh gradient · Playfair + DM Sans
   Diverso dal login: sfondo scuro caldo, non fotografico
   ================================================================= */

:root {
    --bg:     #080a10;
    --card:   #0d1018;
    --gold:   #c9a84c;
    --goldh:  #e8c96a;
    --white:  #ffffff;
    --gray:   #8892a4;
    --gray2:  #4a5568;
    --green:  #22c55e;
    --red:    #ef4444;
    --ease:   cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family:'DM Sans', sans-serif;
    background:var(--bg); color:var(--white);
    min-height:100vh; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
img { display:block; }

/* ═══════════════════════════════════════════════════════════════
   MESH GRADIENT BACKGROUND
═══════════════════════════════════════════════════════════════ */
.mesh {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.mesh-orb {
    position:absolute; border-radius:50%;
    filter:blur(110px); will-change:transform;
}
.m1 {
    width:700px; height:700px; top:-200px; left:-150px;
    background:radial-gradient(circle, rgba(201,168,76,.09) 0%, transparent 70%);
    animation:orbDrift 14s ease-in-out infinite;
}
.m2 {
    width:500px; height:500px; top:30vh; right:-100px;
    background:radial-gradient(circle, rgba(120,80,200,.06) 0%, transparent 70%);
    animation:orbDrift 11s ease-in-out 3s infinite reverse;
}
.m3 {
    width:400px; height:400px; bottom:10vh; left:20%;
    background:radial-gradient(circle, rgba(201,168,76,.05) 0%, transparent 70%);
    animation:orbDrift 16s ease-in-out 6s infinite;
}
.m4 {
    width:300px; height:300px; bottom:20vh; right:25%;
    background:radial-gradient(circle, rgba(50,180,120,.04) 0%, transparent 70%);
    animation:orbDrift 9s ease-in-out 1.5s infinite reverse;
}
@keyframes orbDrift {
    0%,100% { transform:translate(0,0) scale(1); }
    33%      { transform:translate(30px,-25px) scale(1.06); }
    66%      { transform:translate(-18px,18px) scale(.96); }
}

/* Noise grain */
.mesh-noise {
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════════ */
.nav {
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 48px;
    background:rgba(8,10,16,.85); backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:34px; object-fit:contain; }
.nav-logo-txt {
    font-family:'Playfair Display', serif; font-size:1.4rem;
    font-weight:700; color:var(--white);
}
.nav-logo-txt em { font-style:italic; color:var(--gold); }

.nav-right { display:flex; align-items:center; gap:14px; }
.nav-hint  { font-size:.80rem; color:rgba(255,255,255,.38); }
.nav-login {
    font-size:.82rem; font-weight:600; color:var(--gold);
    border:1px solid rgba(201,168,76,.35); border-radius:50px;
    padding:7px 20px; transition:all .2s ease;
}
.nav-login:hover { background:rgba(201,168,76,.08); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════════════════════════════ */
.page {
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1.05fr;
    min-height:calc(100vh - 74px);
    max-width:1280px; margin:0 auto;
    padding:0 48px 60px; gap:64px;
    align-items:start; padding-top:52px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar { position:sticky; top:100px; }
.sidebar-inner { max-width:400px; }

.sb-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size:.68rem; font-weight:600; color:var(--gold);
    text-transform:uppercase; letter-spacing:2px; margin-bottom:20px;
}
.sb-dot {
    width:6px; height:6px; border-radius:50%; background:var(--gold);
    animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.sb-title {
    font-family:'Playfair Display', serif;
    font-size:clamp(2.6rem, 4vw, 3.8rem);
    font-weight:400; line-height:1.1;
    color:var(--white); margin-bottom:18px; letter-spacing:-.3px;
}
.sb-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; } }

.sb-desc {
    font-size:.92rem; font-weight:300; color:rgba(255,255,255,.48);
    line-height:1.8; margin-bottom:32px;
}

.benefits { list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:36px; }
.benefit  { display:flex; align-items:center; gap:12px; font-size:.88rem; color:rgba(255,255,255,.7); }
.bi {
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.3);
    display:flex; align-items:center; justify-content:center;
}
.bi svg { width:11px; height:11px; stroke:var(--gold); }

.social-proof { display:flex; align-items:center; gap:14px; }
.sp-avs { display:flex; }
.sp-av {
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:700; color:rgba(255,255,255,.9);
    margin-left:-8px;
}
.sp-av:first-child { margin-left:0; }
.sp-more {
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12);
    font-size:.6rem; color:var(--gray);
}
.sp-txt { font-size:.78rem; color:var(--gray); line-height:1.5; }
.sp-txt strong { color:var(--white); }

/* ═══════════════════════════════════════════════════════════════
   COLONNA DESTRA
═══════════════════════════════════════════════════════════════ */
.form-col { display:flex; flex-direction:column; gap:20px; }

/* Progress bar */
.progress-wrap { padding:0 4px; }
.progress-track {
    height:3px; background:rgba(255,255,255,.08); border-radius:2px;
    margin-bottom:20px; overflow:hidden;
}
.progress-fill {
    height:100%; background:linear-gradient(90deg,var(--gold),var(--goldh));
    border-radius:2px; width:0%;
    transition:width .6s var(--ease);
    box-shadow:0 0 8px rgba(201,168,76,.5);
}

.step-inds { display:flex; gap:0; }
.step-ind  {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
    font-size:.70rem; font-weight:500; color:rgba(255,255,255,.28);
    transition:color .3s;
}
.step-ind.active, .step-ind.done { color:var(--gold); }

.step-bub {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    transition:all .35s var(--ease);
}
.step-bub svg { width:15px; height:15px; stroke:currentColor; }
.step-ind.active .step-bub {
    background:var(--gold); border-color:var(--gold); color:#080a10;
    box-shadow:0 4px 16px rgba(201,168,76,.35);
}
.step-ind.done .step-bub {
    background:rgba(201,168,76,.12); border-color:var(--gold); color:var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════════════ */
.reg-card {
    background:rgba(13,16,24,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px; padding:40px;
    backdrop-filter:blur(20px);
    box-shadow:
        0 0 0 1px rgba(201,168,76,.06),
        0 24px 64px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.06);
    position:relative; overflow:hidden;
}
.reg-card::before {
    content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
}

/* Step panels */
.step-panel { display:none; }
.step-panel.active { display:block; animation:stepIn .5s var(--ease) both; }
.step-panel.exit   { animation:stepOut .3s ease forwards; }

@keyframes stepIn  {
    from { opacity:0; transform:translateX(24px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes stepOut {
    from { opacity:1; transform:translateX(0); }
    to   { opacity:0; transform:translateX(-20px); }
}

.step-head { margin-bottom:28px; }
.step-eyebrow {
    font-size:.67rem; font-weight:600; color:var(--gold);
    text-transform:uppercase; letter-spacing:2.5px; margin-bottom:6px;
    display:flex; align-items:center; gap:8px;
}
.step-eyebrow::before { content:''; width:14px; height:1px; background:var(--gold); opacity:.6; }
.step-title {
    font-family:'Playfair Display', serif;
    font-size:1.9rem; font-weight:600; margin-bottom:4px; line-height:1.2;
}
.step-sub { font-size:.83rem; color:var(--gray); font-weight:300; }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
form { display:flex; flex-direction:column; gap:16px; }

.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.field { display:flex; flex-direction:column; gap:7px; }
.flabel {
    font-size:.72rem; font-weight:600;
    color:rgba(255,255,255,.5); letter-spacing:.4px;
}
.flabel-opt { font-weight:400; opacity:.6; }

.finput-wrap { position:relative; display:flex; align-items:center; }
.ficon {
    position:absolute; left:14px; width:15px; height:15px;
    stroke:rgba(255,255,255,.22); pointer-events:none; transition:stroke .2s;
}
.finput {
    width:100%; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09); border-radius:12px;
    padding:13px 14px; color:var(--white);
    font-size:.90rem; font-family:'DM Sans', sans-serif;
    outline:none; transition:border-color .25s, background .25s, box-shadow .25s;
}
/* quando è dentro finput-wrap con icona */
.finput-wrap .finput { padding-left:42px; }
.finput::placeholder { color:rgba(255,255,255,.2); }
.finput:focus {
    border-color:rgba(201,168,76,.5);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 3px rgba(201,168,76,.09);
}
.finput-wrap:focus-within .ficon { stroke:rgba(201,168,76,.65); }
.finput.error { border-color:rgba(239,68,68,.5); }

.ferr { font-size:.71rem; color:#fc8181; min-height:16px; }

/* Toggle password */
.ftoggle {
    position:absolute; right:12px;
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.28); transition:all .2s;
}
.ftoggle svg { width:14px; height:14px; }
.ftoggle:hover { color:rgba(255,255,255,.65); background:rgba(255,255,255,.06); }

/* Strength meter */
.strength { display:flex; align-items:center; gap:10px; margin-top:6px; }
.strength-bars { display:flex; gap:4px; }
.sb {
    width:36px; height:4px; border-radius:2px;
    background:rgba(255,255,255,.08); transition:background .3s ease;
}
.strength-lbl { font-size:.70rem; color:var(--gray); }

/* Cuisine chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
    padding:7px 14px; border-radius:50px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    font-size:.78rem; font-weight:500; color:rgba(255,255,255,.5);
    transition:all .2s ease;
}
.chip.active {
    background:rgba(201,168,76,.12); border-color:rgba(201,168,76,.45);
    color:var(--gold);
    box-shadow:0 0 10px rgba(201,168,76,.12);
}
.chip:hover:not(.active) { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.18); }

/* Checkboxes */
.fcheck {
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    font-size:.80rem; color:rgba(255,255,255,.5); user-select:none; line-height:1.55;
}
.fcheck input[type="checkbox"] { display:none; }
.fcheck-box {
    width:18px; height:18px; border-radius:5px; flex-shrink:0; margin-top:1px;
    border:1.5px solid rgba(255,255,255,.14); background:transparent;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s ease;
}
.fcheck input:checked + .fcheck-box {
    background:var(--gold); border-color:var(--gold);
}
.fcheck input:checked + .fcheck-box::after {
    content:''; width:9px; height:5px;
    border-left:2px solid #080a10; border-bottom:2px solid #080a10;
    transform:rotate(-45deg) translate(1px,-1px); display:block;
}
.flink { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

/* Social divider */
.social-sep {
    display:flex; align-items:center; gap:12px;
    font-size:.70rem; color:rgba(255,255,255,.22);
}
.social-sep span { flex:1; height:1px; background:rgba(255,255,255,.07); display:block; }

/* Buttons */
.btn-primary {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:14px 24px;
    background:linear-gradient(135deg, #e8c96a 0%, #b8900a 100%);
    color:#080a10; border-radius:13px;
    font-family:'DM Sans', sans-serif; font-size:.93rem; font-weight:700;
    letter-spacing:.2px;
    box-shadow:0 6px 24px rgba(201,168,76,.25);
    transition:all .25s var(--ease); position:relative; overflow:hidden;
}
.btn-primary svg { width:16px; height:16px; flex-shrink:0; transition:transform .25s; }
.btn-primary::after {
    content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition:left .5s ease;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,168,76,.35); }
.btn-primary:hover::after { left:150%; }
.btn-primary:hover svg { transform:translateX(4px); }
.btn-primary:active { transform:scale(.98); }
.flex1 { flex:1; }

.btn-google {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:13px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    border-radius:13px; font-size:.88rem; font-weight:500;
    color:rgba(255,255,255,.65); transition:all .2s ease;
}
.btn-google:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:var(--white); }

.btn-back {
    display:flex; align-items:center; gap:7px;
    padding:14px 20px; border-radius:13px;
    border:1px solid rgba(255,255,255,.09);
    font-size:.88rem; font-weight:500; color:rgba(255,255,255,.45);
    transition:all .2s ease; flex-shrink:0;
}
.btn-back svg { width:15px; height:15px; }
.btn-back:hover { border-color:rgba(255,255,255,.2); color:var(--white); background:rgba(255,255,255,.04); }

.btn-row { display:flex; gap:10px; align-items:stretch; }

.floader { display:flex; align-items:center; gap:5px; }
.floader span {
    width:6px; height:6px; border-radius:50%; background:#080a10;
    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)} }

/* ─── SUCCESS ───────────────────────────────────────────────── */
#confettiCanvas {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    border-radius:24px;
}
.success-wrap {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding:20px 0; gap:14px;
}
.success-rings {
    position:relative; width:100px; height:100px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:8px;
}
.sr {
    position:absolute; border-radius:50%; border:1px solid rgba(201,168,76,.14);
    animation:ringPulse 2.5s ease-in-out infinite;
}
.sr1 { width:100px; height:100px; }
.sr2 { width:76px;  height:76px;  animation-delay:.4s; border-color:rgba(201,168,76,.22); }
.sr3 { width:54px;  height:54px;  animation-delay:.8s; border-color:rgba(201,168,76,.35); }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.7} }

.success-icon {
    width:52px; height:52px;
    animation:iconPop .6s var(--ease) .3s both;
}
.success-icon svg { width:100%; height:100%; }
@keyframes iconPop { from{opacity:0;transform:scale(.5)rotate(-20deg)} to{opacity:1;transform:scale(1)rotate(0)} }

.s-circle {
    stroke-dasharray:145; stroke-dashoffset:145;
    animation:drawCircle .7s ease .5s forwards;
}
.s-check {
    stroke-dasharray:40; stroke-dashoffset:40;
    animation:drawCheck .4s ease 1s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset:0; } }
@keyframes drawCheck  { to { stroke-dashoffset:0; } }

.success-tag {
    display:flex; align-items:center; gap:7px;
    font-size:.68rem; font-weight:600; color:var(--gold);
    text-transform:uppercase; letter-spacing:2px;
}
.success-title {
    font-family:'Playfair Display', serif;
    font-size:2rem; font-weight:600; line-height:1.2;
}
.success-title em { font-style:italic; color:var(--gold); }
.success-sub { font-size:.88rem; color:var(--gray); }
.success-home { font-size:.80rem; color:var(--gray); transition:color .2s; margin-top:4px; }
.success-home:hover { color:var(--gold); }

/* Footer note */
.footer-note {
    font-size:.71rem; color:rgba(255,255,255,.22); text-align:center;
}
.footer-note a { color:rgba(255,255,255,.35); }
.footer-note a:hover { color:var(--gold); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px) {
    .page { grid-template-columns:1fr; padding:40px 32px 60px; gap:40px; }
    .sidebar { position:static; }
    .sidebar-inner { max-width:100%; }
    .sb-title { font-size:2.4rem; }
    .benefits, .social-proof { display:none; }
}
@media(max-width:600px) {
    .nav { padding:16px 20px; }
    .nav-hint { display:none; }
    .page { padding:24px 16px 48px; }
    .reg-card { padding:28px 20px; }
    .row-2 { grid-template-columns:1fr; }
}