/* ==========================================================
   PET WELLNESS 360
   Newsletter + Footer
   ========================================================== */


/* ==========================================================
   VISUALLY HIDDEN
   ========================================================== */

.pw-visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


/* ==========================================================
   NEWSLETTER
   ========================================================== */

.pw-newsletter{

    background:var(--pw-blue);

    color:var(--pw-white);

}


.pw-newsletter__container{

    width:min(
        calc(100% - 32px),
        var(--pw-container)
    );

    min-height:92px;

    margin-inline:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1.5rem;

}


/* ==========================================================
   NEWSLETTER CONTENT
   ========================================================== */

.pw-newsletter__content{

    display:flex;

    align-items:center;

    gap:.85rem;

    min-width:0;

}


.pw-newsletter__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    flex:0 0 50px;

    border-radius:var(--pw-radius-round);

    background:var(--pw-green);

    color:var(--pw-white);

}


.pw-newsletter__icon svg{

    width:30px;

    height:30px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.pw-newsletter__text{

    min-width:0;

}


.pw-newsletter__title{

    margin:0;

    color:var(--pw-white);

    font-family:var(--pw-font-heading);

    font-size:1rem;

    font-weight:700;

    line-height:1.25;

}


.pw-newsletter__description{

    margin:.12rem 0 0;

    color:rgba(255,255,255,.9);

    font-family:var(--pw-font-body);

    font-size:.8rem;

    line-height:1.35;

}


/* ==========================================================
   NEWSLETTER FORM
   ========================================================== */

.pw-newsletter__form{

    display:flex;

    align-items:center;

    gap:.5rem;

    flex:0 0 auto;

}


.pw-newsletter__input{

    width:min(300px,30vw);

    min-height:44px;

    padding:.65rem .95rem;

    border:0;

    border-radius:var(--pw-radius-round);

    background:var(--pw-white);

    color:var(--pw-navy);

    font-family:var(--pw-font-body);

    font-size:.77rem;

    outline:none;

}


.pw-newsletter__input::placeholder{

    color:#8A94A3;

}


.pw-newsletter__input:focus{

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.28);

}


.pw-newsletter__button{

    min-height:44px;

    padding:.65rem 1.15rem;

    border:0;

    border-radius:var(--pw-radius-round);

    background:var(--pw-green);

    color:var(--pw-white);

    font-family:var(--pw-font-heading);

    font-size:.74rem;

    font-weight:700;

    line-height:1;

    cursor:pointer;

    transition:
        transform var(--pw-transition-fast),
        background-color var(--pw-transition-fast),
        box-shadow var(--pw-transition-fast);

}


.pw-newsletter__button:hover,
.pw-newsletter__button:focus-visible{

    background:var(--pw-secondary-dark);

    color:var(--pw-white);

    transform:translateY(-1px);

    box-shadow:var(--pw-shadow-sm);

}


/* ==========================================================
   FOOTER
   ========================================================== */

.pw-footer{

    background:var(--pw-navy);

    color:var(--pw-white);

}


/* ==========================================================
   MAIN FOOTER CONTAINER
   ========================================================== */

.pw-footer__container{

    width:min(
        calc(100% - 32px),
        1140px
    );

    margin-inline:auto;

    padding:
        2.65rem
        0
        2rem;

    display:grid;

    grid-template-columns:
        minmax(185px,1.25fr)
        minmax(135px,.9fr)
        minmax(145px,.95fr)
        minmax(135px,.9fr)
        minmax(175px,1fr);

    column-gap:1rem;

}


/* ==========================================================
   BRAND
   ========================================================== */

.pw-footer__brand{

    min-width:0;

    padding-right:.35rem;

}


.pw-footer__logo{

    display:inline-flex;

    align-items:center;

    margin-bottom:.95rem;

}


.pw-footer__logo img{

    display:block;

    width:125px;

    height:auto;

}


.pw-footer__description{

    max-width:195px;

    margin:0;

    color:rgba(255,255,255,.78);

    font-family:var(--pw-font-body);

    font-size:.76rem;

    line-height:1.55;

}


/* ==========================================================
   COLUMNS
   ========================================================== */

.pw-footer__column{

    min-width:0;

    padding-left:.9rem;

    border-left:
        1px solid
        rgba(255,255,255,.12);

}


.pw-footer__title{

    margin:0 0 .75rem;

    color:var(--pw-white);

    font-family:var(--pw-font-heading);

    font-size:.77rem;

    font-weight:700;

    line-height:1.3;

}


.pw-footer__list{

    margin:0;

    padding:0;

    list-style:none;

}


.pw-footer__list li{

    margin:0;

    padding:0;

}


.pw-footer__list a{

    display:inline-block;

    padding:.18rem 0;

    color:rgba(255,255,255,.72);

    font-family:var(--pw-font-body);

    font-size:.71rem;

    line-height:1.35;

    text-decoration:none;

    transition:
        color var(--pw-transition-fast),
        transform var(--pw-transition-fast);

}


.pw-footer__list a:hover,
.pw-footer__list a:focus-visible{

    color:var(--pw-white);

    transform:translateX(2px);

}


