/* ── index.html – page-specific styles ──────────────────────── */

/* ── Signup Promo Box ── */
.signup-promo { margin:0 0 18px; width:100%; background:linear-gradient(135deg,rgba(201,169,106,0.15) 0%,rgba(30,24,42,0.95) 100%); border:2px solid rgba(201,169,106,0.45); border-radius:18px; padding:22px 20px; text-align:center; box-sizing:border-box; }
.signup-promo-text { color:#e8e0d0; font-size:1.05em; line-height:1.5; margin-bottom:14px; }
.signup-promo-text strong { color:#c9a96a; font-size:1.15em; }
.signup-promo-btn { display:inline-block; background:#c9a96a; color:#1a1028; font-weight:700; font-size:1em; padding:12px 28px; border-radius:10px; text-decoration:none; transition:background 0.2s,transform 0.15s; }
.signup-promo-btn:active { transform:scale(0.97); background:#b8943e; }

/* iOS Safari: compensate fixed topbar height when scrolling to anchors */
:root { --topbar-h: 60px; }
html { scroll-padding-top: var(--topbar-h); }

body, html { height:100%; margin:0; padding:0; overflow-y:auto !important; overflow-x:hidden; }
.app-wrap { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; padding-top:var(--topbar-h); padding-bottom:calc(64px + env(safe-area-inset-bottom,0)); }

/* ── Topbar: fixed, solid background ── */
.topbar { display:flex; align-items:center; justify-content:center; background:rgba(14,11,22,0.97); padding:10px 18px; position:fixed; top:0; left:0; right:0; height:var(--topbar-h); box-sizing:border-box; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.4); }
.topbar-logo { height:auto; max-height:50px; max-width:220px; object-fit:contain; }
.topbar-actions { display:flex; align-items:center; gap:12px; position:absolute; right:18px; top:50%; transform:translateY(-50%); }
/* Alle Topbar-Buttons gleich hoch */
.topbar-actions .lang-current,
.topbar-actions .user-trigger,
.topbar-actions .topbar-profile,
.topbar-actions .hauptmenue-toggle {
  height:38px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  padding-top:0;
  padding-bottom:0;
}
/* ── Language Dropdown ── */
.lang-dropdown { position:relative; }
.lang-current { background:rgba(255,255,255,0.06); border:1px solid #c9a96a40; border-radius:8px; color:#c9a96a; font-weight:700; font-size:15px; padding:6px 12px; cursor:pointer; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.lang-current:hover { border-color:#c9a96a; background:rgba(201,169,106,0.10); }
#langCurrentFlag { width:22px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.lang-menu { position:absolute; top:calc(100% + 6px); right:0; background:#23202a; border:1.5px solid #c9a96a60; border-radius:10px; box-shadow:0 8px 24px #000a; z-index:9999; min-width:150px; padding:4px 0; overflow:hidden; }
.lang-menu.hidden { display:none; }
.lang-item { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; padding:9px 14px; background:none; border:none; color:#f0f2f7; font-size:15px; cursor:pointer; text-align:left; transition:background 0.12s; font-family:inherit; }
.lang-item:hover:not(.lang-item-disabled) { background:rgba(201,169,106,0.13); }
.lang-item.lang-item-active { color:#c9a96a; font-weight:700; }
.lang-item.lang-item-disabled { opacity:0.38; cursor:not-allowed; }
.flag-img { width:22px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0; }
/* ── User Box ── */
.user-box { display:flex; align-items:center; gap:8px; }
.user-profile-link { display:flex; align-items:center; gap:4px; text-decoration:none; }
.user-profile-link:hover .username { text-decoration:underline; }
.avatar-mini { width:28px; height:28px; border-radius:50%; object-fit:cover; border:1.5px solid #c9a96a; background:#23202a; margin-right:4px; }
.username { color:#f0f2f7; font-weight:600; margin-right:6px; }
.topbar-profile { background:rgba(255,255,255,0.06); border:1px solid #c9a96a40; border-radius:8px; color:#c9a96a; font-weight:700; font-size:15px; padding:8px 16px; cursor:pointer; white-space:nowrap; }

/* ── User Dropdown ── */
.user-dropdown { position:relative; }
.user-trigger { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.06); border:1px solid #c9a96a40; border-radius:8px; color:#f0f2f7; font-weight:700; font-size:14px; padding:5px 8px; cursor:pointer; white-space:nowrap; transition:border-color 0.15s, background 0.15s; }
.user-trigger:hover { border-color:#c9a96a; background:rgba(201,169,106,0.10); }
.user-trigger .avatar-mini { margin-right:0; }
.ud-name { max-width:90px; overflow:hidden; text-overflow:ellipsis; }
.ud-arrow { color:#c9a96a; font-size:11px; }
.user-dropdown-menu { position:absolute; top:calc(100% + 6px); right:0; background:#23202a; border:1.5px solid #c9a96a60; border-radius:10px; box-shadow:0 8px 24px #000a; z-index:9999; min-width:180px; overflow:hidden; }
.user-dropdown-menu.hidden { display:none; }
.ud-header { display:flex; align-items:center; gap:10px; padding:12px 14px 10px; border-bottom:1px solid #c9a96a30; }
.ud-avatar-lg { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #c9a96a; flex-shrink:0; }
.ud-title { color:#c9a96a; font-weight:700; font-size:15px; }
.ud-item { display:block; width:100%; padding:10px 14px; color:#f0f2f7; font-size:14px; background:none; border:none; text-align:left; cursor:pointer; text-decoration:none; font-family:inherit; transition:background 0.12s; box-sizing:border-box; }
.ud-item:hover { background:rgba(201,169,106,0.12); }
.ud-divider { height:1px; background:#c9a96a20; margin:2px 0; }
.ud-logout { color:#e57373; }
.ud-logout:hover { background:rgba(229,115,115,0.1) !important; }

/* ── Lang compact: hide short code by default ── */
.lang-name-short { display:none; }

/* ── Layout ── */
.main-content { flex:1 1 0; width:100%; max-width:700px; margin:0 auto; padding:24px 18px 24px 18px; box-sizing:border-box; }
section { margin-bottom:48px; }
.section-title { font-size:1.5em; margin-bottom:10px; color:#c9a96a; }
.section-desc { color:#b8c0d4; margin-bottom:18px; }
.box-grid { display:flex; flex-wrap:wrap; gap:18px; }

/* ── Nav Box ── */
.nav-box {
  width:100%;
  background:rgba(27,31,39,0.97);
  border:2px solid #c9a96a40;
  border-radius:18px;
  overflow:hidden;
  font-size:1.1em; color:#f0f2f7; font-weight:600;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
  transition:box-shadow 0.18s, border-color 0.18s;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  text-decoration:none;
}
.nav-box:hover { border-color:#c9a96a; box-shadow:0 4px 18px #c9a96a33; }
.nav-box-label { padding:16px 12px 18px; width:100%; text-align:center; box-sizing:border-box; }

/* ── Card Preview Area inside nav-box ── */
.nav-box-preview {
  width:100%;
  height: clamp(200px, 45vw, 240px);
  position:relative;
  overflow:hidden;
  background:rgba(15,13,20,0.3);
  flex-shrink:0;
}

/* ── Shared card face styles ── */
.pv-card {
  position:absolute;
  border-radius:10px;
  backface-visibility:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  transform-style:preserve-3d;
}
/* When the card is narrowed (e.g. 4 cards on mobile), shrink height
   to keep 9:16 aspect ratio instead of cropping the image */
.pv-card.fit-ratio {
  background-size:contain;
  background-color:#202634;
}
/* ── Wish ticker preview ── */
.wish-ticker-preview {
  background: radial-gradient(ellipse at center, rgba(201,169,106,0.08) 0%, rgba(15,13,20,0.3) 70%);
  position: relative;
  overflow: hidden;
}
/* ── Bottom Nav ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:64px; background:rgba(27,31,39,0.98); display:flex; justify-content:center; align-items:center; border-top:1.5px solid #c9a96a40; z-index:200; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; gap:0; padding-bottom:env(safe-area-inset-bottom,0); }
.bottom-nav::-webkit-scrollbar { display:none; }
.bottom-btn { flex:0 0 auto; min-width:80px; padding:0 14px; text-align:center; color:#c9a96a; font-size:0.88em; font-weight:700; background:none; border:none; outline:none; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; white-space:nowrap; scroll-snap-align:start; }
.bottom-btn.active, .bottom-btn:active { background:rgba(201,169,106,0.08); }

@media (max-width:600px) {
  .main-content { padding-bottom:24px; }
  .nav-box { font-size:1em; }
  /* Language: compact – flag + code only */
  #langCurrentCode .lang-name-full { display:none; }
  #langCurrentCode .lang-name-short { display:inline; }
  .lang-item .lang-name-full { display:none; }
  .lang-menu { min-width:90px; }
  .lang-current { padding:6px 8px; }
  /* User dropdown: hide name on tiny screens */
  .ud-name { display:none; }
}

/* ── Mobile topbar: Logo links, kein Überlappen ── */
@media (max-width:768px) {
  .topbar {
    justify-content: flex-start;
    padding: 6px 10px;
  }
  .topbar-logo {
    height: 28px;
    max-height: 28px;
    max-width: 140px;
  }
}