/* ---------- Results shell ---------- */
#frResults[hidden] {
  display: none !important;
}

/* Mobile */
.fr-page {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0 var(--container-padding);
  padding: 0 0 20px;
}
/* ---------- Trip type tabs ---------- */
.fr-trip-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--gray-100);
  border-radius: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.fr-trip-tab {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s ease;
}

.fr-trip-tab:hover {
  color: var(--primary-blue);
}

.fr-trip-tab.active {
  background: var(--white);
  color: var(--primary-blue-dark);
  box-shadow: var(--shadow-sm);
}

/* ---------- Header ---------- */
.fr-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 15px;
}

.fr-header-date {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fr-header-title {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.fr-arrow {
  color: var(--primary);
  font-weight: 400;
}

.fr-header-sub {
  color: var(--muted);
  font-size: 14px;
}

.fr-header-right {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.fr-header-count {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.fr-header-currency {
  color: var(--muted);
  font-size: 14px;
}

@media (min-width: 768px) {
  .fr-header {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .fr-header-left {
    justify-self: start;
    text-align: left;
  }
  .fr-header-title {
    font-size: 38px;
  }
  .fr-header-right {
    justify-self: end;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
  }
}

/* ---------- Notice banner ---------- */
.fr-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--primary-light);
  border: 1px solid var(--primary-pale);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--primary-blue-dark);
  font-size: 14px;
  margin-bottom: 20px;
}

.fr-notice i {
  flex: none;
  margin-top: 1px;
}

/* ---------- Layout ---------- */
.fr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .fr-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
  .fr-sidebar {
    position: sticky;
    top: 16px;
  }
}

/* ---------- Filter panel ---------- */
.fr-filter-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.fr-filter-panel .panel-head h2 {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.fr-filter-panel .panel-head h2 i {
  color: var(--primary);
}

.link-btn {
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}

.link-btn:hover {
  text-decoration: underline;
}

.fr-filter-panel section {
  border-top: 1px solid var(--border);
  padding-top: 15px;
  margin-top: 15px;
}

.fr-filter-panel section:first-of-type {
  border-top: 0;
  padding-top: 10px;
  margin-top: 10px;
}

.fr-filter-panel h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.fr-filter-panel .ck {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 14px;
}

.fr-filter-panel .ck span {
  flex: 1;
}

.fr-filter-panel .ck em {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
}

.fr-filter-panel .form-check-input {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: none;
}

.fr-note {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 0;
}

.fr-filter-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.fr-apply {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
}

/* ---------- Toolbar: sort tabs ---------- */
.fr-toolbar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 6px;
}

.fr-sort-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--gray-100);
  border-radius: 10px;
  padding: 4px;
}

.fr-sort-tab {
  border: 0;
  background: transparent;
  padding: 9px 8px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s ease;
}

.fr-sort-tab:hover {
  color: var(--primary-blue);
}

.fr-sort-tab.active {
  background: var(--primary-light);
  color: var(--primary-blue-dark);
}

.fr-toolbar-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 2px 16px;
  color: var(--muted);
  font-size: 14px;
}

.fr-toolbar-note i {
  color: var(--primary);
  margin-right: 6px;
}

.fr-toolbar-note .fr-sort-count {
  white-space: nowrap;
}

.fr-mobile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

@media (min-width: 992px) {
  .fr-mobile-chips {
    display: none;
  }
}

/* ---------- Cards ---------- */
.fr-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.fr-card:hover {
  box-shadow: var(--shadow-lg);
}

.fr-card-featured {
  border-color: var(--primary);
  overflow: hidden;
}

/* Card flags: a slim strip, not its own heading block — the logo cell below
   already carries the carrier identity, so no separate airline heading. */
.fr-card-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 18px 0;
}

.fr-card-flags .fr-badge,
.fr-card-flags .fr-pill {
  margin-bottom: 0;
}

.fr-card-flags-meta {
  color: var(--muted);
  font-size: 14px;
}

