/**
 * ProRank Premium Toggle Design System
 * MANDATORY for all toggle elements across the plugin
 * Ensures consistent, professional appearance with bordered rows
 */

/* ============================================
   REQUIRED: Toggle Row Container
   All toggles MUST be wrapped in this container
   ============================================ */
.prorank-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  margin-bottom: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.prorank-toggle-row:hover {
  border-color: #c8c8c8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.prorank-toggle-row:last-child {
  margin-bottom: 0 !important;
}

/* Toggle Label Section (Left Side) */
.prorank-toggle-row .prorank-toggle-label {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-right: 20px !important;
}

.prorank-toggle-row .prorank-toggle-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 1.4 !important;
}

.prorank-toggle-row .prorank-toggle-description {
  font-size: 13px !important;
  color: #757575 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Toggle Switch (Right Side) */
.prorank-toggle-row .prorank-toggle-switch {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
}

/* ============================================
   Toggle Switch Component
   ============================================ */
.prorank-toggle-row input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

/* Button-based toggle - let React handle styles */
.prorank-toggle-row button.prorank-toggle-slider {
  cursor: pointer !important;
  border-radius: 13px !important;
  transition: all 0.2s ease !important;
}

/* Checked state - blue accent (matches modern design) */
.prorank-toggle-row button.prorank-toggle-slider.prorank-toggle-slider--checked {
  background-color: #0369a1 !important;
}

/* Button-based toggle slider - no pseudo-element needed, React handles thumb */
.prorank-toggle-row button.prorank-toggle-slider::before {
  display: none !important;
  content: none !important;
}

/* Disabled State */
.prorank-toggle-row.prorank-toggle-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.prorank-toggle-row.prorank-toggle-disabled .prorank-toggle-slider {
  cursor: not-allowed !important;
}

/* ============================================
   Toggle Group Container
   For sections with multiple toggles
   ============================================ */
.prorank-toggle-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 24px !important;
}

.prorank-toggle-group-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e1e1e !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* ============================================
   Premium Badge for Pro Features
   ============================================ */
.prorank-toggle-row .prorank-pro-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  margin-left: 8px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  letter-spacing: 0.5px !important;
}

/* ============================================
   Locked State for Non-Licensed Features
   ============================================ */
.prorank-toggle-row.prorank-locked {
  background-color: #f9f9f9 !important;
  border-color: #e5e5e5 !important;
}

.prorank-toggle-row.prorank-locked .prorank-toggle-switch {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.prorank-toggle-row.prorank-locked::after {
  content: "🔒" !important;
  position: absolute !important;
  right: 70px !important;
  font-size: 16px !important;
  opacity: 0.5 !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media screen and (max-width: 782px) {
  .prorank-toggle-row {
    padding: 10px 15px !important;
    min-height: 56px !important;
  }

  .prorank-toggle-row .prorank-toggle-label {
    padding-right: 15px !important;
  }

  .prorank-toggle-row .prorank-toggle-title {
    font-size: 14px !important;
  }

  .prorank-toggle-row .prorank-toggle-description {
    font-size: 12px !important;
  }
}

/* ============================================
   Card Integration
   Toggles inside ProRank cards
   ============================================ */
.prorank-card .prorank-toggle-row {
  margin-left: -20px !important;
  margin-right: -20px !important;
  width: calc(100% + 40px) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}

.prorank-card .prorank-toggle-row:first-child {
  border-top: none !important;
  margin-top: -20px !important;
}

.prorank-card .prorank-toggle-row:last-child {
  border-bottom: none !important;
  margin-bottom: -20px !important;
}

/* ============================================
   Animation Classes
   ============================================ */
@keyframes toggle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 113, 177, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 113, 177, 0);
  }
}

.prorank-toggle-row.prorank-toggle-saving .prorank-toggle-switch {
  animation: toggle-pulse 1.5s infinite !important;
}

/* ============================================
   Success/Error States
   ============================================ */
.prorank-toggle-row.prorank-toggle-success {
  border-color: #4ab866 !important;
  background-color: #f0f9f4 !important;
}

.prorank-toggle-row.prorank-toggle-error {
  border-color: #dc3545 !important;
  background-color: #fef7f7 !important;
}

/* ============================================
   Focus States for Accessibility
   ============================================ */
.prorank-toggle-row:focus-within {
  border-color: #2271b1 !important;
  box-shadow: 0 0 0 1px #2271b1 !important;
  outline: 2px solid transparent !important;
}

.prorank-toggle-row input[type="checkbox"]:focus + .prorank-toggle-slider {
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25) !important;
}

/* ============================================
   Utility Classes
   ============================================ */
.prorank-toggles-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.prorank-toggle-section {
  margin-bottom: 32px !important;
}

.prorank-toggle-section:last-child {
  margin-bottom: 0 !important;
}