/**
 * register.css — Stili per la pagina di registrazione
 * Da copiare in: assets/css/register.css
 */

/* ── Accent dorato ── */
:root {
    --rg-gold:  #c8a96e;
    --rg-gold2: #e8c98e;
}

/* ── Ticker star ── */
.rg-star { color: var(--rg-gold) !important; }

/* ── Layout principale ── */
.rg-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 30px);
}

/* ══════════════════════════════════════
   PANNELLO SINISTRO — dark + vinile
══════════════════════════════════════ */
.rg-left {
    background: #080808;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem;
}

/* Vinile animato */
.rg-vinyl {
    position: absolute;
    top: -80px;
    right: -130px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: conic-gradient(
        #111 0deg,   #181818 18deg, #0c0c0c 36deg,
        #181818 54deg, #111 72deg,  #181818 90deg,
        #0c0c0c 108deg, #111 126deg, #181818 144deg,
        #0c0c0c 162deg, #111 180deg, #181818 198deg,
        #0c0c0c 216deg, #181818 234deg, #111 252deg,
        #0c0c0c 270deg, #181818 288deg, #111 306deg,
        #181818 324deg, #0c0c0c 342deg, #111 360deg
    );
    animation: rgSpin 20s linear infinite;
    opacity: 0.5;
}
.rg-vinyl::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, #252525 30%, #0d0d0d 100%);
    box-shadow: 0 0 0 3px #1a1a1a, 0 0 0 6px #0d0d0d;
}
@keyframes rgSpin { to { transform: rotate(360deg); } }

/* Rings decorativi */
.rg-groove {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.03);
    animation: rgSpin 20s linear infinite;
    pointer-events: none;
}
.rg-groove--1 {
    width: 360px; height: 360px;
    top: -30px; right: -60px;
    border-color: rgba(255,255,255,0.045);
    animation-duration: 28s;
}
.rg-groove--2 {
    width: 640px; height: 640px;
    top: -170px; right: -250px;
    animation-duration: 36s;
    animation-direction: reverse;
}

/* Glow ambientale */
.rg-glow {
    position: absolute;
    bottom: 20px;
    left: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,169,110,0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Contenuto del pannello sinistro */
.rg-left-content {
    position: relative;
    z-index: 2;
}

/* Logo */
.rg-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 4.5rem;
    text-decoration: none;
}
.rg-logo-mark {
    width: 36px; height: 36px;
    background: var(--rg-gold);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rg-logo-mark svg {
    width: 18px; height: 18px;
    stroke: #080808;
}
.rg-logo-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f5f4f0;
    letter-spacing: -0.02em;
}

/* Headline */
.rg-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #f5f4f0;
    margin-bottom: 1.4rem;
}
.rg-headline em {
    font-style: italic;
    color: var(--rg-gold);
}

/* Descrizione */
.rg-desc {
    font-size: 0.9rem;
    line-height: 1.78;
    color: #555;
    max-width: 340px;
    margin-bottom: 2.8rem;
}

/* Perks */
.rg-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 0;
}
.rg-perk {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.83rem;
    color: #777;
}
.rg-perk-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(200,169,110,0.1);
    border: 1px solid rgba(200,169,110,0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rg-perk-icon svg {
    width: 11px; height: 11px;
    stroke: var(--rg-gold);
    fill: none;
    stroke-width: 2.5;
}

/* Citazione */
.rg-quote {
    margin-top: 3rem;
    padding-top: 1.8rem;
    border-top: 1px solid #1c1c1c;
    font-size: 0.76rem;
    color: #333;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════
   PANNELLO DESTRO — form
══════════════════════════════════════ */
.rg-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3rem;
    background: #f5f4f0;
    overflow-y: auto;
}

.rg-form-box {
    width: 100%;
    max-width: 420px;
    animation: rgFadeUp 0.55s ease both;
}
@keyframes rgFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tag */
.rg-form-tag {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rg-gold);
    margin-bottom: 0.75rem;
}

/* Titolo form */
.rg-form-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #080808;
    margin-bottom: 0.4rem;
}

/* Sottotitolo */
.rg-form-sub {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 2.2rem;
}
.rg-form-sub a {
    color: #080808;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #080808;
    transition: border-color 0.2s;
}
.rg-form-sub a:hover { border-color: transparent; }

/* Errore */
.rg-error {
    margin-bottom: 1.4rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.84rem;
}

/* Griglia 2 colonne per nome + username */
.rg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0; /* form-group ha già il suo margin */
}

/* Override bottone submit per questa pagina */
.rg-btn-submit {
    letter-spacing: 0.02em;
    border-radius: 8px !important;
    position: relative;
    overflow: hidden;
}
.rg-btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.rg-btn-submit:hover::after { transform: translateX(100%); }

/* Fine print */
.rg-fine-print {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.74rem;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.rg-fine-print::before,
.rg-fine-print::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e0db;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .rg-wrap { grid-template-columns: 1fr; }
    .rg-left { display: none; }
    .rg-right { padding: 3rem 1.5rem; min-height: calc(100vh - 30px); }
    .rg-row { grid-template-columns: 1fr; }
}