/* London Baby brand visual system
   Purpose: keep the four-person London Baby logo as a premium identity accent
   without letting repeated logo artwork overwhelm itinerary content. */

:root {
  --lb-brand-pink: #ff4fd8;
  --lb-brand-cyan: #00d8ff;
  --lb-brand-violet: #7b61ff;
  --lb-brand-gold: #ffd66b;
}

/* Main header logo remains the primary full-logo brand medallion. */
.header-logo-image {
  filter:
    drop-shadow(0 0 10px rgba(255, 79, 216, .48))
    drop-shadow(0 0 18px rgba(0, 216, 255, .28));
}

/* Cards using the London Baby logo as their artwork get a controlled identity treatment. */
.entry-card.brand-logo-entry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.entry-card.brand-logo-entry::before {
  content: "";
  position: absolute;
  inset: 46px auto auto 18px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  opacity: .13;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 35%),
    conic-gradient(from 210deg, var(--lb-brand-pink), var(--lb-brand-cyan), var(--lb-brand-violet), var(--lb-brand-gold), var(--lb-brand-pink));
  filter: blur(18px) saturate(1.25);
  transform: rotate(-10deg);
}

.entry-card.brand-logo-entry .entry-time,
.entry-card.brand-logo-entry .entry-body,
.entry-card.brand-logo-entry .entry-copy {
  position: relative;
  z-index: 1;
}

.entry-card.brand-logo-entry .entry-body {
  background:
    linear-gradient(115deg, rgba(255, 79, 216, .045), rgba(0, 216, 255, .035) 45%, rgba(255, 214, 107, .035)),
    #fff;
}

.entry-card.brand-logo-entry .entry-thumb.brand-entry-thumb {
  width: 112px;
  min-height: 130px;
  height: 100%;
  max-height: 180px;
  padding: 13px;
  object-fit: contain !important;
  object-position: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 38%, rgba(255,255,255,.35) 39% 45%, transparent 46%),
    radial-gradient(circle at 18% 18%, rgba(255, 79, 216, .55), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(0, 216, 255, .42), transparent 34%),
    linear-gradient(145deg, #09071f, #161033 48%, #080617);
  border-left: 1px solid rgba(255,255,255,.35);
  filter:
    drop-shadow(0 0 8px rgba(255, 79, 216, .2))
    drop-shadow(0 0 12px rgba(0, 216, 255, .16));
}

.entry-card.brand-logo-entry .entry-copy::after {
  content: "✦";
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(255, 79, 216, .28);
  font-size: 18px;
  text-shadow: 0 0 12px rgba(255, 79, 216, .55);
  pointer-events: none;
}

/* Detail view: logo moments become medallion-style rather than full-bleed scrapbook art. */
.detail-backdrop.brand-logo-detail .detail-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 79, 216, .32), transparent 34%),
    radial-gradient(circle at 78% 30%, rgba(0, 216, 255, .24), transparent 36%),
    radial-gradient(circle at 48% 92%, rgba(255, 214, 107, .18), transparent 40%),
    linear-gradient(145deg, #07071c, #120d35 48%, #050514);
}

.detail-backdrop.brand-logo-detail .detail-hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(115deg, rgba(255,255,255,.08), rgba(255,255,255,0) 36%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px);
  pointer-events: none;
  z-index: 1;
}

.detail-backdrop.brand-logo-detail .detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 26% 32%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.34) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 72%, rgba(255,255,255,.28) 0 1px, transparent 2px);
}

.detail-backdrop.brand-logo-detail .detail-hero img.brand-detail-logo-image {
  width: min(58%, 280px);
  height: auto;
  max-height: 72%;
  object-fit: contain !important;
  object-position: center;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 26px rgba(255, 79, 216, .42),
    0 0 40px rgba(0, 216, 255, .26);
  opacity: .95;
  z-index: 3;
}

.detail-backdrop.brand-logo-detail .detail-shade {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.65));
  z-index: 4;
}

.detail-backdrop.brand-logo-detail .detail-hero h2,
.detail-backdrop.brand-logo-detail .close-btn {
  z-index: 5;
}

@media (max-width: 520px) {
  .entry-card.brand-logo-entry .entry-thumb.brand-entry-thumb {
    width: 106px;
    padding: 11px;
  }

  .entry-card.brand-logo-entry::before {
    width: 112px;
    height: 112px;
    inset: 54px auto auto 12px;
  }

  .detail-backdrop.brand-logo-detail .detail-hero img.brand-detail-logo-image {
    width: min(66%, 245px);
  }
}

