/* ==========================================================================
   Genera header and footer: the one shared look of every Genera app's top bar and footer
   (logo, currency switcher, app switcher, admin button, user chip, footer columns).

   - The Store gets it through genera.css (which @imports this file).
   - Floor Plan and Solar load ONLY this file, next to their own page styles, so none of the
     Store's page classes (.step, .row, .hint, .card ...) can change the tools' own design.
   The colour tokens are set on :root for the Store and again on .site-header / .main-footer,
   so the header looks the same even where a tool defines its own --panel, --line, --muted.
   ========================================================================== */

/* The UAE dirham sign (U+20C3) is too new for most fonts: this one-glyph font supplies it and nothing else. */
@font-face { font-family: 'Genera Symbols'; src: url('/assets/genera-symbols.otf') format('opentype'); unicode-range: U+20C3; font-display: swap; }

:root, .site-header, .main-footer {
  --bg: #14171E;
  --bg-deep: #0F1218;
  --panel: #1C2029;
  --panel-2: #242935;
  --line: #2F3542;
  --line-soft: #262B36;
  --line-strong: #3A4152;
  --text: #EEF0F3;
  --text-2: #D5D9E0;
  --muted: #A9B0BC;
  --gold: #E2B54A;
  --gold-hover: #F0C963;
  --gold-ink: #1A1406;
  --gold-tint: rgba(226, 181, 74, 0.14);
  --gold-tint-2: rgba(226, 181, 74, 0.07);
  --gold-line: rgba(226, 181, 74, 0.55);
  --ok: #6FCF97;
  --ok-tint: rgba(111, 207, 151, 0.12);
  --warn: #F2A27A;
  --danger: #F2A27A;
  --radius: 16px;
  --radius-sm: 10px;
  --font-heading: 'Genera Symbols', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Genera Symbols', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font: var(--font-body);
  --font-display: var(--font-heading);
  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ---------- Round icon button (app switcher, cart) ---------- */
.icon-btn {
  width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none;
  text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn .count {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px;
  background: var(--gold); color: var(--gold-ink); font-family: var(--font-heading); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.danger-text { color: var(--danger) !important; }

/* ---------- Header (Matching D:\As-Dev-Hub\GeneraWebsite layout.css) ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.75rem, 3.8vw, 4.25rem);
  background: var(--bg-deep);
  border-bottom: 1px solid #252A35;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  min-height: 84px;
}
.header-left { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; min-width: 0; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img, .logo-img { height: 48px; width: auto; display: block; }
.header-tool-slot { display: flex; align-items: center; min-width: 0; }
@media (max-width: 1600px) {
  .site-header { min-height: 80px; }
  .brand img, .logo-img { height: 44px; }
}

.site-header + main,
#genera-header + main,
#genera-header ~ main {
  padding-top: 84px;
}
.site-header + main.page,
#genera-header + main.page,
#genera-header ~ main.page,
.site-header ~ .page,
#genera-header ~ .page {
  padding-top: calc(84px + 28px);
}
@media (max-width: 1600px) {
  .site-header + main,
  #genera-header + main,
  #genera-header ~ main {
    padding-top: 80px;
  }
  .site-header + main.page,
  #genera-header + main.page,
  #genera-header ~ main.page,
  .site-header ~ .page,
  #genera-header ~ .page {
    padding-top: calc(80px + 28px);
  }
}

.main-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: clamp(0.35rem, 0.8vw, 0.75rem);
  font-family: var(--font-heading);
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border: none;
  background: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}
.main-nav a:hover,
.main-nav a[aria-current="page"],
.main-nav a.on-dark[aria-current="page"] {
  color: var(--gold);
  background: none;
}
@media (max-width: 1600px) {
  .main-nav {
    gap: clamp(0.25rem, 0.6vw, 0.5rem);
  }
  .main-nav a {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
}

.nav-badge, .new-pill {
  position: absolute;
  top: -6px;
  right: -2px;
  padding: 0.1rem 0.36rem;
  border-radius: 9999px;
  background: #22D3EE;
  color: #111;
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Header Right Actions (Matching D:\As-Dev-Hub\GeneraWebsite nav-actions) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
@media (max-width: 1600px) {
  .header-actions {
    gap: 0.5rem;
  }
}
.btn-admin {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  background: linear-gradient(135deg, #F5D061 0%, #D4AF37 50%, #B38F26 100%);
  color: #141A21 !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  height: 38px;
  padding: 0 1.05rem;
  font-family: var(--font-heading, "Outfit", sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(212, 175, 55, 0.32);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-admin svg {
  color: #141A21 !important;
  stroke: #141A21 !important;
  fill: none;
}
.btn-admin .label {
  color: #141A21 !important;
  font-weight: 700;
}
.btn-admin:hover {
  background: linear-gradient(135deg, #FDE082 0%, #E2BE45 50%, #BF9A2E 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  filter: brightness(1.04);
}
.btn-admin:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.25);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0 0.95rem;
  height: 38px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.btn-outline-gold:hover {
  background: var(--gold-tint);
}
@media (max-width: 1600px) {
  .btn-admin, .btn-outline-gold {
    height: 36px;
    padding: 0 0.85rem;
    font-size: 0.78rem;
  }
}
.admin-badge {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
  background: var(--gold);
  border-radius: 6px;
  padding: 3px 8px;
  text-transform: uppercase;
}
.user-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 36px;
  padding: 2px 12px 2px 4px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  transition: border-color .15s;
}
.user-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-ink);
  font-family: var(--font-heading);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}
.avatar.dark {
  background: var(--panel-2);
  color: var(--gold);
}
.secure-label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.secure-label svg {
  color: var(--ok);
}
/* Checkout header: a quiet "Secure checkout" badge by the logo and one clear way back to the store */
.secure-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  background: var(--ok-tint); color: var(--ok); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
}
.checkout-header .back-to-store { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
@media (max-width: 640px) { .secure-badge span, .checkout-header .back-to-store .label { display: none; } }

/* ---------- Common Footer (Matching D:\As-Dev-Hub\GeneraWebsite layout.css) ---------- */
.main-footer, .site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 4rem 0 0 0;
  margin-top: auto;
}
.footer-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: 2rem;
  padding-bottom: 3rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-logo {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: 0.25rem;
}
.footer-text {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 320px;
  line-height: 1.6;
  margin: 0;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.col-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-links a {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.bottom-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.bottom-wrap p {
  margin: 0;
}
.legal-links {
  display: flex;
  gap: 1.25rem;
}
.legal-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-links a:hover {
  color: var(--gold);
}
@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.main-footer .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 clamp(1.75rem, 3.8vw, 4.25rem); }

/* Currency switcher in the header */

.cur-menu { position: relative; }
.cur-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cur-btn:hover, .cur-btn[aria-expanded="true"] { border-color: var(--gold); }
.cur-btn svg { color: var(--muted); }
.cur-flag { width: 22px; height: 16px; border-radius: 3px; background-size: cover; background-position: center; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.cur-flag.fi { line-height: 16px; }
.cur-flag-none { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); box-shadow: none; }
.cur-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1100; min-width: 240px; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
.cur-list[hidden] { display: none; }
.cur-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cur-list button:hover, .cur-list button:focus-visible { background: var(--panel-2); outline: none; }
.cur-list li[aria-selected="true"] button { background: var(--gold-tint); }
.cur-name { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.cur-name b { font-size: 14px; }
.cur-name small { font-size: 12.5px; color: var(--muted); }
.cur-sym { font-weight: 700; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .cur-code { display: none; } .cur-btn { padding: 8px; } }

/* ==========================================================================
   App switcher (packages/ui/appSwitcher.js): the grid button in every Genera app header
   ========================================================================== */
.gx-switch { position: relative; }
.gx-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(320px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px;
}
.gx-panel[hidden] { display: none; }
.gx-title { margin: 4px 10px 6px; font-family: var(--font-heading); font-size: .75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.gx-item + .gx-title { margin-top: 12px; }
.gx-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.gx-item:hover, .gx-item:focus-visible { background: var(--panel-2); color: var(--text); }
.gx-item b { font-weight: 600; font-size: .95rem; padding-right: 52px; }
.gx-item small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.gx-small b { font-size: .88rem; }
.gx-tag { position: absolute; right: 12px; top: 11px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--gold-tint); color: var(--gold); }
.gx-tag.ok { background: var(--ok-tint); color: var(--ok); }
.gx-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* Account menu (packages/ui/userMenu.js): the name chip opens My account, Orders and Sign out */
.gx-user { position: relative; }
button.user-chip { cursor: pointer; line-height: 1; }
.gx-user-chev { margin-left: -2px; opacity: .7; }
.user-chip[aria-expanded="true"] { border-color: var(--gold); }
.gx-user-panel { width: min(280px, calc(100vw - 32px)); }
.gx-user-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 6px; min-width: 0; }
.gx-user-head b { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-user-head small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.gx-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
button.gx-item:disabled { opacity: .6; cursor: progress; }
.gx-signout b { color: var(--gold); }
.gx-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: .88rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.gx-notice[hidden] { display: none; }

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; gap: 10px; }
  .site-header .nav-search, .site-header .main-nav { display: none; }
  .main-footer { padding: 2.5rem 0 0 0; }
  .main-footer .container { padding: 0 16px; }
  .user-chip .name, .btn-admin .label, .btn-signin-label { display: none; }
  .user-chip { padding: 2px 6px; }
}

/* ==========================================================================
   Shared header/footer (genera-chrome.js) inside the tool apps
   The tools style bare elements (Solar: footer{max-width:95ch;font-size:12.5px},
   Floor Plan: button{padding:10px 14px;font:...}). These rules keep the shared
   chrome identical in every app regardless of that page CSS.
   ========================================================================== */
.genera-universal-header button { font-family: var(--font-heading); line-height: 1.2; }
.genera-universal-header .icon-btn { padding: 0; font-size: 0; }
.genera-universal-header .cur-btn { padding: 8px 10px 8px 12px; font-size: 14px; font-weight: 700; border-radius: 12px; }
.genera-universal-header .cur-list button { padding: 9px 10px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 400; }
@media (max-width: 640px) { .genera-universal-header .cur-btn { padding: 8px; } }
.genera-universal-footer {
  max-width: none; width: 100%; margin-left: 0; margin-right: 0;
  font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6; color: var(--muted);
}
.genera-universal-footer .container { max-width: 100%; }