/* =========================================================
   ShowLink Shared Navbar + Footer
   Import once on every page:
   <link rel="stylesheet" href="/assets/css/showlink-components.css">
   <script src="/assets/js/showlink-components.js" defer></script>
   ========================================================= */

:root{
  --sl-primary:#6d5dfc;
  --sl-primary-2:#8b5cf6;
  --sl-pink:#ec4899;
  --sl-blue:#3b82f6;
  --sl-green:#10b981;
  --sl-orange:#f97316;
  --sl-yellow:#f59e0b;
  --sl-text:#171827;
  --sl-muted:#74798b;
  --sl-line:#ececf3;
  --sl-nav-bg:rgba(255,255,255,.88);
  --sl-footer-bg:#fff;
  --sl-container:1180px;
  --sl-radius:16px;
  --sl-shadow:0 12px 35px rgba(29,27,60,.07);
}

.sl-shared *,
.sl-shared *::before,
.sl-shared *::after{box-sizing:border-box}

.sl-shared{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--sl-text);
}

.sl-shared a{text-decoration:none;color:inherit}

.sl-container{
  width:min(var(--sl-container),calc(100% - 40px));
  margin-inline:auto;
}

/* ---------- NAVBAR ---------- */

.sl-navbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--sl-nav-bg);
  border-bottom:1px solid rgba(236,236,243,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.sl-navbar-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:24px;
}

.sl-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.7px;
}

.sl-brand-text span{color:var(--sl-primary)}

.sl-brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:12px;
  background:linear-gradient(135deg,#6d5dfc,#ec4899);
  box-shadow:0 8px 20px rgba(109,93,252,.22);
}

.sl-nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:1;
}

.sl-nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  border-radius:11px;
  color:#62677a;
  font-size:12px;
  font-weight:800;
  transition:.2s ease;
}

.sl-nav-link:hover{
  color:var(--sl-primary);
  background:#f5f3ff;
}

.sl-nav-link i{font-size:13px}

.sl-nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}

.sl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:11px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.sl-btn-ghost{
  color:#606577;
  background:#fff;
  border-color:var(--sl-line);
}

.sl-btn-ghost:hover{
  color:var(--sl-primary);
  border-color:#ddd9ff;
  background:#faf9ff;
}

.sl-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#6d5dfc,#8b5cf6);
  box-shadow:0 8px 20px rgba(109,93,252,.2);
}

.sl-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 11px 25px rgba(109,93,252,.27);
}

.sl-nav-menu{
  width:40px;
  height:40px;
  display:none;
  place-items:center;
  border:1px solid var(--sl-line);
  border-radius:11px;
  background:#fff;
  color:#606577;
  cursor:pointer;
}

.sl-mobile-panel{
  display:none;
  border-top:1px solid var(--sl-line);
  background:#fff;
  padding:10px 20px 16px;
}

.sl-mobile-panel.open{display:grid;gap:5px}

.sl-mobile-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  border-radius:11px;
  color:#5f6476;
  font-size:13px;
  font-weight:800;
}

.sl-mobile-link:hover{background:#f7f6ff;color:var(--sl-primary)}

.sl-icon-blue{color:var(--sl-blue)}
.sl-icon-purple{color:var(--sl-primary)}
.sl-icon-pink{color:var(--sl-pink)}
.sl-icon-orange{color:var(--sl-orange)}
.sl-icon-green{color:var(--sl-green)}
.sl-icon-yellow{color:var(--sl-yellow)}

/* ---------- FOOTER ---------- */

.sl-footer{
  background:var(--sl-footer-bg);
  border-top:1px solid var(--sl-line);
}

.sl-footer-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:28px 0;
}

.sl-footer-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.sl-footer-brand-text strong{
  display:block;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.3px;
}

.sl-footer-brand-text small{
  display:block;
  margin-top:2px;
  color:var(--sl-muted);
  font-size:10px;
}

.sl-footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:7px 18px;
}

.sl-footer-links a{
  color:#777c8d;
  font-size:11px;
  font-weight:700;
  transition:.2s ease;
}

.sl-footer-links a:hover{color:var(--sl-primary)}

.sl-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 0 20px;
  border-top:1px solid #f0f0f5;
  color:#9a9ead;
  font-size:10px;
}

