/* ==========================================
   Password Generator
========================================== */

/* Options */

.checkbox-group{
    display:flex;
    flex-direction:column;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:25px 0;
    


}

.checkbox-group label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:500;
    color:#111827;
    cursor:pointer;
}

.checkbox-group input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:#8b5cf6;
    cursor:pointer;
}

/* Password Output */

.result-box{
    margin-top:30px;
}

#generatedPassword{
    width:100%;
    height:54px;
    padding:0px 16px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#f8fafc;
    color:#111827;
    font-size:18px;
    font-family:Consolas, monospace;
    font-weight:600;
    outline:none;
    box-sizing:border-box;
}

#generatedPassword:focus{
    border-color:#8b5cf6;
}

/* Strength */

#strengthIndicator{

margin-top:15px;

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:30px;

background:#ecfdf5;

color:#15803d;

font-size:15px;

font-weight:700;

}

#strengthIndicator.weak{
    color:#ef4444;
}

#strengthIndicator.medium{
    color:#f59e0b;
}

#strengthIndicator.strong{
    color:#22c55e;
}
.length-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.length-header label{
    font-weight:700;
    color:#111827;
}

#lengthValue{

background:#8b5cf6;
color:#fff;

padding:6px 14px;

border-radius:30px;

font-size:15px;
font-weight:700;

min-width:48px;
text-align:center;

}

/* Password Length Header */

.length-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.length-header label{
    font-size:20px;
    font-weight:700;
    color:#111827;
}

#lengthValue{

background:linear-gradient(135deg,#4f46e5,#9333ea);

color:#fff;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:700;

box-shadow:0 8px 20px rgba(139,92,246,.25);

}

/* Buttons */

.action-buttons{
    display:flex;
    gap:15px;
    margin-top:25px;
    flex-wrap:wrap;
}

#copyBtn,
#clearBtn{
    min-width:180px;
}

#clearBtn{
    background:#64748b;
}

#clearBtn:hover{
    background:#475569;
}

/* Success Message */

.copy-success{
    margin-top:12px;
    color:#22c55e;
    font-weight:600;
    display:none;
}

.tool-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    align-items:start;
}

.tool-main{
    width:100%;
}

.faq-sidebar{
    width:100%;
}

/* Mobile */

@media(max-width:768px){

.checkbox-group{
    grid-template-columns:1fr;
}

.action-buttons{
    flex-direction:column;
}
#generatedPassword{
    font-size:15px;
}

#copyBtn,
#clearBtn{
    width:100%;
}

}

@media (max-width:576px){

.action-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.action-buttons .tool-btn{
    width:100%;
}
.tool-card{

padding:22px;

}
.tool-header h1{

font-size:34px;

}

.tool-header p{

font-size:16px;

}
#generateBtn{
    width:100%;
}

}
@media (max-width:991px){

.tool-layout{

display:flex;
flex-direction:column;
align-items:center;
gap:30px;

}

.tool-main{

width:100%;
max-width:650px;

}

.faq-sidebar{

width:100%;
max-width:650px;

}

}