/* ================================
WRAPPER
================================ */

.dw-tool-wrapper{

max-width:1000px;
margin:auto;
padding:40px 20px;

}


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

.dw-tool-container{

background:#ffffff;
border-radius:28px;
padding:45px;
text-align:center;

box-shadow:
0 20px 40px rgba(0,0,0,0.08),
0 40px 90px rgba(0,0,0,0.12);

transition:.35s;

}


/* floating card effect */

.dw-tool-container:hover{

transform:translateY(-4px);

box-shadow:
0 30px 60px rgba(0,0,0,0.12),
0 60px 120px rgba(0,0,0,0.16);

}


.dark-mode .dw-tool-container{

background:#0f172a;
color:#ffffff;

box-shadow:
0 40px 100px rgba(0,0,0,0.8);

}



/* ================================
HEADER
================================ */

.dw-tool-header h1{

font-size:38px;
margin-bottom:10px;

}

.dw-tool-header p{

color:#64748b;

}

.dark-mode .dw-tool-header p{

color:#94a3b8;

}



/* ================================
BUTTON GROUP
================================ */

.dw-tool-actions{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-top:15px;

}



/* ================================
APPLE BUTTON
================================ */

.dw-btn-apple{

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:white;

border:none;

padding:13px 26px;

border-radius:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:
0 10px 25px rgba(37,99,235,0.35),
inset 0 1px 0 rgba(255,255,255,0.3);

}

.dw-btn-apple:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(37,99,235,0.5),
inset 0 1px 0 rgba(255,255,255,0.4);

}

.dw-btn-apple:active{

transform:scale(.97);

box-shadow:
0 6px 15px rgba(0,0,0,0.2);

}



/* ================================
CLEAR BUTTON
================================ */

.dw-btn-clear{

background:#e2e8f0;
color:#1e293b;

border:none;

padding:13px 26px;

border-radius:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:
0 6px 15px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.4);

}

.dw-btn-clear:hover{

background:#d1d5db;

}

.dark-mode .dw-btn-clear{

background:#334155;
color:#ffffff;

box-shadow:
0 10px 25px rgba(0,0,0,0.5);

}



/* ================================
OPTIONS
================================ */

.dw-tool-options{

margin:25px 0;

display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;

}


/* DARK MODE TEXT FIX */

.dark-mode .dw-tool-options label{

color:#e2e8f0;

}



/* ================================
PREMIUM CHECKBOX
================================ */

.dw-tool-options input[type="checkbox"]{

appearance:none;

width:18px;
height:18px;

border-radius:6px;

border:2px solid #cbd5e1;

cursor:pointer;

position:relative;

transition:.2s;

}

.dw-tool-options input[type="checkbox"]:checked{

background:#2563eb;
border-color:#2563eb;

}

.dw-tool-options input[type="checkbox"]:checked::after{

content:"✔";
color:white;
font-size:12px;

position:absolute;
left:2px;
top:-1px;

}

.dark-mode .dw-tool-options input[type="checkbox"]{

border-color:#475569;

}



/* ================================
NUMBER INPUT
================================ */

.dw-tool-options input[type="number"]{

padding:8px 10px;
border-radius:8px;
border:1px solid #d1d5db;
width:80px;

}

.dark-mode input[type="number"]{

background:#1e293b;
color:white;
border:1px solid #334155;

}



/* ================================
APPLE RANGE SLIDER
================================ */

input[type="range"]{

-webkit-appearance:none;
width:100%;
height:6px;
border-radius:10px;

background:#e5e7eb;

outline:none;
transition:.3s;

}

.dark-mode input[type="range"]{

background:#334155;

}

input[type="range"]::-webkit-slider-thumb{

-webkit-appearance:none;

width:18px;
height:18px;

border-radius:50%;

background:#2563eb;

cursor:pointer;

box-shadow:
0 0 0 4px rgba(37,99,235,0.15),
0 4px 12px rgba(37,99,235,0.4);

transition:.2s;

}

input[type="range"]::-webkit-slider-thumb:hover{

transform:scale(1.1);

box-shadow:
0 0 0 6px rgba(37,99,235,0.25),
0 6px 16px rgba(37,99,235,0.6);

}

.dark-mode input[type="range"]::-webkit-slider-thumb{

background:#3b82f6;

box-shadow:
0 0 0 4px rgba(59,130,246,0.25),
0 6px 16px rgba(59,130,246,0.7);

}



/* ================================
OUTPUT
================================ */

#passwordOutput{

width:100%;

height:220px;

padding:18px;

border-radius:16px;

border:1px solid #e2e8f0;

background:#f8fafc;

font-family:monospace;

resize:vertical;

box-shadow:
inset 0 3px 8px rgba(0,0,0,0.06);

}

.dark-mode #passwordOutput{

background:#020617;
border-color:#334155;
color:#e2e8f0;

}



/* ================================
STRENGTH BAR
================================ */

.dw-strength{

margin-bottom:15px;

}

.dw-strength-bar{

height:8px;
background:#e5e7eb;
border-radius:10px;
margin-top:5px;
overflow:hidden;

}

#strengthFill{

height:100%;
width:0%;

}



/* ================================
THEME TOGGLE
================================ */

.dw-theme-toggle{

margin-top:10px;

display:flex;
justify-content:center;
align-items:center;
gap:8px;

}

.dw-switch{

position:relative;
display:inline-block;

width:46px;
height:24px;

}

.dw-switch input{

opacity:0;
width:0;
height:0;

}

.dw-slider{

position:absolute;

cursor:pointer;

background:#cbd5f5;

border-radius:34px;

top:0;
left:0;
right:0;
bottom:0;

transition:.4s;

}

.dw-slider:before{

position:absolute;

content:"";

height:18px;
width:18px;

left:3px;
bottom:3px;

background:white;

border-radius:50%;

transition:.4s;

}

input:checked + .dw-slider{

background:#2563eb;

}

input:checked + .dw-slider:before{

transform:translateX(22px);

}



/* ================================
RESPONSIVE
================================ */

@media(max-width:768px){

.dw-tool-header h1{

font-size:30px;

}

.dw-tool-actions{

flex-direction:column;

}

.dw-btn-apple,
.dw-btn-clear{

width:100%;

}

.dw-tool-container{

padding:30px;

}

}

/* DARK MODE HEADING FIX */

.dark-mode .dw-tool-header h1{
color:#ffffff;
}

.dark-mode .dw-tool-header p{
color:#cbd5f5;
}