.somnath-resize-image-main-box {
   background-color: #f1f5f9;
   color: #0f172a;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 40px 0;
 }

 .somnath-image-resize-section {
   width: 100%;
   padding: 0 15px;
 }

 .somnath-image-resize-container {
   width: 100%;
   max-width: 750px;
   margin: auto;
   background: #f1f5f9;
   padding: clamp(20px, 5vh, 40px);
   /* REMOVED: max-height and overflow-y to allow full page scrolling */
   border-radius: 20px;
   border: 1px solid #d6d6d6;
 }

 .somnath-image-resize-header {
   text-align: center;
   margin-bottom: clamp(20px, 4vh, 30px);
   flex-shrink: 0;
 }

 .somnath-image-resize-header h2 {
   font-size: clamp(24px, 4vw, 32px);
   font-weight: 700;
   margin-bottom: 8px;
 }

 .somnath-image-resize-header p {
   color: #64748b;
   font-size: 15px;
 }

 /* DROPZONE */
 .somnath-image-resize-upload-box {
   width: 100%;
   min-height: clamp(160px, 20vh, 220px);
   border: 2px dashed #e2e8f0;
   border-radius: 16px;
   background: #f8fafc;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 0.3s ease;
   flex-shrink: 0;
 }

 .somnath-image-resize-upload-box.drag-active,
 .somnath-image-resize-upload-box:hover {
   border-color: var(--text-ocan);
   
 }

 .somnath-image-resize-upload-box input {
   display: none;
 }

 .somnath-image-resize-upload-icon svg {
   width: 40px;
   height: 40px;
   stroke: var(--text-ocan);
   stroke-width: 2;
   fill: none;
   margin-bottom: 10px;
 }

 .somnath-image-resize-upload-content {
   text-align: center;
   padding: 15px;
 }

 .somnath-image-resize-upload-content .somnath-image-resize-uploading-txt {
   font-size: 18px;
   margin-bottom: 5px;
 }

 .somnath-image-resize-upload-content p {
   font-size: 13px;
   color: #64748b;
 }

 /* PREVIEW */
 .somnath-image-resize-preview-wrapper {
   display: none;
   margin-top: 20px;
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   padding: 10px;
   background: #f8fafc;
   text-align: center;
   flex-shrink: 0;
 }

 .somnath-image-resize-preview-wrapper img {
   max-width: 100%;
   max-height: 250px;
   object-fit: contain;
   border-radius: 8px;
 }

 .file-info {
   margin-top: 8px;
   font-size: 13px;
   color: #64748b;
   font-weight: 600;
 }

 /* CONTROLS */
 .somnath-image-resize-controls {
   display: none;
   margin-top: 20px;
   gap: 20px;
   flex-direction: column;
   flex-shrink: 0;
 }

 .dimension-row,
 .settings-row {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .input-group {
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .input-group label {
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 6px;
 }

 .input-group input[type="number"],
 .input-group select {
   width: 100%;
   min-height: 48px;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   padding: 0 12px;
   font-size: 15px;
   outline: none;
   transition: 0.2s;
   background: #fff;
   flex-shrink: 0;
 }

 .input-group input:focus,
 .input-group select:focus {
   border-color: var(--text-ocan);
   box-shadow: 0 0 0 3px rgba(0, 179, 255, 0.2);
 }

 /* ASPECT RATIO LOCK */
 .lock-container {
   padding-top: 22px;
 }

 #lock-ratio-btn {
   background: none;
   border: none;
   cursor: pointer;
   padding: 10px;
   border-radius: 8px;
   background: #f1f5f9;
   transition: 0.2s;
   min-height: 48px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #lock-ratio-btn.locked {
   background: var(--gredient-bg);
 }

 #lock-ratio-btn .lock-icon {
   width: 20px;
   height: 20px;
   stroke: #64748b;
   fill: none;
   stroke-width: 2;
 }

 #lock-ratio-btn.locked .lock-icon {
   stroke: #fff;
 }

 /* SLIDER */
 input[type="range"] {
   height: 48px;
   accent-color: var(--text-ocan);
   cursor: pointer;
 }

 /* BUTTONS */
 .somnath-image-resize-buttons {
   display: none;
   gap: 15px;
   margin-top: 25px;
   flex-shrink: 0;
 }

 .somnath-image-resize-buttons button {
   flex: 1;
   min-height: 52px;
   border: none;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: 0.2s;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .primary-btn {
   background: var(--gredient-bg);
   color: white;
 }

 

 .secondary-btn {
   background: #0f172a;
   color: white;
 }

 .secondary-btn:hover {
   background: #1e293b;
 }

 #resize-canvas {
   display: none;
 }

 /* MOBILE RESPONSIVE FIX */
 @media (max-width: 600px) {

   .dimension-row,
   .settings-row {
     flex-direction: column;
     align-items: stretch;
   }

   .lock-container {
     padding-top: 0;
     display: flex;
     justify-content: center;
   }

   #lock-ratio-btn {
     width: 100%;
     min-height: 44px;
   }

   .somnath-image-resize-buttons {
     flex-direction: column;
   }
 }