/* ============================================
   1.1 - ICC CONVERT MODULE STYLES
   Format conversion specific styles
   ============================================ */

body #icc-convert-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;  /* ← CHANGED */
  padding: 0;
  z-index: 10010 !important;
}

/* Convert Buttons Container */
#icc-convert-buttons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
}

#icc-convert-buttons.icc-convert-buttons-hidden {
  display: none;
}

#icc-convert-buttons.icc-convert-buttons-visible {
  display: flex;
}

/* Format Labels and Checkboxes */
#icc-convert-buttons label,
.icc-format-label {
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
}

#icc-convert-buttons label:hover,
.icc-format-label:hover {
  background: rgba(255, 255, 255, 0.2);
}

#icc-convert-buttons input[type="checkbox"] {
  margin: 0;
  margin-right: 5px;
}

/* Toggle Button */
#icc-toggle-btn {
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 20px;
  margin: 0;
  transition: all 0.3s ease;
  font-weight: 500;
  background: var(--e-global-color-accent);
  color: #fff;
}

#icc-toggle-btn:hover {
  background: var(--e-global-color-primary);
  transform: translateY(-1px);
}

/* Responsive for Convert */
@media (max-width: 768px) {
  #icc-convert-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  #icc-convert-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
}