/* ==========================================================
   NEWSLETTER
   ========================================================== */

.newsletter {
    width: 100%;
}

/* ==========================================================
   HEADER
   ========================================================== */

.newsletter-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.newsletter-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #edf5ff;
}

.newsletter-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: #2878d4;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.newsletter-title h3 {
    margin: 0 0 5px;

    color: var(--primary-title);
    font-size: 1.15rem;
    font-weight: 600;
}

.newsletter-title p {
    margin: 0;

    color: var(--primary-text);
    line-height: 1.5;
}

/* ==========================================================
   EMAIL
   ========================================================== */

.newsletter-field {
    margin-bottom: 16px;
}

.newsletter-email {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #ccc;
    border-radius: 7px;

    background: #fff;

    color:  var(--primary-text);
    font-size: 1rem;
    font-family: inherit;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.newsletter-email:focus {
    outline: none;

    border-color: #2878d4;

    box-shadow:
        0 0 0 3px rgba(40, 120, 212, 0.12);
}

/* ==========================================================
   CONSENSO
   ========================================================== */

.newsletter-consent {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color:  var(--primary-text);

    font-size: 0.9rem;
    line-height: 1.5;

    cursor: pointer;
}

.newsletter-consent-check {
    flex: 0 0 auto;

    margin-top: 3px;

    width: 16px;
    height: 16px;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .newsletter-header {
        align-items: flex-start;
        gap: 14px;
    }

    .newsletter-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .newsletter-icon svg {
        width: 26px;
        height: 26px;
    }

    .newsletter-title h3 {
        font-size: 1.05rem;
    }
}