/* PicUppy — app.
   De schermen uit de ontwerpen: voorkeurenflow, hotspots, routes met exploded
   view, activiteit boeken, reisgenoten, portemonnee en profiel. */

/* ============================== Merkteken ============================= */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--pine-700); color: var(--sand-100);
}
.brand-mark--coral { background: var(--coral-500); color: #fff; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.03em; }
.brand--sm .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
.brand--sm .brand-word { font-size: 1.06rem; }

/* ========================== Voorkeurenflow ============================ */
.wiz { max-width: 780px; margin-inline: auto; }
.wiz-steps { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); }
.wiz-step {
  flex: 1; height: 5px; border-radius: var(--r-pill);
  background: var(--sand-300);
  transition: background var(--dur-3) var(--ease);
}
.wiz-step.is-done { background: var(--pine-500); }
.wiz-step.is-now  { background: var(--pine-700); }
.wiz-count { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

.wiz-head { margin-bottom: var(--s-6); }
.wiz-head h1 { margin-bottom: 6px; }

.wiz-panel { animation: wiz-in var(--dur-3) var(--ease-out); }
@keyframes wiz-in { from { opacity: 0; transform: translateY(10px); } }

.wiz-foot {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--s-3)); z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-7); padding: var(--s-3);
  background: color-mix(in srgb, var(--sand-100) 90%, transparent);
  backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
}
@media (min-width: 1000px) { .wiz-foot { bottom: var(--s-5); } }

/* Keuzekaarten: groot genoeg om met de duim te raken. */
.pick {
  position: relative; display: block; width: 100%;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--paper); border: 2px solid var(--sand-300);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pick:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.pick[aria-pressed="true"] { border-color: var(--pine-700); box-shadow: var(--sh-3); }
.pick[aria-pressed="true"] .pick-check { opacity: 1; transform: scale(1); }
.pick-media { position: relative; aspect-ratio: 16/10; background: var(--sand-200) var(--ph, none) center/cover no-repeat; }
.pick-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.pick-body h3 { font-size: 1.05rem; margin-bottom: 2px; }
.pick-body p { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; }
.pick-check {
  position: absolute; right: var(--s-3); top: var(--s-3);
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--pine-700); color: #fff; border-radius: 50%;
  opacity: 0; transform: scale(.6);
  transition: all var(--dur-2) var(--ease-out);
}

/* Rijkeuze met icoon, voor het type activiteit. */
.pick-row {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; padding: var(--s-4) var(--s-5); text-align: left; cursor: pointer;
  background: var(--paper); border: 2px solid var(--sand-300); border-radius: var(--r-lg);
  transition: all var(--dur-2) var(--ease);
}
.pick-row:hover { border-color: var(--pine-200); }
.pick-row[aria-pressed="true"] { border-color: var(--pine-700); background: var(--pine-050); }
.pick-row .pick-ico {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border-radius: var(--r-md); background: var(--sand-200); color: var(--pine-700);
}
.pick-row[aria-pressed="true"] .pick-ico { background: var(--pine-700); color: var(--on-dark); }
.pick-row strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.pick-row span   { display: block; font-size: var(--fs-xs); color: var(--ink-3); }

/* Urenschuif */
.hours { display: grid; gap: var(--s-3); }
.hours-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -.03em; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: var(--r-pill);
  background: var(--sand-300); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pine-700); border: 3px solid var(--paper);
  box-shadow: var(--sh-2); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pine-700); border: 3px solid var(--paper);
  box-shadow: var(--sh-2); cursor: pointer;
}