.sl-footer-bottom strong{color:#74798b}

/* ---------- DARK MODE HOOK ---------- */

html.dark .sl-navbar{
  --sl-nav-bg:rgba(20,20,31,.9);
  border-color:#303041;
}
html.dark .sl-navbar,
html.dark .sl-footer{
  color:#f4f4fa;
}
html.dark .sl-nav-link{color:#b6b7c5}
html.dark .sl-nav-link:hover{background:#29263e;color:#c4bcff}
html.dark .sl-btn-ghost,
html.dark .sl-nav-menu,
html.dark .sl-mobile-panel{background:#20202d;color:#eeeef5;border-color:#343447}
html.dark .sl-mobile-link{color:#c0c1ce}
html.dark .sl-mobile-link:hover{background:#2a2939}
html.dark .sl-footer{background:#171721;border-color:#303041}
html.dark .sl-footer-bottom{border-color:#303041}

/* ---------- RESPONSIVE ---------- */

@media (max-width:820px){
  .sl-navbar-inner{min-height:64px;gap:12px;position:relative;padding-left:56px}
  .sl-nav-links{display:none}
  .sl-nav-actions .sl-btn-ghost,
  .sl-nav-actions .sl-btn-primary{display:none}
  .sl-nav-menu{display:grid;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2}
  .sl-footer-main{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .sl-footer-links{justify-content:flex-start}
}

@media (max-width:560px){
  .sl-container{width:min(var(--sl-container),calc(100% - 28px))}
  .sl-brand{font-size:17px}
  .sl-brand-mark{width:35px;height:35px;border-radius:11px}
  .sl-footer-links{gap:9px 15px}
  .sl-footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
}


/* ============================================================
   ShowLink Theme + Language Controls
   ============================================================ */
.showlink-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.showlink-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.showlink-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--sl-border, rgba(100,116,139,.18));
  border-radius: 11px;
  background: var(--sl-surface, rgba(255,255,255,.86));
  color: var(--sl-text, #172033);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.showlink-tool-btn:hover {
  transform: translateY(-1px);
  border-color: var(--sl-primary, #6366f1);
}

.showlink-tool-btn .sl-tool-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.showlink-lang-label {
  min-width: 22px;
  text-align: center;
}

.showlink-tool-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--sl-border, rgba(100,116,139,.18));
  border-radius: 13px;
  background: var(--sl-surface, #fff);
  box-shadow: 0 16px 40px rgba(15,23,42,.16);
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.showlink-tool.is-open .showlink-tool-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.showlink-tool-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sl-text, #172033);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.showlink-tool-option:hover,
.showlink-tool-option.is-active {
  background: var(--sl-hover, rgba(99,102,241,.10));
}

.showlink-tool-option .sl-check {
  margin-left: auto;
  opacity: 0;
}

.showlink-tool-option.is-active .sl-check {
  opacity: 1;
}

/* Theme variables */
:root {
  --sl-bg: #f7f9fc;
  --sl-surface: #ffffff;
  --sl-text: #172033;
  --sl-muted: #64748b;
  --sl-border: rgba(100,116,139,.18);
  --sl-hover: rgba(99,102,241,.08);
  --sl-primary: #6366f1;
}

html[data-theme="dark"] {
  --sl-bg: #0b1020;
  --sl-surface: #121a2c;
  --sl-text: #f1f5f9;
  --sl-muted: #a6b1c2;
  --sl-border: rgba(148,163,184,.22);
  --sl-hover: rgba(129,140,248,.13);
}

html[data-theme="dark"] body {
  background: var(--sl-bg);
  color: var(--sl-text);
}

html[data-theme="dark"] .showlink-navbar,
html[data-theme="dark"] .showlink-footer {
  background: var(--sl-surface);
  color: var(--sl-text);
  border-color: var(--sl-border);
}

html[data-theme="dark"] .showlink-tool-btn,
html[data-theme="dark"] .showlink-tool-menu {
  background: var(--sl-surface);
  color: var(--sl-text);
  border-color: var(--sl-border);
}

@media (max-width: 760px) {
  .showlink-tools {
    gap: 6px;
  }

  .showlink-tool-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .showlink-tool-btn .showlink-tool-text {
    display: none;
  }

  .showlink-tool-menu {
    right: 0;
  }
}


/* V5 component harmonization */
.sl-navbar{background:var(--nav-bg,rgba(255,255,255,.88))!important;color:var(--text,#171827);border-color:var(--line,#e9eaf2)!important}
.sl-nav-actions{margin-left:auto!important}
.sl-nav-links{justify-content:center}
.showlink-tools{margin-left:0!important}
.showlink-tool-btn{background:var(--surface,#fff)!important;color:var(--text,#171827)!important;border-color:var(--line,#e9eaf2)!important}
.showlink-tool-menu{background:var(--surface,#fff)!important;color:var(--text,#171827)!important;border-color:var(--line,#e9eaf2)!important}
.showlink-tool-option{color:var(--text,#171827)!important}
.showlink-tool-option:hover,.showlink-tool-option.is-active{background:var(--surface-2,#f5f3ff)!important}
.sl-mobile-panel{background:var(--surface,#fff)!important;color:var(--text,#171827);border-color:var(--line,#e9eaf2)!important}
.sl-footer{background:var(--surface,#fff)!important;color:var(--text,#171827);border-color:var(--line,#e9eaf2)!important}
.sl-footer-bottom{border-color:var(--line,#e9eaf2)!important}
@media(max-width:820px){
  .sl-navbar-inner{padding-left:56px!important}
  .sl-nav-menu{left:0!important;right:auto!important}
  .sl-nav-links{display:none!important}
  .sl-nav-actions{margin-left:auto!important}
}

/* V6 CLICK FIX: controls must always receive pointer input. */
.sl-navbar,
.sl-navbar-inner,
.sl-nav-actions,
.showlink-tools,
.showlink-tool,
.showlink-tool-btn,
.showlink-tool-menu,
.showlink-tool-option {
  pointer-events: auto !important;
}
.sl-nav-actions { position: relative; z-index: 20; }
.showlink-tools { position: relative; z-index: 30; }
.showlink-tool { z-index: 31; }
.showlink-tool-menu { z-index: 99999 !important; }
.showlink-tool-btn,
.showlink-tool-option { -webkit-tap-highlight-color: transparent; }
@media (max-width: 820px) {
  .sl-nav-actions { gap: 6px; }
  .showlink-tool-btn { min-height: 40px; }
  .showlink-tool-menu { position: absolute; }
}


/* ============================================================
   SHOWLINK V7 — COMPLETE DARK SURFACE + FONT AWESOME CONTROLS
   ============================================================ */

/* Theme and language controls share one consistent component shape. */
.showlink-tools{
  align-items:center;
  gap:8px;
}
.showlink-tool{
  position:relative;
}
.showlink-tool-btn{
  min-width:92px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  gap:8px;
  line-height:1;
}
[data-language-tool] .showlink-tool-btn{
  min-width:74px;
}
.showlink-tool-btn .sl-tool-icon{
  width:18px;
  height:18px;
  font-size:15px;
}
.showlink-tool-btn .sl-tool-icon i,
.showlink-tool-option i{
  line-height:1;
}
.showlink-tool-option{
  min-height:40px;
  padding:9px 10px;
}
.sl-option-icon{
  width:19px;
  min-width:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.sl-option-sun{color:#f59e0b}
.sl-option-moon{color:#6366f1}
.sl-check{
  width:18px;
  min-width:18px;
  display:inline-flex;
  justify-content:center;
  color:var(--primary,#6d5dfc);
  font-size:12px;
}
.showlink-lang-label{
  font-size:12px;
  font-weight:800;
}

/* Dark mode for the shared component: no leftover white surfaces. */
html[data-theme="dark"] .showlink-tool-btn,
html[data-theme="dark"] .showlink-tool-menu{
  background:#121a2c!important;
  color:#f1f5f9!important;
  border-color:#29344a!important;
}
html[data-theme="dark"] .showlink-tool-option{
  color:#e2e8f0!important;
}
html[data-theme="dark"] .showlink-tool-option:hover,
html[data-theme="dark"] .showlink-tool-option.is-active{
  background:#202944!important;
}
html[data-theme="dark"] .showlink-tool-menu{
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}
html[data-theme="dark"] .showlink-tool-btn:hover{
  background:#171f35!important;
  border-color:#5966a0!important;
}
html[data-theme="dark"] .sl-option-icon{
  color:#c4b5fd;
}

/* Mobile: both controls remain equal, compact and tappable. */
@media(max-width:820px){
  .showlink-tools{gap:6px}
  .showlink-tool-btn,
  [data-language-tool] .showlink-tool-btn{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
  }
  .showlink-tool-btn .showlink-tool-text,
  .showlink-tool-btn .showlink-lang-label{
    display:none;
  }
}

/* ============================================================
   PAGE DARK MODE — cover hard-coded light backgrounds/borders
   ============================================================ */
html[data-theme="dark"] .sl-nav,
html[data-theme="dark"] .desktop-nav a:hover,
html[data-theme="dark"] .desktop-nav a.active{
  background:transparent;
}
html[data-theme="dark"] .desktop-nav a:hover,
html[data-theme="dark"] .desktop-nav a.active{
  background:#202944;
  color:#a99fff;
}
html[data-theme="dark"] .btn-white{
  background:#121a2c!important;
  color:#f8fafc!important;
  border:1px solid #29344a;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
html[data-theme="dark"] .btn-ghost{
  color:#cbd5e1;
}
html[data-theme="dark"] .preview-window,
html[data-theme="dark"] .quick-stats,
html[data-theme="dark"] .art-badge,
html[data-theme="dark"] .art-sheet,
html[data-theme="dark"] .floating-note,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .why-section,
html[data-theme="dark"] .why-grid article,
html[data-theme="dark"] .faq-list details{
  background:#121a2c!important;
  color:#f1f5f9;
  border-color:#29344a!important;
}
html[data-theme="dark"] .preview-window{
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
html[data-theme="dark"] .window-head{
  background:#0f172a!important;
  color:#94a3b8;
}
html[data-theme="dark"] .preview-url,
html[data-theme="dark"] .payment-url,
html[data-theme="dark"] .product-preview{
  background:#0f172a!important;
  color:#f1f5f9;
  border-color:#29344a!important;
}
html[data-theme="dark"] .preview-stats span{
  background:#0f172a!important;
  color:#f1f5f9;
  border-color:#29344a!important;
}
html[data-theme="dark"] .purple-card span{
  background:#272044!important;
}
html[data-theme="dark"] .pink-card span{
  background:#3a2032!important;
}
html[data-theme="dark"] .stat-icon.blue,
html[data-theme="dark"] .list-icon.blue,
html[data-theme="dark"] .why-icon.blue,
html[data-theme="dark"] .step-icon.blue{
  background:#172b49!important;
}
html[data-theme="dark"] .stat-icon.pink,
html[data-theme="dark"] .list-icon.pink,
html[data-theme="dark"] .why-icon.pink,
html[data-theme="dark"] .step-icon.pink{
  background:#382034!important;
}
html[data-theme="dark"] .stat-icon.green,
html[data-theme="dark"] .list-icon.green,
html[data-theme="dark"] .why-icon.green,
html[data-theme="dark"] .step-icon.green{
  background:#15352c!important;
}
html[data-theme="dark"] .stat-icon.orange,
html[data-theme="dark"] .list-icon.orange,
html[data-theme="dark"] .why-icon.orange{
  background:#39291e!important;
}
html[data-theme="dark"] .stat-icon.purple,
html[data-theme="dark"] .list-icon.purple,
html[data-theme="dark"] .why-icon.purple,
html[data-theme="dark"] .step-icon.purple{
  background:#292244!important;
}
html[data-theme="dark"] .section-soft,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .final-cta{
  background:#0f172a!important;
}
html[data-theme="dark"] .sheet-buttons span{
  background:#202944!important;
}
html[data-theme="dark"] .product-thumb{
  background:#252044!important;
}
html[data-theme="dark"] .secure{
  color:#6ee7b7;
}
html[data-theme="dark"] .mobile-menu{
  background:#121a2c!important;
  border-color:#29344a!important;
  color:#e2e8f0;
}
html[data-theme="dark"] .mobile-menu a:hover{
  background:#202944!important;
}
html[data-theme="dark"] .footer{
  background:#080c16!important;
  color:#f8fafc;
}
html[data-theme="dark"] .footer-grid b,
html[data-theme="dark"] .footer .brand{
  color:#f8fafc;
}
html[data-theme="dark"] .footer-bottom{
  border-color:#29344a;
}
html[data-theme="dark"] .footer-grid a{
  color:#94a3b8;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:#0f172a!important;
  color:#f1f5f9!important;
  border-color:#29344a!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#64748b!important;
}