/* Trip cards – like booking.satrans reference (RTL) */
:root{
  --trip-brand: var(--primary, #A57C35);
  --trip-brand-weak: color-mix(in srgb, var(--trip-brand) 10%, #fff 90%);
  --trip-text: var(--foreground, #0f172a);
  --trip-muted: var(--muted-foreground, #64748b);
  --trip-border: var(--border, #e5e7eb);
  --trip-card: var(--card, #fff);
  --trip-shadow: var(--sat-shadow-sm, 0 8px 30px rgba(0,0,0,.06));
}

.trip-card{
  background: var(--trip-card);
  border: 1px solid var(--trip-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.trip-card + .trip-card{ margin-top: 14px; }

.trip-card:hover{ box-shadow: var(--trip-shadow); transform: translateY(-2px); transition: .2s; }
.trip-card{ transition: .2s; }

.trip-card .sat-trip{
  padding: 16px 16px 12px;
}

.sat-trip__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.sat-trip__logo{
  width: 74px;
  height: auto;
  object-fit: contain;
}

.sat-trip__meta{
  display:flex;
  align-items:center;
  gap: 10px;
}

.sat-trip__class{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sat-trip__class--economy{
  background: rgba(63,200,235,.18);
  color: #0b7ea0;
  border-color: rgba(63,200,235,.28);
}

.sat-trip__class--flexible{
  background: color-mix(in srgb, var(--trip-brand) 22%, #fff 78%);
  color: var(--trip-brand);
  border-color: color-mix(in srgb, var(--trip-brand) 30%, #fff 70%);
}

.sat-trip__code{
  color: var(--trip-muted);
  font-weight: 800;
  font-size: 16px;
}

.sat-trip__main{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px){
  .sat-trip__main{ grid-template-columns: 1.1fr .9fr; }
}

.sat-trip__right{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.sat-trip__stop{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items:center;
}

.sat-trip__time{
  font-weight: 900;
  font-size: 18px;
  color: #111827;
  min-width: 64px;
  text-align: start;
}

.sat-trip__place{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  color: #111827;
}

.sat-trip__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--trip-brand);
  flex: 0 0 auto;
}
.sat-trip__dot--alt{ background: rgba(63,200,235,1); }

.sat-trip__date{
  grid-column: 2 / 3;
  color: #94a3b8;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

.sat-trip__left{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 0 0;
}

.sat-trip__stat{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--trip-muted);
  font-weight: 800;
}

.sat-trip__stat img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: .8;
}

.sat-trip__divider{
  position: relative;
  margin-top: 16px;
  border-top: 1px dashed var(--trip-border);
}

.sat-trip__divider::before,
.sat-trip__divider::after{
  content:"";
  position:absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--background, #f5f5f5);
  border: 1px solid var(--trip-border);
}

.sat-trip__divider::before{ left: -12px; }
.sat-trip__divider::after{ right: -12px; }

.sat-trip__bottom{
  padding: 12px 16px 16px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;
}

.sat-trip__discount{
  justify-self: start;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--trip-brand) 35%, #fff 65%);
  background: #fff;
  color: var(--trip-brand);
  font-weight: 900;
  font-size: 14px;
}

.sat-trip__price{
  justify-self: center;
  text-align:center;
  color: var(--trip-brand);
  font-weight: 900;
  line-height: 1.1;
}

.sat-trip__price .from{
  display:block;
  font-size: 14px;
  color: var(--trip-muted);
  font-weight: 800;
  margin-bottom: 2px;
}

.sat-trip__price .val{
  font-size: 40px;
  letter-spacing: .5px;
}

.sat-trip__price .cur{
  font-size: 22px;
  margin-inline-start: 6px;
  vertical-align: baseline;
}

.sat-trip__details{
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--trip-brand);
  font-weight: 900;
  font-size: 16px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
}

.sat-trip__chev{
  width: 10px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -4px;
  opacity: .85;
}

/* A11y focus */
.trip-card:focus-within{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--trip-brand) 18%, transparent);
  border-color: color-mix(in srgb, var(--trip-brand) 45%, #fff 55%);
}

/* ------------------------------------------------------------------
   Fare option cards (Economy/Flexible) – matches the provided screenshot
-------------------------------------------------------------------*/
:root{
  --fare-economy: #36b7f2;   /* أزرق */
  --fare-flex:    #2bb46b;   /* أخضر */
  --fare-border:  #e5e7eb;
  --fare-bg:      #ffffff;
  --fare-soft:    #f7f7f7;
  --fare-text:    #0f172a;
  --fare-muted:   #6b7280;
}

.fare-options{ padding: 0 16px 16px; }

.fare-card{
  background: var(--fare-bg);
  border: 2px solid var(--fare-border);
  border-radius: 12px;
  padding: 18px;
  margin-top: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.fare-card--economy{ border-color: color-mix(in srgb, var(--fare-economy) 65%, #fff 35%); }
.fare-card--flexible{ border-color: color-mix(in srgb, var(--fare-flex) 65%, #fff 35%); }

.fare-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.fare-card__title{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}
.fare-card--economy .fare-card__title{ color: var(--fare-economy); }
.fare-card--flexible .fare-card__title{ color: var(--fare-flex); }

.fare-card__seats{
  color: var(--fare-muted);
  font-size: 16px;
  margin-right: 6px;
  font-weight: 700;
}

.fare-card__check{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 2px solid var(--fare-border);
  color: transparent;
  font-weight: 900;
}
.fare-card.selected .fare-card__check{
  color: #fff;
  border-color: transparent;
}
.fare-card--economy.selected .fare-card__check{ background: var(--fare-economy); }
.fare-card--flexible.selected .fare-card__check{ background: var(--fare-flex); }

.fare-pillbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 14px;
}

.fare-pill{
  border: 1px solid var(--fare-border);
  background: #f3f4f6;
  color: #6b7280;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  user-select:none;
}

.fare-pill--active{
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.fare-card--economy .fare-pill--active{
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.fare-summary{
  border: 1px solid var(--fare-border);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.fare-summary__title{
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
}

.fare-summary__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:start;
}

.fare-summary__left{
  background: var(--fare-soft);
  border-radius: 10px;
  padding: 12px;
}

.fare-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 18px;
  margin: 8px 0;
}

.fare-line small{ color: var(--fare-muted); font-size: 14px; }
.fare-line--red{ color: #dc2626; }

.fare-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 22px;
  font-weight: 900;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fare-border);
}

.fare-total-big{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap: 10px;
  margin-top: 6px;
  color: var(--trip-brand);
  font-weight: 900;
  font-size: 46px;
}
.fare-total-big .cur{ font-size: 28px; }

.fare-cta{
  width:100%;
  border:0;
  border-radius: 8px;
  padding: 18px 14px;
  font-size: 28px;
  font-weight: 900;
  color:#fff;
  margin-top: 14px;
  cursor:pointer;
}

.fare-card--economy .fare-cta{ background: var(--fare-economy); }
.fare-card--flexible .fare-cta{ background: var(--fare-flex); }

@media (max-width: 768px){
  .fare-summary__grid{ grid-template-columns: 1fr; }
  .fare-card__title{ font-size: 24px; }
  .fare-summary__title{ font-size: 24px; }
  .fare-cta{ font-size: 24px; }
  .fare-total-big{ font-size: 40px; }
}