/* ==========================================================================
   BOOKING STATUS FORM STYLES (MATCH FIGMA REFERENCE)
   ========================================================================== */

.form-search--booking-status,
.form-search--booking-status * {
  box-sizing: border-box;
}

.form-search--booking-status {
  width: 1140px;
  height: 224px;
  position: absolute;
  left: 390px;
  top: 308px;
  z-index: 800;
}

.form-search--booking-status .rectangle-copy-22 {
  border-radius: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
  pointer-events: none;
}

/* Instruction Text at Top */
.form-search--booking-status .please-enter-the-reservation-code-and-last-name-standing-on-the-booking-to-view-and-or-manage-the-booking-details-such-as-select-change-seat-special-meal-specify-rop-number-contact-information-or-purchase-excess-baggage {
  color: #ffffff;
  text-align: left;
  font-family: var(--roboto-regular-14px-font-family, 'Roboto', sans-serif);
  font-size: 14px;
  line-height: 140.63%;
  font-weight: 400;
  position: absolute;
  left: 26px;
  top: 24px;
  width: 1082px;
  height: 43px;
}

/* Input 1: Booking Ref or E-ticket Number */
.form-search--booking-status .booking-ref-or-e-ticket-number {
  width: 392px;
  height: 48px;
  position: absolute;
  left: 24px;
  top: 91px;
}

/* Input 2: Email */
.form-search--booking-status .booking-ref-or-e-ticket-number2 {
  width: 392px;
  height: 48px;
  position: absolute;
  left: 440px;
  top: 91px;
}

/* Input Background Rectangles */
.form-search--booking-status .rectangle-9 {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid var(--black-15, rgba(0, 0, 0, 0.15));
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-search--booking-status .booking-ref-or-e-ticket-number:focus-within .rectangle-9,
.form-search--booking-status .booking-ref-or-e-ticket-number2:focus-within .rectangle-9 {
  border-color: #2296ea !important;
  box-shadow: 0 0 0 2px rgba(34, 150, 234, 0.2) !important;
}

/* Input Small Top Labels */
.form-search--booking-status .i-m-i,
.form-search--booking-status .i-m-i2 {
  color: var(--neutral-color-45, rgba(0, 0, 0, 0.45));
  text-align: left;
  font-family: var(--regular-12px-font-family, 'Roboto', sans-serif);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  position: absolute;
  left: 16px;
  top: 6px;
  width: auto;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Real Functional Input Controls */
.form-search--booking-status .status-input-control {
  position: absolute;
  left: 16px;
  top: 22px;
  width: calc(100% - 64px);
  height: 22px;
  line-height: 22px;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--roboto-medium-14px-font-family, 'Roboto', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #021b67;
  padding: 0;
  margin: 0;
  z-index: 2;
}

.form-search--booking-status .status-input-control::placeholder {
  color: #021b67;
  opacity: 0.28;
  font-weight: 400;
}

/* Icons */
.form-search--booking-status .mdi-ticket-1 {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 14px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.form-search--booking-status .mdi-ticket-1 svg,
.form-search--booking-status .mdi-ticket-1 img {
  width: 22px;
  height: 20px;
}

.form-search--booking-status .mdi-email-action-unread-1 {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 14px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.form-search--booking-status .mdi-email-action-unread-1 svg,
.form-search--booking-status .mdi-email-action-unread-1 img {
  width: 22px;
  height: 16px;
}

/* Submit Button */
.form-search--booking-status .btn-find-flights-48-px {
  width: 240px;
  height: 48px;
  position: absolute;
  left: 856px;
  top: 91px;
  cursor: pointer;
  z-index: 2;
}

.form-search--booking-status .rectangle-10 {
  background: var(--red-malya-p500, #eb453c);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.form-search--booking-status .btn-find-flights-48-px:hover .rectangle-10 {
  background-color: #d6372e;
}

.form-search--booking-status .btn-find-flights-48-px:active .rectangle-10 {
  transform: scale(0.98);
}

.form-search--booking-status .find-my-booking {
  color: #ffffff;
  text-align: center;
  font-family: var(--roboto-medium-14px-font-family, 'Roboto', sans-serif);
  font-size: 14px;
  line-height: 140.63%;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: none;
}

/* Note at Bottom */
.form-search--booking-status .note-it-is-only-accepted-for-bookings-on-our-website {
  color: #ffffff;
  text-align: left;
  font-family: var(--roboto-regular-14px-font-family, 'Roboto', sans-serif);
  font-size: 14px;
  line-height: 140.63%;
  font-weight: 400;
  position: absolute;
  left: 26px;
  top: 160px;
  width: 1082px;
}

/* Feedback message (AJAX response / validation) */
.form-search--booking-status .status-feedback-msg {
  position: absolute;
  left: 26px;
  top: 188px;
  font-family: var(--roboto-regular-14px-font-family, 'Roboto', sans-serif);
  font-size: 13px;
  font-weight: 500;
  display: none;
}

.form-search--booking-status .status-feedback-msg.is-error {
  color: #ff6b6b !important;
  display: block !important;
}

.form-search--booking-status .status-feedback-msg.is-success {
  color: #51cf66 !important;
  display: block !important;
}

/* ==========================================================================
   TAB NAVIGATION (BOOK YOUR TRIP <-> BOOKING STATUS)
   ========================================================================== */

.frame-15 .book-your-trip,
.frame-15 .booking-status2,
.frame-15 .flight-schedules,
.frame-15 .flight-status {
  cursor: pointer;
}

/* Inactive Book Your Trip Tab */
.frame-15 .book-your-trip.is-inactive .frame-14 {
  display: none !important;
}

.frame-15 .book-your-trip.is-inactive .mdi-plane-plain-icon {
  display: block !important;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0px;
  top: 6px;
}

.frame-15 .book-your-trip.is-inactive .group-copy-2 {
  left: 32px !important;
}

.frame-15 .book-your-trip.is-inactive .m-y-bay {
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Active Booking Status Tab */
.frame-15 .booking-status2.is-active {
  top: 0px !important;
  height: 36px !important;
  width: 180px !important;
}

.frame-15 .booking-status2.is-active .status-active-badge {
  display: block !important;
  width: 36px;
  height: 36px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.frame-15 .booking-status2.is-active .mdi-transportation-ticket-plane-1 {
  display: none !important;
}

.frame-15 .booking-status2.is-active .m-y-bay2 {
  left: 44px !important;
  top: 9px !important;
  translate: none !important;
  width: auto !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Polygon Arrow Smooth Repositioning */
.polygon-1 {
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.polygon-1.is-status {
  left: 799px !important;
}