/* ===========================
   Page Layout
   =========================== */
.page-content {
  background-image: url('../images/bg.jpg');
}

.page-content > div {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
}

/* ===========================
   Card / Form Container
   =========================== */
.form-card {
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  min-width: 360px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ===========================
   Wizard Header
   =========================== */
.wizard-header {
  /* inherits from existing class */
}

.wizard-header .heading {
  /* h3 inside wizard-header */
}

/* ===========================
   Progress Bar
   =========================== */
#progress-bar {
  display: flex;
  margin-bottom: 30px;
}

#step-progress-1,
#step-progress-2,
#step-progress-3,
#step-progress-4,
#step-progress-5,
#step-progress-6 {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
}

#step-progress-1 {
  background: #4CAF50;
}

#step-progress-2,
#step-progress-3,
#step-progress-4,
#step-progress-5,
#step-progress-6 {
  background: #ddd;
}

/* ===========================
   Steps
   =========================== */
#step-1 {
  display: block;
}

#step-2,
#step-3,
#step-4,
#step-5,
#step-6 {
  display: none;
}

/* ===========================
   Option Boxes
   =========================== */
.option-box-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

/* Style .option-box as needed — add your own styling here */
.option-box {
  cursor: pointer;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  transition: background 0.2s, border-color 0.2s;
}

.option-box:hover {
  background: #f0f8ff;
  border-color: #4CAF50;
}

/* ===========================
   Step Navigation Rows
   =========================== */
.step-nav {
  display: flex;
  justify-content: space-between;
}

/* Input group styles are in the inline <style> block in index.html
   to guarantee cascade priority over all external stylesheets. */

/* ===========================
   Privacy Notice
   =========================== */
.privacy-notice {
  font-size: 13px;
  color: #555;
  text-align: center;
  margin-bottom: 15px;
}

.privacy-notice a {
  color: #007BFF;
  text-decoration: none;
}

/* ===========================
   Buttons
   =========================== */
.prev-btn,
.next-btn {
  /* Add your button styles here */
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.prev-btn {
  background: #ddd;
  color: #333;
}

.next-btn {
  background: #4CAF50;
  color: #fff;
}

@media (max-width: 575px) {
  .form-card {
    min-width: 90%;
    max-width: 100%;
    padding: 20px;
    border-radius: 8px;
  }
  .page-content > div{
    width: 100%;
  }
}