/* ============================================
   ICC RESIZE MODULE CSS - COMPLETE WITH TOGGLE BUTTONS
   File 3.1 - Image resize specific styles
   ============================================ */

/* Resize Container */
#resize-options-container,
#icc-resize-container {
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  padding: 10px;
  z-index: 10010 !important;
  flex-wrap: wrap;
  gap: 10px;
}

#icc-resize-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* Resize Preset Select */
#icc-resize-preset {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: #333;
  min-width: 200px;
}

/* ============================================
   CUSTOM DIMENSION INPUTS STYLING
   ============================================ */

/* Custom dimensions container */
#icc-custom-dimensions {
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  display: none;
  gap: 15px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Number inputs */
#icc-custom-width-input,
#icc-custom-height-input {
  width: 90px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
}

#icc-custom-width-input:focus,
#icc-custom-height-input:focus {
  outline: none;
  border-color: #2196F3 !important;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
  background: rgba(33, 150, 243, 0.1);
}

/* Spinner buttons (increase/decrease arrows) */
#icc-custom-width-input::-webkit-inner-spin-button,
#icc-custom-height-input::-webkit-inner-spin-button,
#icc-custom-width-input::-webkit-outer-spin-button,
#icc-custom-height-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 30px;
  cursor: pointer;
}

/* Remove spinners for Firefox */
#icc-custom-width-input[type=number],
#icc-custom-height-input[type=number] {
  -moz-appearance: textfield;
}

/* Range slider styling - Webkit (Chrome, Safari, Edge) */
#icc-custom-width,
#icc-custom-height {
  width: 180px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#icc-custom-width::-webkit-slider-thumb,
#icc-custom-height::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #2196F3;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4);
  transition: all 0.3s ease;
}

#icc-custom-width::-webkit-slider-thumb:hover,
#icc-custom-height::-webkit-slider-thumb:hover {
  background: #1976D2;
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(33, 150, 243, 0.6);
}

#icc-custom-width::-webkit-slider-runnable-track,
#icc-custom-height::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  height: 6px;
}

/* Range slider styling - Firefox */
#icc-custom-width::-moz-range-thumb,
#icc-custom-height::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #2196F3;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4);
  transition: all 0.3s ease;
}

#icc-custom-width::-moz-range-thumb:hover,
#icc-custom-height::-moz-range-thumb:hover {
  background: #1976D2;
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(33, 150, 243, 0.6);
}

#icc-custom-width::-moz-range-track,
#icc-custom-height::-moz-range-track {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  height: 6px;
}

/* Lock aspect ratio checkbox styling */
#icc-lock-aspect-ratio {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #4CAF50;
}

label:has(#icc-lock-aspect-ratio) {
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.3s ease;
  margin-top: 20px;
}

label:has(#icc-lock-aspect-ratio):hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-2px);
}

label:has(#icc-lock-aspect-ratio:checked) {
  background: rgba(76, 175, 80, 0.2) !important;
  border: 2px solid #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

label:has(#icc-lock-aspect-ratio:checked) span {
  color: #4CAF50;
  font-weight: 700;
}

/* OLD Custom Width/Height Inputs (keeping for backward compatibility) */
#icc-custom-width,
#icc-custom-height {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #333;
}

/* Resize Summary */
#icc-resize-summary {
  text-align: center;
  padding: 15px;
  margin: 15px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
}

#icc-resize-summary-text {
  font-size: 18px;
  color: #fff;
  margin: 0;
  font-weight: 600;
}

/* ============================================
   MODE TOGGLE BUTTONS (NEW - Fill/Fit/Auto Crop)
   ============================================ */
.icc-mode-toggles {
  display: flex;
  gap: 6px; /* CHANGED: 10px → 6px */
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  flex-wrap: wrap;
}

.icc-mode-toggle {
  padding: 10px 12px; /* CHANGED: 10px 20px → 10px 12px */
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  color: #666;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 13px; /* CHANGED: 14px → 13px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* CHANGED: 8px → 6px */
  min-width: 95px; /* CHANGED: 110px → 95px */
  max-width: 120px; /* ADDED: New line */
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  white-space: nowrap; /* ADDED: New line */
}

.icc-mode-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.icc-mode-toggle:active {
  transform: translateY(0);
}

.icc-mode-toggle i {
  font-size: 13px; /* CHANGED: 14px → 13px */
  transition: all 0.3s ease;
}


/* Active state - default purple */
.icc-mode-toggle-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-color: #667eea !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.icc-mode-toggle-active:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

.icc-mode-toggle-active i {
  color: white;
}

/* Loading state */
.icc-mode-toggle-loading {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
  color: white !important;
  border-color: #2196F3 !important;
  cursor: wait !important;
  pointer-events: none;
}

