/* ==============================
   Root Colors
   ============================== */
:root {
      --primary: #1c7681;
      --secondary: #f89e2f;
      --accent: #6a6c6a;
      --foreground: #404040;
      --background: #ffffff;
}

/* ==============================
   Form Container
   ============================== */
#bsafe-multi-step-form {
      font-family: Arial, sans-serif;
      background: var(--background);
      padding: 30px 40px;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      color: var(--foreground);
      z-index: 99999;
      position: relative;
}

/* ==============================
   Step Indicators
   ============================== */
.step-indicators {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px;
      position: relative;
}

.step-indicators::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 15px;
      right: 15px;
      height: 2px;
      background: #e0e0e0;
      z-index: 1;
}

.step-indicator {
      position: relative;
      z-index: 2;
      width: 32px;
      height: 32px;
      background: #e0e0e0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--background);
      transition: all 0.3s ease;
}

.step-indicator.active {
      background: var(--primary);
      transform: scale(1.2);
}

.step-indicator.completed {
      background: var(--secondary);
}

.step-indicator::after {
      content: attr(data-title);
      position: absolute;
      top: 40px;
      font-size: 0.85rem;
      color: var(--foreground);
      white-space: nowrap;
}

/* ==============================
   Form Steps
   ============================== */
.form-steps {
      position: relative;
      min-height: 250px;
}

.form-step {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translateX(50px);
      transition: all 0.5s ease-in-out;
      pointer-events: none;
}

.form-step.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      /* Stack content vertically */
      justify-content: space-between;
      /* Push button to bottom */
}

/* ==============================
   Card Styling
   ============================== */
.card {
      /* border: 1px solid #e0e0e0; */
      /* border-radius: 8px; */
      /* padding: 20px; */
      /* margin-bottom: 20px; */
      background: #fafafa;
      display: flex;
      flex-direction: column;
      /* Stack content vertically */
      justify-content: space-between;
      /* Push button to bottom */
}

/* ==============================
   Buttons
   ============================== */
button.next-step,
button.prev-step,
button[type="submit"] {
      background: var(--primary);
      color: var(--background);
      border: none;
      padding: 10px 24px;
      margin-top: 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
}

button.next-step:hover,
button.prev-step:hover,
button[type="submit"]:hover {
      background: var(--secondary);
      transform: scale(1.05);
}

/* ==============================
   Inputs, Textareas & Selects
   ============================== */
input[type="text"],
input[type="email"],
textarea,
select {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      margin-bottom: 15px;
      font-size: 1rem;
      box-sizing: border-box;
      transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 5px rgba(106, 108, 106, 0.3);
      outline: none;
}

/* ==============================
   Radio Buttons
   ============================== */
.advisor-options label {
      margin-right: 15px;
      cursor: pointer;
      font-weight: 500;
}

.advisor-options input[type="radio"] {
      margin-right: 5px;
}

/* ==============================
   Suggestions (Optional)
   ============================== */
.suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
}

.suggestions span {
      background: #e0e0e0;
      padding: 5px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.875rem;
      transition: background 0.3s, color 0.3s;
}

.suggestions span:hover {
      background: var(--primary);
      color: var(--background);
}

/* Button container */
.button-container {
      display: flex;
      margin-top: 20px;
}

/* One button */
.button-container:has(> button:only-child) {
      justify-content: flex-end;
}

/* Two buttons */
.button-container:has(> button:nth-child(2)) {
      justify-content: space-between;
}

/* Optional: spacing for more than 2 buttons */
.button-container>button {
      min-width: 100px;
}