/* --- Personalizzazione Pagina Registrazione Dominio --- */

/* 1. Cambia lo sfondo della sezione hero in bianco */
.domain__register__hero {
    background-color: #ffffff;
    background-image: none; /* Rimuove l'immagine di sfondo a gradiente */
}

/* 2. Cambia i colori del testo nella sezione hero in #181818 */
/* Usiamo le variabili CSS del tema per sovrascrivere i colori in modo sicuro */
.domain__register__hero .dark-mode-texts {
    --color-h: #181818;           /* Colore per titoli (h1, h6)  */
    --color-texts: #181818;       /* Colore testo generico */
    --color-texts-opacity: #181818; /* Colore per paragrafi (p)  */
    --color-h-sub: #181818;         /* Colore per testo secondario (es. "Estensioni del momento:") [cite: 4] */
}

/* --- 1. Dimensione Font Personalizzata Sezione Hero --- */

/* Titolo principale (h1) */
.domain__register__hero .banner__content h1.coodiv-text-4 {
    font-size: 36px;     /* Modifica questo valore (es. 42px, 2.5rem, ecc.) */
    font-weight: 700;  /* Puoi anche cambiare il grassetto (es. 700, 900) */
}

/* Paragrafo (p) */
.domain__register__hero .banner__content p.coodiv-text-8 {
    font-size: 21px;     /* Modifica questo valore */
}

/* Testo secondario in basso (h6) */
.domain__register__hero .banner__content h6.coodiv-text-8 {
    font-size: 21px;     /* Modifica questo valore */
}

/* 3. Aggiunge un bordo di 1px #181818 al box di ricerca */
/* .domain__register__form { */
/*     border: 1px solid #181818; */
/* } */
/*  --- 2. Stili Personalizzati Barra di Ricerca Dominio --- */

/* Contenitore principale della barra (quello col bordo che abbiamo aggiunto) */
.domain__register__form {
    /* Sfondo del box bianco */
    background-color: #FFFFFF;

    /* Aggiungi un'ombra esterna */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

    /* Arrotonda gli angoli */
    border-radius: 12px;
}

/* Il campo di testo dove l'utente scrive */
input.inputdomainsearch {
    /* Colore del testo che l'utente digita */
    color: #181818;

    /* Grandezza del testo digitato */
    font-size: 18px;

    /* Sfondo del solo campo di input */
    background-color: #ffffff;

    /* Bordo (usa !important per sovrascrivere lo stile del tema) */
    border-right: 1px solid #eeeeee !important;
}

/* Colore del testo placeholder (es. "Trova il tuo dominio") */
input.inputdomainsearch::placeholder {
    color: #AAAAAA;
    font-style: italic;
}

/* Il pulsante di ricerca "Cerca" */
button#btnCheckAvailability {
    /* Colore sfondo pulsante */
    background-color: #FF6A78;

    /* Colore testo pulsante */
    color: #ffffff;

    /* Rimuove il bordo */
    border: none;

    /* Grandezza testo pulsante */
    font-size: 14px;
    font-weight: bold;

    /* Arrotonda gli angoli (solo a destra) */
    border-radius: 8px;
}

/* Stile del pulsante quando ci passi sopra col mouse */
button#btnCheckAvailability:hover {
    background-color: #E04857;
/* Colore testo pulsante */
    color: #ffffff;
}

/* --- 3. Stili Personalizzati Barra "Estensioni del momento" --- */

/* L'intera barra (contenitore) */
.domain__register__form .domain__register__form__spotlighttlds {
    background-color: #FFFFFF;   /* [app.css] Cambia lo sfondo dell'intera barra */
/*     border-top: 1px solid #DDDDDD;  [app.css] Cambia il bordo superiore */
    padding: 15px 25px;            /* [app.css] Aumenta lo spazio interno (padding) */
}

/* Il testo "Estensioni del momento:" */
.domain__register__form .domain__register__form__spotlighttlds__title {
    color: #555555;     /* [app.css] Colore del testo */
    font-size: 13px;   /* Grandezza del carattere */
    font-weight: 600;  /* Grassetto */
}

/* Ogni singola estensione (es. ".com") */
.domain__register__form .domain__register__form__spotlighttlds__item .tld {
    background-color: #FFFFFF;     /* [app.css] Sfondo del singolo box TLD */
    color: #181818;                /* Colore del testo del TLD */
    font-size: 14px;                /* [app.css] Grandezza del carattere del TLD */
    font-weight: 500;               /* [app.css] Grassetto del TLD */
    border: 1px solid #CCCCCC;      /* [app.css] Colore del bordo */
    padding: 2px 12px;              /* [app.css] Spazio interno (padding) */
}

/* Stile quando passi il mouse sopra un'estensione */
.domain__register__form .domain__register__form__spotlighttlds__item:hover .tld {
    background-color: #FF6A78; /* Sfondo al passaggio del mouse */
    /* color: #FFFFFF;            Testo al passaggio del mouse */
    border-color: #181818;     /* Bordo al passaggio del mouse */
}

/* Badge (es. "SALE", "HOT") */
.domain__register__form .domain__register__form__spotlighttlds__item .tld .badge {
    background-color: #ff0000; /* [app.css] Sfondo del badge (es. rosso) */
    color: #ffffff;            /* [app.css] Testo del badge (es. bianco) */
    font-size: 9px;             /* [app.css] Grandezza carattere badge */
    font-weight: 700;
}

/* Esempio per personalizzare un badge specifico (es. 'SALE') */
.domain__register__form .domain__register__form__spotlighttlds__item .tld .badge.sale {
    background-color: #ff9900; /* [app.css] Colore personalizzato per il badge "SALE" */
    color: #000000;            /* [app.css] Testo personalizzato per il badge "SALE" */
}