/* ==========================================================
   CONTACT
   ========================================================== */

.pw-footer__column--contact{

    padding-left:1rem;

}


.pw-footer__contact{

    display:flex;

    align-items:flex-start;

    gap:.5rem;

    margin-bottom:.5rem;

    color:rgba(255,255,255,.75);

    font-family:var(--pw-font-body);

    font-size:.69rem;

    line-height:1.4;

    text-decoration:none;

}


a.pw-footer__contact:hover,
a.pw-footer__contact:focus-visible{

    color:var(--pw-white);

}


.pw-footer__contact-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:15px;

    height:15px;

    flex:0 0 15px;

    margin-top:.05rem;

    color:var(--pw-white);

}


.pw-footer__contact-icon svg{

    width:100%;

    height:100%;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ==========================================================
   SOCIAL
   ========================================================== */

.pw-footer__social{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:.4rem;

    margin-top:.75rem;

}


.pw-footer__social-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    padding:.2rem;

    border-radius:var(--pw-radius-round);

    background:rgba(255,255,255,.08);

    color:var(--pw-white);

    font-family:var(--pw-font-heading);

    font-size:.54rem;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    transition:
        background-color var(--pw-transition-fast),
        transform var(--pw-transition-fast);

}


.pw-footer__social-link:hover,
.pw-footer__social-link:focus-visible{

    background:var(--pw-green);

    color:var(--pw-white);

    transform:translateY(-1px);

}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

.pw-footer__bottom{

    border-top:
        1px solid
        rgba(255,255,255,.10);

}


.pw-footer__bottom-container{

    width:min(
        calc(100% - 32px),
        var(--pw-container)
    );

    margin-inline:auto;

    padding:
        .85rem
        0;

}


.pw-footer__copyright{

    margin:0;

    color:rgba(255,255,255,.58);

    font-family:var(--pw-font-body);

    font-size:.67rem;

    line-height:1.45;

}


/* ==========================================================
   LARGE TABLET / SMALL DESKTOP
   1100px - 901px
   ========================================================== */

@media (max-width:1100px) and (min-width:901px){

    .pw-footer__container{

        width:min(
            calc(100% - 40px),
            1040px
        );

        padding:
            2.35rem
            0
            1.85rem;

        grid-template-columns:
            1.15fr
            .9fr
            .95fr
            .9fr
            1fr;

        column-gap:.75rem;

    }


    .pw-footer__logo img{

        width:115px;

    }


    .pw-footer__description{

        max-width:175px;

        font-size:.72rem;

    }


    .pw-footer__column{

        padding-left:.7rem;

    }


    .pw-footer__column--contact{

        padding-left:.75rem;

    }


    .pw-footer__title{

        font-size:.73rem;

        margin-bottom:.65rem;

    }


    .pw-footer__list a{

        font-size:.67rem;

        padding:.15rem 0;

    }


    .pw-footer__contact{

        font-size:.65rem;

    }


    .pw-footer__social{

        margin-top:.65rem;

    }


    .pw-newsletter__container{

        gap:1rem;

    }


    .pw-newsletter__input{

        width:min(270px,28vw);

    }

}


/* ==========================================================
   TABLET
   900px - 701px
   ========================================================== */

@media (max-width:900px) and (min-width:701px){

    .pw-footer__container{

        width:min(
            calc(100% - 40px),
            760px
        );

        padding:
            2.2rem
            0
            1.7rem;

        grid-template-columns:
            1.2fr
            1fr
            1fr;

        gap:0;

    }


    .pw-footer__brand{

        grid-column:1 / -1;

        display:grid;

        grid-template-columns:
            150px
            1fr;

        column-gap:1.5rem;

        align-items:center;

        padding:
            0
            0
            1.25rem;

        margin-bottom:1.25rem;

        border-bottom:
            1px solid
            rgba(255,255,255,.10);

    }


    .pw-footer__logo{

        margin-bottom:0;

    }


    .pw-footer__logo img{

        width:120px;

    }


    .pw-footer__description{

        max-width:300px;

        font-size:.73rem;

    }


    .pw-footer__column{

        padding-left:.8rem;

    }


    .pw-footer__column--contact{

        padding-left:.8rem;

    }


    .pw-footer__title{

        margin-bottom:.65rem;

        font-size:.74rem;

    }


    .pw-footer__list a{

        padding:.16rem 0;

        font-size:.68rem;

    }


    .pw-footer__contact{

        font-size:.66rem;

    }


    .pw-newsletter__container{

        min-height:88px;

        gap:1rem;

    }


    .pw-newsletter__content{

        gap:.7rem;

    }


    .pw-newsletter__icon{

        width:46px;

        height:46px;

        flex-basis:46px;

    }


    .pw-newsletter__input{

        width:220px;

    }


    .pw-newsletter__button{

        padding-inline:1rem;

    }

}


/* ==========================================================
   MOBILE
   700px AND BELOW
   ========================================================== */

