:root{
    --teal:#00767d;
    --teal-dark:#005c63;
    --bg-overlay:rgba(0,0,0,.55);
    --radius:4px;
    --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --primary-default: 0,119,130;   /* teal Vinted in formato R,G,B */
}

body{background:#f6f6f7;}

*{box-sizing:border-box;font-family:var(--font);margin:0;padding:0;}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:8px 32px;border-bottom:1px solid #eee;}
.topbar{align-items:flex-start;}          /* logo + search sulla prima riga */
.actions{margin-left:auto;}               /* pulsanti spostati a destra      */
.logo{font-size:30px;font-weight:700;color:var(--teal);}
.search{display:flex;flex:1;max-width:320px;}
.search{flex:1 1 620px;max-width:880px;}
.search select,.search input{border:1px solid #ccc;font-size:15px;height:36px;}
.search select{border-right:none;border-radius:var(--radius) 0 0 var(--radius);padding:0 34px 0 14px;}
.search input{flex:1;border-radius:0 var(--radius) var(--radius) 0;padding:0 40px 0 14px;}

.menu{display:flex;gap:12px;font-size:14px;flex-wrap:wrap;color:#666;}
.menu{
    justify-content:flex-start;           /* categorie allineate a sinistra  */
    margin-left:32px;                     /* stessa indentazione della logo  */
}
.menu a{cursor:pointer;white-space:nowrap;}

.actions .small{font-size:14px;padding:6px 12px;border:1px solid var(--teal);background:#fff;color:var(--teal);border-radius:var(--radius);cursor:pointer;}
.actions .primary{background:var(--teal);color:#fff;font-weight:600;}
.actions .primary:hover{background:var(--teal-dark);}
.actions .small,
.actions .primary.small{height:34px;padding:8px 16px;}

/* hero section (full height) */
.hero{position:relative;height:560px;background:url("../assets/background.jpg") center 15%/cover no-repeat;}
.hero::before{content:"";position:absolute;inset:0;background:var(--bg-overlay);backdrop-filter:blur(2px);}

.cta-card{position:absolute;left:260px;top:190px;width:330px;padding:36px;z-index:1;background:#fff;border-radius:var(--radius);}
.cta-card h2{font-size:24px;margin-bottom:24px;line-height:1.2;}
.cta-card .primary{width:100%;padding:10px 0;margin-bottom:20px;}
.cta-card .link{display:block;text-align:center;font-size:14px;color:var(--teal);text-decoration:none;}

/* modal */
.modal{position:absolute;top:190px;right:350px;width:260px;padding:28px;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:3;display:none;}
.modal.visible{display:block;}
.modal h3{font-size:26px;font-weight:700;text-align:center;margin-bottom:30px;}
.modal label{display:block;font-size:15px;margin-bottom:26px;color:#444;}
.modal input{
    width:100%;
    padding:12px 0 10px;
    border:none;
    border-bottom:1px solid #c0c0c0;
    border-radius:0;
    background:transparent;
    margin-top:6px;
    font-size:15px;
}
.modal input:focus{
    outline:none;
    border-bottom-color:rgba(var(--primary-default),1);
}
.togglePwd{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:14px;}
.modal .full{
    width:100%;
    padding:10px 0;
    margin:18px 0;
    height:44px;
    font-size:16px;
    border-radius:4px;
}
.modal .link{display:block;text-align:center;font-size:13px;color:var(--teal);text-decoration:none;margin-top:4px;}
.modal-close{
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;
    color:rgba(var(--primary-default),1);
    background:#fff;border:1px solid rgba(0,0,0,.12);
    cursor:pointer;
}

/* helpers */
button{border:none;cursor:pointer;}

/* ───────── Overlay globale ───────── */
.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
    display:none;
    z-index:2;       /* sotto al modal, sopra a tutto il resto */
}
.overlay.visible{display:block;}

/* ───────── Header a due righe ───────── */
.topbar{flex-wrap:wrap;}              /* consente la seconda riga di categorie */
.menu{
    flex:1 1 100%;
    justify-content:center;
    gap:24px;
    margin:8px 0 10px;
    font-size:15px;
}

/* ───────── Search bar più fedele ───────── */
.search{
    position:relative;
    flex:1 1 420px;
    max-width:650px;
    margin:0 32px;
}
.search::after{            /* icona lente */
    content:"\1F50D";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#666;
    pointer-events:none;
}
.search input{padding:8px 40px 8px 12px;}  /* spazio per la lente */

/* ───────── CTA card (dimensioni e posizione) ───────── */
.cta-card{left:260px;top:160px;width:300px;}

/* ───────── Modal centrato ───────── */
.modal{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:420px;
    padding:48px;
    z-index:3;           /* sopra all’overlay */
}
.modal label{position:relative;}      /* per posizionare l’occhio */
.togglePwd{right:16px;}               /* leggero spostamento icona */

/* Evita selezione indesiderata dell’icona */
.togglePwd{
    user-select:none;
}

/* ───────── Rimuove il velo interno all’hero (ora sostituito dall’overlay globale) ───────── */
.hero::before{content:none;}

/* ───────── Pulsante “Continua” (verde) ───────── */
.modal .primary{
    background: rgba(var(--primary-default),1);
    color:#fff;
    font-weight:600;
}
.modal .primary:hover{
    background: rgba(var(--primary-default),.85); /* tono leggermente più scuro */
}

/* ───────── Correzione finale TOP BAR & SEARCH ───────── */
.topbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:16px;
    padding:12px 24px;                 /* margini come screenshot */
}
.logo{margin-right:24px;}

.search{
    flex:1 1 560px !important;         /* larghezza reale barra */
    max-width:760px !important;
    margin-right:24px;
}

.menu{
    flex:1 1 100% !important;          /* seconda riga a piena larghezza */
    justify-content:center !important; /* centrata */
    gap:28px;
    margin:10px 0 12px;
    font-size:15px;
}

/* ───────── Pulsanti nell’header ───────── */
.actions{
    display:flex;
    gap:12px;
}

/* ───────── Forza CTA card (dimensione/posizione) ───────── */
.cta-card{
    left:280px !important;
    top:200px !important;
    width:340px !important;
}

/* ───────── Overlay sempre con blur corretta ───────── */
.overlay{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);         /* blur più marcato come screenshot */
}

/* ───────── Ordine ed allineamento header ───────── */
.logo   {order:0;}
.search {order:1;}
.actions{order:2;margin-left:auto;}
.menu   {order:3;flex:1 1 100% !important;}

/* ───────── Rifinitura search & topbar ───────── */
.search{margin-left:32px;margin-right:24px !important;}
.topbar{padding:12px 32px !important;}

/* ───────── Nuovi pulsanti “?” e lingua ───────── */
.actions .icon{
    width:34px;height:34px;
    padding:0;
    border:1px solid var(--teal);
    background:#fff;
    color:var(--teal);
    border-radius:var(--radius);
    font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
.actions .lang{
    padding:6px 12px;
    border:1px solid transparent;
    background:none;
    color:#333;
    cursor:pointer;
}

/* ───────── Blur overlay più marcato ───────── */
.overlay{backdrop-filter:blur(6px) !important;}