.fr-card-top-rows {
  display: flex;
  flex-direction: column-reverse;
}

.fr-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 18px;
}

.fr-mobile-fare {
  display: none;
}

.fr-row + .fr-row {
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .fr-row {
    grid-template-columns: 118px minmax(0, 1fr) 244px;
    align-items: center;
    gap: 20px;
    padding: 18px;
  }
  .fr-card-top-rows {
    display: flex;
    flex-direction: column;
  }
}

.fr-row-carrier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.fr-row-logos {
  display: flex;
  gap: 4px;
}

.fr-row-carrier .fr-logo {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 14px;
}

.fr-row-code {
  font-size: 14px;
  font-weight: 700;
}

.fr-row-flightno {
  color: var(--muted);
  font-size: 14px;
}

/* Times and stops */
.fr-row-main {
  min-width: 0;
}

.fr-row-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.fr-row-time-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.fr-row-time-arrival {
  align-items: flex-end;
  text-align: right;
}

.fr-row-time {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.fr-row-date {
  color: var(--muted);
  font-size: 12px !important;
  line-height: 1.3;
}

.fr-row-duration {
  background: var(--gray-100);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.fr-row-route {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 14px;
  color: var(--gray-900);
}

.fr-row-dash {
  color: var(--muted);
}

.fr-row-stops {
  color: var(--muted);
  font-size: 14px;
}

.fr-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
}

.fr-row-meta i {
  margin-right: -2px;
}

/* Fare cell, on the first row only */
.fr-row-fare {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

@media (min-width: 768px) {
  .fr-row-fare {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    border-left: 1px solid var(--border);
    justify-content: center;
    padding-left: 24px;
  }
}

.fr-logo img {
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: inherit;
  background: var(--white);
  object-fit: contain;
}

.fr-row-save {
  background: var(--green-light);
  color: var(--accent-teal-dark);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.fr-row-save i {
  margin-left: 3px;
}

.fr-row-price {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  background: var(--primary);
  color: var(--white);
  border-radius: 8px;
  padding: 11px 18px;
  white-space: nowrap;
}

.fr-row-price-note {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .fr-mobile-fare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }

  .fr-mobile-fare .fr-row-price {
    margin: 0;
  }

  .fr-mobile-fare .fr-row-price-note {
    margin: 0;
  }

  .fr-mobile-fare .fr-collapse-btn {
    flex: none;
    margin: 2px 0 0;
  }

  .fr-row {
    gap: 10px;
    padding: 12px 16px;
  }

  .fr-row-carrier {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
    text-align: left;
  }

  .fr-row-logos {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .fr-row-carrier .fr-logo {
    width: 40px;
    height: 40px;
  }

  .fr-row-code {
    grid-column: 2;
    grid-row: 1;
  }

  .fr-row-flightno {
    grid-column: 2;
    grid-row: 2;
  }

  .fr-row-times {
    gap: 6px;
  }

  .fr-row-time {
    font-size: 24px;
  }

  .fr-row-date {
    font-size: 11px !important;
  }

  .fr-row-route {
    gap: 6px;
    font-size: 14px;
  }

  .fr-row-fare {
    display: none;
  }
}

.fr-compact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 12px 18px 16px;
}

/* Badges and pills */
.fr-badge {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 6px;
  margin-bottom: 6px;
}

.fr-badge-green {
  background: var(--green-light);
  color: var(--accent-teal-dark);
}

.fr-pill {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-blue-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* Blocks inside the featured card */
.fr-block {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

.fr-block h4,
.fr-fare-summary h4,
.fr-packages h4,
.fr-more-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.fr-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 14px;
}

.fr-block-head h4 {
  margin-bottom: 0;
}

.fr-block-head small {
  color: var(--muted);
  font-size: 14px;
}

.fr-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.fr-eyebrow-blue {
  color: var(--primary);
}

/* Journey legs */
.fr-leg {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.fr-leg:last-child {
  margin-bottom: 0;
}

.fr-leg-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--primary-pale);
  padding: 12px 16px;
}

.fr-leg-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.fr-leg-bar b {
  display: block;
  font-size: 14px;
}

.fr-leg-bar small {
  color: var(--muted);
  font-size: 14px;
}

.fr-day-offset {
  color: var(--warning);
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

/* Flight segments */
.fr-segment {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.fr-segment:last-child {
  border-bottom: 0;
}

.fr-segment-head {
  margin-bottom: 14px;
}

.fr-segment-carrier {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fr-segment-carrier b {
  display: block;
  font-size: 14px;
}

.fr-segment-carrier small {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.fr-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
  color: var(--white);
}

.fr-segment-route {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .fr-segment-route {
    grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
}

.fr-end b,
.fr-end small {
  display: block;
}

.fr-end .fr-end-time {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2px;
}

.fr-end small {
  color: var(--muted);
  font-size: 14px;
}

.fr-end b:not(.fr-end-time) {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.fr-end-right {
  text-align: left;
}

@media (min-width: 640px) {
  .fr-end-right {
    text-align: right;
  }
}

.fr-track {
  text-align: center;
  width: 100%;
}

.fr-track-time {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 9px;
}

.fr-track-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.fr-track-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
  z-index: 1;
}

.fr-track-plane {
  color: var(--primary);
  font-size: 32px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  background: var(--white);
  z-index: 1;
  line-height: 1;
}

.fr-track-line::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 0;
  transform: translateY(-50%);
  border-top: 2px dotted var(--primary-pale);
}

.fr-baggage-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  background: var(--green-light);
  border: 1px solid var(--color-rgba-16-185-129-0-25);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--accent-teal-dark);
}

.fr-baggage-line i {
  flex: none;
  margin-top: 1px;
}

/* Connection notes */
.fr-note-box {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  margin: 0 16px 16px;
  border-radius: 8px;
}

.fr-note-box i {
  flex: none;
  margin-top: 2px;
}

.fr-note-box b {
  display: block;
}

.fr-note-box span {
  display: block;
  line-height: 1.45;
}

.fr-note-connection {
  background: var(--gray-50);
  border: 1px solid var(--border);
  color: var(--gray-700);
}

.fr-note-connection i {
  color: var(--muted);
}

.fr-note-airport-change,
.fr-note-overnight {
  background: var(--amber-light);
  border: 1px solid var(--color-rgba-245-158-11-0-3);
  color: var(--color-hex-92400e);
}

.fr-note-airport-change i,
.fr-note-overnight i {
  color: var(--warning);
}

/* ---------- Fare summary ---------- */
.fr-fare-summary {
  border-bottom: 1px solid var(--border);
}

.fr-fare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 0;
}

.fr-selected-label {
  background: var(--green-light);
  color: var(--accent-teal-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
}

.fr-fare-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 16px 22px 22px;
}

@media (min-width: 768px) {
  .fr-fare-body {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
  }
}

.fr-fare-left b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.fr-fare-left small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.fr-fare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 3px 0;
}

.fr-fare-row span {
  color: var(--muted);
}

.fr-fare-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
}

