/* ════════════════════════════════════════════════════════════════════════
   TravelPlans — "Window Seat" re-skin design system  (UI uplift, Phase 0)

   Presentation only. No functionality, search/results/notification logic,
   calendar behaviour, or traveller-character placement is affected by this file.

   Reusable component layer, scoped under `.tp-ws` so un-reskinned pages are
   untouched. Tokens + components are recreated from the design handoff
   (Direction A · Window Seat). Adopt screen-by-screen.
   ════════════════════════════════════════════════════════════════════════ */

.tp-ws {
  /* Palette */
  --ws-navy:        #0D1260;
  --ws-navy-deep:   #080B45;
  --ws-royal:       #1C21C4;   /* links / selected */
  --ws-orange:      #F97316;   /* single action colour */
  --ws-orange-lt:   #FB8A3C;
  --ws-gold:        #F0B429;   /* star / pinned / gauge accent */
  --ws-gold-soft:   #F9B872;
  --ws-green:       #15803D;
  --ws-green-br:    #22C55E;
  --ws-green-tint:  rgba(22,163,74,.12);
  --ws-danger:      #B91C1C;
  --ws-danger-tint: #FDECEC;
  --ws-amber:       #B45309;
  --ws-amber-tint:  #FFF4E6;
  --ws-white:       #FFFFFF;
  --ws-offwhite:    #FAFBFF;
  --ws-tint:        #F5F6FF;
  --ws-line:        #ECEEFA;
  --ws-line-2:      #E6E9F7;
  --ws-text:        #111827;
  --ws-text-2:      #6B7280;
  --ws-muted:       #9CA3AF;
  /* Radii */
  --ws-r-pill: 100px; --ws-r-input: 12px; --ws-r-tile: 16px; --ws-r-card: 18px; --ws-r-feat: 24px;
  /* Shadows */
  --ws-sh-card: 0 3px 12px rgba(13,18,96,.05);
  --ws-sh-elev: 0 10px 40px rgba(13,18,96,.10);
  --ws-sh-cta:  0 8px 18px rgba(249,115,22,.40);

  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ws-text);
}

/* ── Typographic helpers ── */
.tp-ws .ws-eyebrow {
  font-family: 'Roboto Mono', monospace; font-weight: 700;
  letter-spacing: 2px; font-size: 11px; text-transform: uppercase;
}
.tp-ws .ws-h1 { font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.05; margin: 0; }
.tp-ws .ws-h2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; color: var(--ws-navy); margin: 0; }
.tp-ws .ws-title { font-family: 'Poppins', sans-serif; font-weight: 700; }

/* ── Hero (navy radial-glow surface) ── */
.tp-ws .ws-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ws-navy) 0%, var(--ws-navy-deep) 100%);
  color: #fff;
}
.tp-ws .ws-hero-glow {
  position: absolute; top: -60px; left: -40px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(28,33,196,.5), transparent 62%); pointer-events: none;
}
.tp-ws .ws-hero-canvas { position: absolute; top: 0; right: 0; width: 100%; height: 440px; opacity: .95; pointer-events: none; }
.tp-ws .ws-hero-eyebrow { color: var(--ws-gold-soft); }
.tp-ws .ws-hero-title { color: #fff; font-size: 32px; }
.tp-ws .ws-hero-sub   { color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.55; margin: 0; }

/* ── Section header ── */
.tp-ws .ws-section-head { display: flex; align-items: center; justify-content: space-between; }
.tp-ws .ws-section-link { font-size: 13px; font-weight: 600; color: var(--ws-royal); text-decoration: none; white-space: nowrap; }

/* ── Cards & list rows ── */
.tp-ws .ws-card { background: #fff; border: 1px solid var(--ws-line); border-radius: var(--ws-r-card); box-shadow: var(--ws-sh-card); }
.tp-ws .ws-row  { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--ws-line); border-radius: var(--ws-r-card); padding: 13px; box-shadow: var(--ws-sh-card); text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.tp-ws .ws-row:hover { box-shadow: var(--ws-sh-elev); transform: translateY(-1px); }
.tp-ws .ws-row-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--ws-text); }
.tp-ws .ws-row-sub   { font-size: 12px; color: var(--ws-text-2); }
.tp-ws .ws-row-price { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; color: var(--ws-navy); }

/* ── Circular match gauge (conic ring; orange→green, never alarming red) ── */
.tp-ws .ws-gauge { position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.tp-ws .ws-gauge::before { content: ""; position: absolute; width: 37px; height: 37px; border-radius: 50%; background: #fff; }
.tp-ws .ws-gauge span { position: relative; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 14px; color: var(--ws-navy); }
.tp-ws .ws-type-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--ws-tint); display: grid; place-items: center; flex-shrink: 0; font-size: 18px; }

