/* ============================================================
   LLG Portal Theme — maps old app.css variables to the LLG app palette
   Load AFTER app.css and BEFORE page-specific styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* Remap old palette to LLG app palette */
  --pink: #DE0082;
  --pink-lt: #FDE6F2;
  --pink-hover: #B8006B;
  --pink-dark: #B8006B;

  --teal: #DE0082;       /* no teal in new palette; use magenta */
  --teal-lt: #F0D9E6;
  --teal-dark: #8A0050;

  --amber: #DE0082;      /* no amber; use magenta for banners */
  --amber-lt: #FDE6F2;

  --text: #2B2A29;
  --muted: #5E5D5B;
  --border: #E6E1DA;
  --bg: #F7F4F0;
  --white: #ffffff;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);

  --font: 'Mulish', 'Segoe UI', sans-serif;
  --serif: 'Poppins', 'Segoe UI', sans-serif;
  --sans: 'Mulish', 'Segoe UI', sans-serif;

  /* Remove danger red for non-error uses */
  --danger: #c62828;
  --danger-lt: #fce4ec;
  --green: #2e7d32;
  --green-lt: #e8f5e9;

  /* Portal-specific */
  --nav-h: 68px;
}

/* ── Type ─────────────────────────────────────────────── */
body {
  font-family: var(--sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
}

input, select, textarea {
  font-size: 16px !important;
  font-family: var(--sans) !important;
}

/* ── Links: no underlines ─────────────────────────────── */
a { text-decoration: none !important; }

/* ── Buttons ──────────────────────────────────────────── */
.btn, .btn-primary, [class*="btn-"] {
  font-family: var(--sans) !important;
  border-radius: 12px !important;
  min-height: 44px;
}

.btn-primary {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}
.btn-primary:hover {
  background: var(--pink-hover) !important;
}

.btn-teal {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}

.btn-outline {
  border-color: var(--pink) !important;
  color: var(--pink) !important;
}

/* ── Cards ────────────────────────────────────────────── */
.card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border);
  box-shadow: none !important;
}

/* ── Header (my-trip) ─────────────────────────────────── */
.header {
  background: var(--pink-dark) !important;
}
.header::before {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(222,0,130,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(222,0,130,0.15) 0%, transparent 60%) !important;
}

.header-logo-wrap img {
  filter: none !important;
  /* Use the white logo file directly instead of CSS filter */
}

.tab-btn.active {
  border-bottom-color: var(--pink) !important;
}

/* ── Registration banner ──────────────────────────────── */
.reg-banner {
  background: var(--pink) !important;
}

/* ── Badges ───────────────────────────────────────────── */
.badge-pink, [class*="badge-teal"], [class*="badge-amber"] {
  background: var(--pink-lt) !important;
  color: var(--pink-dark) !important;
}

/* ── Score symbols — keep functional colours ──────────── */
/* Don't override score colours — they're semantic */

/* ── Topbar ───────────────────────────────────────────── */
.topbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}
.topbar .logo, .topbar a {
  color: var(--pink) !important;
}

/* ── Stat cards ───────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius) !important;
}

/* ── Section numbers ──────────────────────────────────── */
.section .num {
  background: var(--pink) !important;
}

/* ── Rating buttons ───────────────────────────────────── */
.rating-btn.active {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}

/* ── Form focus ───────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--pink) !important;
  border-color: var(--pink) !important;
}

/* ── Participant card hover ───────────────────────────── */
.participant-card:hover {
  border-color: var(--pink) !important;
}

/* ── Table ────────────────────────────────────────────── */
.table th {
  background: var(--bg) !important;
}

/* ── Tap targets ──────────────────────────────────────── */
button, a, .btn, .tab-btn, input[type="submit"] {
  touch-action: manipulation;
}

/* ── Touch: no double-tap zoom ────────────────────────── */
html, body { touch-action: manipulation; }

/* ── Loading animation (same as LLG app) ──────────────── */
.llg-load{position:fixed;inset:0;z-index:9999;background:#F7F4F0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;font-family:Mulish,"Segoe UI",sans-serif;color:#2B2A29;transition:opacity .3s ease}
.llg-load.is-done{opacity:0;pointer-events:none}
.llg-load-logo{width:90px;height:auto;display:block}
.llg-scene{position:relative;width:280px;height:150px}
.llg-scene-svg{position:absolute;left:0;top:0}
.llg-ball{position:absolute;left:40px;top:90px;width:18px;height:18px;animation:llgRoll 2.8s cubic-bezier(.25,.6,.35,1) infinite}
.llg-ball-spin{animation:llgSpin 2.8s linear infinite;transform-origin:9px 9px}
.llg-heart{position:absolute;left:216px;top:88px;animation:llgHeart 2.8s ease-out infinite;transform-origin:center bottom}
.llg-flag{animation:llgFlag 1.4s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
.llg-msg{margin:0;height:28px;font-size:18px;font-weight:600;animation:llgFade 2s ease-in-out infinite}
.llg-dots{display:flex;gap:8px}
.llg-dots span{display:block;width:8px;height:8px;border-radius:999px;background:#E6E1DA;transition:all .3s ease}
.llg-dots span.on{background:#DE0082}
.llg-dots span.now{width:22px;background:#DE0082}
@keyframes llgRoll{0%{transform:translate(0,0);opacity:0}8%{opacity:1}62%{transform:translate(168px,0)}70%{transform:translate(176px,4px) scale(.9)}78%{transform:translate(178px,10px) scale(.25);opacity:1}80%{opacity:0}100%{transform:translate(178px,10px) scale(.2);opacity:0}}
@keyframes llgSpin{from{transform:rotate(0)}to{transform:rotate(720deg)}}
@keyframes llgHeart{0%,76%{transform:translateY(0) scale(0);opacity:0}84%{transform:translateY(-26px) scale(1.15);opacity:1}94%{transform:translateY(-34px) scale(1);opacity:1}100%{transform:translateY(-40px) scale(.9);opacity:0}}
@keyframes llgFlag{0%,100%{transform:skewY(0)}50%{transform:skewY(-6deg)}}
@keyframes llgFade{0%{opacity:0;transform:translateY(6px)}15%,85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.llg-ball,.llg-ball-spin,.llg-heart,.llg-flag,.llg-msg{animation:none}.llg-ball{transform:translate(120px,0)}}

/* ── Full-screen loader (old) — hide ──────────────────── */
.full-screen { display: none !important; }

/* ── Hide underlines everywhere ───────────────────────── */
.card a, .notice-card a, .tab-btn, .topbar a {
  text-decoration: none !important;
}