/* ===== CONFIGURATOR FORM STYLES ===== */

/* ===== UTILITY CLASSES ===== */

/* Hidden Class Utility */
.hidden {
  display: none !important;
}

/* Custom Hidden Classes */
.hidden-cpu-selected {
  display: none;
}

.hidden-input {
  display: none !important;
}

/* Form Note Utility */
.form-note {
  font-size: 0.9em;
  color: var(--black-soft-color, #7e7e7e);
}

/* Button Styles */
.stepper-btn {
  border-radius: var(--border-radius, 15px);
  background-color: var(--body-color, #f3f3f7);
  border: 1px solid var(--border-color, #232323);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.stepper-btn:hover {
  background-color: var(--gray-color, #f2f2f7);
  transform: scale(1.05);
}

/* Secondary CPU Section */
#secondary-cpu-section {
  margin-top: 25px;
}

#secondary-cpu-section .secondary-cpu-toggle-buttons {
  display: flex;
  gap: 12px;
}

#secondary-cpu-section .secondary-cpu-toggle-buttons label {
  flex: 1;
  margin: 0;
}

#secondary-cpu-section .secondary-cpu-toggle-buttons .secondary-cpu-toggle-btn {
  width: 100%;
  margin: 0;
}

#secondary-cpu-section .secondary-cpu-toggle-btn[data-choice="no"] {
  opacity: 0.7;
}

/* Secondary CPU Configuration */
#secondary-cpu-config {
  margin-top: 25px;
}

#secondary-cpu-config.hidden {
  display: none;
}

/* Disk Size Container */
#disk-size-container {
  margin-top: 25px;
}

#disk-size-container.hidden {
  display: none;
}

/* Disk Stepper Container */
#disk-stepper-container {
  margin-top: 25px;
}

#disk-stepper-container.hidden {
  display: none;
}

/* Disk RAID Container */
#disk-raid-container {
  margin-top: 25px;
}

#disk-raid-container.hidden {
  display: none;
}

/* Disk System Checkbox Container */
#disk-system-checkbox-container {
  margin-top: 25px;
}

#disk-system-checkbox-container.hidden {
  display: none;
}

/* Secondary Disk Section */
#secondary-disk-section {
  margin-top: 35px;
}

/* Secondary Disk Configuration */
#secondary-disk-config {
  margin-top: 25px;
}

#secondary-disk-config.hidden {
  display: none;
}

/* Secondary Disk Size Container */
#secondary-disk-size-container {
  margin-top: 25px;
}

#secondary-disk-size-container.hidden {
  display: none;
}

/* Secondary Disk Stepper Container */
#secondary-disk-stepper-container {
  margin-top: 25px;
}

#secondary-disk-stepper-container.hidden {
  display: none;
}

/* Secondary Disk RAID Container */
#secondary-disk-raid-container {
  margin-top: 25px;
}

#secondary-disk-raid-container.hidden {
  display: none;
}

/* Secondary Disk System Checkbox Container */
#secondary-disk-system-checkbox-container {
  margin-top: 25px;
}

#secondary-disk-system-checkbox-container.hidden {
  display: none;
}

/* RAM Type Container */
#ram-type-container {
  margin-top: 0;
}

#ram-type-container.hidden {
  display: none;
}

/* RAM Slider Container */
#ram-slider-container {
  margin-top: 25px;
}

#ram-slider-container.hidden {
  display: none;
}

/* Extras 3-Way Grid */
.extras-3way-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.extras-checkbox {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding: 15px;
  border: 2px solid var(--border-color, #232323);
  border-radius: var(--border-radius, 15px);
  transition: all 0.3s ease;
}

.extras-checkbox:hover {
  background-color: var(--gray-color, #f2f2f7);
  border-color: var(--theme-color, #0f141b);
}

.extras-checkbox input:checked + .checkbox-content {
  color: var(--theme-color, #0f141b);
}

/* Extra IPs Section */
.extra-ips-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  justify-content: space-between;
}

.extra-ips-value {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.extra-ips-display-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#extra-ips-display {
  font-size: 28px;
  font-weight: 700;
  color: var(--theme-color, #0f141b);
}

.extra-ips-label {
  font-size: 14px;
  color: var(--black-soft-color, #7e7e7e);
}

#extra-ips-price {
  font-size: 12px;
  color: var(--theme-color, #0f141b);
  font-weight: 600;
}

/* Support Package Subsection */
.support-package-subsection {
  margin-top: 25px;
}

/* DDoS Subsection */
.ddos-subsection {
  margin-top: 25px;
}

/* Extra IPs Subsection */
.extra-ips-subsection {
  margin-top: 25px;
}

/* OS Models Container */
#os-models-container {
  margin-top: 25px;
}

#os-models-container.hidden {
  display: none;
}

/* OS Panel Container */
#os-panel-container {
  margin-top: 25px;
}

#os-panel-container.hidden {
  display: none;
}

/* OS Panel Subsection Title */
#os-panel-container .subsection-title {
  margin-top: 0;
}

/* Configurator Section Styles */
.config-section-lock-overlay {
  border-radius: var(--border-radius, 15px);
}

.config-option-card {
  border-radius: var(--border-radius, 15px);
}

.config-checkbox {
  border-radius: var(--border-radius, 15px);
}

/* Input and Select Styles */
.form-control {
  border-radius: var(--border-radius, 15px) !important;
  border-color: var(--border-color, #232323) !important;
  background-color: var(--white-color, #fff) !important;
}

/* Submit Button */
.mata-btn-success {
  background-color: #10b981 !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: var(--border-radius, 15px) !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.mata-btn-success:hover {
  background-color: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.mata-btn-success:active {
  transform: translateY(0) !important;
}