/* =========================================
   3. GENERAL UI & BUTTONS
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--color-white);
    border: none;
    box-shadow: 0 10px 20px rgba(10, 37, 64, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 180, 216, 0.4);
    background: var(--accent-gradient);
}

/* Stile base per il bottone Cancel/Outline */
.btn-outline {
    background: transparent;
    /* Sfondo trasparente */
    border: 2px solid var(--color-hot-pink);
    color: var(--color-white);
    /* Testo bianco */
    margin-left: 10px;
    /* Spazio tra i bottoni */
    transition: all 0.3s ease;
}

/* Quando passi sopra col mouse (Hover) */
.btn-outline:hover {
    background: var(--color-hot-pink);
    /* Sfondo diventa rosa */
    color: var(--color-white);
    /* Testo rimane bianco */
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.4);
    /* Effetto glow */
    border-color: var(--color-hot-pink);
}

/* Bottone Login nell'header (se usato) */
.btn-login {
    border: 1px solid var(--color-hot-pink);
    color: var(--color-white);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: .8rem;
    margin-left: 20px;
}

.btn-login:hover {
    background: var(--color-hot-pink);
    color: var(--color-black);
}

.btn-block {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    /* Uniformato */
    border: 1px solid var(--color-hot-pink);
    border-radius: 50px;
    color: var(--color-white);
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 600;
    transition: 0.3s;
    background: transparent;
    cursor: pointer;
}

.btn-block:hover {
    background: var(--color-hot-pink);
    color: var(--color-white);
}

.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}