/* ==========================================================
   BabyChoice Nappies
   BUTTONS CSS
   All website buttons and call-to-action styles
========================================================== */


/* ===============================
   MAIN BUTTON STYLE
================================ */

.btn {

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:14px 30px;

border-radius:999px;

font-family:'Baloo 2', cursive;

font-size:16px;

font-weight:700;

border:none;

cursor:pointer;

transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
color .25s ease;

}



.btn:hover {

transform:translateY(-3px);

}



/* ===============================
   PRIMARY BUTTON
================================ */


.btn-primary {

background:var(--pink-deep);

color:white;

box-shadow:
0 12px 30px rgba(255,143,174,.25);

}



.btn-primary:hover {

background:#ff789d;

box-shadow:
0 18px 35px rgba(255,143,174,.35);

}



/* ===============================
   SECONDARY BUTTON
================================ */


.btn-secondary {

background:white;

color:var(--ink);

border:2px solid var(--pink-deep);

}



.btn-secondary:hover {

background:var(--pink-deep);

color:white;

}



/* ===============================
   WHATSAPP BUTTON
================================ */


.btn-whatsapp {

background:#25D366;

color:white;

box-shadow:
0 12px 25px rgba(37,211,102,.25);

}



.btn-whatsapp:hover {

background:#20bd5a;

box-shadow:
0 18px 35px rgba(37,211,102,.35);

}



/* ===============================
   WHITE BUTTON
   Used on coloured backgrounds
================================ */


.btn-white {

background:white;

color:var(--pink-deep);

}



.btn-white:hover {

background:#fff5f8;

}



/* ===============================
   SMALL BUTTON
================================ */


.btn-sm {

padding:10px 20px;

font-size:14px;

}



/* ===============================
   PRODUCT BUTTON
================================ */


.pc-view {

display:inline-flex;

align-items:center;

justify-content:center;


padding:12px 28px;


border-radius:999px;


background:white;

color:var(--ink);


border:2px solid var(--pink-deep);


font-family:'Baloo 2',cursive;

font-weight:700;


transition:.25s ease;

}



.pc-view:hover {

background:var(--pink-deep);

color:white;

}



/* ===============================
   BUTTON GROUPS
================================ */


.hero-actions {

display:flex;

gap:15px;

flex-wrap:wrap;

align-items:center;

}



@media(max-width:600px){

.hero-actions {

justify-content:center;

}


.btn {

width:100%;

max-width:320px;

}


}