.icc-mode-toggle-loading i {
  animation: icc-spin 1s linear infinite;
}

@keyframes icc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Individual mode colors (optional enhancement) */
.icc-mode-toggle[data-mode="cover"].icc-mode-toggle-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: #667eea !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.icc-mode-toggle[data-mode="cover"].icc-mode-toggle-active:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

.icc-mode-toggle[data-mode="contain"].icc-mode-toggle-active {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
  border-color: #4CAF50 !important;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4) !important;
}

.icc-mode-toggle[data-mode="contain"].icc-mode-toggle-active:hover {
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6) !important;
}

.icc-mode-toggle[data-mode="auto-crop"].icc-mode-toggle-active {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
  border-color: #FF9800 !important;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
}

.icc-mode-toggle[data-mode="auto-crop"].icc-mode-toggle-active:hover {
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6) !important;
}

/* ⬇️⬇️⬇️ ADD THIS NEW CODE HERE ⬇️⬇️⬇️ */

/* Manual Crop Button Styling */
.icc-mode-toggle[data-mode="manual-crop"].icc-mode-toggle-active {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
  border-color: #2196F3 !important;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4) !important;
}

.icc-mode-toggle[data-mode="manual-crop"].icc-mode-toggle-active:hover {
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.6) !important;
}


/* ============================================
   ASPECT RATIO CONVERSION BUTTONS
   ============================================ */
#resize-aspect-container {
  margin: 20px 0;
  text-align: center;
  display: none;
}

#resize-aspect-container.show {
  display: block;
}

#resize-aspect-toggle-btn {
  color: #fff; 
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#resize-aspect-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

#resize-aspect-buttons {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 50px;
  opacity: 1;
  transition: all 0.4s ease;
}

#resize-aspect-buttons.resize-aspect-buttons-visible {
  max-height: 200px;
  opacity: 1;
}

#resize-aspect-buttons.resize-aspect-buttons-hidden {
  max-height: 0;
  opacity: 0;
}

.resize-aspect-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white; 
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  min-width: 140px;
}

.resize-aspect-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.resize-aspect-btn:active {
  transform: translateY(0);
}

.resize-aspect-btn i {
  margin-right: 8px;
}

/* Header Row for Resize Output */
.icc-output-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0 10px 0;
  padding: 10px 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.icc-output-header-left,
