/* select-column.css */

/*───────────────────────────────────────────────────────────────────────────────
  Form container
───────────────────────────────────────────────────────────────────────────────*/
.select-column-form {
  /* local radius for inputs/buttons */
  --select-column-radius: 0.5rem;

  overflow-y: auto;
  max-height: 75vh;
  padding:            1.5rem;
  background-color:   var(--card-bg-color);
  border:             1px solid var(--card-border-color);
  border-radius:      var(--select-column-radius);
  box-shadow:         0 2px 4px rgba(var(--shadow-rgb), 0.1);
}

/*───────────────────────────────────────────────────────────────────────────────
  Heading
───────────────────────────────────────────────────────────────────────────────*/
.select-column-heading {
  font-size:      1.75rem;
  font-weight:    600;
  color:          var(--text-color);
  margin-bottom:  1.5rem;
  text-align:     center;
}

/*───────────────────────────────────────────────────────────────────────────────
  Individual option (radio + label)
───────────────────────────────────────────────────────────────────────────────*/
.select-column-option {
  display:       flex;
  align-items:   center;
  margin-bottom: 1rem;
}

/*───────────────────────────────────────────────────────────────────────────────
  Radio input
───────────────────────────────────────────────────────────────────────────────*/
.select-column-input {
  margin-right:   0.75rem;
  width:          1rem;
  height:         1rem;
  accent-color:   var(--color-primary);
  cursor:         pointer;
}

/*───────────────────────────────────────────────────────────────────────────────
  Label
───────────────────────────────────────────────────────────────────────────────*/
.select-column-label {
  font-size:    1.125rem;
  color:        var(--text-color);
  cursor:       pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*───────────────────────────────────────────────────────────────────────────────
  Hidden fallback submit
───────────────────────────────────────────────────────────────────────────────*/
.select-column-btn-hidden {
  display: none;
}

/*───────────────────────────────────────────────────────────────────────────────
  Primary action button
───────────────────────────────────────────────────────────────────────────────*/
.select-column-btn-primary {
  background-color:    var(--button-bg-color);
  color:               var(--button-text-color);
  border:              1px solid var(--button-border-color);
  padding:             0.75rem 1.5rem;
  font-size:           1rem;
  border-radius:       calc(var(--select-column-radius) / 2);
  cursor:              pointer;
  transition:          background-color 0.3s ease, color 0.3s ease;
}
.select-column-btn-primary:hover,
.select-column-btn-primary:focus {
  background-color:    var(--button-hover-color);
  color:               var(--button-hover-text-color);
}

/*───────────────────────────────────────────────────────────────────────────────
  Secondary (skip) button
───────────────────────────────────────────────────────────────────────────────*/
.select-column-btn-secondary {
  background-color:    var(--secondary-bg-color);
  color:               var(--button-text-color);
  border:              1px solid var(--secondary-border-color);
  padding:             0.75rem 1.5rem;
  font-size:           1rem;
  border-radius:       calc(var(--select-column-radius) / 2);
  cursor:              pointer;
  margin-top:          1rem;
  transition:          background-color 0.3s ease, color 0.3s ease;
}
.select-column-btn-secondary:hover,
.select-column-btn-secondary:focus {
  background-color:    var(--secondary-hover-color);
  color:               var(--secondary-hover-text-color);
}


.select-column-form::-webkit-scrollbar {
  width: 6px;
}
.select-column-form::-webkit-scrollbar-thumb {
  background: rgba(var(--scrollbar-thumb-rgb), var(--scrollbar-thumb-alpha));
  border-radius: 3px;
}