/* =========================================================
   VICOHI - Comma Separator Tool
   This CSS is fully scoped inside .comma-tool
   It will NOT affect the common Navbar or Footer.
========================================================= */

.comma-tool *,
.comma-tool *::before,
.comma-tool *::after{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

.comma-tool{
background:#f5f9ff;
padding:55px 20px 70px;
color:#222;
min-height:100vh;
}

.comma-tool .container{
max-width:1200px;
margin:auto;
}

/* =========================================================
   Hero
========================================================= */

.comma-tool .hero{
text-align:center;
margin-bottom:45px;
}

.comma-tool h1{
font-size:42px;
font-weight:700;
color:#062B70;
margin-bottom:14px;
line-height:1.2;
}

.comma-tool .subtitle{
max-width:760px;
margin:auto;
font-size:17px;
line-height:1.8;
color:#666;
}

/* =========================================================
   Main Grid
========================================================= */

.comma-tool .wrapper{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:30px;
align-items:stretch;
}

/* =========================================================
   Cards
========================================================= */

.comma-tool .card{
background:#fff;
border:1px solid #e6edf8;
border-radius:16px;
padding:25px;
box-shadow:0 12px 35px rgba(25,96,199,.08);
transition:.3s ease;
}

.comma-tool .card:hover{
transform:translateY(-3px);
box-shadow:0 18px 45px rgba(25,96,199,.12);
}

.comma-tool .card h2{
font-size:22px;
font-weight:600;
color:#062B70;
margin-bottom:18px;
}

/* =========================================================
   Textareas
========================================================= */

.comma-tool textarea{
width:100%;
height:420px;
padding:16px;
font-size:15px;
line-height:1.7;
border:1px solid #d7e3f4;
border-radius:12px;
outline:none;
resize:none;
overflow-y:auto;
transition:.25s;
}

.comma-tool textarea::placeholder{
color:#999;
}

.comma-tool textarea:focus{
border-color:#1960C7;
box-shadow:0 0 0 4px rgba(25,96,199,.12);
}

/* =========================================================
   Stats
========================================================= */

.comma-tool .stats{
margin-top:18px;
font-size:15px;
font-weight:600;
color:#1960C7;
}

.comma-tool .stats span{
font-weight:700;
}

/* =========================================================
   Buttons
========================================================= */

.comma-tool .buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:22px;
}

.comma-tool button{
border:none;
border-radius:10px;
padding:13px 22px;
cursor:pointer;
font-size:15px;
font-weight:600;
color:#fff;
transition:.25s;
}

.comma-tool button:hover{
transform:translateY(-2px);
}

.comma-tool button:active{
transform:scale(.98);
}

.comma-tool .copy{
background:#08B8A3;
}

.comma-tool .copy:hover{
background:#079985;
}

.comma-tool .clear{
background:#e74c3c;
}

.comma-tool .clear:hover{
background:#cf3d30;
}

.comma-tool .download{
background:#27ae60;
}

.comma-tool .download:hover{
background:#219150;
}

/* =========================================================
   SEO Information Box
========================================================= */

.comma-tool .info-box{
margin-top:55px;
background:#fff;
padding:35px;
border-radius:16px;
border:1px solid #e6edf8;
box-shadow:0 12px 35px rgba(25,96,199,.08);
}

.comma-tool .info-box h2{
font-size:24px;
font-weight:600;
color:#062B70;
margin-bottom:16px;
margin-top:30px;
}

.comma-tool .info-box h2:first-child{
margin-top:0;
}

.comma-tool .info-box p{
font-size:16px;
line-height:1.9;
color:#555;
margin-bottom:18px;
}

.comma-tool .info-box ul{
margin:18px 0 25px 22px;
padding:0;
}

.comma-tool .info-box li{
font-size:16px;
line-height:1.9;
color:#444;
margin-bottom:10px;
}

.comma-tool .info-box li::marker{
color:#1960C7;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:992px){

.comma-tool .wrapper{
grid-template-columns:1fr;
}

.comma-tool textarea{
height:300px;
}

}

@media (max-width:768px){

.comma-tool{
padding:40px 15px 60px;
}

.comma-tool h1{
font-size:32px;
}

.comma-tool .subtitle{
font-size:15px;
line-height:1.7;
}

.comma-tool .card{
padding:20px;
}

.comma-tool .card h2{
font-size:20px;
}

.comma-tool textarea{
height:260px;
font-size:14px;
}

.comma-tool .buttons{
flex-direction:column;
}

.comma-tool button{
width:100%;
}

.comma-tool .info-box{
padding:22px;
margin-top:40px;
}

.comma-tool .info-box h2{
font-size:20px;
}

.comma-tool .info-box p,
.comma-tool .info-box li{
font-size:15px;
line-height:1.8;
}

}

@media (max-width:480px){

.comma-tool h1{
font-size:28px;
}

.comma-tool .subtitle{
font-size:14px;
}

.comma-tool .card{
padding:18px;
}

.comma-tool textarea{
height:220px;
padding:14px;
}

.comma-tool .info-box{
padding:18px;
}

}