.icc-output-header-right {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

/* Resize Row Layout */
.icc-resize-row {
  margin: 15px 0 !important;
  padding: 20px !important;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.icc-file-row-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 0;
  overflow: visible !important;
}

/* Preview Containers */
.icc-original-preview,
.icc-resized-preview {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
}

.icc-preview-image {
  max-width: 100%;
  max-height: 250px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 10px;
  display: block;
}

.icc-preview-info {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.icc-preview-name {
  font-weight: 600;
  font-size: 14px;
  margin: 5px 0;
  word-break: break-word;
  color: #333;
}

.icc-preview-size,
.icc-preview-filesize {
  font-size: 13px;
  color: #666;
  margin: 3px 0;
}

.icc-size-reduction {
  color: #17a2b8;
  font-weight: 600;
  font-size: 13px;
}

/* Waiting/Loading/Error States */
.icc-waiting-resize {
  padding: 40px 20px;
  background: #f9f9f9;
  border: 2px dashed #ddd;
  border-radius: 8px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icc-waiting-resize p {
  color: #999;
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.icc-loading {
  padding: 40px 20px;
  background: #e3f2fd;
  border: 2px solid #90caf9;
  border-radius: 8px;
  text-align: center;
  color: #1976d2;
  font-weight: 500;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icc-error {
  padding: 40px 20px;
  background: #ffebee;
  border: 2px solid #ef5350;
  border-radius: 8px;
  text-align: center;
  color: #c62828;
  font-weight: 500;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icc-resized-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ============================================
   RESPONSIVE FOR RESIZE, CUSTOM DIMENSIONS & TOGGLES
   ============================================ */
@media (max-width: 768px) {
  .icc-file-row-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .icc-preview-image {
    max-height: 220px;
  }
  
  .icc-original-preview,
  .icc-resized-preview {
    max-height: none;
  }
  
  .icc-output-header-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .icc-download-btn,
  .icc-download-single-btn {
    width: 100%;
  }

  #icc-resize-options {
    flex-direction: column;
  }
  
  #resize-aspect-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .resize-aspect-btn {
    width: 100%;
  }
  
  /* Custom dimensions responsive */
  #icc-custom-dimensions {
    flex-direction: column;
    align-items: stretch;
  }
  
  #icc-custom-width,
  #icc-custom-height {
    width: 100% !important;
  }
  
  #icc-custom-width-input,
  #icc-custom-height-input {
    width: 100%;
  }
  
  label:has(#icc-lock-aspect-ratio) {
    margin-top: 10px !important;
    justify-content: center;
  }
  
  /* Mode toggles responsive */
  .icc-mode-toggles {
    flex-direction: column;
    gap: 8px;
  }
  
  .icc-mode-toggle {
    width: 100%;
    min-width: auto;
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  .icc-preview-image {
    max-height: 180px;
  }
  
  .icc-original-preview,
  .icc-resized-preview {
    padding: 8px;
  }
  
  .icc-preview-name {
    font-size: 12px;
  }
  
  .icc-preview-size,
  .icc-preview-filesize {
    font-size: 11px;
  }
  
  #icc-custom-width-input,
  #icc-custom-height-input {
    font-size: 12px;
    padding: 6px 8px;
  }
  
  .icc-mode-toggle {
    font-size: 13px;
    padding: 10px 16px;
  }
  
  .icc-mode-toggle i {
    font-size: 12px;
  }
}

/* ============================================================================
   MANUAL CROP MODAL STYLES
   ============================================================================ */

/* Modal Overlay */
.icc-crop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

/* Modal Content Container */
.icc-crop-modal-content {
  background: #2c2c2c;
  border-radius: 12px;
  max-width: 95%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Modal Header */
.icc-crop-modal-header {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icc-crop-modal-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icc-crop-modal-title p {
  margin: 5px 0 0 0;
  font-size: 14px;
  opacity: 0.9;
}

/* Close Button */
.icc-crop-modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icc-crop-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Image Container */
.icc-crop-modal-image-container {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  max-height: 600px;
  background: #1a1a1a;
}

.icc-crop-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Controls Container */
.icc-crop-modal-controls {
  padding: 20px;
  background: #1a1a1a;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Crop Buttons */
.icc-crop-btn {
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.icc-crop-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.icc-crop-btn:active {
  transform: translateY(0);
}

/* Zoom Buttons */
.icc-crop-btn-zoom {
  background: #4CAF50;
}

.icc-crop-btn-zoom:hover {
  background: #45a049;
}

/* Reset Button */
.icc-crop-btn-reset {
  background: #FF9800;
}

.icc-crop-btn-reset:hover {
  background: #f57c00;
}

/* Apply Button */
.icc-crop-btn-apply {
  background: #2196F3;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

.icc-crop-btn-apply:hover {
  background: #1976D2;
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   MANUAL CROP LABEL (for resized previews)
   ============================================================================ */

.icc-manual-crop-label {
  color: #2196F3;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin: 8px 0;
  font-size: 14px;
}

.icc-manual-crop-label i {
  font-size: 16px;
}

/*============================================================================
MODE TOGGLE UPDATES - SINGLE ROW LAYOUT
============================================================================*/
.icc-mode-toggle {
  flex: 0 0 auto; /* Don't grow/shrink - use natural width */
}

@media (min-width: 768px) {
  .icc-mode-toggle {
    min-width: 110px;
    max-width: 140px;
  }
}

/*============================================================================
MOBILE RESPONSIVE ADJUSTMENTS
============================================================================*/
@media (max-width: 768px) {
.icc-crop-modal-content {
max-width: 100%;
max-height: 95%;
}
.icc-crop-modal-header {
padding: 15px;
}
.icc-crop-modal-title h3 {
font-size: 18px;
}
.icc-crop-modal-image-container {
min-height: 300px;
max-height: 500px;
padding: 15px;
}
.icc-crop-modal-controls {
padding: 15px;
gap: 10px;
}
.icc-crop-btn {
padding: 8px 12px;
font-size: 13px;
}
.icc-crop-btn-apply {
padding: 10px 20px;
font-size: 14px;
}
.icc-mode-toggle {
flex: 1 1 calc(50% - 8px);
font-size: 13px;
padding: 8px 10px;
}
}
@media (max-width: 480px) {
.icc-crop-modal {
padding: 10px;
}
.icc-crop-modal-image-container {
min-height: 250px;
max-height: 400px;
}
.icc-crop-btn span {
display: none; /* Hide text on very small screens, keep icons */
}
.icc-mode-toggle span {
display: none; /* Same for mode toggles */
}
}
/*============================================================================
OPTIONAL: LOADING SPINNER FOR MODE TOGGLE
============================================================================*/
/*
If you don't already have styles for .icc-mode-toggle-loading,
add this to show loading state when reprocessing:
*/
.icc-mode-toggle-loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.icc-mode-toggle-loading i.fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}