/* Brand values arrive as CSS variables from config (see applyBrand in shared.js). */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.tabular { font-variant-numeric: tabular-nums; }

.card { border-radius: 16px; }
/* Glass (Apple style): blurred translucent fill + light hairline edge that is brighter at the top.
   The edge is a masked gradient on ::before, so it works on any radius. */
.card, .notif, .glass { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid transparent; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 32px -16px rgba(0,0,0,.65); }
.card::before, .notif::before, .glass::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(165deg, rgba(255,255,255,.38), rgba(255,255,255,.10) 35%, rgba(255,255,255,.04) 65%, rgba(255,255,255,.16)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip-saving { background: var(--primaryTint); color: var(--primary); }
.chip-info { background: var(--infoTint); color: var(--info); }
.chip-warn { background: var(--warnTint); color: var(--warn); }
.chip-neutral { background: var(--surface2); color: var(--muted); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: 14px; font-weight: 500; font-size: 16px; transition: transform .15s ease, background-color .2s ease, opacity .2s; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primaryHover); }
.btn-secondary { background: var(--surface2); color: var(--text); }
.btn-apple { background: #000; color: #fff; border: 1px solid #222; }
.btn-ghost { background: transparent; color: var(--info); min-height: 44px; }
.btn-pill { border-radius: 999px; }

.notif { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; text-align: left; }

/* Store badges stay black (Apple: black is preferred, white only when one badge stands alone; Google Play
   is black). On dark pages they get the official grey outline (#A6A6A6) and a soft glow around, never a recolour. */
.badge { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #000; border: 1px solid #a6a6a6; color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.04), 0 10px 28px -10px color-mix(in srgb, var(--info) 45%, transparent); transition: transform .15s, box-shadow .2s; }
.badge:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 14px 32px -10px color-mix(in srgb, var(--info) 60%, transparent); }
.badge span { display: flex; flex-direction: column; line-height: 1.05; font-size: 18px; font-weight: 500; }
.badge small { font-size: 12px; font-weight: 400; opacity: .85; }

/* Night sky */
.sky { background: radial-gradient(120% 70% at 20% 0%, #1c3a6b 0%, #0f2346 35%, var(--bg) 75%); }
.star { position: absolute; border-radius: 50%; background: #fff; opacity: .2; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.1); } }
.glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }

/* Hotel windows */
.win { fill-opacity: .08; transition: fill-opacity .5s ease, filter .5s ease; }
.win.on { fill-opacity: 1; filter: drop-shadow(0 0 3px rgba(251,205,119,.7)); }
.calm .win { transition-duration: 2s; } /* onboarding: the hotel is background, windows fade slowly */
.lamp-glow { animation: lamp 4s ease-in-out infinite; transform-origin: center; }
@keyframes lamp { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* Motion utilities */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.rise.in { opacity: 1; transform: none; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float { animation: floatY 5s ease-in-out infinite; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes slideDown { from { transform: translateY(-24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.slide-down { animation: slideDown .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.slide-up { animation: slideUp .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1.2s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover, .marquee:active { animation-play-state: paused; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulseRing 1.6s ease-out infinite; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 100; background: #0b1424; border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100vw - 32px); transition: all .3s ease; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }