/* ===========================
   Tool Container
=========================== */

.tool-container {
    max-width: 1100px;
    margin: auto;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

/* ===========================
   Headings
=========================== */

.tool-container h2{
    text-align:center;
    color:var(--primary);
    margin-bottom:30px;
}

/* ===========================
   Upload Area
=========================== */

.upload-area{

    border:3px dashed var(--primary);

    border-radius:15px;

    padding:60px 20px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    background:rgba(115,71,158,.05);

    margin-bottom:30px;

}

.upload-area:hover{

    background:rgba(115,71,158,.12);

    transform:translateY(-2px);

}

.upload-area p{

    font-size:18px;

    color:#555;

    line-height:1.8;

}

/* ===========================
   Crop Area
=========================== */

.crop-container{

    width:100%;

    max-width:900px;

    height:550px;

    margin:auto;

    overflow:hidden;

    border-radius:12px;

    background:#f8f8f8;

    border:1px solid #ddd;

}

.crop-container img{

    display:block;

    max-width:100%;

}

/* ===========================
   Controls
=========================== */

.controls{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

}

.controls select,
.controls input{

    padding:12px 14px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;

    min-width:140px;

}

.controls select:focus,
.controls input:focus{

    outline:none;

    border-color:var(--primary);

}

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

.controls button{

    padding:12px 22px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

    color:#fff;

    font-weight:600;

}

#zoomIn{

    background:#28a745;

}

#zoomOut{

    background:#17a2b8;

}

#rotateLeft{

    background:#ff9800;

}

#rotateRight{

    background:#ff5722;

}

#reset{

    background:#6c757d;

}

#downloadBtn{

    background:var(--primary);

}

.controls button:hover{

    opacity:.9;

    transform:translateY(-2px);

}

/* ===========================
   Cropper
=========================== */

.cropper-view-box{

    outline:2px solid var(--primary);

}

.cropper-line,
.cropper-point{

    background:var(--primary);

}

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

@media(max-width:768px){

.crop-container{

height:400px;

}

.controls{

flex-direction:column;

}

.controls button,
.controls input,
.controls select{

width:100%;

}

}

@media(max-width:480px){

.tool-container{

padding:20px;

}

.crop-container{

height:300px;

}

.upload-area{

padding:40px 15px;

}

.upload-area p{

font-size:16px;

}

}