/* ========================================
   STEP 2 - YEARLY TURNOVER SELECTION
   ======================================== */

.acsm-wizard-container .step2-container {
  padding: var(--spacing-xl) 0 !important;
}

.acsm-wizard-container .turnover-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-md) !important;
  margin-bottom: var(--spacing-lg) !important;
}

.acsm-wizard-container .turnover-option {
  background-color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  cursor: pointer !important;
  transition: all var(--transition-normal) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
  position: relative !important;
  text-align: center !important;
  box-shadow: var(--shadow-card) !important;
}

.acsm-wizard-container .turnover-option:hover {
  background-color: var(--color-primary-lighter) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12) !important;
}

.acsm-wizard-container .turnover-option:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), var(--shadow-card) !important;
}

.acsm-wizard-container .turnover-option.selected {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 40px 0 rgba(124, 58, 237, 0.2) !important;
}

.acsm-wizard-container .turnover-option.selected:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Hidden radio input for accessibility */
.acsm-wizard-container .turnover-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Grid layout variations for different rows */
.turnover-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  width: 100%;
  justify-content: flex-start;
}

.turnover-row:not(:last-child) {
  margin-bottom: 0;
}

/* All rows - flexible items */
.turnover-row .turnover-option {
  flex: 0 1 auto;
}

/* Navigation Button Disabled States */
.acsm-wizard-container #step2 .btn-next:disabled {
  background-color: var(--color-primary) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  transform: none !important;
}

.acsm-wizard-container #step2 .btn-next:disabled:hover {
  background-color: var(--color-primary) !important;
  opacity: 0.5 !important;
  transform: none !important;
}

.acsm-wizard-container #step2 .btn-back:disabled {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ========================================
   RESPONSIVE STYLES FOR STEP 2
   ======================================== */

@media (max-width: 992px) {
  .turnover-row {
    gap: var(--spacing-sm);
  }

  .turnover-option {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 768px) {
  .step2-container {
    padding: var(--spacing-lg) 0;
  }

  .turnover-grid {
    gap: var(--spacing-sm);
  }

  .turnover-row {
    gap: var(--spacing-sm);
  }

  .turnover-option {
    flex: 1 1 calc(50% - var(--spacing-sm));
    min-width: 140px;
    text-align: center;
    white-space: normal;
    padding: var(--spacing-md);
  }
}

@media (max-width: 576px) {
  .step2-container {
    padding: var(--spacing-md) 0;
  }

  .turnover-option {
    flex: 1 1 calc(50% - var(--spacing-xs));
    min-width: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 400px) {
  .turnover-option {
    flex: 1 1 100%;
    min-width: 100%;
  }
}