/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/* ==========================
   ROOT VARIABLES
========================== */

:root {

    /* COLORS */
    --primary-color: #5B5AF7;
    --primary-hover: #4c4bea;

    --secondary-color: #7B61FF;

    --success-color: #17C964;
    --warning-color: #F5A524;
    --danger-color: #F31260;

    --text-color: #111827;
    --text-light: #6B7280;

    --white: #FFFFFF;

    --background-color: #F5F7FB;
    --card-background: #FFFFFF;

    --border-color: #E5E7EB;

    --sidebar-bg: #111827;

    /* SHADOWS */
    --shadow-sm:
        0 2px 10px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 30px rgba(0,0,0,.08);

    --shadow-lg:
        0 15px 45px rgba(0,0,0,.10);

    /* BORDER RADIUS */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* TRANSITION */
    --transition: all .3s ease;

}


.wp {
    display: flex;
    border-radius: 10px;
    border: solid 1px;
    padding: 10px;
    font-size: 10pt;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
}

.dot-wp {
    width: 15px;
    display: flex;
    animation: verde 5s ease 0s infinite normal none;
    height: 15px;
    border-radius: 100%;
}



.wp:has(.green) .bi-whatsapp, .wp:has(.green) #wpText{
    color: #17C964;
}

.wp:has(.red) .bi-whatsapp,.wp:has(.red) #wpText {
    color: #f31260;
}


.wp:has(.green) {
    border-color: #17C964;
}

.wp:has(.red) {
    border-color: #f31260;
}


.green {
    background-color: #17C964;
}

.red {
    background-color: #d4161d;
    
}

@keyframes verde {
	0%  {
              transform: none;
    }
	50% {
        transform: scale(0.7);

    }
	100% {
        transform: scale(1);
	}

	25%,
	75% {
            border: none;
              transform: none;
	}
}


/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', sans-serif;
    background:var(--background-color);
    color:var(--text-color);
    font-size:15px;
    overflow-x:hidden;
}


/* ==========================
   TYPOGRAPHY
========================== */

h1,h2,h3,h4,h5,h6{
    font-weight:700;
    color:var(--text-color);
}

p{
    color:var(--text-light);
    line-height:1.7;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}


/* ==========================
   FORM ELEMENTS
========================== */

input,
select,
textarea,
button{
    font-family:'Inter', sans-serif;
}

input,
select,
textarea{
    width:100%;
    border:1px solid var(--border-color);
    background:#fff;
    border-radius:14px;
    padding:14px 18px;
    outline:none;
    transition:var(--transition);
    font-size:14px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 4px rgba(91,90,247,.15);
}


/* ==========================
   BUTTONS
========================== */

.btn{
    border:none;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.btn-primary{
    background:var(--primary-color);
    color:#fff;
    padding:15px 22px;
    border-radius:14px;
    font-weight:600;
}

.btn-primary:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}


/* ==========================
   CONTAINER
========================== */

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}


/* ==========================
   CARD
========================== */

.card{
    background:var(--card-background);
    border-radius:22px;
    box-shadow:var(--shadow-sm);
}


/* ==========================
   CUSTOM SCROLLBAR
========================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{
    background:var(--primary-color);
    border-radius:20px;
}