/* Yellow.ma responsive audit 66 — comparison readability plus mobile refinements. */

/* Comparison page: readable type and balanced actions on desktop and mobile. */
.comparison-hero-actions {
  width: min(590px, 100%);
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.comparison-hero-actions :where(a, button, .button) {
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
}
.comparison-trip-planner > div > p:not(.eyebrow) { font-size: 13px; line-height: 1.55; }
.comparison-trip-planner form label span { font-size: 10px; }
.comparison-trip-planner form input { min-height: 46px; font-size: 13px; }
.comparison-trip-planner form .button { min-height: 46px; font-size: 13px; }
.comparison-trip-planner > aside span { font-size: 11px; }
.comparison-insights > header > p,
.comparison-decision > header p:not(.eyebrow) { font-size: 14px; }
.comparison-insights a small { font-size: 11px; }
.comparison-insights a strong { font-size: 15px; }
.comparison-insights a b { font-size: 13px; }
.comparison-decision > header > span { font-size: 11px; }
.comparison-decision-card p strong { font-size: 14px; }
.comparison-decision-card p small,
.comparison-decision-card label > span { font-size: 11px; }
.comparison-decision-card button { min-height: 42px; font-size: 12px; }
.comparison-decision-card textarea { font-size: 14px; }
.comparison-view-toolbar > div:first-child strong { font-size: 14px; }
.comparison-view-toolbar > div:first-child span { font-size: 12px; }
.comparison-view-toolbar button { min-height: 42px; font-size: 13px; }
.comparison-summary-card > header p,
.comparison-summary-card > header > a { font-size: 12px; }
.comparison-summary-card dt { font-size: 11px; }
.comparison-summary-card dd { font-size: 13px; }
.comparison-label { font-size: 13px; }
.comparison-value { font-size: 14px; }
.compare-booking-button { min-height: 44px; font-size: 12px; }
@media (max-width: 740px) {
  html {
    scroll-padding-top: 148px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body.yellow-app {
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }
  body.yellow-app :where(button, a, input, select, textarea) { touch-action: manipulation; }
  body.yellow-app :where(input, select, textarea) { font-size: 16px; }
  main [id] { scroll-margin-top: 148px; }

  .menu-toggle { min-width: 48px; min-height: 48px; }
  .primary-nav { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .filter-panel { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  .listing-action-inner {
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }
  .listing-action { flex: 0 0 auto; scroll-snap-align: start; }
  :where(.comparison-scroll, .photo-lightbox-strip, .wizard-progress, .active-filter-bar > div) {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .photo-lightbox { height: 100dvh; }

  .comparison-hero-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .comparison-hero-actions :where(a, button, .button) {
    min-height: 50px;
    padding: 11px 12px;
    font-size: 14px;
  }
  .comparison-insights > div { grid-template-columns: 1fr; }
  .comparison-insights a {
    min-height: 108px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 15px;
  }
  .comparison-summary-card dl > div {
    grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
  }

  .compare-tray.is-collapsed {
    right: 12px;
    left: auto;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: 56px;
    max-width: none;
    height: 56px;
    min-height: 56px;
    padding: 6px;
    overflow: visible;
    border-radius: 17px;
  }
  .yellow-rtl .compare-tray.is-collapsed { right: auto; left: 12px; }
  .compare-tray.is-collapsed .compare-tray-toggle {
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  .compare-tray.is-collapsed .compare-tray-stack,
  .compare-tray.is-collapsed .compare-tray-toggle-copy { display: none; }
  .compare-tray.is-collapsed .compare-tray-toggle > i {
    width: 40px;
    height: 40px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0;
  }
  .compare-tray.is-collapsed .compare-tray-toggle > i::before {
    content: '⇄';
    font-size: 19px;
    font-weight: 900;
  }
  .compare-tray.is-expanded {
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-height: min(64dvh, 520px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  body:has(.compare-tray) #app { padding-bottom: 72px; }

  .mobile-site-dock,
  .mobile-listing-dock { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .mobile-site-dock a,
  .mobile-listing-dock :where(a, button) { -webkit-tap-highlight-color: transparent; }
  .footer-cta :where(.button, a),
  .search-recovery-actions a { min-height: 48px; }
}

@media (max-width: 390px) {
  .compare-tray.is-collapsed { right: 9px; }
  .yellow-rtl .compare-tray.is-collapsed { right: auto; left: 9px; }
  .footer-cta h2 { font-size: 30px; }
  .mobile-result-tools { gap: 6px; }
  .mobile-result-tools button { padding-inline: 8px; font-size: 12px; }
}