/* ============================ Resultaten ============================== */
.result-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.prefs-recap { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.matchcard { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .matchcard { grid-template-columns: 240px 1fr; } }
.matchcard .thumb { aspect-ratio: 16/10; height: 100%; }
.matchcard-body { padding: var(--s-5); display: grid; align-content: start; gap: var(--s-3); }
.matchcard h3 { font-size: 1.16rem; }
.matchcard-stats { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.stat-inline { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.stat-inline .ico { color: var(--ink-4); }
.reasons { display: grid; gap: 5px; }
.reasons li { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.reasons .ico { color: var(--ok); flex: none; margin-top: 2px; }

.score-ring { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: none; }
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-ring span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }

/* ====================== Exploded view van de route ==================== */
/* De opengeklapte route: per stop tijd, duur, wijk, kosten. */
.explode { position: relative; display: grid; gap: var(--s-4); }
.explode::before {
  content: ''; position: absolute; left: 19px; top: 26px; bottom: 26px;
  width: 2px; background: linear-gradient(var(--sand-400), var(--sand-300));
}
.xstop { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); }
.xstop-dot {
  display: grid; place-items: center; width: 40px; height: 40px; z-index: 1;
  border-radius: 50%; background: var(--pine-700); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 0 0 5px var(--sand-100);
}
.xstop-card {
  display: grid; gap: var(--s-3);
  padding: var(--s-4); background: var(--paper);
  border: 1px solid var(--sand-300); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.xstop-top { display: flex; gap: var(--s-4); align-items: flex-start; }
.xstop-top .thumb { width: 84px; flex: none; border-radius: var(--r-md); aspect-ratio: 1; }
.xstop-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.xstop h4 { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.xstop-where { font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: 4px; }
.xstop-tip { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.xstop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-4);
  padding-top: var(--s-3); border-top: 1px dashed var(--sand-300);
}
@media (min-width: 620px) { .xstop-grid { grid-template-columns: repeat(4, 1fr); } }
.xfact { display: grid; gap: 1px; }
.xfact .k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 700; }
.xfact .v { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* De reis tússen twee stops. */
.xleg {
  display: flex; align-items: center; gap: var(--s-3);
  margin-left: 56px; padding: 7px var(--s-4);
  background: var(--sand-200); border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--ink-3); width: fit-content;
}
.xleg .ico { color: var(--ink-3); }

.xtotal {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  padding: var(--s-5); background: var(--pine-700); color: var(--on-dark);
  border-radius: var(--r-xl);
}
@media (min-width: 620px) { .xtotal { grid-template-columns: repeat(4, 1fr); } }
.xtotal .k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .72; font-weight: 700; }
.xtotal .v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================= Reisbenodigdheden, uit elkaar getrokken ============ */
.gear { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .gear { grid-template-columns: repeat(4, 1fr); } }
.gear-item {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  background: var(--paper); border: 1px solid var(--sand-300); border-radius: var(--r-lg);
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: gear-pop var(--dur-3) var(--ease-out) forwards;
}
@keyframes gear-pop { to { opacity: 1; transform: none; } }
.gear-item .ico-box {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-md); background: var(--sand-200); color: var(--pine-700);
}
.gear-item strong { font-size: var(--fs-sm); font-weight: 600; }
.gear-item span { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.45; }

/* ============================ Hotspotkaart ============================ */
.spot { display: grid; }
.spot .thumb { aspect-ratio: 4/3; }
.spot-body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: 6px; }
.spot-body h3 { font-size: 1.04rem; }
.spot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: 2px; }
.price-level { font-weight: 700; font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }

/* ============================ Activiteit ============================== */
.act-hero { position: relative; min-height: 300px; display: grid; align-items: end; }
.act-hero .thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.act-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,24,26,.42) 0%, rgba(22,24,26,0) 42%, rgba(22,24,26,.55) 100%);
}
.act-hero-body { position: relative; z-index: 1; padding: var(--s-6); color: #fff; }
.act-hero-body h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.act-hero-meta { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--fs-sm); }
.act-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }

.act-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .act-grid { grid-template-columns: 1fr 380px; align-items: start; } }

.booker { position: sticky; top: var(--s-5); display: grid; gap: var(--s-4); }
.booker-price { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.booker-price .from { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.booker-line { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.booker-total { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-4); border-top: 1px solid var(--sand-300); }
.booker-total .k { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; }
.booker-total .v { font-family: var(--font-display); font-size: 1.42rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ========================= Reisgenoten (swipe) ======================== */
.tribe { display: grid; gap: var(--s-5); }
@media (min-width: 760px)  { .tribe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .tribe { grid-template-columns: repeat(3, 1fr); } }

.tcard { display: grid; overflow: hidden; }
.tcard .thumb { aspect-ratio: 3/4; }
.tcard-body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.tcard-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tcard-name h3 { font-size: 1.22rem; }
.tcard-acts { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--sand-300); }
.tcard.is-gone { animation: swipe-out var(--dur-3) var(--ease) forwards; }
.tcard.is-kept { animation: swipe-keep var(--dur-3) var(--ease) forwards; }
@keyframes swipe-out  { to { opacity: 0; transform: translateX(-40px) rotate(-4deg); } }
@keyframes swipe-keep { to { opacity: 0; transform: translateX(40px) rotate(4deg); } }

/* ============================ Portemonnee ============================= */
.wallet-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .wallet-row { grid-template-columns: 1fr 168px; } }
.wallet-main { display: flex; gap: var(--s-4); padding: var(--s-4); }
.wallet-main .thumb { width: 92px; flex: none; border-radius: var(--r-md); aspect-ratio: 1; }
.wallet-side {
  display: grid; justify-items: center; align-content: center; gap: var(--s-3);
  padding: var(--s-4); border-left: 1px dashed var(--sand-300);
  position: relative; background: var(--sand-50);
}
@media (max-width: 719px) { .wallet-side { border-left: 0; border-top: 1px dashed var(--sand-300); } }
.wallet-side.is-used { opacity: .5; }
.qr-box { padding: 7px; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-1); line-height: 0; }