.fr-fare-total small {
  color: var(--muted);
  font-size: 14px;
}

.fr-fare-total b {
  font-size: 26px;
  font-weight: 700;
}

.fr-fare-fine {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
}

/* ---------- Fare Summary Breakdown Table & Cards ---------- */

.fr-fare-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fr-fare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.fr-fare-table th,
.fr-fare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.fr-fare-table th {
  background: #f8fafc;
  color: var(--text-dark, #1e293b);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fr-fare-table th:first-child,
.fr-fare-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.fr-fare-table tr.fr-fare-total-row {
  background: #f1f5f9;
  font-weight: 700;
  border-top: 2px solid var(--primary, #0d6efd);
}

.fr-fare-table tr.fr-fare-total-row td {
  color: var(--text-dark, #0f172a);
  border-bottom: none;
}

.fr-fare-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.fr-fare-pax-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.fr-fare-pax-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}

.fr-fare-right-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

.fr-fare-right-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.fr-book-btn,
.fr-continue-btn,
.fr-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  padding: 11px 18px;
  transition: all 0.2s ease;
}

.fr-book-btn {
  width: 100%;
  margin-top: 12px;
}

.fr-book-btn:hover,
.fr-continue-btn:hover,
.fr-select-btn:hover {
  background: var(--primary-dark);
  color: var(--white);
}

/* ---------- Fare packages ---------- */
.fr-packages {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

/* No heading above it any more, so the disclaimer starts flush. */
.fr-packages-head p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* ---------- Fare Packages Carousel ---------- */

.fr-packages-carousel-wrapper {
  position: relative;
  width: 100%;
}

.fr-package-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
  width: 100%;
  padding: 6px 4px 16px 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.fr-package-grid::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}

.fr-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--border);
  color: var(--text-dark, #1f2937);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.fr-carousel-btn:hover:not(:disabled) {
  background: var(--primary, #0d6efd);
  color: #ffffff;
  border-color: var(--primary, #0d6efd);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.3);
  transform: translateY(-50%) scale(1.08);
}

.fr-carousel-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}

.fr-carousel-btn:disabled,
.fr-carousel-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.fr-carousel-btn.fr-carousel-prev {
  left: -12px;
}

.fr-carousel-btn.fr-carousel-next {
  right: -12px;
}

@media (max-width: 768px) {
  .fr-carousel-btn.fr-carousel-prev {
    left: 2px;
  }
  .fr-carousel-btn.fr-carousel-next {
    right: 2px;
  }
}

.fr-package {
  flex: 0 0 280px;
  min-width: 275px;
  max-width: 320px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

@media (max-width: 576px) {
  .fr-package {
    flex: 0 0 85%;
    min-width: 250px;
  }
}

.fr-package:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.fr-package:focus-visible {
  outline: 3px solid var(--primary-pale);
  outline-offset: 2px;
}

.fr-package.selected {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px rgb(var(--brand-orange-rgb) / 0.12);
}

.fr-package-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}

.fr-package.selected .fr-package-radio {
  color: var(--accent-teal-dark);
}

.fr-package-radio input {
  accent-color: var(--accent-teal);
  width: 14px;
  height: 14px;
}

.fr-package-name {
  font-size: 15px;
  font-weight: 700;
}

.fr-package-price {
  font-size: 24px;
  font-weight: 700;
  margin: 2px 0 2px;
}

.fr-package-delta {
  color: var(--muted);
  font-size: 14px;
}

.fr-package-rows {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 8px;
  flex: 1;
}

.fr-package-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}

.fr-package-row span {
  color: var(--muted);
}

.fr-package-row b {
  font-weight: 600;
  text-align: right;
}

.fr-package-btn {
  margin-top: 14px;
  width: 100%;
  border: 1.5px solid var(--border-dark);
  border-radius: 9px;
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  padding: 9px;
  transition: all 0.2s ease;
}

.fr-package-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.fr-package.selected .fr-package-btn {
  background: var(--accent-teal);
  border-color: var(--accent-teal);
  color: var(--white);
  cursor: default;
}

/* Continue bar */
.fr-continue {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--primary-light);
  border: 1px solid var(--primary-pale);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .fr-continue {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fr-continue b {
  display: block;
  font-size: 14px;
}

.fr-continue small {
  color: var(--muted);
  font-size: 14px;
}

.fr-continue-btn {
  flex: none;
}

.fr-detail-panel[hidden] {
  display: none;
}

.fr-detail-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 20px 22px 0;
  padding: 4px;
  background: var(--gray-100);
  border-radius: 12px;
}

.fr-detail-tab {
  border: 0;
  background: transparent;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s ease;
}

.fr-detail-tab:hover {
  color: var(--primary-blue);
}

.fr-detail-tab.active {
  background: var(--white);
  color: var(--primary-blue-dark);
  box-shadow: var(--shadow-sm);
}

.fr-card-featured.collapsed .fr-detail-tabs {
  display: none;
}

.fr-collapse-btn {
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  padding: 0;
}

.fr-collapse-btn i {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.fr-card-featured.collapsed .fr-block,
.fr-card-featured.collapsed .fr-fare-summary,
.fr-card-featured.collapsed .fr-packages {
  display: none;
}

.fr-card-featured.collapsed .fr-collapse-btn i {
  transform: rotate(-180deg);
}

/* ---------- "More ways to fly" ---------- */
.fr-more-title {
  margin: 26px 0 14px;
}

.fr-compact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fr-compact-more {
  margin-top: 14px;
}

.fr-card-compact {
  display: block;
  overflow: hidden;
  transition: all 0.2s ease;
}

.fr-card-compact:hover {
  box-shadow: var(--shadow-lg);
}

.fr-link-btn {
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0 0;
}

.fr-link-btn i {
  margin-left: 4px;
}

.fr-select-btn {
  font-size: 14px;
}

/* ---------- Empty state ---------- */
.fr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--card-bg);
  border: 1.5px dashed var(--border-dark);
  border-radius: 16px;
  padding: 48px 24px;
  color: var(--muted);
}

