/*
 * modern-forms.css — All form inputs, selects, buttons globally
 */

/* === FORM CONTROLS === */
.form-control {
  font-family: var(--re-font) !important;
  font-size: 14px !important;
  border: 1.5px solid var(--re-border) !important;
  border-radius: var(--re-radius-sm) !important;
  background: var(--re-card) !important;
  color: var(--re-text-primary) !important;
  height: 38px !important;
  padding: 8px 12px !important;
  transition: border-color var(--re-transition-base), box-shadow var(--re-transition-base) !important;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: var(--re-primary) !important;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10) !important;
  outline: none !important;
  background: var(--re-card) !important;
}
.form-control::placeholder { color: var(--re-text-muted) !important; font-weight: 400 !important; }

textarea.form-control { height: auto !important; min-height: 90px; }
select.form-control {
  padding-right: 28px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* Form labels */
.control-label,
label {
  font-family: var(--re-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--re-text-muted) !important;
  margin-bottom: 5px !important;
}

/* Input group */
.input-group-addon {
  background: var(--re-surface) !important;
  border: 1.5px solid var(--re-border) !important;
  color: var(--re-text-muted) !important;
  font-family: var(--re-font) !important;
  font-size: 13px !important;
  border-radius: var(--re-radius-sm) !important;
}
.input-group .form-control:first-child { border-radius: var(--re-radius-sm) 0 0 var(--re-radius-sm) !important; }
.input-group .form-control:last-child  { border-radius: 0 var(--re-radius-sm) var(--re-radius-sm) 0 !important; }
.input-group-btn:last-child > .btn     { border-radius: 0 var(--re-radius-sm) var(--re-radius-sm) 0 !important; }
.input-group-btn:first-child > .btn    { border-radius: var(--re-radius-sm) 0 0 var(--re-radius-sm) !important; }

/* === BUTTONS === */
.btn {
  font-family: var(--re-font) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: var(--re-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all var(--re-transition-base) !important;
  letter-spacing: 0.2px !important;
  border: none !important;
  cursor: pointer !important;
}

.btn-primary {
  background: var(--re-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,58,95,0.25) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--re-primary-hover) !important;
  box-shadow: 0 4px 16px rgba(30,58,95,0.35) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active { transform: scale(0.99) !important; }

/* CTA / accent button */
.btn-success,
.btn[class*="btn-show"],
#search_trains {
  background: var(--re-accent) !important;
  border-color: var(--re-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(244,128,26,0.30) !important;
  font-weight: 700 !important;
}
.btn-success:hover,
#search_trains:hover {
  background: var(--re-accent-hover) !important;
  border-color: var(--re-accent-hover) !important;
  box-shadow: 0 4px 16px rgba(244,128,26,0.40) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-default {
  background: var(--re-card) !important;
  border: 1.5px solid var(--re-border) !important;
  color: var(--re-text-secondary) !important;
}
.btn-default:hover {
  background: var(--re-surface) !important;
  border-color: var(--re-primary) !important;
  color: var(--re-primary) !important;
}

.btn-info {
  background: var(--re-info) !important;
  border-color: var(--re-info) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--re-danger) !important;
  border-color: var(--re-danger) !important;
  color: #fff !important;
}

.btn-sm { padding: 5px 12px !important; font-size: 12.5px !important; }
.btn-xs { padding: 3px 8px  !important; font-size: 11.5px !important; }
.btn-lg { padding: 11px 24px !important; font-size: 15px !important; }

/* Icon button */
.btn .fa, .btn .gi { margin-right: 5px; }

/* === DATEPICKER === */
.datepicker {
  border-radius: var(--re-radius-md) !important;
  border: 1px solid var(--re-border) !important;
  box-shadow: var(--re-shadow-md) !important;
  font-family: var(--re-font) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: var(--re-primary) !important;
  background-image: none !important;
  border-color: var(--re-primary-hover) !important;
}
.datepicker table tr td:hover { background: var(--re-accent-light) !important; }
.datepicker table tr th.switch { font-family: var(--re-font) !important; font-weight: 700 !important; }
.datepicker-dropdown { z-index: 1200 !important; }

/* === AUTOCOMPLETE === */
.ui-autocomplete {
  background: var(--re-card) !important;
  border: 1px solid var(--re-border) !important;
  border-radius: var(--re-radius-md) !important;
  box-shadow: var(--re-shadow-md) !important;
  padding: 4px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  font-family: var(--re-font) !important;
  z-index: 9999 !important;
}
.ui-menu-item {
  padding: 0 !important;
}
.ui-menu-item a, .ui-menu-item .ui-menu-item-wrapper {
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  border-radius: var(--re-radius-sm) !important;
  cursor: pointer !important;
  color: var(--re-text-primary) !important;
  font-family: var(--re-font) !important;
  display: block !important;
}
.ui-menu-item a:hover,
.ui-state-focus,
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: var(--re-surface) !important;
  color: var(--re-primary) !important;
  border: none !important;
}

/* Station exchange icon */
.fa-exchange { color: var(--re-accent) !important; }

/* Show trains button */
#search_trains {
  white-space: nowrap;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
}

/* Responsive */
@media (max-width: 767px) {
  .btn { padding: 9px 16px !important; }
}