/* ==========================
   Private Air Travel - Popup & Form Styles
   Clean, modern and responsive layout
   ========================== */

/* Utility */
.mfp-hide { display: none !important; }

/* MagnificPopup white block wrapper */
.white-popup-block {
  background: #fff;
  padding: 22px;
  margin: 40px auto !important;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(8, 34, 63, 0.12);
  max-width: 920px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Container inside popup */
#private-air-travel-form-popup .private-air-travel-popup-content,
.private-air-travel-container {
  display: block;
  padding: 8px 0 18px;
}

.private-air-travel-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #08223f;
  text-align: center;
}

#form-messages {
  margin: 12px auto;
  text-align: center;
}

#form-messages .alert { margin: 0 auto; display: inline-block; }

/* Form root */
#private-air-travel-booking-form,
.private-air-travel-booking-form {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 18px;
}

/* Sections */
.form-section {
  background: #fbfcfd;
  border: 1px solid #eef3f7;
  padding: 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.section-title {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #123a59;
  font-size: 14px;
}

/* Grid rows */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.form-row .form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }

.form-group label { font-size: 13px; color: #334a5e; margin-bottom: 6px; }

/* Inputs */
#private-air-travel-booking-form input[type="text"],
#private-air-travel-booking-form input[type="email"],
#private-air-travel-booking-form input[type="number"],
#private-air-travel-booking-form input[type="date"],
#private-air-travel-booking-form input[type="time"],
#private-air-travel-booking-form select,
.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7e1e9;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 6px 18px rgba(0,124,186,0.08);
}

/* Passenger controls */
.passengers-controls { display:flex; gap:10px; align-items:center; }
.passengers-controls input[type="number"] { width:84px; text-align:center; }
.passengers-controls #total_passengers_display {
  min-width:48px; text-align:center; font-weight:600; color:#0b74b6;
}

/* Submit */
.submit-private-air-travel,
.submit-button {
  background: linear-gradient(180deg,#007cba,#006599);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(3, 57, 93, 0.12);
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}

.submit-private-air-travel:hover,
.submit-button:hover { transform: translateY(-1px); }

/* Close button (MagnificPopup uses .mfp-close) */
.white-popup-block .mfp-close {
  color: #ffffff; background: rgba(0,0,0,0.45); border-radius: 50%;
  width:36px;height:36px;line-height:36px;text-align:center;font-size:18px;
  top: 12px; right: 12px; position: absolute; z-index: 5;
}

/* Messages */
.alert { padding:10px 14px; border-radius:8px; font-size:14px; }
.alert-success { background:#e9f7ef; color:#145a2a; border:1px solid #cfe8d7; }
.alert-danger  { background:#fff0f0; color:#7a1f1f; border:1px solid #f3c6c6; }

/* Invalid */
.is-invalid { border-color: #e05b5b !important; box-shadow: 0 0 0 4px rgba(224,91,91,0.06); }

/* Loading overlay */
.loading-overlay { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(6,8,13,0.45); z-index:99999; }
.loading-spinner { width:48px;height:48px;border:5px solid rgba(255,255,255,0.18); border-top-color:#fff; border-radius:50%; animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Confirmation number */
.confirmation-number-display { background: linear-gradient(135deg,#eefaf0,#f7fff8); border-radius:10px; padding:16px; text-align:center; border:1px solid #d8f0d9; }
.confirmation-number-value { font-family: 'Courier New', monospace; font-weight:700; color:#0b8a3a; font-size:20px; }

/* Passenger summary */
.passenger-summary { background:#fbfdff; border:1px solid #eef6fb; padding:10px; border-radius:8px; text-align:center; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .white-popup-block { width: 96%; padding: 14px; margin: 16px auto !important; }
  .form-row { grid-template-columns: 1fr; }
  .passengers-controls { justify-content: flex-start; }
  .white-popup-block .mfp-close { width:32px; height:32px; line-height:32px; }
}

/* Accessibility */
.form-group input[readonly], .form-group input[disabled] { background:#f5f7f9; opacity:1; }

/* Small helpers */
.muted { color:#6b7885; font-size:13px; }

/* ==========================
   Specific layout for private-air-travel popup
   Shows form in 2-3 columns inside the popup, remains hidden in footer via mfp-hide
   ========================== */

/* Ensure the footer-included markup stays hidden until opened by MagnificPopup */
#private-air-travel-form-popup.mfp-hide { display: none !important; }

/* When the popup is shown by MagnificPopup the wrapper will be visible
   and we style the internal form as a multi-column grid */
#private-air-travel-form-popup .private-air-travel-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  align-items: start;
}

/* Make some fields span full width (like name, email, message) */
#private-air-travel-form-popup .private-air-travel-form .form-group.full-width,
#private-air-travel-form-popup .private-air-travel-form #full_name,
#private-air-travel-form-popup .private-air-travel-form #email {
  grid-column: 1 / -1;
}

/* Departure/return group layout: keep them as individual grid items so
   the date and time fields can appear side-by-side within the parent grid.
   They will naturally occupy one grid cell each and sit next to each other
   when there is enough horizontal space. On small screens they will stack. */
#private-air-travel-form-popup .private-air-travel-form .departure-group,
#private-air-travel-form-popup .private-air-travel-form .return-group {
  grid-column: auto;
}

/* Rows specifically for pairing date + time side-by-side */
#private-air-travel-form-popup .private-air-travel-form .departure-row,
#private-air-travel-form-popup .private-air-travel-form .return-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

/* Ensure inner groups don't force full-width when inside a paired row */
#private-air-travel-form-popup .private-air-travel-form .departure-row .form-group,
#private-air-travel-form-popup .private-air-travel-form .return-row .form-group {
  grid-column: auto !important;
}

/* Submit button full width */
#private-air-travel-form-popup .submit-button,
#private-air-travel-form-popup .submit-private-air-travel {
  grid-column: 1 / -1;
  width: 100%;
}

/* Adjust to two columns at medium sizes */
@media (max-width: 1024px) {
  #private-air-travel-form-popup .private-air-travel-form { grid-template-columns: repeat(2, 1fr); }
  #private-air-travel-form-popup .private-air-travel-form .departure-group,
  #private-air-travel-form-popup .private-air-travel-form .return-group { grid-column: span 2; }
}

/* Single column on small screens */
@media (max-width: 600px) {
  #private-air-travel-form-popup .private-air-travel-form { grid-template-columns: 1fr; }
  #private-air-travel-form-popup .private-air-travel-form .departure-group,
  #private-air-travel-form-popup .private-air-travel-form .return-group { grid-column: auto; }
}