/* ============================================================================
   Spotarium - UI layer (topbar, modals, enriched detail panel, paywall, lists).
   Loaded on top of the base styles in index.html.
   ========================================================================== */

/* Country labels become clickable at zoom (point 7); pointer-events toggled in JS so hidden
   labels never intercept clicks. */
.glabel.country { cursor: pointer; }
.glabel.country:hover { color: #fff; }

/* ---- Top-right toolbar (dedicated UI zone, not over the globe centre) ---- */
.topbar { position: absolute; top: 24px; right: 26px; z-index: 12; display: flex; gap: 10px; align-items: center; }
.tb-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 100px;
  background: rgba(18,22,30,0.55); border: 1px solid rgba(255,255,255,0.1); color: #e9ebef; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.18s ease, border-color 0.18s ease; }
.tb-btn:hover { background: rgba(32,38,50,0.7); border-color: rgba(255,255,255,0.2); }
.tb-btn svg { width: 16px; height: 16px; flex: none; }
.tb-btn.premium { background: linear-gradient(120deg, rgba(120,90,220,0.32), rgba(80,120,240,0.32));
  border-color: rgba(150,140,255,0.4); }
.tb-btn.premium:hover { background: linear-gradient(120deg, rgba(130,100,235,0.5), rgba(90,130,250,0.5)); }
.tb-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: rgba(255,255,255,0.16);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Generic modal shell ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(3,5,9,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-overlay.open { display: flex; animation: ovIn 0.2s ease; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; border-radius: 22px; padding: 28px;
  background: linear-gradient(180deg, rgba(18,22,31,0.98), rgba(11,14,21,0.99)); border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: modIn 0.32s cubic-bezier(0.22,1,0.36,1); }
@keyframes modIn { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-wide { max-width: 560px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; }
.modal-sub { margin-top: 6px; font-size: 13.5px; color: rgba(233,235,239,0.55); }
.modal-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: #e9ebef; font-size: 15px; cursor: pointer; line-height: 1; }
.modal-x:hover { background: rgba(255,255,255,0.13); }

.field { margin-top: 14px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: rgba(233,235,239,0.5); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #e9ebef; font-family: inherit;
  font-size: 14px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(120,150,255,0.6); }
.field select option { background: #12161f; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px;
  border-radius: 13px; border: none; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.2px; }
.btn-primary { background: linear-gradient(120deg, #6d5cf0, #4f8bff); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); color: #e9ebef; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-row { display: flex; gap: 10px; margin-top: 20px; }
.muted { color: rgba(233,235,239,0.5); font-size: 12.5px; line-height: 1.5; }
.pill-tag { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; }

/* ---- Lists modal ---- */
.list-section-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(233,235,239,0.4); margin: 22px 0 11px; }
.list-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); cursor: pointer; margin-bottom: 9px;
  transition: background 0.16s ease; }
.list-card:hover { background: rgba(255,255,255,0.07); }
.list-card-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); flex: none; }
.list-card-body { flex: 1; min-width: 0; }
.list-card-name { font-weight: 700; font-size: 15px; }
.list-card-meta { font-size: 12.5px; color: rgba(233,235,239,0.5); margin-top: 2px; }
.list-empty { padding: 26px 16px; text-align: center; color: rgba(233,235,239,0.45); font-size: 13.5px; }
.creator-badge { background: rgba(120,100,240,0.18); color: #b7a8ff; }

/* ---- Enriched spot detail panel additions ---- */
.spot-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 18px;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.spot-alert-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; opacity: 0.85; }
.spot-alert-body { flex: 1; }
.spot-alert-text { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.spot-alert-date { font-size: 10.5px; color: rgba(255,255,255,0.4); margin-top: 4px; letter-spacing: 0.3px; }
.spot-alert-x { flex: none; background: none; border: none; color: rgba(255,255,255,0.45); cursor: pointer;
  font-size: 13px; padding: 0 2px; line-height: 1; }
.spot-alert-x:hover { color: rgba(255,255,255,0.8); }

.spot-actions { display: flex; gap: 10px; margin-top: 20px; }
.spot-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11); color: #e9ebef;
  cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; }
