/* Base container styling with CSS Grid */
.fare-calculator {
  margin: 0px !important;
  padding: 0px !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  gap: 20px; /* Space between columns */
}

/* Step/section styling */
.fare-calculator-step-1 {
  padding: 0 15px 20px 15px;
}

/* Fieldset styling */
.fare-calculator fieldset {
  position: relative;
  border: none;
  padding: 10px 0; /* Reduced padding for tighter layout */
}

/* Legend styling */
.fare-calculator legend {
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  display: block; /* Changed to block for better spacing */
  padding-top: 10px;
}

/* Label styling */
.fare-calculator label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 0 2px 25px;
  font-size: 13px;
  letter-spacing: 0em;
  text-transform: none;
  margin: 0;
  font-weight: normal;
}

/* Step title styling */
.fare-calculator-step-title {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
  color: #3a3740;
  text-transform: capitalize;
  margin: 20px 0 10px 0;
}

/* Step circle styling */
.fare-calculator-step-circle {
  background: #e90c2b;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  padding-top: 2px;
  margin-right: 10px;
  display: inline-block;
}

/* Select dropdown styling */
.fare-calculator select {
  width: 100%;
  padding: 8px;
  font-size: 15px;
  border: 1px solid #c2c2c2;
  background-color: #fff;
  cursor: pointer;
  font-weight: 700;
  border-radius: 0px !important;
}

#start_station option,
#end_station option,
#ticket_type option {
  color: #656260;
}

/* Focus state for select */
.fare-calculator select:focus {
  border: 1px solid #e90c2b;
  outline: none;
}

/* Optgroup styling for all labels */
.fare-calculator optgroup {
  color: #2f3a8a; /* Dark blue for Hartford Line, Metro-North, and Shore Line East labels */
  font-weight: 600;
}

/* Disabled select options styling */
.fare-calculator select#ticket_type option:disabled {
  background-color: #c0c0c0;
  color: #666;
}

/* Checkbox styling */
.fare-calculator input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.fare-calculator .fare-calculator-checkbox {
  position: absolute;
  top: 10px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #3a3742;
}

.fare-calculator .fare-calculator-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

.fare-calculator label input:checked ~ .fare-calculator-checkbox {
  background-color: #fff;
}

.fare-calculator label input:checked ~ .fare-calculator-checkbox:after {
  display: block;
}

.fare-calculator label .fare-calculator-checkbox:after {
  left: 4px;
  top: 0px;
  width: 7px;
  height: 12px;
  border: solid #3a3742;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Disabled checkbox styling */
.fare-calculator
  label
  input[type="checkbox"]:disabled
  ~ .fare-calculator-checkbox {
  background-color: #c0c0c0;
  border-color: #999;
  cursor: not-allowed;
}

.fare-calculator-error-message {
  background: #fff;
  padding: 15px;
  color: #3a3740;
  font-size: 15px;
  margin-top: 20px;
}

/* Fare estimate styling */
.fare-calculator-estimate {
  background-color: #fff;
  padding: 25px 15px;
  text-align: center;
}

/* Fare estimate heading */
.fare-calculator-estimate h3 {
  font-size: 14px;
  font-weight: 800;
  color: #e90c2b;
  margin-bottom: 0px !important;
  float: left;
}

/* Fare price styling */
.fare-calculator-price {
  font-size: 50px;
  font-weight: 900;
  color: #e90c2b;
  margin: 0 !important;
  clear: left;
  text-align: left;
}

p#fareAmount {
  line-height: 70px;
}

/* Disclaimer styling */
.fare-calculator-disclaimer {
  font-size: 11px;
  color: #3a3740;
  text-align: left;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .fare-calculator {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
    padding: 10px;
    margin-right: -30px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1370px) {
  .fare-calculator {
    padding: 0;
    margin-right: -30px;
  }
}

/* New Mobile Styling */
@media only screen and (min-width: 991px) {
  .fare-calculator label {
    padding: 13px 0 2px 25px;
  }

  .fare-calculator-step-1 {
    padding: 0 15px 0 15px;
  }

  .fare-calculator-estimate {
    padding: 0px;
  }

  .fare-calculator-estimate {
    padding: 5px 15px;
  }
}

.fare-calculator-group-options {
  margin-top: 10px;
}
.fare-calculator-group-options fieldset {
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  border: 1px solid #ccc;
}
.fare-calculator-group-options legend {
  font-size: 14px;
  font-weight: 600;
}
.fare-calculator-group-options ul.basic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fare-calculator-group-options ul.basic-list li {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.fare-calculator-group-options ul.basic-list li span {
  margin-left: 10px;
}
.fare-calculator-group-options input[type="number"] {
  width: 60px;
  padding: 5px;
  border: 1px solid #3a3742;
  border-radius: 4px;
}
.fare-calculator-group-options p {
  margin: 10px 0;
}
.fare-calculator-group-options p[style*="color: red"] {
  font-weight: bold;
  color: red;
}

span.k-widget.k-dropdown {
  margin-top: 10px;
}

span.k-input {
  font-weight: 900;
  color: #2c2c2c !important;
}

.k-dropdown-wrap .k-select::focus {
  color: red !important;
}

.k-dropdown.k-state-focused,
.k-dropdown-wrap.k-state-focused {
  border: 1px solid red !important;
}

.k-state-selected, .k-popup .k-list .k-item>.k-group,.k-list>.k-state-selected.k-state-focused {
  color: #ea0d2a;
}  

.k-dropdown-wrap .k-select {
  width: 10%;
}

.k-list .k-item {
  font-weight: bold;
}

.k-list-optionlabel {
  font-size: 18px;
  font-weight: 700;
}

.k-popup > .k-group-header {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.9;
  font-size: 15px;
  font-family: futura-pt, sans-serif;
}

.k-fieldselector .k-list .k-item,
.k-popup .k-list .k-item,
.k-popup > .k-group-header li {
  font-family: "Muli", sans-serif;
  line-height: 27px;
}
li.k-item.k-first {
  display: block !important;
  padding-top: 25px !important;
}

.fare-calculator {
  display: flex;
  flex-direction: row;
}

.fare-calculator-column {
  flex: 1;
}

/* Mobile styles */
@media (max-width: 768px) {
  .fare-calculator {
    flex-direction: column; /* stack vertically */
  }

  .fare-calculator-column:nth-child(3) {
    order: 0; /* Show fare result first */
  }

  .fare-calculator-column:nth-child(1) {
    order: 1;
  }

  .fare-calculator-column:nth-child(2) {
    order: 2;
  }
}