/* =========================================================
   Flight List Select Flight - Pixel-perfect Figma Styles
   ========================================================= */

.flight-list-select-flight,
.flight-list-select-flight * {
  box-sizing: border-box;
}

.flight-list-select-flight {
  background: #f2f2f2;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  width: 1920px;
  margin: 0 auto;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transform-origin: top center;
}

.flight-list-select-flight a {
  text-decoration: none;
  color: inherit;
}

/* Layering guarantees */
.flight-list-select-flight .header {
  position: relative !important;
  width: 1920px;
  height: 64px;
  background: #2649aa;
  z-index: 100;
}

.flight-list-select-flight .footer {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 60px !important;
  width: 1920px !important;
  height: 533px !important;
  z-index: 10 !important;
}

/* =========================================================
   Step Breadcrumbs Bar (Figma: rectangle-182, group-510)
   ========================================================= */
.flight-steps-bar {
  background: #ffffff;
  width: 1920px;
  height: 64px;
  position: relative;
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 390px;
}

.flight-steps-group {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 24px;
}

.flight-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.flight-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2649aa;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.flight-step-circle.active {
  background: #f5aa14;
}

.flight-step-title {
  font-size: 14px;
  font-weight: 500;
  color: #2649aa;
  white-space: nowrap;
}

.flight-step-title.active {
  color: #f5aa14;
}

.edit-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1648c1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #f0f5ff;
  border: 1px solid #cde0fc;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  line-height: 1;
}

.edit-search-btn:hover {
  background: #1648c1;
  color: #ffffff;
  border-color: #1648c1;
  box-shadow: 0 2px 6px rgba(22, 72, 193, 0.18);
}

.edit-search-btn:hover svg {
  stroke: #ffffff !important;
}

.edit-search-btn svg {
  width: 16px;
  height: 16px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke 0.2s ease;
}

/* =========================================================
   Main Flight Content Area (Centered 1141px / 1220px)
   ========================================================= */
.flight-select-main {
  width: 1920px;
  padding-bottom: 80px;
  position: relative;
}

.flight-section-block {
  width: 1140px;
  margin: 0 auto;
  position: relative;
  padding-top: 32px;
}

/* Section Title */
.flight-section-title {
  color: #2649aa;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* Route Subtitle & Date */
.flight-route-subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #2649aa;
}

.flight-route-subtitle .city-code {
  font-weight: 500;
}

.flight-route-subtitle .country {
  font-weight: 400;
}

.flight-route-subtitle .plane-icon,
.flight-route-subtitle .mdi-airplane-sharp,
.flight-route-subtitle .mdi-airplane-sharp2 {
  position: static !important;
  width: 24px !important;
  height: 18px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.flight-route-subtitle .separator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  margin: 0 4px;
}

.flight-route-subtitle .flight-date-text {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-weight: 400;
}

/* Action Bar: Lowest fare, Selection, Filter */
.flight-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.flight-action-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.action-item.lowest-fare {
  color: rgba(0, 0, 0, 0.65);
}

.action-item svg {
  flex-shrink: 0;
}

.flight-action-right {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.flight-action-right:hover {
  background: rgba(38, 73, 170, 0.06);
}

.flight-action-right.active {
  background: rgba(38, 73, 170, 0.1);
  font-weight: 600;
}

.flight-action-right.active svg:last-child {
  transform: rotate(180deg);
}

.flight-action-right svg:last-child {
  transition: transform 0.25s ease;
}

/* =========================================================
   Date Strip / Carousel (Figma: width 1220px, height 72px)
   ========================================================= */
.flight-date-carousel-wrap {
  width: 1220px;
  height: 72px;
  margin: 0 auto 24px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: -39.5px; /* Offset to center 1220px over 1141px */
}

.date-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  z-index: 5;
}

.date-nav-btn:hover {
  background: #f8f9fa;
  transform: scale(1.05);
}

.date-nav-btn svg {
  width: 16px;
  height: 16px;
  fill: #2649aa;
}

.date-strip-box {
  width: 1140px;
  height: 72px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.date-slot-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0 4px;
}

.date-slot-item:hover {
  background-color: #fbfbfb;
}

.date-slot-item.active {
  background-color: #ffffff;
}

/* Yellow accent bar on active date */
.date-slot-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #f5aa14;
}

.date-slot-day {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 4px;
  line-height: 1.2;
}

