/* General input & textarea styling */
.mof-cake-form input[type="text"],
.mof-cake-form input[type="email"],
.mof-cake-form input[type="tel"],
.mof-cake-form textarea,
.mof-cake-form select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  outline: none;
  height: auto;
  font-size: 15px;
}

/* On focus */
.mof-cake-form input[type="text"]:focus,
.mof-cake-form input[type="email"]:focus,
.mof-cake-form input[type="tel"]:focus,
.mof-cake-form textarea:focus,
.mof-cake-form select:focus {
  border-color: #CB4550;   /* professional blue */
  box-shadow: 0 0 5px rgb(255 0 0 / 8%);
}

/* Label styling */
.mof-cake-form label,
.mof-cake-form select {
  display: block;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
}
.mof-cake-form label{
  font-weight: 600;
}
.mof-cake-form .ui_tpicker_minute_slider select.ui-timepicker-select {

}

.ui-state-default, .ui-widget-content .ui-state-default {
  padding: 0 12px;
  height: auto;
}

span.required {
  color: #E01020;
}

/* Textarea height */
.mof-cake-form textarea {
  resize: vertical;
  min-height: 70px !important;
}

/* Submit button */

.mof-cake-form input[type="submit"],
.mof-cake-form button[type="submit"] {
  background-color: #CB4550;   /* primary blue */
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;   /* full width, remove if you want inline size */
  box-shadow: 0 0 5px rgb(255 0 0 / 8%);
}

/* Hover effect */
.mof-cake-form input[type="submit"]:hover,
.mof-cake-form button[type="submit"]:hover {
  background-color: #CB4550; /* darker blue */
  box-shadow: 0 0 5px rgb(255 0 0 / 8%);
}

/* Active (clicked) effect */
.mof-cake-form input[type="submit"]:active,
.mof-cake-form button[type="submit"]:active {
  background-color: #CB4550;
  transform: scale(0.98);
}

.col-one,
.col-two {
    margin-bottom: 15px;
}
.col-two {
  display: flex;
  flex-direction: row;
  flex: 100%;
  gap: 24px; /* adjust as you like */
}

.col-two > div {
  flex: 1; /* each child div takes equal space */
}

.mof-submit {
  max-width: 300px;
  margin: 35px auto 0 auto;
  display: block;
}

@media (max-width: 1024px) {
    .col-two {
        flex-direction: column;
        gap: 15px;
    }
    .mof-submit {
      margin: 0;
      display: inline
    }
}