/* FormControls Shared Styles */

/* SwitchOption Component */
.switch-option-container {
  margin-bottom: 1rem;
}

.switch-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.switch-option-control {
  flex: 1;
}

.switch-option-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.switch-option-container .tooltip-icon {
  cursor: help;
  color: #6c757d;
  transition: color 0.2s;
}

.switch-option-container .tooltip-icon:hover {
  color: #b9ff66;
}

/* SelectWithIcon Component */
.select-with-icon-wrapper {
  width: 100%;
}

.select-with-icon-wrapper .format-selection-cls {
  width: 100%;
}

/* TimerInput Component */
.timer-input-container {
  padding: 1rem;
}

.timer-input-container .timerInputs {
  width: 60px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
}

.timer-input-container .timerInputs-grp {
  justify-content: center;
}

/* ImageUploader Component */
.image-uploader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.image-uploader-label {
  font-weight: 500;
  color: #495057;
}

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

.image-preview-wrapper {
  margin-bottom: 1rem;
}

.image-preview {
  display: block;
  transition: all 0.3s ease;
}

.image-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-uploader-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.image-uploader-actions .add-edit-new-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #f5484d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: all 0.2s;
  text-decoration: none;
}

.image-uploader-actions .add-edit-new-btn:hover {
  background-color: #dc3545;
  transform: translateY(-1px);
}

.image-uploader-actions .btn-danger {
  background-color: #dc3545;
  padding: 0.5rem;
}

.image-uploader-actions .btn-danger:hover {
  background-color: #c82333;
}

/* CategoryTeamSelector Component */
.category-team-selector {
  width: 100%;
}

/* Force dark background on suggestion list */
.category-suggestion-list,
.category-team-selector .category-suggestion-list,
.category-suggestion-list.p-3.rounded.border-0 {
  background-color: rgb(33, 37, 41) !important;  /* Always dark background */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;  /* Dark mode border */
  color: #fff !important;  /* White text for dark background */
}

/* Mobile styles remain consistent */
@media (max-width: 768px) {
  .category-team-selector .category-suggestion-list {
    background-color: rgb(33, 37, 41) !important;  /* Ensure consistency on mobile */
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
}

.category-team-selector .selected-items-header {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.category-team-selector .selected-list {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  min-height: 80px;
}

.category-team-selector .cat-search-icon {
  background-color: #f8f9fa;
}

/* PaymentFeeCalculator Component */
.payment-fee-calculator {
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
}

.fee-info-section {
  background-color: #e9ecef;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}

.fee-info-section p:last-child {
  margin-bottom: 0;
}

.fee-breakdown-section {
  background-color: white;
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.fee-label {
  color: #6c757d;
}

.fee-value {
  font-weight: 500;
  color: #212529;
}

.net-amount .fee-value {
  font-size: 1.1rem;
}

.desktop-payment-logos img,
.mobile-payment-logos img {
  height: auto;
  max-height: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .switch-option-row {
    flex-wrap: wrap;
  }
  
  .switch-option-icons {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: flex-end;
  }
  
  .timer-input-container .timerInputs {
    width: 50px;
    font-size: 1rem;
  }
  
  .category-team-selector .selected-list {
    margin-top: 1rem;
  }
  
  .payment-fee-calculator {
    padding: 1rem;
  }
  
  .fee-breakdown-section {
    padding: 0.75rem;
  }
}