/* Visible brand system v2 — make the logo identity perceptible but controlled. */
html body #app.app-shell > header.app-header .header-row,
html body .app-header .header-row {
  position: relative !important;
  isolation: isolate !important;
}

html body #app.app-shell > header.app-header .header-row::before,
html body .app-header .header-row::before {
  content: "" !important;
  position: absolute !important;
  width: 205px !important;
  height: 205px !important;
  right: -46px !important;
  top: -66px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .24 !important;
  background-image: url('/assets/london-baby-2026-neon-logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter:
    blur(.45px)
    saturate(1.35)
    drop-shadow(0 0 24px rgba(255, 71, 216, .72))
    drop-shadow(0 0 34px rgba(0, 226, 255, .40)) !important;
  transform: rotate(-8deg) !important;
  mix-blend-mode: screen !important;
}

html body #app.app-shell > header.app-header .header-row::after,
html body .app-header .header-row::after {
  content: "" !important;
  position: absolute !important;
  inset: -10px -8px -16px -8px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .78 !important;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 18%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 74%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    linear-gradient(115deg, rgba(255, 65, 214, .13), transparent 34%, rgba(0, 221, 255, .10) 72%, transparent) !important;
}

html body #app.app-shell > header.app-header .header-row > *,
html body .app-header .header-row > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Make logo-based What’s Next/calendar cards visibly intentional, not generic repeated artwork. */
html body .entry-card.brand-logo-entry {
  box-shadow:
    0 12px 28px rgba(5, 7, 30, .16),
    0 0 0 1px rgba(255, 79, 216, .14),
    0 0 22px rgba(0, 216, 255, .08) !important;
}

html body .entry-card.brand-logo-entry::before {
  opacity: .24 !important;
  width: 170px !important;
  height: 170px !important;
  inset: 36px auto auto -34px !important;
  filter: blur(15px) saturate(1.55) !important;
}

html body .entry-card.brand-logo-entry::after {
  content: "" !important;
  position: absolute !important;
  right: 94px !important;
  top: 12px !important;
  width: 78px !important;
  height: 78px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .34 !important;
  border-radius: 999px !important;
  background-image: url('/assets/london-baby-2026-neon-logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter:
    blur(.35px)
    saturate(1.35)
    drop-shadow(0 0 14px rgba(255, 79, 216, .46))
    drop-shadow(0 0 18px rgba(0, 216, 255, .25)) !important;
  transform: rotate(7deg) !important;
  mix-blend-mode: multiply !important;
}

html body .entry-card.brand-logo-entry .entry-body {
  background:
    radial-gradient(circle at 94% 18%, rgba(255, 79, 216, .18), transparent 28%),
    radial-gradient(circle at 82% 86%, rgba(0, 216, 255, .13), transparent 34%),
    linear-gradient(115deg, rgba(255, 79, 216, .08), rgba(0, 216, 255, .055) 46%, rgba(255, 214, 107, .055)),
    #fff !important;
}

html body .entry-card.brand-logo-entry .entry-thumb.brand-entry-thumb {
  border-left: 1px solid rgba(255, 79, 216, .32) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 26px rgba(255, 79, 216, .20),
    0 0 20px rgba(0, 216, 255, .14) !important;
}

html body .entry-card.brand-logo-entry .entry-copy::before {
  content: "London Baby moment" !important;
  display: inline-flex !important;
  width: fit-content !important;
  margin: 2px 0 8px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  color: #72156b !important;
  background: linear-gradient(90deg, rgba(255, 79, 216, .16), rgba(0, 216, 255, .14), rgba(255, 214, 107, .18)) !important;
  border: 1px solid rgba(255, 79, 216, .18) !important;
}

@media (max-width: 760px) {
  html body #app.app-shell > header.app-header .header-row::before,
  html body .app-header .header-row::before {
    width: 160px !important;
    height: 160px !important;
    right: -42px !important;
    top: -42px !important;
    opacity: .30 !important;
  }

  html body .entry-card.brand-logo-entry::after {
    right: 80px !important;
    top: 10px !important;
    width: 62px !important;
    height: 62px !important;
    opacity: .30 !important;
  }

  html body .entry-card.brand-logo-entry .entry-copy::before {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
}

/* Visible brand system v3 — intentionally perceptible, still restrained.
   This makes the group logo read as a recurring identity accent without using it as blanket artwork. */
html body #app.app-shell main.main {
  position: relative !important;
  isolation: isolate !important;
}

html body #app.app-shell main.main::before {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  right: -54px !important;
  width: 245px !important;
  height: 245px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 999px !important;
  background-image: url('/assets/london-baby-2026-neon-logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: .22 !important;
  filter:
    blur(.25px)
    saturate(1.45)
    drop-shadow(0 0 20px rgba(255, 67, 213, .55))
    drop-shadow(0 0 30px rgba(0, 221, 255, .34)) !important;
  transform: rotate(8deg) !important;
  mix-blend-mode: screen !important;
}

html body #app.app-shell main.main::after {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: -28px !important;
  right: -28px !important;
  height: 260px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .88 !important;
  background:
    radial-gradient(circle at 10% 25%, rgba(255, 79, 216, .32), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(0, 216, 255, .28), transparent 24%),
    radial-gradient(circle at 58% 94%, rgba(255, 214, 107, .18), transparent 28%),
    linear-gradient(135deg, transparent 0 22%, rgba(255, 79, 216, .13) 30%, transparent 41% 58%, rgba(0, 216, 255, .12) 66%, transparent 78%) !important;
}

html body #app.app-shell main.main > * {
  position: relative !important;
  z-index: 2 !important;
}

