/* LP Forms: custom dropdowns, location autocomplete, form sections */

/* ----- Form sections ----- */
.lp-form-section { margin-bottom: 28px; }
.lp-form-section-title {
  font-size: 13px; font-weight: 600; color: #4D73FC; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 8px;
}
.lp-form-section-title i { opacity: 0.9; }

/* ----- Input with icon ----- */
.lp-input-wrap { position: relative; }
.lp-input-wrap .lp-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; font-size: 16px; pointer-events: none; z-index: 1;
}
.lp-input-wrap .lp-form-input { padding-left: 42px; }

/* ----- Custom Select (replaces native <select>) ----- */
.custom-select { position: relative; width: 100%; }
.custom-select-trigger {
  width: 100%; padding: 12px 40px 12px 14px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 15px; color: #1a1a1a; background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-select-trigger .custom-select-label { flex: 1; text-align: left; }
.custom-select-trigger .custom-select-label.placeholder { color: #9ca3af; }
.custom-select-trigger .fa-chevron-down { color: #6b7280; font-size: 12px; transition: transform 0.2s; flex-shrink: 0; }
.custom-select.open .custom-select-trigger { border-color: #4D73FC; box-shadow: 0 0 0 3px rgba(77,115,252,0.12); }
.custom-select.open .custom-select-trigger .fa-chevron-down { transform: rotate(180deg); }
.custom-select-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 100;
  max-height: 240px; overflow-y: auto; display: none;
}
.custom-select.open .custom-select-dropdown { display: block; }
.custom-select-option {
  padding: 12px 14px; font-size: 15px; color: #1a1a1a; cursor: pointer;
  transition: background 0.15s; border-bottom: 1px solid #f3f4f6;
}
.custom-select-option:last-child { border-bottom: none; }
.custom-select-option:hover, .custom-select-option.highlight { background: #eff6ff; color: #1e3c72; }
.custom-select-option.selected { background: rgba(77,115,252,0.1); color: #4D73FC; font-weight: 500; }

/* ----- Location Autocomplete ----- */
.location-autocomplete { position: relative; width: 100%; }
.location-autocomplete .lp-form-input { padding-right: 36px; }
.location-autocomplete .location-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 15px; pointer-events: none; }
.location-autocomplete .lp-form-input { padding-left: 40px; }
.location-autocomplete .location-loading {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: 2px solid #e5e7eb; border-top-color: #4D73FC;
  border-radius: 50%; animation: lp-spin 0.7s linear infinite; display: none;
}
.location-autocomplete.loading .location-loading { display: block; }
@keyframes lp-spin { to { transform: translateY(-50%) rotate(360deg); } }
.location-autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 100;
  max-height: 260px; overflow-y: auto; display: none; list-style: none; margin: 0; padding: 0;
}
.location-autocomplete.open .location-autocomplete-list { display: block; }
.location-autocomplete-item {
  padding: 12px 14px; font-size: 14px; color: #1a1a1a; cursor: pointer;
  border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px; transition: background 0.15s;
}
.location-autocomplete-item:last-child { border-bottom: none; }
.location-autocomplete-item:hover { background: #eff6ff; }
.location-autocomplete-item .ac-code { font-weight: 600; color: #4D73FC; min-width: 36px; }
.location-autocomplete-item .ac-city { font-weight: 500; color: #1a1a1a; }
.location-autocomplete-item .ac-detail { font-size: 12px; color: #6b7280; }
.location-autocomplete-empty { padding: 16px 14px; font-size: 14px; color: #6b7280; text-align: center; }

/* ----- Extras as chips ----- */
.lp-form-extras { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-form-extra {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px;
  cursor: pointer; transition: all 0.2s;
}
.lp-form-extra:hover { border-color: rgba(77,115,252,0.4); background: #eff6ff; }
.lp-form-extra input { width: 18px; height: 18px; accent-color: #4D73FC; cursor: pointer; }
.lp-form-extra label { font-size: 14px; color: #374151; cursor: pointer; margin: 0; }
.lp-form-extra.checked { border-color: #4D73FC; background: rgba(77,115,252,0.08); }
.lp-form-extra.checked label { color: #1e3c72; font-weight: 500; }

/* ----- Same as pick-up ----- */
.lp-same-as { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lp-same-as input { width: 18px; height: 18px; accent-color: #4D73FC; cursor: pointer; }
.lp-same-as label { font-size: 14px; color: #6b7280; cursor: pointer; margin: 0; }

/* ----- Submit button enhanced ----- */
.lp-form-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px; background: linear-gradient(135deg, #4D73FC 0%, #3d5fd9 100%);
  color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(77,115,252,0.4);
}
.lp-form-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(77,115,252,0.45); }
.lp-form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.lp-form-submit .fa, .lp-form-submit .fal { font-size: 18px; }

/* ----- Date/Time inputs (consistent look) ----- */
.lp-form-input[type="date"], .lp-form-input[type="time"] {
  cursor: pointer;
}