/* =====================================
   KishorSms Final v1.0
   Main Style Sheet
===================================== */


/* Reset */

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


body{

    font-family:
    "Noto Sans Bengali",
    Arial,
    sans-serif;

    background:#f5f7ff;

    color:#222;

}


/* Header */
.header{

    background:linear-gradient(
        135deg,
        #6c63ff,
        #ff4d79
    );

    color:white;

    text-align:center;

    padding:18px 15px 16px;

    border-radius:0 0 28px 28px;

}

    box-shadow:
    0 8px 20px rgba(0,0,0,.15);

}


.header h1{

    font-size:42px;

    font-weight:900;

    margin:2px 0;

    line-height:1.1;

}

.logo{

    width:350px;

    height:350;

    margin-bottom:5px;

}
.header p{
    font-size:15px;
    margin:3px 0 8px;
}


/* Search */

.search-area{

    padding:20px 15px;

}


#searchInput{

    width:100%;

    padding:15px;

    border:none;

    border-radius:15px;

    font-size:16px;

    outline:none;

    box-shadow:
    0 4px 15px rgba(0,0,0,.12);

}



/* Category */

.category-area{

    display:flex;

    gap:10px;

    padding:0 15px 20px;

    overflow-x:auto;

}


.category-area::-webkit-scrollbar{

    display:none;

}


.category-btn{

    border:none;

    padding:10px 18px;

    border-radius:30px;

    background:#6c63ff;

    color:white;

    font-size:14px;

    cursor:pointer;

}


.category-btn.active{

    background:#00b894;

}



/* SMS List */

#smsList,
#adminSMSList{

    padding:15px;

}



/* SMS Card */

.sms-card{

    background:#fff;

    padding:12px 14px;

    margin-bottom:8px;

    border-radius:14px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.3s;

}

.sms-card:hover{

    transform:translateY(-2px);

}

.sms-card h3{

    color:#6c63ff;

    font-size:22px;

    margin-bottom:5px;

}

.sms-card p{

    font-size:17px;

    line-height:1.45;

    margin:4px 0;

}

.sms-card small{

    display:block;

    color:#777;

    margin-bottom:5px;

}



/* Buttons */


button{

    border:none;

    cursor:pointer;

    font-size:15px;

}



.copy-btn,
.admin-box button{

    background:#6c63ff;

    color:white;

    padding:10px 18px;

    border-radius:22px;

    font-size:14px;
}

    margin-top:15px;

}



.copy-btn:hover,
.admin-box button:hover{

    background:#ff4d79;

}



/* Admin & Login Box */


.admin-box{

    background:white;

    width:90%;

    max-width:450px;

    margin:30px auto;

    padding:25px;

    border-radius:25px;

    box-shadow:

    0 8px 20px rgba(0,0,0,.12);

}



.admin-box input,
.admin-box textarea{


    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:15px;

    outline:none;

}



.admin-box textarea{

    height:130px;

    resize:none;

}



/* Footer */


footer{

    text-align:center;

    padding:25px;

    color:#777;

}



/* Mobile */

@media(max-width:600px){


.header h1{

    font-size:36px;

}


.sms-card{

    padding:16px;

}


}
/* ===========================
Admin Login Button
=========================== */

.admin-login-box{

    text-align:center;

    margin:20px 0;

}

.admin-login-btn{

    display:inline-block;

    padding:12px 25px;

    background:#ff5722;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:17px;

    font-weight:bold;

    transition:.3s;

}

.admin-login-btn:hover{

    background:#e64a19;

}
.count-badge{
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    background:#6C2BD9;
    color:#fff;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    min-width:20px;
    text-align:center;
}
.view-all-btn{
display:inline-block;
padding:12px 24px;
background:#6C2BD9;
color:#fff;
text-decoration:none;
border-radius:30px;
font-weight:bold;
transition:.3s;
}

.view-all-btn:hover{
background:#4d1fa8;
}
.page-title{
text-align:center;
font-size:22px;
font-weight:bold;
margin:20px 0;
color:#ff5722;
}
.logo-kishor{
    color:#FFFFFF;
    text-shadow:2px 2px 6px rgba(0,0,0,.25);
}

.logo-sms{
    color:#FFD700;
    text-shadow:2px 2px 6px rgba(0,0,0,.25);
}
/* ==========================
Statistics Cards
========================== */

.stats-box{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:6px;

}

.stat-card{

    border:2px solid #d8c8ff;

    border-radius:12px;

    padding:8px 14px;

    box-shadow:0 2px 8px rgba(0,0,0,.12);

}

.stat-title{

    font-size:13px;

    margin-bottom:2px;

}

.stat-number{

    font-size:20px;

    font-weight:bold;

}
.logo-kishor{

    color:#FFD700;

    text-shadow:
        2px 2px 4px rgba(0,0,0,.45),
        0 0 12px rgba(255,215,0,.7);

}

.logo-sms{

    color:#00FF99;

    text-shadow:
        2px 2px 4px rgba(0,0,0,.45),
        0 0 12px rgba(0,255,153,.7);

}
/* ===== Action Buttons ===== */

.action-buttons{

display:flex;

align-items:center;

justify-content:space-between;

gap:8px;

margin-top:12px;

}

.action-btn{

background:#6C2BD9;

color:#fff;

border:none;

padding:8px 14px;

border-radius:20px;

font-size:14px;

font-weight:bold;

cursor:pointer;

}

.icon-btn{

width:38px;

height:38px;

border:none;

border-radius:50%;

background:#f4f4f4;

font-size:20px;

cursor:pointer;

transition:.3s;

}

.icon-btn:hover{

background:#e8e8e8;

transform:scale(1.08);

}
/* Emoji Popup */

.emoji-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

justify-content:center;

align-items:center;

z-index:9999;

}

.emoji-box{

background:#fff;

padding:20px;

border-radius:20px;

width:90%;

max-width:330px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.emoji-list{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:12px;

margin:20px 0;

}

.emoji-list span{

font-size:30px;

cursor:pointer;

transition:.2s;

}

.emoji-list span:hover{

transform:scale(1.25);

}

.emoji-box button{

background:#6C2BD9;

color:#fff;

padding:10px 20px;

border:none;

border-radius:25px;

cursor:pointer;

}
.icon-btn img{

width:22px;

height:22px;

display:block;

margin:auto;

}