.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 760px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { padding: var(--s-5); background: var(--paper); border: 1px solid var(--sand-300); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.stat-tile .k { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.stat-tile .v { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-tile .d { font-size: var(--fs-2xs); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.stat-tile .d.up { color: var(--ok); }
.stat-tile .d.down { color: var(--err); }

/* ============================== Profiel =============================== */
.profile-head { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .profile-head { grid-template-columns: auto 1fr auto; align-items: center; } }
.profile-stats { display: flex; gap: var(--s-7); flex-wrap: wrap; }
.profile-stats div { display: grid; }
.profile-stats strong { font-family: var(--font-display); font-size: 1.42rem; font-weight: 600; }
.profile-stats span { font-size: var(--fs-xs); color: var(--ink-3); }
.badge-row { display: grid; gap: var(--s-3); }
.badge {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px var(--s-4); background: var(--paper);
  border: 1px solid var(--sand-300); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500;
}
.badge .ico { color: var(--coral-500); }

.level {
  padding: var(--s-4); background: var(--sand-200); border-radius: var(--r-lg);
}
.level-bar { height: 7px; border-radius: var(--r-pill); background: var(--sand-400); overflow: hidden; margin: var(--s-3) 0 6px; }
.level-bar i { display: block; height: 100%; background: var(--pine-700); border-radius: inherit; }

/* ============================ Bevestiging ============================= */
.done { max-width: 640px; margin-inline: auto; text-align: center; }
.done-mark {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto var(--s-5);
  border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  animation: done-pop 520ms var(--ease-out);
}
@keyframes done-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* De kassabon. Gekarteld aan de onderkant, zoals een echte. */
.receipt {
  position: relative; text-align: left;
  padding: var(--s-6) var(--s-6) var(--s-7);
  background: var(--paper); border: 1px solid var(--sand-300);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-variant-numeric: tabular-nums;
}
.receipt::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -11px; height: 12px;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 9px, transparent 9px 18px);
  filter: drop-shadow(0 1px 0 var(--sand-300));
}
.receipt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px dashed var(--sand-300); }
.receipt-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); padding: 5px 0; }
.receipt-line .k { color: var(--ink-2); }
.receipt-line.total { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--sand-300); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.receipt-code { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--ink-3); }

.next-steps { display: grid; gap: var(--s-3); text-align: left; }
.next-step {
  display: flex; align-items: center; gap: var(--s-4); width: 100%;
  padding: var(--s-4) var(--s-5); text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--sand-300); border-radius: var(--r-lg);
  transition: all var(--dur-2) var(--ease);
}
.next-step:hover { border-color: var(--pine-500); transform: translateX(2px); }
.next-step .ico-box { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--r-md); background: var(--sand-200); color: var(--pine-700); }
.next-step strong { display: block; font-size: var(--fs-sm); }
.next-step span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.next-step.is-done { border-color: var(--ok); background: var(--ok-bg); }
.next-step.is-done .ico-box { background: var(--ok); color: #fff; }

/* Het deelplaatje voor sociale media. */
.share-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4/5; max-width: 320px; margin-inline: auto;
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  background: var(--sand-200) var(--ph, none) center/cover no-repeat;
  display: grid; align-content: space-between;
  padding: var(--s-5); color: #fff; text-align: left;
}
.share-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,24,26,.5), rgba(22,24,26,.1) 40%, rgba(22,24,26,.72)); }
.share-card > * { position: relative; z-index: 1; }
.share-card h3 { color: #fff; font-size: 1.32rem; }

/* Wie de activiteit levert, direct onder de titel. PicUppy bemiddelt; de
   aanbieder verkoopt. Dat hoort de reiziger te zien vóór hij boekt, niet pas
   op de bon. */
.act-hero-door {
  display: flex; align-items: center; gap: 7px;
  margin: var(--s-3) 0 0;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .88); color: var(--pine-800);
  font-size: var(--fs-xs); width: fit-content; max-width: 100%;
}
.act-hero-door .ico { flex: none; }
.act-hero-door strong { font-weight: 650; }