/* Custom Image Resizer Container Styling - FULL WIDTH */
.custom-resizer-container {
    width: 100%; /* Full width */
    margin: 40px 0; /* Top/bottom margin, no left/right auto margin */
    padding: 25px;
    border-radius: 0; /* Corner radius hata diya agar edge-to-edge look chahiye */
    background-color: #ffffff;
    box-shadow: none; /* Shadow bhi hata diya for a cleaner full-width look */
}

/* Headings and Subheadings */
.tool-main-heading {
    text-align: center;
    color: #333;
    font-size: 2.5em;
    margin-bottom: 10px;
}
.tool-subheading {
    text-align: center;
    color: #666;
    font-size: 1.1em;
    margin-bottom: 30px;
}

/* Drop Zone (The Main Box) */
#drop-zone {
    min-height: 350px;
    border: 2px dashed #a0c4ff; /* Light Blue Dashed Border */
    background-color: #f6faff; /* Very light blue background */
    border-radius: 8px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 20px;
}

/* Drop Zone: Hover/Drag Over State */
#drop-zone.drag-over {
    border-color: #007bff;
    background-color: #e3f2fd;
}

/* Content within Drop Zone */
#drop-text {
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
}

/* FIX: Icon aur Button ko ek line mein laane ke liye */
.icon-button-group {
    display: flex;
    align-items: center; /* Vertically center them */
    gap: 20px; /* Icon aur button ke beech ki jagah */
}

/* Icon (SVG) Styling */
#drop-text svg {
    color: #007bff;
}
#drop-text p.small-text {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

/* Upload Button Style */
.upload-button {
    background-color: #007bff;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    transition: background-color 0.2s;
}
.upload-button:hover {
    background-color: #0056b3;
}

/* Image Preview Handling */
#uploaded-image-preview {
    max-width: 100%;
    /* Default: Ab inline style nahi hai, toh yahan se hide hoga */
    display: none; 
}

#drop-zone.has-image #drop-text {
    display: none;
}
#drop-zone.has-image #uploaded-image-preview {
    /* Ab bina !important ke display: block ho raha hai */
    display: block; 
    max-height: 300px;
    width: auto;
}

/* Resizer Controls Area */
#resizer-controls {
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    margin-top: 25px;
}
#resizer-controls h3 {
    margin-top: 0;
    font-size: 1.3em;
    color: #333;
}

.dimensions-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
}

#resizer-controls input[type="number"] {
    width: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.maintain-ratio-label {
    margin-left: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Action Buttons and SEO Content */
.action-buttons { margin-top: 20px; text-align: center; }
.primary-button { background-color: #28a745; color: white; padding: 10px 25px; font-weight: bold; border: none; border-radius: 5px; }
.secondary-button { background-color: #6c757d; color: white; margin-left: 10px; padding: 10px 25px; font-weight: bold; border: none; border-radius: 5px; }
.primary-button:hover { background-color: #218838; }
.secondary-button:hover { background-color: #5a6268; }
.seo-content { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; text-align: left; color: #444; }

/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
    .tool-main-heading { font-size: 2em; }
    .icon-button-group { flex-direction: column; gap: 10px; }
    #drop-text svg { width: 48px; height: 48px; }
    .dimensions-group { flex-direction: column; align-items: flex-start; }
    #resizer-controls input[type="number"] { width: 100%; }
    .maintain-ratio-label { margin-left: 0; }
}