/* =============================================================================
   delta_stable_options.css — Options panel styles
   ============================================================================= */

.shl_opt_panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Icon picker row */
.shl_opt_icons {
  display: flex;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e8edf3;
}

.shl_opt_icon {
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  border: 2px solid transparent;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.shl_opt_icon:hover         { background: #f1f5f9; }
.shl_opt_icon_active        { border-color: #3a7abf; background: #eff6ff; }

/* Section */
.shl_opt_section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

.shl_opt_section_title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #475569;
  margin-bottom: 2px;
}

.shl_opt_label { font-size: 12px; color: #64748b; }
.shl_opt_hint  { font-size: 11px; color: #94a3b8; }

.shl_opt_input {
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid #cdd4dc;
  border-radius: 4px;
  width: 100%;
  font-family: inherit;
}

.shl_opt_input:focus {
  outline: none;
  border-color: #6a9ec4;
  box-shadow: 0 0 0 2px rgba(106,158,196,0.15);
}

.shl_opt_train_row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shl_opt_train_row .shl_opt_input { width: auto; flex: 0 0 auto; }

.shl_opt_range { font-size: 11px; color: #64748b; font-style: italic; }

.shl_opt_check_label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  line-height: 1.5;
}

.shl_opt_check_label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.shl_opt_btn_row { display: flex; gap: 6px; flex-wrap: wrap; }

.shl_opt_btn {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  color: #fff !important;
}

.shl_opt_btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

.shl_opt_btn_primary:not(:disabled):hover   { background: #1d4ed8 !important; }
.shl_opt_btn_secondary:not(:disabled):hover { background: #0e7490 !important; }
.shl_opt_btn_fire:not(:disabled):hover      { background: #c2410c !important; }
.shl_opt_btn_farm:not(:disabled):hover      { background: #4d7c0f !important; }
.shl_opt_btn_retire:not(:disabled):hover    { background: #6d28d9 !important; }
.shl_opt_btn_geld:not(:disabled):hover      { background: #9d174d !important; }

.shl_opt_btn_primary   { background: #2563eb !important; }
.shl_opt_btn_secondary { background: #0891b2 !important; }
.shl_opt_btn_fire      { background: #ea580c !important; }
.shl_opt_btn_farm      { background: #65a30d !important; }
.shl_opt_btn_retire    { background: #7c3aed !important; }
.shl_opt_btn_geld      { background: #be185d !important; }

.shl_opt_warn {
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 5px 8px;
}

.shl_opt_warn_block { color: #7f1d1d; background: #fee2e2; }

.shl_opt_result {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
}

.shl_opt_result_ok   { color: #2a6a2a; background: #eaf5ea; }
.shl_opt_result_fail { color: #8a1f1f; background: #fdeaea; }


/* =============================================================================
   delta_stable_raceselect.css — Race selector styles
   ============================================================================= */

.shl_rs_loading {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  padding: 8px 0;
}

.shl_rs_form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.shl_rs_row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shl_rs_label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
}

.shl_rs_checks {
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.shl_rs_confirm_btn {
  margin-top: 4px;
  width: 100% !important;
}

/* Constrain selects to max 480px, responsive */
.shl_rs_select {
  max-width: 480px !important;
  width: 100% !important;
}

/* Back + confirm button row */
.shl_rs_btn_row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.shl_rs_back_btn {
  flex: 0 0 auto !important;
  width: auto !important;
  background: #64748b !important;
}

.shl_rs_back_btn:hover {
  background: #475569 !important;
}

.shl_rs_confirm_btn {
  flex: 1 1 auto !important;
}

/* Cost display */
.shl_rs_cost {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  background: #f1f5f9;
  border: 1px solid #dde3eb;
  border-radius: 4px;
  padding: 8px 12px;
  text-align: center;
}

.shl_rs_cost strong {
  font-size: 18px;
  color: #15803d;
}