/* The deals line and its dialog on the tour page's booking card, and one deal's card opened from
   its line in checkout's total (`macros/deals.html`).

   The line is type, not a fill: one deal named, and how many more. The dialog draws each deal as a
   small ticket, the pine stub with the figure in gold and the rest of the sentence beside it, the
   object the landing row and /deals already draw, so a deal looks the same wherever it is met. The
   groups say what a reader would do about each one, and the rows carry only the sentence and until
   when.

   No color is declared here. palette.css is the only file that names one. */

.deals-line {
    display:flex; align-items:center; gap:10px; width:100%;
    margin:0; padding:9px 0;
    background:none; border:0;
    border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
    font:inherit; color:var(--text-primary); text-align:left; cursor:pointer;
}
.deals-line-mark { color:var(--sale-color); flex:0 0 auto; }
.deals-line-say { flex:1 1 auto; min-width:0; }
.deals-line-say b { display:block; font-size:.78rem; font-weight:600; letter-spacing:-.012em; line-height:1.35; }
.deals-line-say small { display:block; font-size:.7rem; color:var(--text-muted); }
.deals-line-chev { flex:0 0 auto; color:var(--text-muted); transition:transform .15s ease; }
.deals-line:hover .deals-line-say b { color:var(--accent-color); }
.deals-line:hover .deals-line-chev { transform:translateX(2px); }

/* ── The dialog ── */
.dk-sheet { padding:6px 20px 20px; }
.dk-sheet section + section { margin-top:18px; }
.dk-sheet h4 {
    margin:0 0 8px; font-size:.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted);
}
.dk-sheet ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }

.dk {
    display:grid; grid-template-columns:58px minmax(0, 1fr); align-items:stretch;
    border:1px solid var(--card-border); border-radius:11px; overflow:hidden;
    background:var(--card-bg);
}
.dk-stub {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:10px 4px; min-height:56px;
    background:var(--brand-bg); color:var(--brand-highlight);
    border-right:2px dashed color-mix(in srgb, var(--brand-highlight) 42%, transparent);
}
.dk-stub b { font-size:1.12rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.dk-stub small {
    font-family:var(--font-mono); font-size:.5rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--brand-text-muted);
}
.dk-say { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:9px 12px; min-width:0; }
.dk-say b { font-size:.86rem; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); line-height:1.3; }
.dk-say small { font-size:.73rem; line-height:1.45; color:var(--text-muted); }
.dk-say a { font-size:.72rem; font-weight:600; color:var(--accent-color); text-decoration:none; }
.dk-say a:hover { text-decoration:underline; }
.dk-all { margin:16px 0 0; padding-top:13px; border-top:1px solid var(--border-color); }
.dk-all a { font-size:.78rem; font-weight:700; color:var(--accent-color); text-decoration:none; }
.dk-all a:hover { text-decoration:underline; }

/* ── One deal, opened from its line in checkout's total ── */
.dk-lead { display:grid; grid-template-columns:58px minmax(0, 1fr); gap:14px; align-items:center; }
.dk-lead .dk-stub { border-radius:11px 0 0 11px; }
.dk-lead p { margin:0; font-size:.86rem; line-height:1.55; color:var(--text-secondary); }
.dk-facts { margin:16px 0 0; display:grid; gap:10px; }
.dk-facts div { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; }
.dk-facts dt { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding-top:2px; }
.dk-facts dd { margin:0; font-size:.84rem; line-height:1.5; color:var(--text-primary); }
.dk-took {
    display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:12px;
    border-top:1px dashed var(--border-color); font-size:.84rem; color:var(--text-secondary);
}
.dk-took b { font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--success-color); }