/* General Form Container */
.msbf-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Roboto', sans-serif;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Header Styling */
.form-header {
    margin-bottom: 70px !important;
    text-align: center;
    
    margin-bottom: 30px;
}

/* Progress Bar */
.progress-container {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin: 30px auto;
      max-width: 600px;
    }

    .progress-container::before {
      content: '';
      background-color: #dcdcdc;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      z-index: 0;
      transform: translateY(-50%);
    }

    .progress-step {
      width: 40px;
      height: 40px;
      background: #dcdcdc;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      transition: background 0.3s, color 0.3s;
    }

    .progress-step.active {
      background: #2196F3;
      color: white;
    }

    .progress-step.completed {
      background: #4CAF50;
      color: white;
    }

    .progress-step::after {
      content: attr(data-title);
      position: absolute;
      top: 50px;
      font-size: 13px;
      color: #333;
      transform: translateX(-50%);
      left: 50%;
    }

    .form-steps {
      max-width: 600px;
      margin: 30px auto;
    }

    .step-content {
      display: none;
    }

    .step-content.active {
      display: block;
    }

    .buttons {
      text-align: center;
      margin-top: 20px;
    }

    .player-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #f9f9f9;
}

.player-box h4 {
  margin: 0 0 6px;
  font-size: 16px;
}

.checkbox-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}


    button {
      padding: 10px 20px;
      background: #2196F3;
      border: none;
      color: white;
      cursor: pointer;
      margin: 0 10px;
      border-radius: 4px;
    }

    button:disabled {
      background: #999;
      cursor: not-allowed;
    }

/* Step Container Styling */
.step-container {
    display: none;
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Input Fields */
.input-field {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f9f9f9;
}

.input-field:focus {
    border-color: #4CAF50;
}

/* Button Styling */
button {
    padding: 12px 20px;
    font-size: 1rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Navigation Buttons */
.step-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prev-btn {
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ddd;
}

.prev-btn:hover {
    background-color: #e0e0e0;
}

.next-btn {
    background-color: #d43f8d;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.next-btn:hover {
    background-color: #c0357d;
}

/* Time Slot Container */
#time-slot-container {
    margin-top: 20px;
}

#booking-time {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f9f9f9;
}

#booking-time:focus {
    border-color: #4CAF50;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .msbf-container {
        padding: 20px;
    }

    .form-header {
        font-size: 1.5rem;
    }

    .step .bullet {
        width: 30px;
        height: 30px;
    }

    .step p {
        font-size: 0.8rem;
    }

    .input-field {
        font-size: 14px;
    }

    button {
        font-size: 14px;
    }

    .step-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .prev-btn,
    .next-btn {
        width: 100%;
    }

    .form-outer form .page {
        width: 100%;
        padding: 10px;
    }

    .container {
        width: 95%;
        padding: 20px;
    }
}

/* Progress bar connecting lines */
.progress-container {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin: 5% auto;
      max-width: 600px;
    }

    .progress-container::before {
      content: '';
      background-color: #dcdcdc;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      z-index: 0;
      transform: translateY(-50%);
    }

    .progress-step {
      width: 40px;
      height: 40px;
      background: #dcdcdc;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      transition: background 0.3s, color 0.3s;
    }

    .progress-step.active,
    .progress-step.completed {
      background: #4CAF50;
      color: #fff;
    }

    .progress-step::after {
      content: attr(data-title);
      position: absolute;
      top: 50px;
      font-size: 13px;
      color: #666;
      width: max-content;
      transform: translateX(-50%);
    }

    .progress-step.completed::before {
      content: '✓';
    }

/* FontAwesome Icon Styling for Steps */
.step .bullet {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', sans-serif;
    font-weight: 900; /* Ensures icon is bold */
}

.step .bullet i {
    font-size: 18px; /* Icon Size */
}

/* Adding Font Awesome icons to steps */
.step:nth-child(1) .bullet i {
    content: "\f1b2"; /* Service icon */
}
.step:nth-child(2) .bullet i {
    content: "\f017"; /* Clock icon for Time */
}
.step:nth-child(3) .bullet i {
    content: "\f0c0"; /* User icon for Details */
}
.step:nth-child(4) .bullet i {
    content: "\f09d"; /* Credit Card icon for Payment */
}
.step:nth-child(5) .bullet i {
    content: "\f00c"; /* Checkmark icon for Confirmation */
}