/* ===================================
   Image Crop Tool - Alam Web Tools
=================================== */

:root{
    --awt-primary:#4f46e5;
    --awt-secondary:#7c3aed;
    --awt-success:#10b981;
    --awt-danger:#ef4444;
    --awt-dark:#111827;
    --awt-card:#ffffff;
    --awt-border:#e5e7eb;
    --awt-text:#374151;
    --awt-radius:16px;
    --awt-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Main Wrapper */

.awt-image-crop-tool{
    max-width:1400px;
    margin:30px auto;
    padding:20px;
    font-family:Arial, Helvetica, sans-serif;
}

/* Header */

.awt-header{
    text-align:center;
    margin-bottom:25px;
}

.awt-header h2{
    font-size:32px;
    font-weight:700;
    margin-bottom:10px;
    color:var(--awt-dark);
}

.awt-header h2 i{
    color:var(--awt-primary);
    margin-right:10px;
}

.awt-header p{
    color:#6b7280;
    font-size:15px;
}

/* Upload Area */

#awt-drop-area{
    background:#fff;
    border:3px dashed #c7d2fe;
    border-radius:20px;
    padding:50px 20px;
    text-align:center;
    transition:.3s;
    cursor:pointer;
    box-shadow:var(--awt-shadow);
}

#awt-drop-area:hover{
    border-color:var(--awt-primary);
    transform:translateY(-2px);
}

#awt-drop-area.dragover{
    background:#eef2ff;
    border-color:var(--awt-primary);
}

#awt-drop-area i{
    font-size:60px;
    color:var(--awt-primary);
    margin-bottom:15px;
}

#awt-drop-area h3{
    margin:0;
    font-size:22px;
    color:var(--awt-dark);
}

#awt-drop-area p{
    margin:15px 0;
    color:#6b7280;
}

/* Buttons */

#awt-select-image,
#awt-crop-btn,
#awt-download-btn,
.awt-buttons button{
    border:none;
    cursor:pointer;
    transition:.3s;
    border-radius:12px;
    font-weight:600;
}

#awt-select-image{
    background:linear-gradient(
        135deg,
        var(--awt-primary),
        var(--awt-secondary)
    );
    color:#fff;
    padding:14px 24px;
}

#awt-select-image:hover{
    transform:translateY(-2px);
}

/* Info Cards */

.awt-info-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:25px;
    margin-bottom:25px;
}

.awt-card{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:var(--awt-shadow);
    text-align:center;
}

.awt-card span{
    display:block;
    color:#6b7280;
    margin-bottom:8px;
}

.awt-card strong{
    font-size:20px;
    color:var(--awt-dark);
}

/* Main Layout */

.awt-main-editor{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-top:20px;
}

/* Editor Left */

.awt-editor-left{
    background:#fff;
    border-radius:20px;
    padding:20px;
    box-shadow:var(--awt-shadow);
    min-height:500px;
}

#awt-image{
    width:100%;
    display:block;
}

/* Right Panel */

.awt-editor-right{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* Control Cards */

.awt-controls,
.awt-social-presets,
.awt-download-section{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:var(--awt-shadow);
}

.awt-controls h4,
.awt-social-presets h4{
    margin-top:0;
    margin-bottom:15px;
    color:var(--awt-dark);
}

.awt-controls h4 i{
    color:var(--awt-primary);
}

/* Select Fields */

#awt-ratio,
#awt-social-preset,
#awt-output-format,
#awt-file-name{
    width:100%;
    padding:12px;
    border:1px solid var(--awt-border);
    border-radius:10px;
    margin-bottom:15px;
    font-size:14px;
}

/* Tool Buttons */

.awt-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.awt-buttons button{
    background:#eef2ff;
    color:var(--awt-primary);
    height:50px;
    font-size:18px;
}

.awt-buttons button:hover{
    background:var(--awt-primary);
    color:#fff;
}

/* Download Section */

#awt-crop-btn{
    width:100%;
    padding:14px;
    background:linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );
    color:#fff;
    margin-bottom:10px;
}

#awt-download-btn{
    width:100%;
    padding:14px;
    background:linear-gradient(
        135deg,
        #10b981,
        #059669
    );
    color:#fff;
}

#awt-crop-btn:hover,
#awt-download-btn:hover{
    transform:translateY(-2px);
}

/* Preview Section */

.awt-preview-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:30px;
}

.awt-preview-box{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:var(--awt-shadow);
}

.awt-preview-box h3{
    margin-top:0;
    margin-bottom:15px;
    color:var(--awt-dark);
}

#awt-original-preview,
#awt-preview-canvas{
    width:100%;
    max-width:100%;
    border-radius:10px;
    border:1px solid var(--awt-border);
}

/* Loader */

#awt-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    color:#fff;
    font-size:24px;
    font-weight:700;
}

/* Cropper Custom */

.cropper-view-box,
.cropper-face{
    border-radius:4px;
}

.cropper-point{
    width:12px;
    height:12px;
}

/* Before After Area */

.awt-before-after{
    margin-top:30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.awt-before-after img{
    width:100%;
    border-radius:12px;
}

/* Output Stats */

.awt-output-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:20px;
}

.awt-output-card{
    background:#fff;
    padding:15px;
    border-radius:12px;
    text-align:center;
    box-shadow:var(--awt-shadow);
}

/* Error Messages */

.awt-error{
    background:#fee2e2;
    color:#b91c1c;
    padding:12px;
    border-radius:10px;
    margin-top:15px;
}

.awt-success{
    background:#dcfce7;
    color:#166534;
    padding:12px;
    border-radius:10px;
    margin-top:15px;
}

/* Smooth Animation */

.awt-card,
.awt-preview-box,
.awt-controls,
.awt-social-presets,
.awt-download-section{
    transition:.3s;
}

.awt-card:hover,
.awt-preview-box:hover{
    transform:translateY(-4px);
}

/* Responsive */

@media (max-width:1024px){

    .awt-main-editor{
        grid-template-columns:1fr;
    }

    .awt-info-cards{
        grid-template-columns:repeat(2,1fr);
    }

    .awt-preview-wrapper{
        grid-template-columns:1fr;
    }

    .awt-output-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){

    .awt-header h2{
        font-size:26px;
    }

    .awt-info-cards{
        grid-template-columns:1fr;
    }

    .awt-buttons{
        grid-template-columns:repeat(2,1fr);
    }

    #awt-drop-area{
        padding:35px 15px;
    }

    #awt-drop-area i{
        font-size:48px;
    }
}

@media (max-width:480px){

    .awt-buttons{
        grid-template-columns:1fr 1fr;
    }

    .awt-output-stats{
        grid-template-columns:1fr;
    }

    .awt-header h2{
        font-size:22px;
    }
}

/* Dark Mode */

@media (prefers-color-scheme: dark){

    body{

    }

    .awt-card,
    .awt-preview-box,
    .awt-controls,
    .awt-social-presets,
    .awt-download-section,
    .awt-editor-left{
        background:#1f2937;
        color:#fff;
    }

    .awt-header h2,
    .awt-controls h4,
    .awt-social-presets h4,
    .awt-preview-box h3{
        color:#fff;
    }

    #awt-ratio,
    #awt-social-preset,
    #awt-file-name,
    #awt-output-format{
        background:#111827;
        color:#fff;
        border-color:#374151;
    }

    #awt-drop-area{
        background:#1f2937;
        border-color:#4b5563;
    }

    .awt-card strong{
        color:#fff;
    }
}