/* =====================================================
   COMPONENTS CSS
===================================================== */

/* ==========================
   BADGE
========================== */

.badge{

    display:inline-block;

    padding:6px 12px;

    font-size:12px;

    font-weight:600;

    border-radius:50px;

    background:rgba(37,99,235,.1);

    color:var(--primary);

}

/* ==========================
   SECTION SPACING HELPERS
========================== */

.mt-1{ margin-top:10px; }
.mt-2{ margin-top:20px; }
.mt-3{ margin-top:30px; }
.mt-4{ margin-top:40px; }

.mb-1{ margin-bottom:10px; }
.mb-2{ margin-bottom:20px; }
.mb-3{ margin-bottom:30px; }
.mb-4{ margin-bottom:40px; }

/* ==========================
   TEXT UTILITIES
========================== */

.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }

.text-primary{ color:var(--primary); }
.text-gray{ color:var(--gray); }
.text-white{ color:#fff; }

/* ==========================
   SHADOW UTILITIES
========================== */

.shadow-sm{ box-shadow:0 5px 15px rgba(0,0,0,.05); }
.shadow-md{ box-shadow:0 10px 25px rgba(0,0,0,.1); }
.shadow-lg{ box-shadow:0 20px 40px rgba(0,0,0,.15); }

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

.card-light{

    background:#fff;

    border-radius:var(--radius);

    padding:20px;

}

.card-hover{

    transition:.3s;

}

.card-hover:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

/* ==========================
   BUTTON VARIANTS
========================== */

.btn-sm{

    padding:8px 18px;

    font-size:14px;

}

.btn-lg{

    padding:18px 40px;

    font-size:18px;

}

.btn-full{

    width:100%;

}

/* ==========================
   ALERT BOX
========================== */

.alert{

    padding:15px 20px;

    border-radius:var(--radius);

    margin-bottom:20px;

    font-size:14px;

}

.alert-success{

    background:#ecfdf5;

    color:#16a34a;

    border:1px solid #bbf7d0;

}

.alert-danger{

    background:#fef2f2;

    color:#dc2626;

    border:1px solid #fecaca;

}

.alert-warning{

    background:#fffbeb;

    color:#d97706;

    border:1px solid #fde68a;

}

/* ==========================
   DIVIDER
========================== */

.divider{

    height:1px;

    background:var(--border);

    margin:30px 0;

}

/* ==========================
   ICON BOX
========================== */

.icon-box{

    width:60px;

    height:60px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

}

/* ==========================
   TAGS
========================== */

.tag{

    display:inline-block;

    padding:5px 10px;

    font-size:12px;

    background:#f1f5f9;

    border-radius:50px;

    margin-right:5px;

}

/* ==========================
   INPUTS
========================== */

.input{

    width:100%;

    padding:12px 15px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    outline:none;

    transition:.3s;

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.1);

}

/* ==========================
   LOADING DOTS
========================== */

.dots{

    display:inline-flex;

    gap:5px;

}

.dots span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary);

    animation:blink 1.2s infinite;

}

.dots span:nth-child(2){

    animation-delay:.2s;

}

.dots span:nth-child(3){

    animation-delay:.4s;

}

@keyframes blink{

    0%,100%{ opacity:.2; }

    50%{ opacity:1; }

}