.spot-act:hover { background: rgba(255,255,255,0.1); }
.spot-act svg { width: 16px; height: 16px; }
.spot-act.liked { color: #ff5c73; border-color: rgba(255,92,115,0.5); background: rgba(255,92,115,0.12); }
.spot-act.saved { color: #7fd0a0; border-color: rgba(127,208,160,0.5); background: rgba(127,208,160,0.12); }

/* Instagram reel embed */
.reel-embed { flex: 1; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09);
  background: #000; position: relative; }
.reel-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel.playable { cursor: pointer; }
.reel.playable:hover .reel-play { transform: translate(-50%,-50%) scale(1.08); }

/* Country practical info */
.pinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pinfo-cell { padding: 13px 14px; border-radius: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); }
.pinfo-cell.wide { grid-column: 1 / -1; }
/* Bright brand-accent labels: the practical-info headings must pop (they sell what sits
   behind the premium blur), not sink into grey. */
.pinfo-k { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #b7a8ff; }
.pinfo-v { margin-top: 5px; font-size: 14px; font-weight: 600; color: rgba(233,238,245,0.92); }

/* Premium lock */
.locked-wrap { position: relative; }
.locked-blur { filter: blur(6px); opacity: 0.5; pointer-events: none; user-select: none; }
.lock-cta { margin-top: 16px; padding: 18px; border-radius: 15px; text-align: center;
  background: linear-gradient(150deg, rgba(120,90,220,0.2), rgba(70,110,235,0.16)); border: 1px solid rgba(150,140,255,0.32); }
.lock-cta-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.lock-cta-sub { font-size: 12.5px; color: rgba(233,235,239,0.6); margin-top: 5px; margin-bottom: 13px; }

/* ---- Country spot-list modal (2 columns) ---- */
.country-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 8px; }
.country-col h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(233,235,239,0.55); }
.country-col h4 .cc-dot { width: 9px; height: 9px; border-radius: 50%; }
.cc-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-radius: 11px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 8px;
  cursor: pointer; }
.cc-item:hover { background: rgba(255,255,255,0.08); }
.cc-name { font-size: 13.5px; font-weight: 600; }
.cc-lock { font-size: 11px; color: #b7a8ff; }
.cc-empty { font-size: 12.5px; color: rgba(233,235,239,0.4); padding: 8px 2px; }

/* ---- Paywall ---- */
.pay-hero { text-align: center; margin-bottom: 8px; }
.pay-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #b7a8ff; }
.pay-anchor { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -1px; line-height: 1;
  margin: 10px 0 4px; font-size: 46px; }
.pay-anchor small { font-size: 18px; font-weight: 600; color: rgba(233,235,239,0.6); letter-spacing: 0; }
/* Premium benefits: benefit-first copy, side-by-side with the plans on desktop.
   Deliberately NO icons (sober Canva-style rows): bold title + description only,
   separated by a discreet hairline. */
.pay-cols { margin-top: 16px; }
.pay-cols.two { display: grid; grid-template-columns: 1fr 1.08fr; gap: 22px; align-items: start; }
.pay-right { min-width: 0; }
.pay-benefits { list-style: none; margin: 2px 0 0; padding: 0; }
.pay-benefits li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.pay-benefits li:first-child { padding-top: 4px; }
.pay-benefits li:last-child { border-bottom: none; }
.pay-benefits b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.1px; line-height: 1.3; }
.pay-benefits span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: rgba(233,235,239,0.6); }