.date-slot-item.active .date-slot-day {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.date-slot-price {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.2;
  white-space: nowrap;
}

.date-slot-price span {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

/* =========================================================
   Fare Class Matrix Header (Figma: component-11, component-12)
   ========================================================= */
.fare-matrix-header {
  width: 1141px;
  height: 80px;
  display: flex;
  align-items: stretch;
  margin-bottom: 4px;
}

.fare-th-info {
  flex: 0 0 40.4%;
  width: 40.4%;
  background: #00247d;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.fare-th-col {
  flex: 0 0 11.92%;
  width: 11.92%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  padding: 0 8px;
}

.fare-th-col.col-eco-promo {
  background: #2d51b4;
}

.fare-th-col.col-eco-saver {
  background: #2649aa;
}

.fare-th-col.col-eco {
  background: #1b3f9e;
}

.fare-th-col.col-prem-eco {
  background: #0f3692;
}

.fare-th-col.col-business {
  flex: 0 0 11.92%;
  width: 11.92%;
  background: #00247d;
}

/* =========================================================
   Flight Row Card (Figma: flight-info-none-stop / 1-stop / 2-stop)
   ========================================================= */
.flight-card-row {
  width: 1141px;
  min-height: 124px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
  display: flex !important;
  align-items: stretch !important;
  margin-bottom: 8px;
  position: relative;
  border-radius: 2px;
}

.flight-card-row.d-none,
.flight-card-row.is-hidden,
.flight-card-row[style*="display: none"] {
  display: none !important;
}

/* Left: Flight Details (40.4%) */
.flight-card-info {
  flex: 0 0 40.4%;
  width: 40.4%;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.flight-times-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.flight-endpoint {
  display: flex;
  flex-direction: column;
}

.flight-time-code {
  font-size: 18px;
  font-weight: 500;
  color: #2649aa;
  line-height: 1.2;
}

.flight-city-country {
  font-size: 12px;
  font-weight: 500;
  color: #2649aa;
  margin-top: 4px;
  line-height: 1.2;
}

/* Center Route Graphic: Duration, Path Line, Stop info */
.flight-duration-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 12px;
}

.flight-duration-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 2px;
}

.flight-path-graphic {
  width: 125px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flight-path-graphic .path-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
}

.flight-path-graphic .path-plane {
  width: 20px;
  height: 20px;
  z-index: 2;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flight-path-graphic .path-plane svg {
  width: 14px;
  height: 14px;
  fill: #2649aa;
}

.flight-stop-badge {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.flight-stop-badge.non-stop {
  color: #81be33;
  font-weight: 500;
}

.flight-stop-badge.has-stop {
  color: #e34a13;
  font-weight: 500;
}

.flight-stop-badge .stop-via {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
}

/* Bottom Row of Left Card: Airline code + logo, More details link */
.flight-bottom-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.flight-carrier-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carrier-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

.carrier-item img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.more-details-btn {
  font-size: 12px;
  color: #318fdb;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.more-details-btn:hover {
  text-decoration: underline;
}

/* Right: 5 Fare Class Cells */
.flight-fare-cell {
  flex: 0 0 11.92%;
  width: 11.92%;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.flight-fare-cell:hover:not(.sold-out) {
  background-color: #fafbfc;
}

.flight-fare-cell.selected {
  background-color: #fff8eb;
  box-shadow: inset 0 0 0 2px #f5aa14;
}

/* Sold out state */
.flight-fare-cell.sold-out {
  cursor: not-allowed;
  background-color: #ffffff;
}

.sold-out-text {
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

/* Available fare content */
.fare-radio-wrap {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.flight-fare-cell.selected .fare-radio-wrap {
  border-color: #f5aa14;
}

.flight-fare-cell.selected .fare-radio-wrap::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5aa14;
}

/* Lowest fare tag badge */
.lowest-tag-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
}

.lowest-tag-badge svg {
  width: 14px;
  height: 14px;
  fill: #eb453c;
}

.fare-price-text {
  color: #eb453c;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
}

.fare-price-text strong {
  font-size: 16px;
  font-weight: 500;
}

.fare-seats-left {
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}

/* =========================================================
   Bottom Continue Button (Figma: btn-find-flights-40-px)
   ========================================================= */
.flight-continue-bar {
  width: 1141px;
  margin: 32px auto 0 auto;
  display: flex;
  justify-content: flex-end;
  position: relative !important;
  z-index: 20 !important;
}

.flight-continue-bar .btn-continue-booking,
.btn-continue-booking {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 133px !important;
  height: 40px !important;
  background: #eb453c !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.2s ease, transform 0.1s ease;
  user-select: none !important;
  text-decoration: none !important;
}

.btn-continue-booking:hover {
  background: #d4382f !important;
  transform: translateY(-1px);
}

.btn-continue-booking.disabled {
  background: rgba(0, 0, 0, 0.25) !important;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   Modify Your Search Modal Overlay (Exact Match to Figma Spec)
   ========================================================= */
.edit-search-modal-overlay,
.edit-search-drawer {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  background: linear-gradient(180deg, #1d61bc 0%, #3678cc 22%, #6398df 45%, #9ec3f4 68%, #dcebfc 85%, #ffffff 100%) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
  animation: editSearchModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.edit-search-modal-overlay,
.edit-search-modal-overlay * {
  box-sizing: border-box;
}

/* Ensure popovers always display above modal overlay */
.edit-search-modal-overlay .time-datepicker-popover,
.edit-search-modal-overlay .destination-picker-popover,
.edit-search-modal-overlay .dropdown-passenger-popover,
.time-datepicker-popover,
.destination-picker-popover,
.dropdown-passenger-popover {
  z-index: 1000005 !important;
}

.edit-search-modal-overlay.is-open,
.edit-search-drawer.is-open {
  display: flex !important;
}

@keyframes editSearchModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Close button in top-right corner */
.edit-search-modal-close {
  position: absolute !important;
  top: 24px !important;
  right: 36px !important;
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
  cursor: pointer !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  z-index: 1000 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.edit-search-modal-close:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.12) !important;
}

/* Modal Content & Title */
.edit-search-modal-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.edit-search-modal-title {
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Search Card Wrapper */
.edit-search-card-wrapper {
  width: 1120px !important;
  max-width: 100% !important;
  position: relative !important;
  margin: 0 auto !important;
}

/* Hide non-search homepage widgets */
.edit-search-card-wrapper > .text,
.edit-search-modal-overlay .polygon-1,
.edit-search-modal-overlay .frame-15,
.edit-search-modal-overlay #home-booking-status-form,
.edit-search-modal-overlay .rectangle-copy-22,
.edit-search-drawer > .text,
.edit-search-drawer .polygon-1,
.edit-search-drawer .frame-15,
.edit-search-drawer #home-booking-status-form,
.edit-search-drawer .rectangle-copy-22 {
  display: none !important;
}

.edit-search-modal-overlay .form-search .depart-date .text,
.edit-search-drawer .form-search .depart-date .text {
  display: block !important;
}

/* Slate Grey Card Background (#8897a8) */
.edit-search-modal-overlay .form-search,
.edit-search-drawer .form-search {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 1120px !important;
  max-width: 1120px !important;
  height: 224px !important;
  margin: 0 auto !important;
  background: #8897a8 !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
  overflow: visible !important;
}

.edit-search-modal-overlay .form-search--multi-city,
.edit-search-drawer .form-search--multi-city {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 1120px !important;
  max-width: 1120px !important;
  height: auto !important;
  min-height: 224px !important;
  margin: 0 auto !important;
  background: #8897a8 !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
  overflow: visible !important;
}

/* Radio buttons & text labels */
.edit-search-modal-overlay .round-trip2,
.edit-search-modal-overlay .round-trip3,
.edit-search-modal-overlay .muliple-destination,
.edit-search-modal-overlay .muliple-destination2,
.edit-search-drawer .round-trip2,
.edit-search-drawer .round-trip3,
.edit-search-drawer .muliple-destination,
.edit-search-drawer .muliple-destination2 {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  cursor: pointer !important;
  top: 26px !important;
}

.edit-search-modal-overlay .mdi-radio-button-on-sharp,
.edit-search-modal-overlay .mdi-radio-button-off-sharp,
.edit-search-modal-overlay .mdi-radio-button-off-sharp2,
.edit-search-drawer .mdi-radio-button-on-sharp,
.edit-search-drawer .mdi-radio-button-off-sharp,
.edit-search-drawer .mdi-radio-button-off-sharp2 {
  cursor: pointer !important;
  top: 24px !important;
}

/* White Input field boxes */
.edit-search-modal-overlay .from-select-place,
.edit-search-modal-overlay .from-select-place2,
.edit-search-modal-overlay .from-select-place3,
.edit-search-modal-overlay .depart-date,
.edit-search-modal-overlay .return-date,
.edit-search-modal-overlay .depart-date2,
.edit-search-modal-overlay .depart-date3,
.edit-search-modal-overlay .dropdown-passengers,
.edit-search-modal-overlay .promotion-code,
.edit-search-drawer .from-select-place,
.edit-search-drawer .from-select-place2,
.edit-search-drawer .from-select-place3,
.edit-search-drawer .depart-date,
.edit-search-drawer .return-date,
.edit-search-drawer .depart-date2,
.edit-search-drawer .depart-date3,
.edit-search-drawer .dropdown-passengers,
.edit-search-drawer .promotion-code {
  background: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.edit-search-modal-overlay .rectangle-9,
.edit-search-modal-overlay .rectangle-102,
.edit-search-modal-overlay .rectangle-103,
.edit-search-drawer .rectangle-9,
.edit-search-drawer .rectangle-102,
.edit-search-drawer .rectangle-103 {
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Red Search Button */
.edit-search-modal-overlay .btn-find-flights-48-px,
.edit-search-modal-overlay .btn-find-flights-48-px2,
.edit-search-drawer .btn-find-flights-48-px,
.edit-search-drawer .btn-find-flights-48-px2 {
  background: #eb453c !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(235, 69, 60, 0.35) !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.edit-search-modal-overlay .btn-find-flights-48-px:hover,
.edit-search-modal-overlay .btn-find-flights-48-px2:hover,
.edit-search-drawer .btn-find-flights-48-px:hover,
.edit-search-drawer .btn-find-flights-48-px2:hover {
  filter: brightness(1.08) !important;
}

.edit-search-modal-overlay .btn-find-flights-48-px .rectangle-10,
.edit-search-modal-overlay .btn-find-flights-48-px2 .rectangle-102,
.edit-search-drawer .btn-find-flights-48-px .rectangle-10,
.edit-search-drawer .btn-find-flights-48-px2 .rectangle-102 {
  display: none !important;
}

/* Perfect Centering for SEARCH Text */
.edit-search-modal-overlay .search,
.edit-search-modal-overlay .serach,
.edit-search-drawer .search,
.edit-search-drawer .serach,
.edit-search-modal-overlay .form-search .search,
.edit-search-modal-overlay .form-search .serach,
.edit-search-drawer .form-search .search,
.edit-search-drawer .form-search .serach {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: normal !important;
  pointer-events: none !important;
}

/* Labels and Texts inside fields */
.edit-search-modal-overlay .i-m-i,
.edit-search-modal-overlay .i-m-i2,
.edit-search-modal-overlay .i-m-i3,
.edit-search-modal-overlay .i-m-i4,
.edit-search-modal-overlay .i-m-i5,
.edit-search-modal-overlay .i-m-i6,
.edit-search-modal-overlay .i-m-i7,
.edit-search-modal-overlay .i-m-i8,
.edit-search-drawer .i-m-i,
.edit-search-drawer .i-m-i2,
.edit-search-drawer .i-m-i3,
.edit-search-drawer .i-m-i4,
.edit-search-drawer .i-m-i5,
.edit-search-drawer .i-m-i6,
.edit-search-drawer .i-m-i7,
.edit-search-drawer .i-m-i8 {
  color: #8c8c8c !important;
  font-size: 11px !important;
}

.edit-search-modal-overlay .text,
.edit-search-modal-overlay .text2,
.edit-search-modal-overlay .text3,
.edit-search-modal-overlay .text4,
.edit-search-modal-overlay .text6,
.edit-search-modal-overlay .text7,
.edit-search-drawer .text,
.edit-search-drawer .text2,
.edit-search-drawer .text3,
.edit-search-drawer .text4,
.edit-search-drawer .text6,
.edit-search-drawer .text7 {
  color: #2649aa !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.edit-search-modal-overlay .text5,
.edit-search-drawer .text5 {
  color: #8c8c8c !important;
  font-size: 13px !important;
}

/* ==========================================================================
   DESKTOP GRID ALIGNMENT FOR EDIT SEARCH MODAL (min-width: 769px)
   Aligns Row 1 and Row 2 into a seamless, balanced 3-column layout
   Padding: 24px left and 24px right (1120px total card width)
   Row 1: Origin/Dest (544px) + Leave on (240px) + Return on (240px) = 1072px
   Row 2: Passenger (544px)   + Promo code (240px) + SEARCH (240px)   = 1072px
   ========================================================================== */
@media (min-width: 769px) {
  /* Row 1 - Origin & Destination */
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .from-select-place,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .from-select-place {
    position: absolute !important;
    left: 24px !important;
    top: 72px !important;
    width: 544px !important;
    height: 48px !important;
  }

  /* Row 1 - Leave on (Round Trip) */
  .edit-search-modal-overlay .form-search--round-trip .depart-date,
  .edit-search-drawer .form-search--round-trip .depart-date {
    position: absolute !important;
    left: 592px !important;
    top: 72px !important;
    width: 240px !important;
    height: 48px !important;
    cursor: pointer !important;
  }

  /* Row 1 - Return on (Round Trip) */
  .edit-search-modal-overlay .form-search--round-trip .return-date,
  .edit-search-drawer .form-search--round-trip .return-date {
    position: absolute !important;
    left: 856px !important;
    top: 72px !important;
    width: 240px !important;
    height: 48px !important;
    cursor: pointer !important;
  }

  .edit-search-modal-overlay .form-search--round-trip .depart-date .i-m-i3,
  .edit-search-modal-overlay .form-search--round-trip .return-date .i-m-i4,
  .edit-search-drawer .form-search--round-trip .depart-date .i-m-i3,
  .edit-search-drawer .form-search--round-trip .return-date .i-m-i4 {
    position: absolute !important;
    left: 16px !important;
    top: 6px !important;
    width: auto !important;
    height: 14px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: #8c8c8c !important;
  }

  .edit-search-modal-overlay .form-search--round-trip .depart-date .text2,
  .edit-search-modal-overlay .form-search--round-trip .return-date .text3,
  .edit-search-drawer .form-search--round-trip .depart-date .text2,
  .edit-search-drawer .form-search--round-trip .return-date .text3 {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: 22px !important;
    width: calc(100% - 48px) !important;
    height: 20px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2649aa !important;
  }

  .edit-search-modal-overlay .form-search--round-trip .depart-date .mdi-calendar-outline,
  .edit-search-modal-overlay .form-search--round-trip .return-date .mdi-calendar-outline2,
  .edit-search-drawer .form-search--round-trip .depart-date .mdi-calendar-outline,
  .edit-search-drawer .form-search--round-trip .return-date .mdi-calendar-outline2 {
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    top: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Row 1 - Leave on (One Way) - fills space to end of row */
  .edit-search-modal-overlay .form-search--one-way .depart-date,
  .edit-search-drawer .form-search--one-way .depart-date {
    position: absolute !important;
    left: 592px !important;
    top: 72px !important;
    width: 504px !important;
    height: 48px !important;
    cursor: pointer !important;
  }

  .edit-search-modal-overlay .form-search--one-way .depart-date .i-m-i,
  .edit-search-modal-overlay .form-search--one-way .depart-date .i-m-i3,
  .edit-search-drawer .form-search--one-way .depart-date .i-m-i,
  .edit-search-drawer .form-search--one-way .depart-date .i-m-i3 {
    position: absolute !important;
    left: 16px !important;
    top: 6px !important;
    width: auto !important;
    height: 14px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: #8c8c8c !important;
  }

  .edit-search-modal-overlay .form-search--one-way .depart-date .text,
  .edit-search-modal-overlay .form-search--one-way .depart-date .text2,
  .edit-search-drawer .form-search--one-way .depart-date .text,
  .edit-search-drawer .form-search--one-way .depart-date .text2 {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: 22px !important;
    width: calc(100% - 48px) !important;
    height: 20px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2649aa !important;
  }

  .edit-search-modal-overlay .form-search--one-way .depart-date .mdi-calendar-outline,
  .edit-search-drawer .form-search--one-way .depart-date .mdi-calendar-outline {
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    top: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Row 2 - Passenger (544px, exactly matches Origin & Destination) */
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers {
    position: absolute !important;
    left: 24px !important;
    top: 144px !important;
    width: 544px !important;
    height: 48px !important;
  }

  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .i-m-i5,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .i-m-i2,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .i-m-i5,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .i-m-i2 {
    position: absolute !important;
    left: 16px !important;
    top: 6px !important;
    width: auto !important;
  }

  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .text4,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .text2,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .text4,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .text2 {
    position: absolute !important;
    left: 16px !important;
    top: 22px !important;
    width: calc(100% - 48px) !important;
    text-align: left !important;
  }

  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .mdi-caret-down-outline2,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .dropdown-passengers .mdi-caret-down-outline,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .mdi-caret-down-outline2,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .dropdown-passengers .mdi-caret-down-outline {
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    top: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Row 2 - Promotion Code (240px, exactly matches Leave on) */
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .promotion-code,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .promotion-code {
    position: absolute !important;
    left: 592px !important;
    top: 144px !important;
    width: 240px !important;
    height: 48px !important;
  }

  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .promotion-code .i-m-i6,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .promotion-code .i-m-i3,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .promotion-code .i-m-i6,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .promotion-code .i-m-i3 {
    position: absolute !important;
    left: 16px !important;
    top: 6px !important;
    width: auto !important;
    height: 14px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: #8c8c8c !important;
  }

  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .promotion-code .text5,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .promotion-code .text3,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .promotion-code .text5,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .promotion-code .text3 {
    position: absolute !important;
    left: 16px !important;
    top: 22px !important;
    width: calc(100% - 32px) !important;
    height: 20px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 13px !important;
    color: #8c8c8c !important;
    opacity: 0.6 !important;
  }

  /* Row 2 - Search Button (240px, exactly matches Return on) */
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .btn-find-flights-48-px2,
  .edit-search-modal-overlay .form-search:not(.form-search--multi-city) .btn-find-flights-48-px,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .btn-find-flights-48-px2,
  .edit-search-drawer .form-search:not(.form-search--multi-city) .btn-find-flights-48-px {
    position: absolute !important;
    left: 856px !important;
    top: 144px !important;
    width: 240px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}

/* Responsive scaling for modal */
@media (max-width: 1200px) {
  .edit-search-card-wrapper {
    zoom: 0.85;
  }
}
@media (max-width: 992px) {
  .edit-search-card-wrapper {
    zoom: 0.72;
  }
}
@media (max-width: 768px) {
  .edit-search-card-wrapper {
    zoom: 1 !important;
  }
}

/* =========================================================
   Fullscreen Loading Screen Overlay (Dynamic Sunset Clouds BG)
   Super Smooth GPU-Accelerated Transition (Zero Stutter / Layout Shift)
   ========================================================= */
body.body-loading-lock {
  overflow: hidden !important;
  touch-action: none !important;
}

.loadingBox,
#loadingContainer,
#homeFlightSearchLoading,
.loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999999 !important;
  zoom: 1 !important;
  transform: none !important;
  background-color: #121f3d !important;
  background-image: url('../images/loading-bg.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  /* Default Hidden State: Fully non-blocking and invisible */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  display: none;
}

.loadingBox__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(14, 25, 54, 0.42) 0%, rgba(14, 25, 54, 0.58) 100%);
  pointer-events: none;
}

/* Active / Shown State - Pure GPU Opacity Fade In */
.loadingBox.active,
#loadingContainer.active,
#homeFlightSearchLoading.active,
.loading-overlay.active,
.loadingBox.is-active,
#loadingContainer.is-active,
#homeFlightSearchLoading.is-active,
.loading-overlay.is-active,
.loadingBox.show:not(.d-none):not(.is-hidden),
#loadingContainer.show:not(.d-none):not(.is-hidden),
#homeFlightSearchLoading.show:not(.d-none):not(.is-hidden),
.loading-overlay.show:not(.d-none):not(.is-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}

/* Explicit Hidden State */
.loadingBox.d-none,
#loadingContainer.d-none,
#homeFlightSearchLoading.d-none,
.loading-overlay.d-none,
.loadingBox.is-hidden,
#loadingContainer.is-hidden,
#homeFlightSearchLoading.is-hidden,
.loading-overlay.is-hidden,
.loadingBox[style*="display: none"],
#loadingContainer[style*="display: none"],
#homeFlightSearchLoading[style*="display: none"],
.loading-overlay[style*="display: none"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

.loadingBox:not(.active):not(.is-active) *,
#loadingContainer:not(.active):not(.is-active) *,
#homeFlightSearchLoading:not(.active):not(.is-active) *,
.loading-overlay:not(.active):not(.is-active) *,
.loadingBox.is-hidden *,
#loadingContainer.is-hidden *,
#homeFlightSearchLoading.is-hidden *,
.loading-overlay.is-hidden *,
.loadingBox.d-none *,
#loadingContainer.d-none *,
#homeFlightSearchLoading.d-none *,
.loading-overlay.d-none * {
  pointer-events: none !important;
}

/* Content Container - Fixed & Rock Solid (Zero Transform Scaling/Bouncing) */
.loadingBox .loadingBox__icon,
.loading-overlay .loadingBox__icon,
.loading-overlay .loading-content {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  text-align: center !important;
  max-width: 620px !important;
  padding: 20px !important;
  margin: 0 auto !important;
  transform: none !important;
  transition: none !important;
}

.loadingBox.active .loadingBox__icon,
#loadingContainer.active .loadingBox__icon,
.loading-overlay.active .loadingBox__icon,
.loadingBox.is-active .loadingBox__icon,
#loadingContainer.is-active .loadingBox__icon,
.loading-overlay.is-active .loadingBox__icon,
.loadingBox[style*="display: flex"] .loadingBox__icon,
#loadingContainer[style*="display: flex"] .loadingBox__icon,
.loading-overlay[style*="display: flex"] .loadingBox__icon,
.loadingBox.active .loading-content,
.loading-overlay.active .loading-content {
  transform: none !important;
}

.loadingBox .runway-group,
.loading-overlay .runway-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loadingBox .loading-title,
.loading-overlay .loading-title {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.loadingBox .loading-subtitle,
.loading-overlay .loading-subtitle,
.loading-overlay .loading-text,
#loading_text {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

.loadingBox .loading-bottom-logo,
.loading-overlay .loading-bottom-logo,
.loadingBox .loading-center-logo,
.loading-overlay .loading-center-logo {
  position: absolute !important;
  bottom: 48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

.loadingBox .loading-logo-icon,
.loading-overlay .loading-logo-icon {
  height: 42px !important;
  width: auto !important;
}

.loadingBox .loading-logo-text,
.loading-overlay .loading-logo-text {
  height: 22px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

.loadingBox .spinner,
.loading-overlay .spinner {
  width: 65px !important;
  height: 65px !important;
  animation: loadingRotator 1.2s linear infinite !important;
  transform-origin: center !important;
  filter: drop-shadow(0 0 8px rgba(245, 170, 20, 0.55)) !important;
}

@keyframes loadingRotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loadingBox .spinner .track,
.loading-overlay .spinner .track {
  stroke: rgba(255, 255, 255, 0.2) !important;
  stroke-width: 5px !important;
}

.loadingBox .spinner .path,
.loading-overlay .spinner .path {
  stroke: #f5aa14 !important;
  stroke-width: 5.5px !important;
  stroke-linecap: round !important;
  transform-origin: center !important;
  animation: loadingDash 1.4s ease-in-out infinite !important;
}

@keyframes loadingDash {
  0% {
    stroke-dasharray: 20, 188.5;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 125, 188.5;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 20, 188.5;
    stroke-dashoffset: -188.5;
  }
}

/* =========================================================
   Your Selection Component - Pixel-perfect Figma Styles
   ========================================================= */
.your-selection,
.your-selection * {
  box-sizing: border-box;
}
.your-selection {
  width: 1140px;
  position: relative;
  margin: 40px auto 30px auto;
}

.your-selection .your-selection2 {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-family: inherit;
  font-size: 30px;
  line-height: 140%;
  font-weight: 500;
  margin-bottom: 16px;
}

.your-selection .rectangle-211 {
  background: #ffffff;
  border-radius: 4px;
  width: 1140px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  padding-top: 270px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

/* Flight Cards Inside Your Selection */
.your-selection .departing-flight {
  width: 480px;
  height: 155px;
  position: absolute;
  left: 24px;
  top: 24px;
}

.your-selection .rectangle-212 {
  background: var(--transparent-blue-8, rgba(14, 97, 215, 0.08));
  border-radius: 4px;
  width: 480px;
  height: 155px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.your-selection .departing-flight2 {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 16px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 16px;
  top: 16px;
}

.your-selection .return-flight {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 16px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 16px;
  top: 16px;
}

.your-selection .ellipse-3 {
  width: 8px;
  height: 8px;
  position: absolute;
  left: 138px;
  top: 24px;
}

.your-selection .ellipse-1 {
  background: var(--neutral-color-15, rgba(0, 0, 0, 0.15));
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.your-selection .wednesday-15-january-2020 {
  color: var(--neutral-color-65, rgba(0, 0, 0, 0.65));
  text-align: left;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 156px;
  top: 17px;
  white-space: nowrap;
}

.your-selection ._15-35-han {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 18px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 18px;
  top: 54px;
}

.your-selection ._17-40-bkk {
  color: var(--blue-malay-p600, #2649aa);
  text-align: right;
  font-size: 18px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 54px;
}

.your-selection .hanoi-vietnam {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 12px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 18px;
  top: 86px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.your-selection .bangkok-thailand {
  color: var(--blue-malay-p600, #2649aa);
  text-align: right;
  font-size: 12px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 86px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.your-selection .rectangle-41 {
  background: var(--black-15, rgba(0, 0, 0, 0.15));
  border-radius: 20px;
  width: 73px;
  height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.your-selection ._2-h-05-m {
  color: var(--black-55, rgba(0, 0, 0, 0.55));
  font-size: 12px;
  line-height: 140%;
  font-weight: 400;
}

.your-selection .none-stop {
  color: var(--success-600, #81be33);
  text-align: center;
  font-size: 12px;
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 86px;
  width: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.your-selection .stop-info-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 86px;
  width: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.your-selection ._2-stop2 {
  color: var(--red-malya-p500, #eb453c);
  font-size: 12px;
  line-height: 140%;
  font-weight: 400;
}

.your-selection .sgn-dad {
  color: var(--black-85, rgba(0, 0, 0, 0.85));
  font-size: 12px;
  line-height: 140%;
  font-weight: 400;
}

.your-selection .economy-saver {
  color: var(--neutral-color-65, rgba(0, 0, 0, 0.65));
  text-align: left;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 18px;
  top: 119px;
}

.your-selection .selection-baggage {
  color: var(--blue-malay-p600, #2649aa);
  text-align: right;
  font-size: 14px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 119px;
}

/* Return Flight Card */
.your-selection .line-182 {
  border-left: 1px dashed var(--neutral-color-15, rgba(0, 0, 0, 0.15));
  width: 0px;
  height: 155px;
  position: absolute;
  left: 549px;
  top: 24px;
}

.your-selection .departing-flight3 {
  width: 480px;
  height: 155px;
  position: absolute;
  left: 594px;
  top: 24px;
}

.your-selection ._21-40-bkk {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 18px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 18px;
  top: 54px;
}

.your-selection ._15-35-han2 {
  color: var(--blue-malay-p600, #2649aa);
  text-align: right;
  font-size: 18px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 54px;
}

.your-selection .bangkok-thailand2 {
  color: var(--blue-malay-p600, #2649aa);
  text-align: left;
  font-size: 12px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  left: 18px;
  top: 86px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.your-selection .hanoi-vietnam2 {
  color: var(--blue-malay-p600, #2649aa);
  text-align: right;
  font-size: 12px;
  line-height: 140%;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 86px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Traveler Row */
.your-selection .selection-traveler-row {
  width: calc(100% - 48px);
  position: absolute;
  left: 24px;
  top: 213px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.your-selection .selection-traveler-row .traveler-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.your-selection .selection-traveler-row .ic-mdi-account,
.your-selection .ic-mdi-account {
  width: 20px;
  height: 20px;
  position: static;
  display: block;
}

.your-selection .selection-traveler-row .traveler-s,
.your-selection .traveler-s {
  color: var(--black-75, rgba(0, 0, 0, 0.75));
  text-align: left;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
  position: static;
}

.your-selection .selection-traveler-row ._2-adult,
.your-selection ._2-adult {
  color: var(--black-55, rgba(0, 0, 0, 0.55));
  text-align: right;
  font-size: 14px;
  line-height: 140%;
  font-weight: 400;
  position: static;
}

.your-selection .line-53 {
  border-top: 1px dashed var(--black-15, rgba(0, 0, 0, 0.15));
  width: calc(100% - 48px);
  position: absolute;
  left: 24px;
  top: 251px;
}

/* Price Detail Accordion */
.your-selection .selection-price-detail-wrap {
  width: 100%;
}

.your-selection .selection-price-item {
  margin-bottom: 10px;
}

.your-selection .selection-price-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.your-selection .selection-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--black-85, rgba(0, 0, 0, 0.85));
  font-weight: 400;
}

.your-selection .selection-toggle-left .selection-arrow {
  width: 10px;
  height: 8px;
  fill: #222222;
  transition: transform 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

.your-selection .selection-toggle-left .selection-arrow.collapsed {
  transform: rotate(-90deg);
}

.your-selection .selection-toggle-amount {
  font-size: 14px;
  color: var(--black-85, rgba(0, 0, 0, 0.85));
  font-weight: 400;
}

.your-selection .selection-cost-box {
  background: #edf5fd;
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 10px;
  display: block;
}

.your-selection .selection-cost-box .cost-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--black-85, rgba(0, 0, 0, 0.85));
  margin-bottom: 10px;
}

.your-selection .selection-cost-box .cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 28px;
  color: var(--black-85, rgba(0, 0, 0, 0.85));
}

.your-selection .line-184 {
  border-top: 1px solid var(--black-15, rgba(0, 0, 0, 0.15));
  width: 100%;
  margin: 16px 0;
}

/* Total Row */
.your-selection .selection-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.your-selection .selection-total-row .total {
  color: var(--blue-malay-p600, #2649aa);
  font-size: 16px;
  line-height: 140%;
  font-weight: 500;
}

.your-selection .selection-total-row .your-selection-total-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.your-selection .selection-total-row .usd {
  color: var(--red-malya-p500, #eb453c);
  font-size: 20px;
  line-height: 140%;
  font-weight: 400;
}

.your-selection .selection-total-row ._641-10 {
  color: var(--red-malya-p500, #eb453c);
  font-size: 24px;
  line-height: 140%;
  font-weight: 500;
}

/* =========================================================
   Simple Minimalist Filter & Sort Panel
   ========================================================= */
.flight-filter-drawer {
  width: 100%;
  margin-bottom: 20px;
}

.filterSimpleBox {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 18px 24px;
  box-sizing: border-box;
  font-family: inherit;
  color: #333333;
}

.filterSimpleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 16px;
}

.filterSimpleTitle {
  font-size: 15px;
  font-weight: 600;
  color: #111111;
}

.filterSimpleClose {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #888888;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.filterSimpleClose:hover {
  color: #111111;
}

/* 2-column layout */
.boxFilter__group {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.boxFilter__left {
  width: 50%;
  padding-right: 24px;
  border-right: 1px solid #eeeeee;
}

.boxFilter__right {
  width: 50%;
}

.flBoxSort,
.flboxTransit,
.flboxAirlines,
.flBoxDeparture,
.flBoxArrival {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f5f5f5;
}

.flboxAirlines:last-child,
.flBoxArrival:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.boxTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.boxTitle .bold {
  font-size: 14px;
  font-weight: 600;
  color: #222222;
}

.deleteFilter {
  font-size: 13px;
  color: #e53935;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.15s;
}

.deleteFilter:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.filterRadioGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filterRadioItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.filterRadioItem input[type="radio"],
.filterRadioItem input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  accent-color: #2649aa;
}

.filterRadioItem img {
  height: 18px;
  width: auto;
  max-width: 30px;
  object-fit: contain;
}

/* 2x2 Simple Time Grid */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.grid-item {
  background-color: #f7f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.grid-item:hover {
  border-color: #2649aa;
  background-color: #f0f4ff;
}

.grid-item.active {
  background-color: #e8eeff;
  border-color: #2649aa;
}

.grid-item .time-title {
  font-size: 12px;
  color: #666666;
  margin: 0 0 2px 0;
}

.grid-item.active .time-title {
  color: #2649aa;
}

.grid-item .time-val {
  font-size: 13px;
  font-weight: 600;
  color: #222222;
  margin: 0;
}

.grid-item.active .time-val {
  color: #2649aa;
}

@media (max-width: 768px) {
  .boxFilter__group {
    flex-direction: column;
    gap: 16px;
  }
  .boxFilter__left {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 16px;
  }
  .boxFilter__right {
    width: 100%;
  }
}