/* Kruze Digital sales demo (KAN-405). A normal scrolling page (the passenger screen is a fixed kiosk layout),
   so this undoes player.css's page-level rules and keeps its tile/detail styles for the ad preview. */
html, body.sales { height: auto; overflow: auto; -webkit-user-select: text; user-select: text; touch-action: auto; }
body.sales { min-height: 100vh; background: radial-gradient(120% 60% at 50% 0%, #0d2846 0%, var(--bg) 70%) fixed; font-size: 16px; line-height: 1.45; }

.s-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.s-bar .brand svg { width: 40px; height: 40px; }
.s-bar .brand-name { font-size: 18px; }
.s-bar .brand-tag { font-size: 11px; color: #f2a65a; }
.s-who { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.s-link { color: var(--accent); text-decoration: underline; font-size: 14px; }

.s-banner { margin: 0 20px; padding: 10px 14px; border-radius: 10px; background: #fff4e0; color: #7a4b00; font-size: 14px; }

.s-steps { list-style: none; display: flex; gap: 6px; margin: 16px 20px 0; padding: 0; overflow-x: auto; }
.s-steps li { flex: 1 1 0; min-width: 84px; padding: 8px 6px 6px; border-top: 4px solid rgba(63, 208, 232, .2); color: var(--muted); font-size: 13px; }
.s-steps li.done { border-color: rgba(63, 208, 232, .55); color: #dce7f0; }
.s-steps li.on { border-color: var(--accent); color: var(--text); font-weight: 700; }
.s-steps li span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

.s-main { max-width: 980px; margin: 0 auto; padding: 18px 20px 48px; }
.s-card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 22px; }
.s-card h1 { margin: 0 0 6px; font-size: 26px; }
.s-card h2 { margin: 22px 0 8px; font-size: 18px; color: var(--accent); }
.s-card .lead { color: #dce7f0; margin: 0 0 16px; }
.s-note { color: var(--muted); font-size: 14px; }

.s-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.s-grid .wide { grid-column: 1 / -1; }
label.f { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #dce7f0; }
label.f input, label.f select, label.f textarea { font: inherit; font-weight: 400; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--edge); background: #061426; color: var(--text); }
label.f textarea { min-height: 70px; resize: vertical; }
label.f .err { color: #ff9a8a; font-weight: 400; font-size: 13px; }
.s-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.s-checks label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--edge); border-radius: 999px; font-size: 14px; cursor: pointer; }
.s-checks input { accent-color: var(--accent); width: 18px; height: 18px; }
.s-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.s-swatches button { width: 44px; height: 44px; border-radius: 10px; border: 2px solid transparent; font-weight: 800; font-size: 16px; }
.s-swatches button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 208, 232, .35); }

.s-reps { display: grid; gap: 10px; max-width: 420px; }
.s-reps button { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--edge); background: #061426; font-size: 16px; }
.s-reps button:hover { border-color: var(--accent); }

.s-pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-pkg { display: grid; align-content: start; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px; border: 1px solid var(--edge); border-radius: 12px; background: #061426; cursor: pointer; }
.s-pkg input { grid-row: span 3; width: 20px; height: 20px; accent-color: var(--accent); margin-top: 3px; }
.s-pkg b { font-size: 16px; }
.s-pkg .zone { color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: .08em; margin-right: 6px; }
.s-pkg .desc { font-size: 14px; color: var(--muted); }
.s-pkg .price { font-size: 14px; color: #dce7f0; }
.s-pkg.on { border-color: var(--accent); background: #08223a; }
.s-areas { grid-column: 1 / -1; margin: 4px 0 0 32px; }
.s-total { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #061426; border: 1px solid var(--edge); display: grid; gap: 4px; }
.s-total .big { font-size: 24px; font-weight: 800; }
.s-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #fff4e0; color: #7a4b00; font-size: 12px; font-weight: 700; }

/* Ad preview: the passenger tile and offer view, sized for a laptop or tablet in a meeting. */
.s-preview { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.s-preview .tile { width: 220px; height: 150px; }
.s-preview .tile .logo { font-size: 20px; padding: 8px; }
.s-preview .tile .label { font-size: 15px; padding: 6px 4px; }
.s-preview .f-script { font-size: 26px !important; }
.s-screen { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.s-screen .detail .info { padding: 18px; gap: 10px; }
.s-screen .back-btn { min-height: 40px; padding: 0 18px; font-size: 16px; }
.s-screen .detail .name { font-size: 14px; }
.s-screen .detail .offer { font-size: clamp(18px, 2.6vw, 28px); }
.s-screen .detail .desc, .s-screen .detail .facts { font-size: 14px; }
.s-screen .qr-panel .scan { font-size: 18px; }
.s-screen .qr-panel .hint, .s-screen .qr-panel .code { font-size: 12px; }
.s-screen .qr-panel .qr { width: min(180px, 90%); }
.s-cap { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Agreement: a paper-like sheet with a SAMPLE watermark. */
.s-sheet { position: relative; overflow: hidden; background: #fff; color: #14202c; border-radius: 6px; padding: 34px 38px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.5; }
.s-sheet::before { content: 'SAMPLE – NOT A CONTRACT'; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); white-space: nowrap;
  font: 800 54px/1 var(--sans); letter-spacing: .06em; color: rgba(200, 40, 40, .12); pointer-events: none; }
.s-sheet h1 { font: 800 22px/1.2 var(--sans); margin: 0 0 4px; color: #0b1f35; }
.s-sheet h2 { font: 700 15px/1.3 var(--sans); margin: 20px 0 6px; color: #0b1f35; text-transform: uppercase; letter-spacing: .06em; }
.s-sheet .ref { font: 13px var(--sans); color: #5a6b7b; }
.s-sheet table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
.s-sheet th, .s-sheet td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #dde4ea; vertical-align: top; }
.s-sheet th { width: 34%; color: #5a6b7b; font-weight: 600; }
.s-sheet td.num { text-align: right; }
.s-sheet ol { padding-left: 20px; margin: 0; }
.s-sheet .sig { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; font-family: var(--sans); font-size: 13px; color: #5a6b7b; }
.s-sheet .sig div { border-top: 1px solid #8a99a8; padding-top: 6px; }

.s-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s-timeline li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.s-timeline i { width: 28px; height: 28px; border-radius: 50%; background: #08223a; border: 1px solid var(--accent); color: var(--accent); font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.s-ok { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .5); margin-bottom: 18px; }

.s-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.s-btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 16px; background: var(--accent); color: var(--bg); }
.s-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--edge); }
.s-btn[disabled] { opacity: .45; cursor: not-allowed; }
a.s-btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 720px) {
  .s-grid, .s-pkgs { grid-template-columns: 1fr; }
  .s-preview { grid-template-columns: 1fr; }
  .s-screen { aspect-ratio: auto; height: 560px; }
  .s-screen .detail { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .s-sheet { padding: 22px 18px; }
  .s-sheet::before { font-size: 30px; }
  .s-sheet .sig { grid-template-columns: 1fr; }
  .s-steps li { min-width: 0; font-size: 0; }
  .s-bar .brand-name { font-size: 15px; }
  .s-steps li span { font-size: 11px; }
}

@media print {
  body.sales { background: #fff; }
  .s-bar, .s-banner, .s-steps, .s-nav, .s-no-print { display: none !important; }
  .s-main { max-width: none; padding: 0; }
  .s-card { background: none; border: 0; padding: 0; }
  .s-sheet { border-radius: 0; padding: 0; }
  .s-sheet::before { position: fixed; }
}

/* Start screen: mode choice and the four apps */
.s-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s-mode { text-align: left; display: grid; gap: 6px; padding: 18px; border-radius: 14px; border: 1px solid var(--edge); background: #061426; }
.s-mode b { font-size: 18px; color: var(--accent); }
.s-mode span { font-size: 14px; color: #dce7f0; }
.s-mode:hover { border-color: var(--accent); background: #08223a; }
.s-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.s-apps a { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--edge); background: #061426; color: var(--text); text-decoration: none; }
.s-apps a b { color: var(--accent); }
.s-apps a span { font-size: 13px; color: var(--muted); }
.s-apps a:hover { border-color: var(--accent); }
.s-why { padding-left: 20px; margin: 0; display: grid; gap: 6px; color: #dce7f0; }
@media (max-width: 720px) { .s-modes { grid-template-columns: 1fr; } }
.s-steps[hidden] { display: none; }
.s-addr { display: flex; align-items: center; gap: 0; }
.s-addr input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.s-addr span { padding: 11px 12px; border: 1px solid var(--edge); border-left: 0; border-radius: 0 10px 10px 0; background: #0b1f35; color: var(--muted); font-weight: 400; }

/* Yaadt is part of RBrooks Solutions */
.yaadt-foot { text-align: center; color: #6e6e73; font-size: 13px; padding: 18px 16px 26px; }
.yaadt-foot a { color: inherit; }