/* Step 5: "Local Rental" and "Delhi to Lucknow" sit in the same row. Each block
   spans as many of the row's five columns as it has cards (app-v3.js sets --span),
   so the cards are the same size as the Day Trips cards below. */

.transport-row-pair{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:14px;align-items:start}
.transport-row-pair>.transport-package-section{grid-column:span var(--span,1);min-width:0}
.transport-row-pair .day-trip-grid{grid-template-columns:repeat(var(--span,1),minmax(0,1fr))}
/* A CSS grid stretches its items to fill the row's height by default — a
   section with fewer cards still gets a row as tall as the tallest section
   next to it, and each card then stretches to match, leaving dead space
   above its checkbox. The title/description/terms already reserve equal
   room for their own text, so the cards line up without this stretch. */
.transport-row-pair .day-trip-grid{align-items:start}

/* A clear break between the three package types — the 14px grid gap above
   is shared with the gap between cards of the SAME type, so on its own it
   doesn't read as a group boundary. This adds real separation on top of it,
   without touching the spacing between cards inside one group. */
.transport-row-pair>.transport-package-section:not(:first-child){
  padding-left:28px;
}

@media(max-width:1050px){
  .transport-row-pair{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .transport-row-pair{grid-template-columns:1fr}
  .transport-row-pair>.transport-package-section{grid-column:1/-1}
  .transport-row-pair .day-trip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Stacked to one column here, so the extra gap moves from the left edge to the top. */
  .transport-row-pair>.transport-package-section:not(:first-child){
    padding-left:0;margin-top:28px;
  }
}
@media(max-width:480px){
  .transport-row-pair .day-trip-grid{grid-template-columns:1fr}
}

/* ===== Package cards: same structure, same height, smooth "Read more" ===== */

/* Local Rental and Delhi to Lucknow stretch to one common height */
.transport-row-pair{align-items:stretch}
.transport-row-pair>.transport-package-section{display:flex;flex-direction:column}
.transport-row-pair .day-trip-grid{flex:1}

/* Every card has the same parts in the same slots (title 2 lines, description
   2 lines, terms 2 lines, toggle, price), so collapsed cards are all equal. */
.day-trip-package .day-trip-copy b{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.day-trip-package .day-trip-copy small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.day-trip-package .day-trip-copy em.pkg-terms{min-height:27px}
.day-trip-package .day-trip-copy strong{min-height:28.5px}
/* Reserved two-line slots so every card in the row lines up */
.transport-row-pair .day-trip-package .day-trip-copy b{min-height:42px}
.transport-row-pair .day-trip-package .day-trip-copy small{min-height:33px}
/* The price line is only filled in once a cab type is actually picked (see
   disposalCard in app-v3.js) — an empty <strong> before that still reserved
   its full line height and top margin, leaving a blank block above the
   checkbox. Collapse it to nothing until there's an actual price to show. */
.day-trip-copy strong:empty{display:none}

/* "View details" button under the terms preview */
.pkg-more{display:block;height:19.5px;margin:4px 0 0;padding:0;border:0;background:none;color:var(--brand,#ae1022);font-family:inherit;font-size:11px;font-weight:600;line-height:19.5px;text-align:left;text-decoration:none;cursor:pointer;transition:color .15s}
.pkg-more:hover{color:var(--brand-dark,#8e0b1a)}
.pkg-more:focus-visible{outline:0;border-radius:3px;box-shadow:0 0 0 3px rgba(174,16,34,.25)}

/* Map-pin icon before each package title */
.day-trip-copy b .trip-pin{display:inline-block;flex:none;width:14px;height:14px;margin:0 6px -2px 0;fill:none;stroke:var(--brand,#ae1022);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* "/ day" after a per-day price */
.day-trip-copy strong .per-day{color:#7a8696;font-size:11px;font-weight:600}
.day-trip-copy strong .per-day{margin-left:2px}

/* ===== Package details popup ===== */
.pkg-modal{width:min(620px,calc(100% - 24px));max-height:88vh;padding:0;border:0;border-radius:20px;background:#fff;color:var(--ink,#202a38);box-shadow:0 30px 90px rgba(20,26,34,.35);overflow:hidden;font-family:inherit}
.pkg-modal[open]{display:flex;flex-direction:column;animation:pkgIn .32s cubic-bezier(.2,.8,.2,1)}
.pkg-modal.closing{animation:pkgOut .2s ease forwards}
.pkg-modal::backdrop{background:rgba(22,28,35,.6);backdrop-filter:blur(3px);animation:pkgFade .32s ease}
.pkg-modal.closing::backdrop{animation:pkgFadeOut .2s ease forwards}
@keyframes pkgIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pkgOut{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes pkgFade{from{opacity:0}to{opacity:1}}
@keyframes pkgFadeOut{to{opacity:0}}
.pkg-modal-head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 16px;border-bottom:1px solid #edf0f4;background:linear-gradient(180deg,#fff,#fafbfc)}
.pkg-modal-head>div{flex:1;min-width:0}
.pkg-modal-eyebrow{display:block;color:var(--brand,#ae1022);font-size:10px;font-weight:700;letter-spacing:.12em}
.pkg-modal-head h2{margin:4px 0 0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.pkg-modal-head p{margin:5px 0 0;color:#7a8696;font-size:12.5px;line-height:1.5}
.pkg-modal-x{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#7d8897;font-size:26px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s}
.pkg-modal-x:hover{background:#eef1f5;color:#202a38}
.pkg-modal-body{display:grid;gap:20px;flex:1;min-height:0;padding:18px 22px 22px;overflow:auto;overscroll-behavior:contain}
.pkg-modal-body h3{margin:0 0 10px;color:#5d6b7c;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.pkg-rates{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pkg-rates li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid #f0d3d7;border-radius:12px;background:#fdf4f5;font-size:13.5px}
.pkg-rates b{color:var(--brand,#ae1022);font-size:15px;font-variant-numeric:tabular-nums}
.pkg-rates small{color:#8a6a70;font-size:11px;font-weight:600}
.pkg-points{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.pkg-points li{position:relative;padding-left:18px;color:#4b5a6c;font-size:13.5px;line-height:1.65}
.pkg-points li:before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand,#ae1022);opacity:.75}
.pkg-points strong{display:block;margin-bottom:5px;color:#202a38;font-weight:600}
.pkg-chips{display:flex;flex-wrap:wrap;gap:6px}
.pkg-chips span{padding:4px 10px;border-radius:999px;background:#f3f5f8;color:#3f4d5f;font-size:12.5px;line-height:1.4}
.pkg-modal-foot{display:flex;justify-content:flex-end;padding:14px 22px;border-top:1px solid #edf0f4;background:#fafbfc}
.pkg-modal-done{min-height:42px;padding:0 28px;border:0;border-radius:11px;background:linear-gradient(135deg,#bd1428,#8e0b1a);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;box-shadow:0 8px 18px rgba(174,16,34,.25);cursor:pointer;transition:transform .12s,box-shadow .18s}
.pkg-modal-done:hover{box-shadow:0 12px 24px rgba(174,16,34,.33)}
.pkg-modal-done:active{transform:translateY(1px)}
.pkg-modal-done:focus-visible,.pkg-modal-x:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(174,16,34,.3)}
@media(max-width:640px){
  .pkg-modal{width:100%;max-width:none;max-height:90vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  @keyframes pkgIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .pkg-modal-foot{padding:12px 16px 16px}
  .pkg-modal-done{width:100%}
}
@media(prefers-reduced-motion:reduce){.pkg-modal[open],.pkg-modal.closing,.pkg-modal::backdrop,.pkg-modal.closing::backdrop{animation:none}}

/* Passenger / bag limit hints under the boxes */
.transport-detail-grid .capacity-note{display:block;margin-top:6px;color:#7d8897;font-size:11.5px;line-height:1.4}
.transport-detail-grid .capacity-note:empty{display:none}
.transport-detail-grid .capacity-note.over{color:var(--brand,#ae1022);font-weight:600}
.pkg-rates li span small.pkg-rate-note{display:block;margin-top:2px;color:#7a8696;font-size:11.5px;font-weight:500}