/* ============================================================
   SaveTap Design System v1.0
   Aprobat vizual — nu modifica fără aprobare
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── TOKEN-URI ── */
:root {
  --bg-sky-top: #C8DCF0;
  --bg-sky-mid: #DCE9F5;
  --bg-sky-bot: #EEF4FA;
  --bg-white: #FBFBFD;
  --night: #1D1D1F;
  --night-2: #141416;
  --night-3: #0A0A0C;
  --gold: #C9974A;
  --gold-lt: #E8C87A;
  --gold-dim: rgba(201,151,74,.12);
  --gold-border: rgba(201,151,74,.28);
  --gold-glow: rgba(201,151,74,.32);
  --text: #1D1D1F;
  --text-muted: #6E6E73;
  --text-light: rgba(29,29,31,.55);
  --line: rgba(0,0,0,.1);
  --line-light: rgba(255,255,255,.4);
  --radius-pill: 999px;
  --radius-ui: 10px;
  --radius-card: 16px;
  --radius-input: 10px;
  --h-lg: 52px;
  --h-md: 42px;
  --h-sm: 34px;
  --nav-h: 56px;
}

/* ── BACKGROUNDS ── */
.bg-sky {
  background: linear-gradient(180deg,
    #C8DCF0 0%, #DCE9F5 35%, #EEF4FA 70%, #FBFBFD 100%
  );
}
.bg-dark    { background: var(--night); }
.bg-darker  { background: var(--night-3); }
.bg-app     { background: #F5F5F7; }
.bg-white   { background: var(--bg-white); }

/* ── SECȚIUNE DARK ── */
.section-dark {
  background: var(--night);
  color: #F5F0E8;
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(201,151,74,.06);
  top: -80px; right: -60px; pointer-events: none;
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  font-family: 'Playfair Display', serif;
  color: #F5F0E8;
}

/* ── NAV BAZA ── */
.nav-base {
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 28px; gap: 8px;
  position: relative; z-index: 100;
}

.nav-public {
  background: rgba(200,220,240,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(255,255,255,.45);
}

.nav-app {
  background: rgba(251,251,253,.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 0.5px solid rgba(0,0,0,.08);
}

.nav-interior {
  background: rgba(251,251,253,.92);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(0,0,0,.08);
}

.nav-public-card {
  background: transparent;
  position: absolute; top: 0; left: 0; right: 0;
}

.nav-checkout {
  background: rgba(251,251,253,.96);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(0,0,0,.08);
}

/* ── LOGO ── */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--gold); text-decoration: none;
  letter-spacing: .01em; flex-shrink: 0;
}
.nav-logo-center {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-logo-sm {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--gold); text-decoration: none;
}

/* ── NAV LINKS ── */
.nav-links {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.nav-links a {
  font-size: .75rem; font-weight: 500;
  color: rgba(29,29,31,.6);
  padding: 5px 9px; border-radius: 7px;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--night); background: rgba(255,255,255,.45); }

.nav-app-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1; margin-left: 16px;
}
.nav-app-link {
  font-size: .78rem; font-weight: 500;
  color: var(--text-muted);
  padding: 6px 10px; border-radius: 8px;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-app-link:hover { color: var(--night); background: rgba(0,0,0,.04); }
.nav-app-link.active {
  color: var(--night); font-weight: 600;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
}

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.nav-page-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .85rem; font-weight: 700; color: var(--night);
  white-space: nowrap;
}

.nav-secure-badge {
  font-size: .68rem; font-weight: 700; color: #059669;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(5,150,105,.07);
  border: 1px solid rgba(5,150,105,.2);
  white-space: nowrap;
}

.nav-user-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  font-size: .72rem; font-weight: 600;
  color: var(--night);
}
.nav-user-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--night);
  flex-shrink: 0;
}

.nav-divider { width: 1px; height: 18px; background: rgba(0,0,0,.1); }

.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(0,0,0,.1);
  border-radius: 9px; cursor: pointer; padding: 7px;
}
.hamburger span {
  display: block; height: 2px;
  background: var(--night); border-radius: 2px; transition: .22s;
}

/* ── BUTOANE ── */