.fr-empty i {
  font-size: 30px;
  color: var(--gray-300);
}

.fr-empty b {
  color: var(--gray-900);
  font-size: 15px;
}

.fr-empty span {
  font-size: 14px;
  max-width: 360px;
}

.fr-reset-btn {
  margin-top: 8px;
  border: 1px solid var(--border-dark);
  border-radius: 9px;
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
}

/* ---------- Awaiting search ---------- */
.fr-awaiting-search .fr-header {
  display: none;
}

.fr-await {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--card-bg);
  border: 1.5px dashed var(--border-dark);
  border-radius: 16px;
  padding: 56px 24px;
  color: var(--muted);
}

.fr-await i {
  font-size: 30px;
  color: var(--gray-300);
}

.fr-await b {
  color: var(--gray-900);
  font-size: 15px;
}

.fr-await span {
  font-size: 14px;
  max-width: 380px;
}

.fr-awaiting-search .fr-layout {
  display: none;
}

.fr-awaiting-search .fr-await {
  display: flex;
}

/* ---------- Booking notice ---------- */
.fr-booking-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--green-light);
  border: 1px solid var(--color-rgba-16-185-129-0-3);
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 18px;
}

.fr-booking-notice > i {
  color: var(--success);
  font-size: 20px;
  flex: none;
}

