/* ==========================================================================
   app.css — أنماط منصة «رفيق» الخاصة
   يُحمَّل أخيراً بعد ra-ds.css ← ra-brand.css ← shared.css
   صفر لون صريح: لا #hex ولا rgb() ولا hsl() في هذا الملف — كل لون من --ra-*
   خصائص منطقية فقط · لا @media (prefers-color-scheme) — الوضع الداكن يُدار في ra-ds
   ========================================================================== */

/* ---------------------------------------------------- شاشة الدخول */
.rq-why p { font-size: var(--ra-fs-sm); line-height: 1.75; }

/* ---------------------------------------------------- بحث الرحلة */
.rq-search { display: flex; gap: var(--ra-s-3); align-items: flex-end; flex-wrap: wrap; }
.rq-search__field { flex: 1 1 220px; }
.rq-search input { font-family: var(--ra-font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------- بطاقة الرحلة */
.rq-flight-grid { display: grid; gap: var(--ra-s-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .rq-flight-grid { grid-template-columns: 1.2fr .8fr; align-items: start; } }

.rq-flightcard__no {
  font-family: var(--ra-font-mono); font-size: var(--ra-fs-3xl);
  font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.rq-flightcard__dest { font-size: var(--ra-fs-lg); font-weight: 600; }
.rq-flightcard__grid {
  display: grid; gap: var(--ra-s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  margin-block-start: var(--ra-s-5);
  padding-block-start: var(--ra-s-5);
  border-block-start: 1px solid var(--ra-border);
}
.rq-cell { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.rq-cell__k { font-size: var(--ra-fs-xs); color: var(--ra-text-mute); }
.rq-cell__v { font-weight: 600; overflow-wrap: anywhere; }
.rq-cell__v--big {
  font-family: var(--ra-font-display); font-size: var(--ra-fs-xl);
  color: var(--ra-brand); line-height: 1.2;
}

/* ---------------------------------------------------- حاسبة الخروج */
.rq-leave-form {
  display: grid; gap: var(--ra-s-4); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.rq-leave-form .ra-btn { min-block-size: var(--ra-tap); }

.rq-leave-out { display: grid; gap: var(--ra-s-4); grid-template-columns: 1fr; }
@media (min-width: 780px) { .rq-leave-out { grid-template-columns: minmax(220px, .8fr) 1.2fr; align-items: start; } }
.rq-leave-out .ra-alert { grid-column: 1 / -1; }

.rq-leave-out__hero { display: flex; flex-direction: column; gap: var(--ra-s-2); text-align: center; }
.rq-leave-out__time {
  font-family: var(--ra-font-display); font-size: var(--ra-fs-4xl);
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.rq-leave-out__lines { padding-block-start: var(--ra-s-1); }

/* ---------------------------------------------------- سطور مفصّلة */
.rq-lines { display: flex; flex-direction: column; gap: var(--ra-s-1); margin-block-start: var(--ra-s-2); }
.rq-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ra-s-3);
  padding-block: var(--ra-s-2);
  border-block-end: 1px dashed var(--ra-border);
  font-size: var(--ra-fs-sm);
}
.rq-line:last-child { border-block-end: none; }
.rq-line__k { color: var(--ra-text-soft); min-inline-size: 0; }
.rq-line__v { font-weight: 600; white-space: nowrap; }
.rq-line--total {
  border-block-start: 2px solid var(--ra-border-strong);
  border-block-end: none; margin-block-start: var(--ra-s-2);
  padding-block-start: var(--ra-s-3); font-size: var(--ra-fs-md);
}
.rq-line--total .rq-line__k { color: var(--ra-text); font-weight: 600; }
.rq-line--total .rq-line__v { color: var(--ra-brand); font-family: var(--ra-font-display); }

/* ---------------------------------------------------- الإشعارات */
.rq-notif {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--ra-s-3);
  align-items: start; padding: var(--ra-s-3);
  border-radius: var(--ra-r-md); background: var(--ra-surface-alt);
  border: 1px solid var(--ra-border);
}
.rq-notif__icon { padding-inline: var(--ra-s-2); align-self: center; }
.rq-notif__time { white-space: nowrap; align-self: center; }

/* ---------------------------------------------------- بطاقات الخدمات */
.rq-service { display: flex; flex-direction: column; gap: var(--ra-s-3); }
.rq-service__icon {
  inline-size: 44px; block-size: 44px; border-radius: var(--ra-r-md);
  display: grid; place-items: center; flex: none;
  background: var(--ra-brand-soft); color: var(--ra-brand);
}
.rq-service__icon svg { inline-size: 22px; block-size: 22px; }
.rq-service__body { flex: 1 1 auto; }
.rq-service h3 { font-size: var(--ra-fs-md); }
.rq-service__cta { align-self: flex-start; margin-block-start: auto; }

.rq-2col { display: grid; gap: var(--ra-s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* ---------------------------------------------------- أسألني */
.rq-ask-head h1 { font-size: var(--ra-fs-xl); }
.rq-ask-controls { align-items: flex-end; }

.rq-langtoggle {
  display: inline-flex; border: 1px solid var(--ra-border-strong);
  border-radius: var(--ra-r-pill); overflow: hidden; background: var(--ra-surface);
}
.rq-langtoggle button {
  min-block-size: 36px; padding-inline: var(--ra-s-4);
  border: none; background: none; cursor: pointer;
  font-size: var(--ra-fs-sm); font-weight: 600; color: var(--ra-text-soft);
  transition: background .16s ease, color .16s ease;
}
.rq-langtoggle button[aria-pressed="true"] { background: var(--ra-brand); color: var(--ra-on-brand); }

.rq-chat { display: flex; flex-direction: column; gap: var(--ra-s-4); padding: 0; overflow: hidden; }
.rq-chat__log {
  display: flex; flex-direction: column; gap: var(--ra-s-4);
  padding: var(--ra-s-5);
  min-block-size: 46vh; max-block-size: 62vh; overflow-y: auto;
  scroll-behavior: smooth;
}
.rq-chat__chips {
  display: flex; gap: var(--ra-s-2); flex-wrap: wrap;
  padding-inline: var(--ra-s-5);
}
.rq-chat__form {
  display: flex; gap: var(--ra-s-2); align-items: center;
  padding: var(--ra-s-4) var(--ra-s-5);
  border-block-start: 1px solid var(--ra-border);
  background: var(--ra-surface-alt);
}
.rq-chat__form input {
  flex: 1 1 auto; min-inline-size: 0;   /* وإلا دفع زر الإرسال خارج إطار الشاشة */
  min-block-size: var(--ra-tap);
  padding: var(--ra-s-2) var(--ra-s-4);
  border: 1px solid var(--ra-border-strong); border-radius: var(--ra-r-pill);
  background: var(--ra-surface); color: var(--ra-text);
}
.rq-chat__form input:focus { outline: none; border-color: var(--ra-brand); box-shadow: 0 0 0 3px var(--ra-brand-soft); }

.rq-msg { display: flex; flex-direction: column; gap: var(--ra-s-1); max-inline-size: min(86%, 620px); }
.rq-msg--me { align-self: flex-start; align-items: flex-start; }
.rq-msg--bot { align-self: flex-end; align-items: flex-end; }
.rq-msg__who { font-size: var(--ra-fs-xs); color: var(--ra-text-mute); padding-inline: var(--ra-s-3); }
.rq-msg__body {
  padding: var(--ra-s-3) var(--ra-s-4);
  border-radius: var(--ra-r-lg);
  font-size: var(--ra-fs-sm); line-height: 1.75;
}
.rq-msg--me .rq-msg__body {
  background: var(--ra-brand); color: var(--ra-on-brand);
  border-start-start-radius: var(--ra-r-sm);
}
.rq-msg--bot .rq-msg__body {
  background: var(--ra-surface-sunk); color: var(--ra-text);
  border: 1px solid var(--ra-border);
  border-start-end-radius: var(--ra-r-sm);
}
.rq-msg__body p + p { margin-block-start: var(--ra-s-2); }
.rq-src { border-block-start: 1px dashed var(--ra-border-strong); padding-block-start: var(--ra-s-2); }

.rq-dots { display: inline-flex; gap: 4px; padding-block: var(--ra-s-1); }
.rq-dots i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--ra-text-mute); display: inline-block;
  animation: rq-bounce 1.1s ease-in-out infinite;
}
.rq-dots i:nth-child(2) { animation-delay: .16s; }
.rq-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rq-bounce { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.rq-confirm, .rq-handoff { display: block; min-inline-size: min(320px, 70vw); }
.rq-confirm strong, .rq-handoff strong { display: block; margin-block-end: var(--ra-s-2); }

/* ---------------------------------------------------- اكتشف */
.rq-timebar {
  position: sticky; inset-block-start: 64px; z-index: 30;
  background: var(--ra-brand); color: var(--ra-on-brand);
  padding-block: var(--ra-s-2);
}
.rq-timebar__inner { display: flex; align-items: center; gap: var(--ra-s-4); flex-wrap: wrap; }
.rq-timebar__label { display: inline-flex; align-items: center; gap: var(--ra-s-2); font-size: var(--ra-fs-sm); }
.rq-timebar__label svg { inline-size: 18px; block-size: 18px; }
.rq-timebar__label strong { font-family: var(--ra-font-display); font-size: var(--ra-fs-lg); }
.rq-timebar__track {
  flex: 1 1 160px; block-size: 8px; border-radius: var(--ra-r-pill);
  background: var(--ra-brand-soft); overflow: hidden; min-inline-size: 120px;
}
.rq-timebar__fill { display: block; block-size: 100%; background: var(--ra-accent-500); }
.rq-timebar .ra-fine { color: var(--ra-on-brand); opacity: .85; }
@media (max-width: 720px) { .rq-timebar { inset-block-start: 0; position: static; } }

.rq-filters {
  display: grid; gap: var(--ra-s-4); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.rq-filters__fit { align-self: center; }

.rq-venue { display: flex; flex-direction: column; gap: var(--ra-s-3); }
.rq-venue h3 { font-size: var(--ra-fs-md); }
.rq-venue__meta { display: flex; flex-wrap: wrap; gap: var(--ra-s-2); }
.rq-venue__meta .ra-badge svg { inline-size: 13px; block-size: 13px; }
.rq-venue__offer {
  display: flex; align-items: center; gap: var(--ra-s-2);
  padding: var(--ra-s-2) var(--ra-s-3); border-radius: var(--ra-r-sm);
  background: var(--ra-accent-soft); color: var(--ra-accent);
  font-size: var(--ra-fs-xs); font-weight: 600;
}
.rq-venue__offer svg { inline-size: 16px; block-size: 16px; flex: none; }

/* ---------------------------------------------------- الكشك */
.rq-kiosk { font-size: 1.15rem; }
.rq-kiosk .rq-chat__log { min-block-size: 58vh; max-block-size: 68vh; }
.rq-kiosk .rq-msg { max-inline-size: min(92%, 900px); }
.rq-kiosk .rq-msg__body { font-size: var(--ra-fs-lg); padding: var(--ra-s-4) var(--ra-s-5); }
.rq-kiosk .rq-chat__form input { min-block-size: 64px; font-size: var(--ra-fs-lg); }
.rq-kiosk .ra-btn { min-block-size: 60px; font-size: var(--ra-fs-lg); padding-inline: var(--ra-s-6); }
.rq-kiosk .ra-btn--sm { min-block-size: 52px; font-size: var(--ra-fs-md); }
.rq-kiosk .ra-btn--icon { padding-inline: var(--ra-s-4); }
.rq-kiosk h1 { font-size: var(--ra-fs-3xl); }
.rq-kiosk .ra-fine { font-size: var(--ra-fs-sm); }

/* ---------------------------------------------------- تفاصيل صغيرة */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▾ "; display: inline-block; transition: transform .2s ease; }
details[open] > summary::before { content: "▴ "; }

@media (max-width: 420px) {
  .rq-flightcard__no { font-size: var(--ra-fs-2xl); }
  .rq-leave-out__time { font-size: var(--ra-fs-3xl); }
  .ra-card { padding: var(--ra-s-4); }
}