/* PRIMARY */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-lg); padding: 0 28px;
  background: var(--gold); color: var(--night);
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem; font-weight: 800;
  border-radius: var(--radius-pill);
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 6px 24px var(--gold-glow);
  transition: filter .15s, transform .12s, box-shadow .15s;
  white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 32px var(--gold-glow); }
.btn-primary:active { transform: scale(.98); box-shadow: none; }

/* SECONDARY */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-lg); padding: 0 24px;
  background: transparent; color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gold-border);
  text-decoration: none; cursor: pointer;
  transition: background .16s, transform .12s;
}
.btn-secondary:hover { background: var(--gold-dim); transform: translateY(-1px); }
.btn-secondary:active { transform: scale(.98); }

/* GHOST */
.btn-ghost {
  background: transparent; border: none;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem; font-weight: 600;
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--text); border-bottom-color: var(--text); }

/* NAV LOGIN */
.btn-nav-login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px;
  color: var(--gold-lt);
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 800;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gold-border);
  background: rgba(201,151,74,.08);
  text-decoration: none; white-space: nowrap;
  transition: background .18s, transform .15s;
}
.btn-nav-login:hover { background: rgba(201,151,74,.2); transform: translateY(-1px); }

/* BACK */
.btn-back {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.55);
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-back:hover { background: rgba(255,255,255,.9); color: var(--text); }

/* HOME */
.btn-home {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.55);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-home:hover { background: rgba(255,255,255,.9); color: var(--text); }

/* HOME SUBTLE */
.btn-home-subtle {
  font-size: .68rem; font-weight: 600;
  color: rgba(110,110,115,.6);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.btn-home-subtle:hover { color: var(--text-muted); border-bottom-color: var(--text-muted); }

/* LOGOUT */
.btn-logout {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.4);
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-logout:hover { background: rgba(220,38,38,.07); color: #dc2626; border-color: rgba(220,38,38,.18); }

/* UI PRIMARY (app interior) */
.btn-ui {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-sm); padding: 0 14px;
  background: var(--gold); color: var(--night);
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem; font-weight: 700;
  border-radius: var(--radius-ui);
  border: none; cursor: pointer;
  transition: filter .15s, transform .12s;
}
.btn-ui:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ui:active { transform: scale(.98); }

.btn-ui-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.btn-ui-outline:hover { background: rgba(0,0,0,.04); color: var(--text); filter: none; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .nav-links, .nav-app-links { display: none; }
  .hamburger { display: flex; }
  .btn-primary { width: 100%; min-height: 48px; justify-content: center; }
  .btn-secondary { width: 100%; min-height: 44px; justify-content: center; }
  .nav-logo-center { position: static; transform: none; }
  .nav-page-title { position: static; transform: none; font-size: .8rem; }
}

/* ── TIPOGRAFIE ── */
.text-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold);
}
.text-eyebrow::before {
  content: '';
  width: 16px; height: 1.5px;
  background: var(--gold); border-radius: 2px; flex-shrink: 0;
}
.section-dark .text-eyebrow { color: var(--gold-lt); }

/* ── HERO LINIE GOLD ── */
.hero-line-gold {
  position: absolute; left: 0; top: .1em; bottom: .1em;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(201,151,74,0));
  border-radius: 2px;
}

/* ── CHIPS ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.1);
  color: var(--text-muted);
  backdrop-filter: blur(4px);
}
.chip-gold { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
.section-dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.65); }

/* ── WALLET BADGES ── */
.wallet-badge-apple {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--night); color: #fff;
  font-size: .82rem; font-weight: 600;
  border-radius: 10px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  transition: filter .15s, transform .12s;
}
.wallet-badge-apple:hover { filter: brightness(1.1); transform: translateY(-1px); }

.wallet-badge-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: #fff; color: #3c3c3c;
  font-size: .82rem; font-weight: 600;
  border-radius: 10px; text-decoration: none;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: box-shadow .15s, transform .12px;
}
.wallet-badge-google:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }

/* ── FLOAT TAGS ── */
.float-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94);
  border: .5px solid rgba(0,0,0,.07);
  border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.float-tag-title { font-size: 11px; font-weight: 600; color: var(--night); display: block; }
.float-tag-sub   { font-size: 10px; color: var(--text-muted); display: block; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.float-anim   { animation: floatY 3s ease-in-out infinite; }
.float-anim-2 { animation: floatY 3s ease-in-out infinite 1.5s; }