/* A visible but elegant logo-derived accent on the daily hero. */
html body #app.app-shell .hero {
  position: relative !important;
  isolation: isolate !important;
  box-shadow:
    0 14px 34px rgba(5, 7, 30, .22),
    0 0 0 1px rgba(255, 79, 216, .16),
    0 0 28px rgba(0, 216, 255, .10) !important;
}

html body #app.app-shell .hero::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 12px !important;
  width: 112px !important;
  height: 112px !important;
  pointer-events: none !important;
  z-index: 3 !important;
  border-radius: 999px !important;
  background-image: url('/assets/london-baby-2026-neon-logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: .32 !important;
  filter:
    saturate(1.35)
    drop-shadow(0 0 14px rgba(255, 79, 216, .48))
    drop-shadow(0 0 20px rgba(0, 216, 255, .28)) !important;
  mix-blend-mode: screen !important;
}

html body #app.app-shell .hero .hero-copy {
  z-index: 5 !important;
}

/* Make the Time panel feel tied to the new identity system. */
html body #app.app-shell .dashboard .panel {
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 10px 26px rgba(5, 7, 30, .12),
    0 0 0 1px rgba(255, 79, 216, .12),
    0 0 22px rgba(0, 216, 255, .08) !important;
}

html body #app.app-shell .dashboard .panel::before {
  content: "" !important;
  position: absolute !important;
  right: -28px !important;
  top: -42px !important;
  width: 150px !important;
  height: 150px !important;
  pointer-events: none !important;
  opacity: .22 !important;
  border-radius: 999px !important;
  background-image: url('/assets/london-baby-2026-neon-logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter:
    saturate(1.4)
    drop-shadow(0 0 16px rgba(255, 79, 216, .42))
    drop-shadow(0 0 22px rgba(0, 216, 255, .24)) !important;
  mix-blend-mode: multiply !important;
}

html body #app.app-shell .dashboard .panel > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Stronger signature treatment for What’s Next / calendar-logo cards. */
html body #app.app-shell .entry-card.brand-logo-entry {
  transform: translateZ(0) !important;
}

html body #app.app-shell .entry-card.brand-logo-entry .entry-time {
  background:
    linear-gradient(135deg, rgba(255, 79, 216, .95), rgba(123, 97, 255, .92) 48%, rgba(0, 216, 255, .82)) !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,.28) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18) !important;
}

html body #app.app-shell .entry-card.brand-logo-entry .entry-copy::before {
  content: "London Baby signature" !important;
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255, 79, 216, .92), rgba(123, 97, 255, .86), rgba(0, 216, 255, .82)) !important;
  border-color: rgba(255,255,255,.32) !important;
  box-shadow:
    0 0 12px rgba(255, 79, 216, .22),
    0 0 16px rgba(0, 216, 255, .16) !important;
}

@media (max-width: 760px) {
  html body #app.app-shell main.main::before {
    width: 178px !important;
    height: 178px !important;
    top: 14px !important;
    right: -50px !important;
    opacity: .28 !important;
  }

  html body #app.app-shell main.main::after {
    height: 225px !important;
    opacity: .95 !important;
    background:
      radial-gradient(circle at 7% 20%, rgba(255, 79, 216, .38), transparent 26%),
      radial-gradient(circle at 92% 12%, rgba(0, 216, 255, .34), transparent 28%),
      radial-gradient(circle at 62% 93%, rgba(255, 214, 107, .20), transparent 29%),
      linear-gradient(135deg, transparent 0 20%, rgba(255, 79, 216, .18) 31%, transparent 43% 55%, rgba(0, 216, 255, .16) 67%, transparent 82%) !important;
  }

  html body #app.app-shell .hero::after {
    width: 86px !important;
    height: 86px !important;
    right: 10px !important;
    bottom: 10px !important;
    opacity: .36 !important;
  }

  html body #app.app-shell .dashboard .panel::before {
    width: 116px !important;
    height: 116px !important;
    right: -30px !important;
    top: -34px !important;
    opacity: .26 !important;
  }
}