@media (max-width:700px){

    .pw-newsletter__container{

        min-height:auto;

        padding:
            1.25rem
            0;

        flex-direction:column;

        align-items:stretch;

        gap:.85rem;

    }


    .pw-newsletter__content{

        align-items:center;

        gap:.7rem;

    }


    .pw-newsletter__icon{

        width:46px;

        height:46px;

        flex-basis:46px;

    }


    .pw-newsletter__title{

        font-size:.92rem;

    }


    .pw-newsletter__description{

        font-size:.74rem;

    }


    .pw-newsletter__form{

        width:100%;

        max-width:none;

    }


    .pw-newsletter__input{

        min-width:0;

        width:100%;

        flex:1 1 auto;

    }


    .pw-newsletter__button{

        flex:0 0 auto;

    }


    .pw-footer__container{

        width:
            calc(100% - 28px);

        padding:
            1.85rem
            0
            1.45rem;

        grid-template-columns:1fr;

        gap:0;

    }


    .pw-footer__brand{

        grid-column:auto;

        padding:
            0
            0
            1.1rem;

        margin-bottom:0;

    }


    .pw-footer__logo{

        margin-bottom:.75rem;

    }


    .pw-footer__logo img{

        width:115px;

    }


    .pw-footer__description{

        max-width:230px;

        font-size:.72rem;

        line-height:1.5;

    }


    .pw-footer__column{

        padding:
            .9rem
            0
            0;

        margin-top:.9rem;

        border-left:0;

        border-top:
            1px solid
            rgba(255,255,255,.10);

    }


    .pw-footer__column--contact{

        padding-left:0;

    }


    .pw-footer__title{

        margin-bottom:.55rem;

        font-size:.74rem;

    }


    .pw-footer__list a{

        padding:.15rem 0;

        font-size:.68rem;

    }


    .pw-footer__contact{

        margin-bottom:.45rem;

        font-size:.67rem;

    }


    .pw-footer__social{

        margin-top:.65rem;

    }


    .pw-footer__bottom-container{

        padding:
            .75rem
            0;

    }


    .pw-footer__copyright{

        font-size:.63rem;

    }

}


/* ==========================================================
   SMALL MOBILE
   480px AND BELOW
   ========================================================== */

@media (max-width:480px){

    .pw-newsletter__container{

        width:
            calc(100% - 24px);

    }


    .pw-newsletter__content{

        align-items:flex-start;

    }


    .pw-newsletter__icon{

        width:44px;

        height:44px;

        flex-basis:44px;

    }


    .pw-newsletter__title{

        font-size:.88rem;

    }


    .pw-newsletter__description{

        font-size:.72rem;

    }


    .pw-newsletter__form{

        flex-direction:column;

        align-items:stretch;

        gap:.45rem;

    }


    .pw-newsletter__input,
    .pw-newsletter__button{

        width:100%;

    }


    .pw-footer__container{

        width:
            calc(100% - 24px);

        padding:
            1.6rem
            0
            1.25rem;

    }


    .pw-footer__brand{

        padding-bottom:.9rem;

    }


    .pw-footer__logo{

        margin-bottom:.6rem;

    }


    .pw-footer__logo img{

        width:105px;

    }


    .pw-footer__description{

        max-width:210px;

        font-size:.69rem;

    }


    .pw-footer__column{

        padding-top:.75rem;

        margin-top:.75rem;

    }


    .pw-footer__title{

        font-size:.72rem;

        margin-bottom:.45rem;

    }


    .pw-footer__list a{

        font-size:.65rem;

        padding:.13rem 0;

    }


    .pw-footer__contact{

        font-size:.64rem;

    }


    .pw-footer__social-link{

        width:27px;

        height:27px;

    }


    .pw-footer__bottom-container{

        width:
            calc(100% - 24px);

        padding:
            .7rem
            0;

    }


    .pw-footer__copyright{

        font-size:.6rem;

    }

}

/* ==========================================================
   WHATSAPP FLOTANTE
   ========================================================== */

.pw-whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--pw-radius-round);

    background:#25D366;

    color:#ffffff;

    text-decoration:none;

    z-index:1000;

    box-shadow:
            0 10px 30px
            rgba(0,0,0,.25);

    transition:
            transform var(--pw-transition-fast),
            box-shadow var(--pw-transition-fast);

}

.pw-whatsapp-float__icon{

    display:block;

    width:36px;

    height:36px;

    min-width:36px;

    min-height:36px;

    max-width:36px;

    max-height:36px;

    fill:#ffffff;

    flex:0 0 36px;

}

.pw-whatsapp-float:hover{

    color:#ffffff;

    text-decoration:none;

    transform:scale(1.1);

}

.pw-whatsapp-float:focus-visible{

    outline:
            3px solid
            rgba(255,255,255,.85);

    outline-offset:4px;

}

@media (max-width:700px){

    .pw-whatsapp-float{

        right:18px;

        bottom:18px;

        width:58px;

        height:58px;

    }

    .pw-whatsapp-float__icon{

        width:32px;

        height:32px;

        min-width:32px;

        min-height:32px;

        max-width:32px;

        max-height:32px;

        flex-basis:32px;

    }

}