.fr-booking-notice b {
  display: block;
  font-size: 14px;
}

.fr-booking-notice span {
  color: var(--gray-600);
  font-size: 14px;
}

.fr-booking-notice button {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 4px;
}

/* ---------- Sort / more buttons reuse project styles ---------- */
.more-btn {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  background-image: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--accent-teal)
  );
  color: var(--white);
  font-weight: 600;
}

.more-btn:hover {
  color: var(--white);
}

/* Desktop flight-results styles migrated from the former standalone stylesheet. */

@media (min-width: 992px) {
  .navbar-container,
  .footer-top,
  .footer-bottom {
    max-width: none;
  }

  .search-panels {
    padding-left: 0;
    padding-right: 0;
  }

  .fr-page {
    width: auto;
    max-width: none;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
  }

  /* Keep the dates, filters, and results in the main column; the rail runs
     alongside them from the top of the desktop results area.

     The panel must not clip its overflow: the sort dropdown hangs below the
     toolbar, and the collapsed panel is only a couple of rows tall. The
     rounded corners are given to the first and last child instead of being
     produced by an overflow clip. */
  .fr-filters-wide {
    grid-column: 1;
    grid-row: 2;
    border-radius: 6px;
  }

  .fr-filters-wide > .fr-desk-toolbar {
    border-radius: 6px 6px 0 0;
  }

  .fr-filters-wide > :last-child {
    border-radius: 0 0 6px 6px;
  }

  /* Collapsed: the wide body is display:none, so the chip row is what the
     panel ends on. */
  .fr-filters-wide.is-collapsed > .fr-filter-chips {
    border-radius: 0 0 6px 6px;
  }

  .fr-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0px, 0px);
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
  }

  .fr-datestrip.d-lg-block {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
  }

  .fr-layout > main {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
  }

  /* It is a row now, not a sticky column. */
  .fr-sidebar {
    position: static;
    top: auto;
  }

  .fr-rail {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .fr-rail.d-lg-block {
    display: flex !important;
  }
}

