/* HADDO (18/10/2026) — registrazione come quella di Habbo IT, nello stile delle schede del 2026
   (views/auth/register.blade.php). Colonna del modulo a sinistra, a destra "Hai gia' un account?", la sicurezza della
   password e la stanza isometrica di Habbo. Fuori dal build: il tema non si ricompila sul server. */

.hh-rg {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 16px 56px;
}

.hh-rg-titolo {
    margin: 0 0 18px;
    color: #ffffff;
    font: 400 34px/1.2 "Ubuntu Condensed", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.hh-rg-colonne {
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.hh-rg-scheda {
    color: #4b5563;
    line-height: 1.45;
}

/* i blocchi del modulo, come le fasce di Habbo: chiaro, poi il riquadro piu' scuro della password */
.hh-rg-blocco {
    margin: 0 -16px;
    padding: 14px 16px;
}

.hh-rg-blocco:first-child {
    padding-top: 2px;
}

.hh-rg-blocco--scuro {
    display: grid;
    gap: 14px;
    border-top: 1px solid #c9c9bf;
    border-bottom: 1px solid #c9c9bf;
    background: #dcdcd2;
}

.hh-rg-blocco--fine {
    padding-bottom: 0;
    border-top: 1px solid #c9c9bf;
}

.hh-rg-etichetta {
    display: block;
    margin: 0 0 3px;
    color: #2c3440;
    font-size: 14px;
    font-weight: 700;
}

.hh-rg-aiuto {
    margin: 0 0 8px;
    color: #1e7295;
    font-size: 13px;
}

.hh-rg-campo {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #96a2b1;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .06);
    color: #2c3440;
    font: 14px Ubuntu, "Trebuchet MS", Arial, sans-serif;
}

.hh-rg-campo:focus {
    border-color: #1e7295;
    outline: 2px solid rgba(30, 114, 149, .25);
}

.hh-rg-campo--errore {
    border-color: #c0392b;
    background: #fff4f2;
}

.hh-rg-email {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}

.hh-rg-chiocciola {
    color: #1e7295;
    font-size: 18px;
    font-weight: 700;
}

.hh-rg-segreto {
    position: relative;
}

.hh-rg-segreto .hh-rg-campo {
    padding-right: 40px;
}

.hh-rg-occhio {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    color: #1e7295;
    cursor: pointer;
    transform: translateY(-50%);
}

.hh-rg-occhio svg {
    width: 20px;
    height: 20px;
}

/* i menu della data con la freccia (il tema toglie quella del browser) */
select.hh-rg-campo {
    padding-right: 28px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e7295' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
}

.hh-rg-data {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.1fr;
    gap: 8px;
}

.hh-rg-spunta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #2c3440;
    font-size: 14px;
    cursor: pointer;
}

.hh-rg-spunta input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #1e7295;
    appearance: auto;
    -webkit-appearance: checkbox;
}

.hh-rg-scheda a:not(.hh-rg-bottone) {
    color: #1e7295;
    font-weight: 700;
}

.hh-rg-benvenuto {
    margin: 14px 0;
    color: #2c3440;
    font-size: 14px;
}

/* il bottone blu di Habbo: "Fatto! Ora crea il tuo avatar!" */
.hh-rg-fatto {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px 12px;
    border: 2px solid #4fb6ef;
    border-radius: 5px;
    background: linear-gradient(180deg, #2a9ee4 0, #1478c1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(0, 0, 0, .3);
    color: #ffffff;
    font: 700 15px/1.2 Ubuntu, "Trebuchet MS", Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    text-transform: uppercase;
    cursor: pointer;
}

.hh-rg-fatto:hover {
    background: linear-gradient(180deg, #3aaef0 0, #1b86d3 100%);
}

.hh-rg-fatto:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(0, 0, 0, .3);
    transform: translateY(2px);
}

.hh-rg-nota {
    margin: 10px 0 0;
    color: #6a7688;
    font-size: 11px;
}

.hh-rg-errore {
    margin: 6px 0 0;
    color: #c0392b;
    font-size: 13px;
    font-weight: 700;
}

.hh-rg-errore--in-cima {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-left: 4px solid #c0392b;
    background: #fff4f2;
}

/* colonna di destra */
.hh-rg-lato {
    position: relative;
}

.hh-rg-lato .hh-rg-scheda {
    position: relative;
    z-index: 1;
    max-width: 330px;
}

.hh-rg-lato-testo {
    margin: 0 0 10px;
}

.hh-rg-lato-testo + .hh-rg-bottone,
.hh-rg-bottone + .hh-rg-lato-testo {
    margin-top: 12px;
}

.hh-rg-bottone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px;
    border: 2px solid #2c6e12;
    border-radius: 5px;
    background: linear-gradient(180deg, #86d653 0, #4c9f22 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 rgba(0, 0, 0, .35);
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    text-transform: uppercase;
}

.hh-rg-bottone:hover {
    filter: brightness(1.08);
}

.hh-rg-bottone--discord {
    border-color: #3c45a5;
    background: linear-gradient(180deg, #7983f5 0, #5865f2 100%);
}

.hh-rg-discord {
    width: 22px;
    height: 17px;
}

.hh-rg-forza {
    position: relative;
    z-index: 1;
    max-width: 330px;
    margin-top: 14px;
    padding: 10px 14px 12px;
    border: 1px solid #000000;
    border-radius: 6px;
    background: rgba(12, 22, 34, .9);
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.hh-rg-forza p {
    margin: 0 0 6px;
}

.hh-rg-forza-barra {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, .25);
}

.hh-rg-forza-barra span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: #d9534f;
    transition: width .2s;
}

.hh-rg-forza-barra span[data-livello="1"] { background: #f0ad4e; }
.hh-rg-forza-barra span[data-livello="2"] { background: #e8d02e; }
.hh-rg-forza-barra span[data-livello="3"],
.hh-rg-forza-barra span[data-livello="4"] { background: #5cb85c; }

/* la stanza di Habbo, a grandezza naturale. HADDO (27/10/2026): sotto il riquadro del Discord e dentro la sua colonna
   (prima stava dietro, 30 px piu' su e 40 piu' a destra: finiva sotto il Discord e sul bordo del modulo) */
.hh-rg-stanza {
    display: block;
    margin: 18px auto 0;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    pointer-events: none;
}

@media (max-width: 860px) {
    .hh-rg-colonne {
        grid-template-columns: 1fr;
    }

    .hh-rg-lato .hh-rg-scheda,
    .hh-rg-forza {
        max-width: none;
    }

    .hh-rg-stanza {
        display: none;
    }
}

/* HADDO (18/10/2026): il riquadro rosso di Habbo sotto l'email gia' in uso */
.hh-rg-riquadro-errore {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 3px;
    background: #c0174e;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
}

.hh-rg-riquadro-errore[hidden] { display: none; }