/* Visible brand system v4 — deliberate brand signature strip.
   Adds a clear, app-level identity moment without turning every card into a photo collage. */
html body #app.app-shell .brand-signature-strip {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 14px clamp(16px, 4vw, 34px) 16px !important;
  padding: 14px 18px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 79, 216, .34), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(0, 216, 255, .28), transparent 32%),
    linear-gradient(135deg, rgba(8, 7, 31, .96), rgba(22, 13, 54, .94) 48%, rgba(6, 6, 25, .96)) !important;
  border: 1px solid rgba(255, 79, 216, .42) !important;
  box-shadow:
    0 12px 28px rgba(3, 4, 18, .22),
    0 0 0 1px rgba(0, 216, 255, .18),
    0 0 30px rgba(255, 79, 216, .24),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  isolation: isolate !important;
}

html body #app.app-shell .brand-signature-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .86 !important;
  background:
    linear-gradient(90deg, rgba(255, 79, 216, .0), rgba(255, 79, 216, .24), rgba(0, 216, 255, .20), rgba(255, 214, 107, .18), rgba(255, 79, 216, .0)),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 70%, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 26%, rgba(255,255,255,.36) 0 1px, transparent 2px) !important;
}

html body #app.app-shell .brand-signature-strip::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 4px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: linear-gradient(90deg, #ff4fd8, #ff7a00, #ffe66d, #36f172, #00d8ff, #7b61ff, #ff4fd8) !important;
  box-shadow: 0 0 18px rgba(255, 79, 216, .72), 0 0 22px rgba(0, 216, 255, .42) !important;
}

html body #app.app-shell .brand-signature-medallion,
html body #app.app-shell .brand-signature-copy,
html body #app.app-shell .brand-signature-sparkles {
  position: relative !important;
  z-index: 2 !important;
}

html body #app.app-shell .brand-signature-medallion {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(255, 79, 216, .42), rgba(0, 216, 255, .28)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.20),
    0 0 22px rgba(255, 79, 216, .48),
    0 0 30px rgba(0, 216, 255, .26) !important;
}

html body #app.app-shell .brand-signature-medallion img {
  width: 62px !important;
  height: 62px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  filter: saturate(1.18) drop-shadow(0 0 8px rgba(255,255,255,.20)) !important;
}

html body #app.app-shell .brand-signature-copy span {
  display: block !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.72) !important;
  margin-bottom: 3px !important;
}

html body #app.app-shell .brand-signature-copy strong {
  display: block !important;
  font-size: clamp(20px, 3.2vw, 34px) !important;
  line-height: 1.02 !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    0 0 18px rgba(255, 79, 216, .42),
    0 0 24px rgba(0, 216, 255, .22) !important;
}

html body #app.app-shell .brand-signature-sparkles {
  font-size: 24px !important;
  white-space: nowrap !important;
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.75),
    0 0 18px rgba(255, 79, 216, .72),
    0 0 24px rgba(0, 216, 255, .42) !important;
}

@media (max-width: 760px) {
  html body #app.app-shell .brand-signature-strip {
    grid-template-columns: auto 1fr !important;
    gap: 11px !important;
    margin: 12px 14px 14px !important;
    padding: 12px 13px 14px !important;
    border-radius: 24px !important;
  }

  html body #app.app-shell .brand-signature-medallion {
    width: 58px !important;
    height: 58px !important;
  }

  html body #app.app-shell .brand-signature-medallion img {
    width: 50px !important;
    height: 50px !important;
  }

  html body #app.app-shell .brand-signature-copy span {
    font-size: 10px !important;
    letter-spacing: .16em !important;
  }

  html body #app.app-shell .brand-signature-copy strong {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  html body #app.app-shell .brand-signature-sparkles {
    grid-column: 1 / -1 !important;
    font-size: 17px !important;
    margin-left: 70px !important;
    margin-top: -8px !important;
  }
}

/* 2026-05-16: remove the faint upper-right ghost logo behind the date lockup. */
html body #app.app-shell > header.app-header .header-row::before,
html body .app-header .header-row::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}