/* Social proof (reassurance) + unlock chip on the locked sheet CTA */
.social-proof { text-align: center; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: rgba(233,235,239,0.55); }
.social-proof::first-letter { color: #ffcf5b; }
.trip-cta-locked { display: flex; align-items: center; justify-content: center; gap: 10px; }
.trip-unlock-chip { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; background: rgba(255,255,255,0.22); color: #fff; }
/* Paywall block: wide enough (and vertically tight enough) that benefits + the 3 plans all
   fit on screen at 100% browser zoom with NO scrollbar - text sizes untouched. */
.modal-xwide { max-width: 850px; max-height: 94vh; }
.modal-xwide .pay-cols { margin-top: 10px; }
.modal-xwide .pay-benefits li { padding: 10px 0; }
.modal-xwide .pay-plans { gap: 8px; }
.modal-xwide .pay-plan { padding: 12px 16px; }
.modal-xwide .pay-trial { padding: 10px 14px; margin-bottom: 10px; }
.modal-xwide .pay-terms { margin-top: 8px; }
.modal-xwide .pay-anchor { margin: 6px 0 2px; }
/* Full travel sheet: wide enough that each "Conseils" bullet stays on ONE line. */
.modal-sheet { max-width: 680px; }

/* "Mes ajouts" submission status */
.sub-url { font-size: 13px; word-break: break-all; }
.sub-status { color: #ffcf5b; font-weight: 700; }

.pay-plans { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 14px; }
.pay-right .pay-plans { margin-top: 0; }
.pay-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px;
  border-radius: 14px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1); cursor: pointer; }
.pay-plan.sel { border-color: #7d6cf0; background: rgba(125,108,240,0.14); }
.pay-plan-l { display: flex; flex-direction: column; gap: 3px; }
.pay-plan-name { font-weight: 700; font-size: 15px; }
.pay-plan-per { font-size: 12px; color: rgba(233,235,239,0.55); }
.pay-plan-r { text-align: right; }
.pay-plan-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; }
.pay-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #0a0d14;
  background: #b7a8ff; padding: 2px 7px; border-radius: 100px; margin-left: 7px; }
.pay-trial { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 14px; }
.pay-trial-label { font-size: 13.5px; font-weight: 600; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 100px; background: rgba(255,255,255,0.16); transition: 0.2s; }
.switch .track::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 3px; top: 3px;
  background: #fff; transition: 0.2s; }
.switch input:checked + .track { background: #6d5cf0; }
.switch input:checked + .track::before { transform: translateX(20px); }
/* Real terms stay visible (small, honest, nothing bold - point 10) - no hidden charges. */
.pay-terms { text-align: center; font-size: 10.5px; color: rgba(233,235,239,0.5); margin-top: 12px; line-height: 1.5; font-weight: 400; }

/* ---- Downsell urgency (point 11): make the discount unmistakable ---- */
.pay-urgent { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; padding: 9px 12px; border-radius: 100px;
  background: rgba(125,108,240,0.16); border: 1px solid rgba(150,140,255,0.4); animation: urgentPulse 1.4s ease-in-out infinite; }
.pay-urgent-badge { flex: none; font-size: 12px; font-weight: 800; color: #0a0d14; background: #b7a8ff;
  padding: 2px 9px; border-radius: 100px; letter-spacing: 0.3px; }
@keyframes urgentPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(150,140,255,0.0); } 50% { box-shadow: 0 0 0 5px rgba(150,140,255,0.14); } }
/* The new anchor price flashes once to draw the eye when the discount appears. */
.pay-flash { animation: priceFlash 1.1s ease-out 1; }
@keyframes priceFlash {
  0% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(183,168,255,0); }
  30% { transform: scale(1.12); color: #cfc4ff; text-shadow: 0 0 22px rgba(183,168,255,0.8); }
  100% { transform: scale(1); color: #fff; text-shadow: none; }
}
.pay-old-anchor { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.5px;
  color: rgba(233,235,239,0.42); text-decoration: line-through; margin-right: 10px; }
.pay-old { color: rgba(233,235,239,0.42); text-decoration: line-through; font-weight: 600; margin-right: 6px; }

/* ---- Payment methods (point 9) ---- */
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pay-method { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 15px;
  border-radius: 14px; cursor: pointer; color: #e9ebef; font-family: inherit;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1); transition: border-color 0.16s ease, background 0.16s ease; }
.pay-method:hover { background: rgba(255,255,255,0.07); border-color: var(--accent, #7d6cf0); }
.pay-method-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #7d6cf0) 22%, transparent); color: var(--accent, #fff); }
.pay-method-ico svg { width: 20px; height: 20px; }
.pay-method-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pay-method-name { font-weight: 700; font-size: 15px; }
.pay-method-sub { font-size: 12px; color: rgba(233,235,239,0.55); }
.pay-method-go { flex: none; color: rgba(233,235,239,0.5); font-size: 18px; }

/* ---- Continent navigation (B4) ---- */
.glabel.continent { cursor: pointer; }
.glabel.continent:hover { color: #fff; }
.cc-count { font-size: 12px; font-weight: 700; color: rgba(233,235,239,0.55); flex: none; }

/* ---- Account button + auth (block D) ---- */
.tb-account { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none; cursor: pointer; overflow: hidden;
  background: rgba(18,22,30,0.55); border: 1px solid rgba(255,255,255,0.12); color: #e9ebef;
  display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); transition: border-color 0.18s ease; }
.tb-account:hover { border-color: rgba(255,255,255,0.3); }
.tb-account svg { width: 18px; height: 18px; }
.tb-account.is-in { background: linear-gradient(135deg, #6d5cf0, #4f8bff); border-color: rgba(255,255,255,0.25);
  font-weight: 700; font-size: 15px; }
/* The photo always crops to a full circle (cover), no leftover ring behind it. */
.tb-account img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tb-account.is-in:has(img) { background: none; border-color: rgba(255,255,255,0.18); }

.auth-lead { font-size: 14px; line-height: 1.5; color: rgba(233,238,245,0.85); margin-bottom: 14px; }
.auth-err { background: rgba(255,120,120,0.1); border: 1px solid rgba(255,120,120,0.3); color: #ffd9d9;
  font-size: 12.5px; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; }
.auth-demo { background: rgba(120,150,255,0.1); border: 1px solid rgba(120,150,255,0.3); color: #cfe0ff;
  font-size: 12.5px; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; text-align: center; }
.auth-demo b { font-size: 15px; letter-spacing: 2px; }
.auth-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.auth-avatar { width: 58px; height: 58px; border-radius: 50%; flex: none; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.25); }
.auth-avatar .auth-avatar-ph { font-size: 22px; color: rgba(233,235,239,0.5); }
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-row { display: flex; align-items: center; gap: 14px; }
.acct-av { width: 54px; height: 54px; border-radius: 50%; flex: none; overflow: hidden; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 20px;
  background: linear-gradient(135deg, #6d5cf0, #4f8bff); color: #fff; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-pseudo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; }
/* Editable avatar: pencil overlay appears on hover/touch */
.acct-av-edit { position: relative; cursor: pointer; }
.acct-av-pen { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(4,6,10,0.55); opacity: 0; transition: opacity 0.15s ease; }
.acct-av-edit:hover .acct-av-pen, .acct-av-edit:active .acct-av-pen { opacity: 1; }
.acct-av-pen svg { width: 18px; height: 18px; color: #fff; }
/* Editable pseudo: small pencil next to the name (email stays fixed) */
.acct-pseudo-row { display: flex; align-items: center; gap: 8px; }
.acct-pen { flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.07); color: rgba(233,235,239,0.6); display: inline-flex; align-items: center;
  justify-content: center; padding: 0; }
.acct-pen svg { width: 12px; height: 12px; }
.acct-pen:hover { background: rgba(255,255,255,0.15); color: #fff; }
.acct-pen-ok { font-size: 13px; color: #7fd0a0; }
.acct-pseudo-input { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 9px; font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(120,150,255,0.5);
  color: #e9ebef; outline: none; }
/* Discreet subscription links (grey on grey, same face as the muted labels) */
.acct-sub-link { margin-top: 10px; text-align: center; }
.acct-sub-link a { font-size: 12.5px; color: rgba(233,235,239,0.5); text-decoration: none; }
.acct-sub-link a:hover { color: rgba(233,235,239,0.8); text-decoration: underline; }
.pay-cancel { text-align: center; margin-top: 10px; }
.pay-cancel a { font-size: 11px; color: rgba(233,235,239,0.42); text-decoration: none; }
.pay-cancel a:hover { color: rgba(233,235,239,0.75); text-decoration: underline; }

/* ---- Trip hub (Créer mon voyage) ---- */
.trip-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); margin-bottom: 9px; }
.trip-card-body { flex: 1; min-width: 0; cursor: pointer; }
.trip-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px 1px rgba(255,255,255,0.25); }
.trip-swatch-lg { width: 16px; height: 16px; flex: none; }
/* Explicit show/hide toggle (clearer than a dot) */
.trip-toggle { flex: none; cursor: pointer; padding: 7px 12px; border-radius: 100px; font-family: inherit;
  font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e9ebef; }
.trip-toggle:hover { background: rgba(255,255,255,0.12); }
.trip-toggle.on { background: rgba(125,108,240,0.2); border-color: rgba(150,140,255,0.5); color: #cfc4ff; }
.trip-del { flex: none; background: none; border: none; color: rgba(233,235,239,0.45); cursor: pointer; font-size: 15px; }
.trip-del:hover { color: #ff8a8a; }

/* ---- Trip builder bottom bar ---- */
.trip-bar { position: absolute; left: 24px; bottom: 24px; z-index: 20; width: 340px; max-width: calc(100vw - 48px);
  padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(16,20,28,0.94), rgba(10,13,20,0.97));
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.55); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); animation: sheetIn 0.35s cubic-bezier(0.22,1,0.36,1); }
.trip-active .hint { display: none; }
.trip-bar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trip-name { flex: 1; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: #e9ebef; border-radius: 10px; padding: 7px 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; outline: none; }
.trip-done { flex: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e9ebef;
  border-radius: 100px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.trip-done:hover { background: rgba(255,255,255,0.12); }
.trip-steps { max-height: 168px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.trip-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); }
.trip-step-n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; }
.trip-step-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-step-x { flex: none; background: none; border: none; color: rgba(233,235,239,0.5); cursor: pointer; font-size: 12px; }
.trip-step-x:hover { color: #ff8a8a; }
.trip-empty { font-size: 12.5px; color: rgba(233,235,239,0.5); padding: 10px 4px; text-align: center; }
.trip-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.trip-when-lbl { font-size: 12.5px; color: rgba(233,235,239,0.7); }
.trip-when-btn { width: auto; padding: 7px 12px; font-size: 12px; }
.trip-actions { margin-top: 10px; }
.trip-disclaimer { margin-top: 10px; font-size: 10.5px; color: rgba(233,235,239,0.45); text-align: center; }

/* ---- Trip summary ---- */
.trip-sum-plan { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.5;
  padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
.ts-block { padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.ts-k { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(233,235,239,0.5); margin-bottom: 6px; }
.ts-v { font-size: 13.5px; line-height: 1.5; color: rgba(233,238,245,0.9); }
.ts-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: rgba(233,238,245,0.88); }

/* ---- Premium layer: legend dot + weekly "new exclusive spots" chip ---- */
.legend-dot-prem { background: linear-gradient(135deg, #ffe29a, #e8a33d); box-shadow: 0 0 14px 2px rgba(255,214,110,0.8); }
.week-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 13px;
  border-radius: 100px; cursor: pointer; pointer-events: auto; font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: #ffdf9e;
  background: rgba(66,48,15,0.42); border: 1px solid rgba(232,163,61,0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.18s ease, border-color 0.18s ease; }
.week-chip:hover { background: rgba(92,66,20,0.55); border-color: rgba(255,214,110,0.7); }
.week-chip[hidden] { display: none; }
/* Premium members: the banner is pure information - no pointer, no hover, no click. */
.week-chip.static { cursor: default; pointer-events: none; }

/* ---- Conversion moment (premium invite): warm, airy, on-brand - not an ad ---- */
.conv-pop { text-align: center; padding: 4px 10px 8px; }
.conv-orb { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,214,110,0.25), rgba(125,108,240,0.25));
  border: 1px solid rgba(255,214,110,0.35); box-shadow: 0 0 34px rgba(232,163,61,0.3); }
.conv-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffdf9e; }
.conv-title { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.15; margin: 9px 0 10px; }
.conv-text { font-size: 13.5px; line-height: 1.6; color: rgba(233,235,239,0.65); margin: 0 0 20px; }
.conv-later { display: block; margin: 12px auto 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: rgba(233,235,239,0.45); }
.conv-later:hover { color: rgba(233,235,239,0.8); }

/* ---- Travel sheet extras (order suggestion, notes) + feedback entry ---- */
.ts-note { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: none; color: rgba(233,235,239,0.45); }
.ts-alt { margin-top: 5px; font-size: 12.5px; color: rgba(233,235,239,0.6); }
.ts-apply { width: auto; padding: 8px 14px; font-size: 12.5px; margin-top: 10px; }
/* "Suggérer une amélioration": clear and inviting, soft accent so it reads as a friendly
   action, not a form chore. */
.acct-fb { margin-top: 10px; background: rgba(125,108,240,0.08); border-color: rgba(150,140,255,0.28); color: #cfc4ff; }
.acct-fb:hover { background: rgba(125,108,240,0.17); border-color: rgba(150,140,255,0.45); }
.acct-fb svg { color: #b7a8ff; }

/* ---- Official creators (showcase, dedicated pages) ---- */
.cr-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35); box-shadow: 0 0 0 2px rgba(255,255,255,0.12); }
.cr-avatar-lg { width: 62px; height: 62px; font-size: 25px; }
.cr-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; background: linear-gradient(135deg, #6d5cf0, #4f8bff); color: #fff; font-size: 9px;
  font-weight: 800; vertical-align: 2px; }
.cr-handle { font-size: 12px; font-weight: 600; color: rgba(233,235,239,0.5); margin-left: 3px; }
.cr-profile { display: flex; gap: 14px; align-items: center; margin: 2px 0 14px; }
.cr-bio { font-size: 13.5px; line-height: 1.55; color: rgba(233,235,239,0.78); }
.btn-icon { width: auto; flex: none; padding: 13px 15px; }

/* ---- Quick-hide layer chips under the category filters (point 4) ---- */
.layer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; pointer-events: auto; }
.layer-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 11px; border-radius: 100px;
  background: rgba(18,22,30,0.6); border: 1px solid rgba(255,255,255,0.14); font-size: 12px; font-weight: 600;
  color: rgba(233,238,245,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 7px 1px rgba(255,255,255,0.3); }
.chip-heart { color: #ff5c73; font-size: 11px; flex: none; }
.chip-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-chip button { flex: none; width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: rgba(233,238,245,0.8); font-size: 10px; line-height: 1; padding: 0; }
.layer-chip button:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* ---- Mobile burger menu (point 5) ---- */
.tb-burger { display: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none; cursor: pointer;
  background: rgba(18,22,30,0.55); border: 1px solid rgba(255,255,255,0.12); color: #e9ebef;
  align-items: center; justify-content: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tb-burger svg { width: 18px; height: 18px; }
.topbar-menu { position: absolute; top: 46px; right: 0; min-width: 200px; padding: 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,22,31,0.98), rgba(11,14,21,0.99)); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 2px; z-index: 20; }
.topbar-menu[hidden] { display: none; }
.tbm-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 11px 13px; border: none; border-radius: 11px; background: none; cursor: pointer; text-align: left;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; color: #e9ebef; }
.tbm-item:hover { background: rgba(255,255,255,0.07); }
.tbm-premium { color: #cfc4ff; }

/* ---- Premium-locked GPS location (point 6) ---- */
.pinfo-gps-locked { cursor: pointer; }
.pinfo-gps-locked:hover { background: rgba(255,255,255,0.06); }
.gps-blur { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.gps-cta { margin-left: 10px; font-size: 11px; font-weight: 700; color: #b7a8ff; }

/* ---- Sharing (invite a friend, share a trip/list) ---- */
.card-share { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: rgba(233,235,239,0.75); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.card-share:hover { background: rgba(255,255,255,0.13); color: #fff; }
.card-share svg { width: 14px; height: 14px; }

/* Preference rows inside "Mon compte" (theme, language) */
.acct-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); margin: 14px 0 0; }
.acct-theme-t { font-size: 13.5px; font-weight: 600; }
.acct-theme + .btn-row { margin-top: 18px; }

/* Nationality selector (drives visa/passport accuracy) + missing-nationality cell */
.nat-select { padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); color: #e9ebef; font-family: inherit; font-size: 12.5px;
  font-weight: 700; cursor: pointer; outline: none; max-width: 165px; }
.nat-select option { background: #12161f; }
.acct-nat-s { font-size: 11px; color: #ffcf5b; margin-top: 3px; max-width: 190px; line-height: 1.4; }
.pinfo-nat { cursor: pointer; border-color: rgba(150,140,255,0.35) !important; }
.pinfo-nat:hover { background: rgba(125,108,240,0.08); }
.pinfo-nat-msg { color: #cfc4ff; font-size: 13px; line-height: 1.45; }

/* Language selector: discreet flag + abbreviation pill, then a flag + native-name list
   with a check on the active language. */
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 100px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e9ebef;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; cursor: pointer; }
.lang-btn:hover { background: rgba(255,255,255,0.12); }
.lang-list { display: flex; flex-direction: column; }
.lang-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 6px; background: none;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.07); color: inherit; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.lang-row:last-child { border-bottom: none; }
.lang-row:hover { background: rgba(255,255,255,0.04); }
/* Vector flag chip (emoji flags don't render on Windows) */
.lang-flag { width: 21px; height: 15px; border-radius: 2.5px; overflow: hidden; flex: none;
  display: inline-flex; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-btn .lang-flag { width: 18px; height: 13px; }
.lang-name { flex: 1; }
.lang-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #6d5cf0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }

/* Google Maps export: one card per leg (A→B), each with its own open button */
.gm-segs { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.gm-seg { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); }
.gm-seg-n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,0.1); }
.gm-seg-route { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gm-open { width: auto; padding: 7px 14px; font-size: 12px; flex: none; }
.gm-note { margin-top: 8px; font-size: 11px; line-height: 1.5; color: rgba(233,235,239,0.45); }

/* Single "Débloquer" button next to the premium section title: a real mini-CTA (brand
   gradient, comfortable hit area) - this is a key conversion element, it must have
   presence, not whisper. */
.unlock-inline { display: inline-flex; align-items: center; margin-left: 9px; padding: 6px 15px; border-radius: 100px;
  background: linear-gradient(120deg, #6d5cf0, #4f8bff); border: none; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase;
  box-shadow: 0 3px 14px rgba(109,92,240,0.4); vertical-align: middle; transition: filter 0.15s ease, box-shadow 0.15s ease; }
.unlock-inline:hover { filter: brightness(1.12); box-shadow: 0 3px 18px rgba(109,92,240,0.6); }

/* ---- Discreet legal footer (point 12) ---- */
.footer { position: absolute; bottom: 12px; right: 20px; z-index: 6; display: flex; gap: 12px; align-items: center;
  font-size: 10.5px; color: rgba(233,235,239,0.3); pointer-events: auto; }
.footer a { color: rgba(233,235,239,0.38); text-decoration: none; }
.footer a:hover { color: rgba(233,235,239,0.7); text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .footer { right: 12px; bottom: 8px; gap: 9px; font-size: 9.5px; }
  .footer span { display: none; } /* keep just the links on phones */
  /* All tabs (including the avatar) collapse into the burger menu on phones (point 5) */
  .topbar { top: 12px; right: 12px; left: auto; gap: 8px; }
  .topbar .tb-btn, .topbar .tb-account { display: none; }
  .tb-burger { display: inline-flex; width: 38px; height: 38px; }
  .layer-chips { margin-top: 10px; gap: 6px; }
  .layer-chip { font-size: 11px; padding: 4px 6px 4px 9px; }
  .modal { padding: 22px 18px; border-radius: 20px; }
  .pinfo, .country-cols { grid-template-columns: 1fr; }
  .pay-cols.two { grid-template-columns: 1fr; gap: 16px; } /* benefits stack above the plans */
  .pay-anchor { font-size: 38px; }
  /* Trip builder + detail panel share the bottom; the bar spans full width above the sheet. */
  .trip-bar { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; padding: 14px; }
  .trip-steps { max-height: 132px; }
}
@media (max-width: 400px) {
  .tb-btn.premium .tb-label { display: none; } /* free up space on the narrowest phones */
}


/* ============================================================================
   LIGHT THEME - toggled by .light on .globe-root (dark stays the default).
   SCOPE (bug fix): only the surfaces that OPEN over the globe theme here -
   the spot detail panel, every modal (Mes listes, Créateurs, Créer mon voyage,
   Ajouter, Premium, Mon compte, CGU/CGV/Mentions légales) and the trip builder
   bar. The starfield background, header, legend, topbar, layer chips and
   footer sit on the globe scene and NEVER change with the theme.
   Accent colours (brand violet, category colours) stay identical.
   ========================================================================== */

/* Spot detail panel */
.globe-root.light .panel { color: #1a2030;
  background: linear-gradient(180deg, rgba(252,253,255,0.96) 0%, rgba(243,246,251,0.98) 100%);
  border-left-color: rgba(20,26,40,0.08); box-shadow: -30px 0 60px rgba(30,40,70,0.12); }
.globe-root.light .panel-close { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .panel-close:hover { background: rgba(20,26,40,0.12); }
.globe-root.light .panel-badge { background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.1); }
.globe-root.light .panel-country { color: rgba(26,32,48,0.6); }
.globe-root.light .panel-section-label { color: rgba(26,32,48,0.45); }
.globe-root.light .kpi-row { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.08); }
.globe-root.light .kpi-label { color: rgba(26,32,48,0.62); }
.globe-root.light .pinfo-cell { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.08); }
.globe-root.light .pinfo-k { color: #6d5cf0; }
.globe-root.light .pinfo-v { color: rgba(26,32,48,0.92); }
.globe-root.light .pinfo-gps-locked:hover { background: rgba(20,26,40,0.07); }
.globe-root.light .reel { border-color: rgba(20,26,40,0.1);
  background: repeating-linear-gradient(135deg, rgba(20,26,40,0.05) 0 9px, rgba(20,26,40,0.02) 9px 18px); }
.globe-root.light .spot-act { background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.12); color: #1a2030; }
.globe-root.light .spot-act:hover { background: rgba(20,26,40,0.09); }
.globe-root.light .spot-alert { background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.1); }
.globe-root.light .spot-alert-text { color: rgba(26,32,48,0.85); }
.globe-root.light .spot-alert-date { color: rgba(26,32,48,0.45); }
.globe-root.light .spot-alert-x { color: rgba(26,32,48,0.5); }

/* Modals (lists, creators, trips, premium, account, legal pages) */
.globe-root.light .modal-overlay { background: rgba(226,231,240,0.62); }
.globe-root.light .modal { color: #1a2030; background: #ffffff; border-color: rgba(20,26,40,0.1);
  box-shadow: 0 30px 80px rgba(30,40,70,0.2); }
.globe-root.light .modal-sub { color: rgba(26,32,48,0.55); }
.globe-root.light .modal-x { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .modal-x:hover { background: rgba(20,26,40,0.12); }
.globe-root.light .muted { color: rgba(26,32,48,0.55); }
.globe-root.light .field label { color: rgba(26,32,48,0.5); }
.globe-root.light .field input, .globe-root.light .field select, .globe-root.light .field textarea {
  background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .field select option { background: #ffffff; color: #1a2030; }
.globe-root.light .btn-ghost { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .btn-ghost:hover { background: rgba(20,26,40,0.1); }
.globe-root.light .list-section-label { color: rgba(26,32,48,0.45); }
.globe-root.light .list-card { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.08); }
.globe-root.light .list-card:hover { background: rgba(20,26,40,0.07); }
.globe-root.light .list-card-ico { background: rgba(20,26,40,0.06); }
.globe-root.light .list-card-meta { color: rgba(26,32,48,0.5); }
.globe-root.light .list-empty { color: rgba(26,32,48,0.5); }
.globe-root.light .cc-item { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.07); }
.globe-root.light .cc-item:hover { background: rgba(20,26,40,0.08); }
.globe-root.light .cc-empty { color: rgba(26,32,48,0.45); }
.globe-root.light .cc-count { color: rgba(26,32,48,0.55); }
.globe-root.light .country-col h4 { color: rgba(26,32,48,0.55); }

/* Premium screen */
.globe-root.light .pay-plan { background: rgba(20,26,40,0.03); border-color: rgba(20,26,40,0.12); }
.globe-root.light .pay-plan.sel { border-color: #6d5cf0; background: rgba(109,92,240,0.08); }
.globe-root.light .pay-plan-per { color: rgba(26,32,48,0.55); }
.globe-root.light .pay-trial { background: rgba(20,26,40,0.03); border-color: rgba(20,26,40,0.1); }
.globe-root.light .pay-terms { color: rgba(26,32,48,0.5); }
.globe-root.light .pay-anchor small { color: rgba(26,32,48,0.6); }
.globe-root.light .pay-old, .globe-root.light .pay-old-anchor { color: rgba(26,32,48,0.42); }
.globe-root.light .pay-benefits span { color: rgba(26,32,48,0.6); }
.globe-root.light .pay-benefits li { border-bottom-color: rgba(20,26,40,0.08); }
.globe-root.light .pay-method { background: rgba(20,26,40,0.03); border-color: rgba(20,26,40,0.12); color: #1a2030; }
.globe-root.light .pay-method:hover { background: rgba(20,26,40,0.06); }
.globe-root.light .pay-method-sub { color: rgba(26,32,48,0.55); }
.globe-root.light .pay-method-go { color: rgba(26,32,48,0.5); }
.globe-root.light .pay-urgent { color: #35284f; background: rgba(125,108,240,0.12); }
.globe-root.light .switch .track { background: rgba(20,26,40,0.18); }
.globe-root.light .pay-cancel a { color: rgba(26,32,48,0.45); }
.globe-root.light .pay-cancel a:hover { color: rgba(26,32,48,0.75); }
.globe-root.light .social-proof { color: rgba(26,32,48,0.6); }
.globe-root.light .lock-cta-sub { color: rgba(26,32,48,0.6); }

/* Trip builder + travel sheet */
.globe-root.light .trip-bar { color: #1a2030; background: #ffffff; border-color: rgba(20,26,40,0.1);
  box-shadow: 0 18px 50px rgba(30,40,70,0.16); }
.globe-root.light .trip-name { background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .trip-step { background: rgba(20,26,40,0.045); }
.globe-root.light .trip-step-x { color: rgba(26,32,48,0.5); }
.globe-root.light .trip-empty { color: rgba(26,32,48,0.5); }
.globe-root.light .trip-when-lbl { color: rgba(26,32,48,0.7); }
.globe-root.light .trip-disclaimer { color: rgba(26,32,48,0.45); }
.globe-root.light .trip-done { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.14); color: #1a2030; }
.globe-root.light .trip-card { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.08); }
.globe-root.light .trip-toggle { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.16); color: #1a2030; }
.globe-root.light .trip-toggle.on { background: rgba(109,92,240,0.12); border-color: rgba(109,92,240,0.4); color: #4d3fd6; }
.globe-root.light .ts-block { border-top-color: rgba(20,26,40,0.08); }
.globe-root.light .ts-k { color: rgba(26,32,48,0.5); }
.globe-root.light .ts-v { color: rgba(26,32,48,0.9); }
.globe-root.light .ts-list { color: rgba(26,32,48,0.88); }

/* Account + auth */
.globe-root.light .card-share { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.14); color: rgba(26,32,48,0.7); }
.globe-root.light .card-share:hover { background: rgba(20,26,40,0.12); color: #1a2030; }
.globe-root.light .acct-theme { background: rgba(20,26,40,0.03); border-color: rgba(20,26,40,0.1); }
.globe-root.light .lang-btn { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.16); color: #1a2030; }
.globe-root.light .lang-btn:hover { background: rgba(20,26,40,0.1); }
.globe-root.light .lang-row { border-bottom-color: rgba(20,26,40,0.08); }
.globe-root.light .lang-row:hover { background: rgba(20,26,40,0.04); }
.globe-root.light .lang-flag { box-shadow: 0 0 0 1px rgba(20,26,40,0.16); }
.globe-root.light .nat-select { background: rgba(20,26,40,0.05); border-color: rgba(20,26,40,0.16); color: #1a2030; }
.globe-root.light .nat-select option { background: #ffffff; color: #1a2030; }
.globe-root.light .acct-nat-s { color: #a8741d; }
.globe-root.light .pinfo-nat-msg { color: #4d3fd6; }
.globe-root.light .pinfo-nat:hover { background: rgba(109,92,240,0.07); }
.globe-root.light .gm-seg { background: rgba(20,26,40,0.035); border-color: rgba(20,26,40,0.08); }
.globe-root.light .gm-seg-n { background: rgba(20,26,40,0.08); }
.globe-root.light .gm-note { color: rgba(26,32,48,0.5); }
.globe-root.light .conv-kicker { color: #a8741d; }
.globe-root.light .conv-text { color: rgba(26,32,48,0.65); }
.globe-root.light .conv-later { color: rgba(26,32,48,0.5); }
.globe-root.light .conv-later:hover { color: rgba(26,32,48,0.8); }
.globe-root.light .ts-note { color: rgba(26,32,48,0.5); }
.globe-root.light .ts-alt { color: rgba(26,32,48,0.6); }
.globe-root.light .acct-fb { background: rgba(109,92,240,0.07); border-color: rgba(109,92,240,0.3); color: #4d3fd6; }
.globe-root.light .acct-fb:hover { background: rgba(109,92,240,0.14); }
.globe-root.light .acct-fb svg { color: #6d5cf0; }
.globe-root.light .cr-handle { color: rgba(26,32,48,0.5); }
.globe-root.light .cr-bio { color: rgba(26,32,48,0.78); }
.globe-root.light .cr-avatar { box-shadow: 0 0 0 2px rgba(20,26,40,0.1); }
/* The unlock mini-CTA keeps its brand gradient in light mode too; only the glow softens. */
.globe-root.light .unlock-inline { box-shadow: 0 3px 12px rgba(109,92,240,0.3); }
.globe-root.light .auth-lead { color: rgba(26,32,48,0.85); }
.globe-root.light .auth-avatar { background: rgba(20,26,40,0.04); border-color: rgba(20,26,40,0.25); }
.globe-root.light .auth-avatar .auth-avatar-ph { color: rgba(26,32,48,0.5); }
.globe-root.light .acct-pseudo-input { background: rgba(20,26,40,0.05); color: #1a2030; }
.globe-root.light .acct-pen { background: rgba(20,26,40,0.07); color: rgba(26,32,48,0.6); }
.globe-root.light .acct-pen:hover { background: rgba(20,26,40,0.15); color: #1a2030; }
.globe-root.light .acct-sub-link a { color: rgba(26,32,48,0.5); }
.globe-root.light .acct-sub-link a:hover { color: rgba(26,32,48,0.8); }