/* ---------- Flexible Dates Panel --------------------------------------------- */

.fr-flex-dates {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.fr-flex-dates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  background: var(--card-bg, #fff);
  transition: background 0.15s ease;
}

.fr-flex-dates-header:hover {
  background: #f1f5f9;
}

.fr-flex-dates-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark, #1e293b);
}

.fr-flex-dates-title i {
  font-size: 17px;
  color: var(--primary-blue, #1d4ed8);
}

.fr-flex-dates-chevron {
  font-size: 16px;
  color: var(--muted, #64748b);
  transition: transform 0.25s ease;
}

.fr-flex-dates-chevron.is-open {
  transform: rotate(180deg);
}

.fr-flex-dates-body {
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
}

.fr-flex-dates-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Flexible dates table */
.fr-flex-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 13px;
}

.fr-flex-table thead tr th,
.fr-flex-table tbody tr td,
.fr-flex-table tbody tr th {
  padding: 7px 8px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Departure header cells */
.fr-flex-th {
  background: #f8fafc;
  color: var(--text-dark, #1e293b);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 2px solid var(--border);
  letter-spacing: 0.01em;
}

.fr-flex-th.is-active-col {
  background: var(--primary-light, #dbeafe);
  color: var(--primary-blue-dark, #1e40af);
  border-bottom-color: var(--primary-blue, #1d4ed8);
}

/* Corner cell (top-left of the grid) */
.fr-flex-th-corner {
  background: #f8fafc;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted, #64748b);
  text-align: left;
  border-bottom: 2px solid var(--border);
  min-width: 110px;
}

/* Return date row label cells */
.fr-flex-td-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-dark, #334155);
  background: #f8fafc;
  text-align: left;
  border-right: 1px solid var(--border);
  padding: 8px 10px !important;
  white-space: nowrap;
}

.fr-flex-td-label.is-active-row {
  background: var(--primary-light, #dbeafe);
  color: var(--primary-blue-dark, #1e40af);
}

/* Price data cells */
.fr-flex-td {
  border: 1px solid #f1f5f9;
  padding: 6px 6px !important;
}

.fr-flex-td.no-flight {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

/* Clickable price card inside each cell */
.fr-flex-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 90px;
  background: var(--white, #fff);
  transition: border-color 0.15s, background 0.15s;
}

.fr-flex-cell:hover {
  border-color: var(--primary-blue, #1d4ed8);
  background: #f0f7ff;
}

.fr-flex-carrier {
  font-size: 11px;
  color: var(--muted, #64748b);
  font-weight: 600;
}

.fr-flex-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark, #1e293b);
}

/* Currently selected date combination */
.fr-flex-cell.is-selected {
  border: 2px solid var(--primary-blue, #1d4ed8);
  background: var(--primary-light, #dbeafe);
}

.fr-flex-cell.is-selected .fr-flex-price {
  color: var(--primary-blue-dark, #1e40af);
}

/* Cheapest price highlight */
.fr-flex-cell.is-cheapest .fr-flex-price {
  color: #16a34a;
}

.fr-flex-cell.is-selected.is-cheapest .fr-flex-price {
  color: #15803d;
}

/* ---------- Date strip (legacy — kept for fallback) --------------------------- */

/* ---------- Date strip ---------------------------------------------------- */


.fr-datestrip {
  display: none;
}

@media (min-width: 992px) {
  .fr-datestrip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 4px;
  }

  .fr-day {
    flex: 1 1 0;
    min-width: 116px;
    padding: 9px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card-bg);
    text-align: center;
    line-height: 1.35;
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      background 0.15s ease;
  }

  .fr-day b {
    display: block;
    font-size: 14px !important;
    font-weight: 600;
  }

  .fr-day small {
    display: block;
    font-size: 13px !important;
    color: var(--muted);
  }

  .fr-day:hover {
    border-color: var(--primary-blue);
  }

  .fr-day:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
  }

  /* 2px border + 1px less padding keeps the tile the same size when active,
     so the highlight does not shift the strip. */
  .fr-day.is-active {
    border: 2px solid var(--primary-blue);
    background: var(--primary-light);
    padding: 8px 7px;
  }

  .fr-day.is-active b,
  .fr-day.is-active small {
    color: var(--primary-blue-dark);
    font-weight: 700;
  }
}

/* ---------- Desktop toolbar row (top row inside the filter panel) -------- */

.fr-desk-toolbar {
  display: none;
}

@media (min-width: 992px) {
  .fr-desk-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }

  /* Tabs sit flush against the panel edge, as in the reference. */
  .fr-desk-sort {
    display: inline-flex;
    gap: 4px;
    margin: -14px 0 -14px -22px;
    padding: 4px;
    border-radius: 12px;
    background: var(--gray-100);
  }

  .fr-segment {
    border: 0;
    background: transparent;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .fr-segment:hover {
    color: var(--primary-blue);
  }

  .fr-segment.is-active {
    background: var(--white);
    color: var(--primary-blue-dark);
    box-shadow: var(--shadow-sm);
  }

  .fr-quick-stops {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .fr-stop-chip {
    border: 1px solid var(--border-dark);
    border-radius: 999px;
    background: var(--white);
    padding: 4px 9px;
    font-size: 12px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .fr-stop-chip:hover,
  .fr-stop-chip.is-active {
    border-color: var(--primary-blue);
    background: var(--primary-light);
    color: var(--primary-blue-dark);
  }

  /* Sort dropdown — same treatment as the shared .form-control-custom /
     .fb-select fields elsewhere in the project: 1.5px gray border, md
     radius, white fill, blue focus ring, gray chevron. */
  .fr-sort-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 205px;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    transition:
      border-color 0.2s,
      box-shadow 0.2s;
  }

  .fr-sort-select-wrap:hover {
    border-color: var(--primary-blue);
  }

  .fr-sort-prefix {
    color: var(--muted);
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
  }

  .fr-sort-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary-blue-dark);
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  .fr-sort-trigger:focus-visible {
    outline: none;
  }

  .fr-sort-value {
    flex: 1;
    text-align: left;
  }

  /* The ring lives on the wrapper so it hugs the whole control, matching the
     focus treatment of the other custom select fields. */
  .fr-sort-select-wrap:has(.fr-sort-trigger:focus-visible) {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgb(var(--brand-blue-rgb) / 0.1);
  }

  .fr-sort-trigger .bi {
    color: var(--gray-400);
    font-size: 11px !important;
    transition: transform 0.2s ease;
  }

  .fr-sort-select-wrap.is-open {
    border-color: var(--primary-blue);
  }

  .fr-sort-select-wrap.is-open .fr-sort-trigger .bi {
    transform: rotate(180deg);
  }

  .fr-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px var(--color-rgba-0-0-0-0-12);
  }

  .fr-sort-menu[hidden] {
    display: none;
  }

  .fr-sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    color: var(--gray-900);
    font-size: 14px !important;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }

  .fr-sort-option:hover,
  .fr-sort-option:focus-visible {
    background: var(--gray-100);
    color: var(--primary-blue);
    outline: none;
  }

  .fr-sort-option .bi {
    color: var(--primary-blue);
    font-size: 14px !important;
  }

  .fr-sort-option:not(.is-active) .bi {
    visibility: hidden;
  }

  .fr-sort-option.is-active {
    color: var(--primary-blue-dark);
    font-weight: 600;
  }

  .fr-desk-toolbar .fr-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .fr-desk-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  /* Plain blue text link — no border or fill in the reference. */
  .fr-toggle-btn {
    border: 0;
    background: none;
    color: var(--primary-blue);
    padding: 4px 0;
    font-size: 15px !important;
    font-weight: 600;
    white-space: nowrap;
  }

  .fr-toggle-btn:hover {
    color: var(--primary-blue-dark);
    text-decoration: underline;
  }

  .fr-toggle-btn .bi {
    margin-left: 4px;
    font-size: 12px !important;
  }

  .fr-toggle-btn .bi-x-lg {
    font-size: 11px !important;
  }
}

/* ---------- Desktop filter panel ----------------------------------------- */

@media (min-width: 992px) {
  .fr-filter-panel-wide {
    background: var(--white);
    box-shadow: none;
    padding: 0;
  }

  .fr-wide-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 12px 16px 16px;
  }

  .fr-wide-col {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  .fr-wide-col.fr-stop-filter-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }

  .fr-stop-filter-row h3 {
    margin: 0;
  }

  /* Price Range puts "Clear" on the same line as its heading. */
  .fr-wide-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .fr-wide-col-head h3 {
    margin-bottom: 10px;
  }

  .fr-wide-col-head .fr-price-clear {
    margin-bottom: 10px;
    margin-left: auto;
  }

  .fr-wide-col h3 {
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .fr-wide-col .ck {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 14px !important;
    cursor: pointer;
  }

  .fr-wide-col .ck span {
    flex: 1;
  }

  .fr-wide-col .ck em {
    font-style: normal;
    color: var(--muted);
    font-size: 13px !important;
  }

  .fr-wide-col .form-check-input {
    margin: 0;
    width: 16px;
    height: 16px;
    flex: none;
  }

  /* Price range: "PKR 39,900 - [579792]" */
  .fr-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
  }

  .fr-price-bound {
    color: var(--muted);
    font-size: 14px !important;
    white-space: nowrap;
  }

  .fr-price-dash {
    color: var(--muted);
    font-size: 14px !important;
  }

  .fr-price-num {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    font-size: 14px !important;
    color: var(--gray-700);
  }

  .fr-price-clear {
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    background: var(--white);
    color: var(--primary-blue);
    padding: 5px 14px;
    font-size: 14px !important;
    font-weight: 600;
  }

  .fr-price-clear:hover {
    background: var(--primary-light);
  }

  /* Collapsed state driven by the "Less filters" toggle. */
  .fr-filters-wide.is-collapsed .fr-wide-body {
    display: none;
  }
}

@media (min-width: 992px) {
  .fr-toolbar-note {
    display: none;
  }
}

/* ---------- Right rail ---------------------------------------------------- */

@media (min-width: 992px) {
  .fr-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .fr-rail-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
  }

  .fr-share-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    background: var(--white);
    color: var(--primary-blue);
    font-size: 15px !important;
    font-weight: 600;
    margin-bottom: 0;
  }

  .fr-share-btn:hover {
    background: var(--primary-light);
  }

  .fr-share-btn i {
    margin-right: 6px;
  }

  .fr-rail-banner-card {
    padding: 0;
    overflow: hidden;
  }

  .fr-promo-banner {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-hex-1f1f1f);
  }

  .fr-promo-banner .carousel-item {
    aspect-ratio: 9 / 16;
  }

  .fr-promo-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .fr-promo-banner .carousel-indicators {
    margin-bottom: 8px;
  }

  .fr-promo-banner .carousel-indicators button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
  }

  .fr-promo-banner .carousel-control-prev,
  .fr-promo-banner .carousel-control-next {
    width: 16%;
  }
}