/* ── Status pills ── */
.tp-ws .ws-pill { font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 9px; border-radius: var(--ws-r-pill); white-space: nowrap; display: inline-block; }
.tp-ws .ws-pill-prem  { color: #C2410C; background: rgba(249,115,22,.12); }
.tp-ws .ws-pill-above { color: var(--ws-amber); background: var(--ws-amber-tint); border: 1px solid #FBD9A8; }
.tp-ws .ws-pos { color: var(--ws-green); font-weight: 700; }
.tp-ws .ws-neg { color: var(--ws-danger); font-weight: 700; }

/* ── Featured (best-match) card, overlaps the hero ── */
.tp-ws .ws-featured { position: relative; border-radius: var(--ws-r-feat); overflow: hidden; box-shadow: var(--ws-sh-elev); background: #fff; }
.tp-ws .ws-featured-img { width: 100%; height: 148px; object-fit: cover; display: block; }
.tp-ws .ws-featured-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,69,0) 30%, rgba(8,11,69,.82)); pointer-events: none; }
.tp-ws .ws-featured-badge { position: absolute; top: 14px; left: 16px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 5px 11px; border-radius: var(--ws-r-pill); }
.tp-ws .ws-featured-cta { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px; background: var(--ws-orange); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.tp-ws .ws-featured-cta:hover { background: var(--ws-orange-lt); color: #fff; }

/* ── Photo tile + branded placeholder (Saved Destinations / trips) ── */
.tp-ws .ws-tile { position: relative; border-radius: var(--ws-r-card); overflow: hidden; background: #fff; box-shadow: 0 5px 18px rgba(13,18,96,.08); }
.tp-ws .ws-tile-img { width: 100%; height: 96px; object-fit: cover; display: block; }
.tp-ws .ws-tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,11,69,.7)); }
.tp-ws .ws-tile-name { position: absolute; left: 12px; bottom: 9px; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; }
.tp-ws .ws-tile-ph { /* placeholder until a destination photo is uploaded */
  width: 100%; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(160deg, var(--ws-navy), var(--ws-navy-deep)); color: rgba(255,255,255,.85);
}
.tp-ws .ws-tile-ph i { font-size: 20px; opacity: .7; }
.tp-ws .ws-tile-ph span { font-size: 11px; font-weight: 600; }

/* ── Capacity meter (Flights x/10 · Hotels y/10) ── */
.tp-ws .ws-capacity { display: flex; align-items: center; gap: 14px; }
.tp-ws .ws-cap { flex: 1; display: flex; align-items: center; gap: 7px; }
.tp-ws .ws-cap-label { font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 600; color: var(--ws-muted); white-space: nowrap; }
.tp-ws .ws-cap-track { flex: 1; height: 5px; border-radius: var(--ws-r-pill); background: var(--ws-line-2); overflow: hidden; }
.tp-ws .ws-cap-fill  { height: 100%; background: var(--ws-royal); }

/* ── Orange CTA ── */
.tp-ws .ws-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ws-orange); color: #fff; border: none; border-radius: var(--ws-r-input); padding: 12px 18px; font-weight: 600; text-decoration: none; box-shadow: var(--ws-sh-cta); cursor: pointer; }
.tp-ws .ws-cta:hover { background: var(--ws-orange-lt); color: #fff; }

/* ── Desktop adaptation: the design is a 412px phone frame; on wider screens
   centre the column and let card grids breathe (keeps existing desktop nav). ── */
@media (min-width: 768px) {
  .tp-ws .ws-hero-title { font-size: 30px; }
}

/* ── Profile avatar (chosen adult character; head/shoulders pops out of the circle) ──
   Structure:  <span class="tp-av" style="--d:40px"><span class="tp-av-disc"></span>
                 <img class="tp-av-img" src="…"></span>
   The disc is the visible circle; the character image is object-fit:cover'd into a box a
   touch taller than the disc, and masked so the body is clipped to the circle while the
   head rises ~5% above the top line — giving a 3D "coming out of the circle" look. */
.tp-av { --d: 40px; position: relative; display: inline-block; flex-shrink: 0;
         width: var(--d); height: calc(var(--d) * 1.11); line-height: 0; }
.tp-av-disc { position: absolute; left: 0; bottom: 0; width: var(--d); height: var(--d);
              border-radius: 50%; background: var(--tp-av-fill, linear-gradient(160deg,#3A4AD6,#1C21C4));
              box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 2px 6px rgba(8,11,69,.22); }
.tp-av-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0; pointer-events: none;
  /* body clipped to the disc circle ∪ a band up the head column, so the head rises above
     the top line (~6%) for the 3D "coming out of the circle" look. */
  -webkit-mask:
     radial-gradient(circle calc(var(--d)/2) at 50% 55%, #000 98%, rgba(0,0,0,0) 100%) 0 0 / 100% 100% no-repeat,
     linear-gradient(#000,#000) 50% 0 / 58% 62% no-repeat;
  -webkit-mask-composite: source-over;
          mask:
     radial-gradient(circle calc(var(--d)/2) at 50% 55%, #000 98%, rgba(0,0,0,0) 100%) 0 0 / 100% 100% no-repeat,
     linear-gradient(#000,#000) 50% 0 / 58% 62% no-repeat;
          mask-composite: add;
}
.tp-av-link { display: inline-block; text-decoration: none; }