/* _dist/css/style.css */
/* -------------------------------------------------------------------------- */
/* Core design tokens (dark theme)                                            */
/* -------------------------------------------------------------------------- */
:root{
  --bg:#0b1220; --panel:#101827; --elev:#0f172a; --text:#e5e7eb; --muted:#a5b4fc;
  --safe:#10b981; --warn:#f59e0b; --danger:#ef4444; --brand:#6366f1;
  --border:#1f2937; --ring:#7c3aed;

  /* Elevated surfaces (Bootstrap harmony) */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-link-color: #c7d2fe;
  --bs-link-hover-color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Base + resets                                                              */
/* -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Optional explicit body class used by shell pages */
body.ls-body{
  background:var(--bg);
  color:var(--text);
}

/* Focus visibility (keyboard) */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:8px;
}

/* Links (global) */
a{ color:#c7d2fe; }
a:hover{ color:#fff; }

/* -------------------------------------------------------------------------- */
/* Top nav (vanilla version)                                                  */
/* -------------------------------------------------------------------------- */
.navbar{
  position:sticky; top:0; z-index:10;
  background:rgba(16,24,39,.7);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px); /* Safari */
  border-bottom:1px solid var(--border);
}
.nav-container{
  max-width:1100px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between
}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px}
.nav-menu{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.nav-menu a{color:#c7d2fe;text-decoration:none}
.nav-menu a:hover{color:#fff}

/* -------------------------------------------------------------------------- */
/* Layout                                                                    */
/* -------------------------------------------------------------------------- */
.main{max-width:1100px;margin:32px auto;padding:0 20px}
.narrow{max-width:720px}

/* Hero (landing) */
.hero{
  max-width:1100px;
  margin:40px auto;
  padding:64px 16px 40px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.hero h1{font-size:40px;margin:0 0 12px}
.hero .sub{color:#cbd5e1;max-width:720px}
.cta{
  display:inline-block;margin-top:24px;
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:600
}
.cta:hover{filter:brightness(1.05)}
.note{opacity:.8;margin-top:8px}

/* Cards & grid */
.features h2,.privacy h2{margin:24px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:16px
}

/* High-contrast “Why LinkCheckerAI?” card on landing */
.why-card{
  color:#e5e7eb;
}
.why-card h2{
  color:#f9fafb;
}
.why-card li{
  color:#d1d5db;
  margin-bottom:0.25rem;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */
.scan-form{display:flex;gap:12px;margin-top:16px}
.scan-form input{
  flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0b1220;color:#fff
}
.scan-form input::placeholder{color:#94a3b8}
.scan-form button{
  padding:12px 18px;border-radius:12px;border:0;background:#22c55e;color:#0b1220;
  font-weight:700;cursor:pointer
}
.scan-form button:disabled{opacity:.5;cursor:not-allowed}
.scan-form button:not(:disabled):hover{filter:brightness(1.03)}

.status{display:flex;align-items:center;gap:10px;margin-top:16px}
.spinner{
  width:16px;height:16px;border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
  .spinner{animation:spin .8s linear infinite}
}
.hint{opacity:.8;margin-top:8px}

/* -------------------------------------------------------------------------- */
/* Results                                                                    */
/* -------------------------------------------------------------------------- */
.results .meta{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px
}
.verdict{
  background:var(--panel);border:1px solid var(--border);
  border-radius:16px;padding:18px;display:flex;align-items:center;gap:12px
}
.verdict .badge{
  padding:6px 10px;border-radius:999px;background:#1f2937;color:#fff;font-weight:700
}

/* Verdict states (app.js toggles .safe/.warning/.danger/.unknown on #verdictCard) */
#verdictCard.safe{border-color:rgba(16,185,129,.35);box-shadow:0 0 0 1px rgba(16,185,129,.15) inset}
#verdictCard.safe .badge{background:rgba(16,185,129,.18);color:#10b981}
#verdictCard.warning{border-color:rgba(245,158,11,.35);box-shadow:0 0 0 1px rgba(245,158,11,.15) inset}
#verdictCard.warning .badge{background:rgba(245,158,11,.18);color:#f59e0b}
#verdictCard.danger{border-color:rgba(239,68,68,.35);box-shadow:0 0 0 1px rgba(239,68,68,.15) inset}
#verdictCard.danger .badge{background:rgba(239,68,68,.18);color:#ef4444}
#verdictCard.unknown{border-color:rgba(99,102,241,.35);box-shadow:0 0 0 1px rgba(99,102,241,.15) inset}
#verdictCard.unknown .badge{background:rgba(99,102,241,.18);color:#c7d2fe}

/* Actions */
.actions-bar{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.primary{
  background:#22c55e;color:#0b1220;border:0;border-radius:10px;padding:10px 14px;
  font-weight:700;cursor:pointer
}
.primary:hover{filter:brightness(1.03)}
.primary[disabled]{opacity:.4;cursor:not-allowed}
.ghost{
  background:transparent;color:#c7d2fe;border:1px solid #334155;border-radius:10px;
  padding:10px 14px;text-decoration:none
}
.ghost:hover{border-color:#55627a;color:#e2e8f0}
.danger{
  background:#ef4444;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer
}
.danger:hover{filter:brightness(1.05)}

/* Details */
.details{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.reasons,.actions{margin:0;padding-left:18px}
.reasons li{margin:6px 0}

/* -------------------------------------------------------------------------- */
/* Interstitial                                                               */
/* -------------------------------------------------------------------------- */
.interstitial .gate{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:16px;margin-top:16px
}
.timer{font-size:22px;font-weight:800;color:#eab308;margin-bottom:8px}
.chk{display:flex;align-items:center;gap:10px;margin:8px 0}
.row{display:flex;gap:8px;flex-wrap:wrap}
#manualInput{
  flex:1;min-width:260px;padding:10px 12px;border:1px solid #334155;border-radius:10px;
  background:#0b1220;color:#fff
}
#copyBtn,#proceedBtn{
  padding:10px 14px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:#e5e7eb;
  cursor:pointer
}
#copyBtn:hover,#proceedBtn:hover{border-color:#55627a}
#proceedBtn:disabled{opacity:.5;cursor:not-allowed}

/* Ads (placeholder) */
.ad-slot{
  margin:20px 0;min-height:90px;border:1px dashed #334155;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#94a3b8
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--border);margin-top:40px}
.footer-content{
  max-width:1100px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;color:#94a3b8
}

/* Footer links cluster for Privacy / Terms */
.footer-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.footer-links a{
  color:#94a3b8;
  text-decoration:none;
  font-size:0.875rem;
}
.footer-links a:hover{
  color:#e5e7eb;
  text-decoration:underline;
}
.footer-separator{
  color:#6b7280;
}

/* A11y helpers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* -------------------------------------------------------------------------- */
/* Bootstrap harmony (self-hosted)                                            */
/* These tweaks ensure Bootstrap components match our dark palette.           */
/* -------------------------------------------------------------------------- */

/* Dark navbar look for pages using .brandbar (.navbar already themed above) */
.brandbar{
  background:rgba(16,24,39,.7);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.navbar .nav-link{ color:#c7d2fe; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:#ffffff; }

/* Cards that use translucent “glass” look in pages */
.card-glass{
  background:rgba(16,24,39,.6);
  border:1px solid var(--border);
  border-radius:16px;
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}

/* Inputs / controls in dark */
.form-control{
  background-color:#0b1220;
  color:#e5e7eb;
  border:1px solid #334155;
}
.form-control::placeholder{ color:#94a3b8; }
.form-control:focus{
  background-color:#0b1220;
  color:#fff;
  border-color:#6366f1;
  box-shadow:0 0 0 0.2rem rgba(99,102,241,.25);
}

/* Buttons */
.btn{ border-radius:12px; }
.btn-primary{
  background:#22c55e; border-color:#22c55e; color:#0b1220; font-weight:700;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline-light{
  --bs-btn-color:#e5e7eb; --bs-btn-border-color:#475569;
  --bs-btn-hover-bg:#111827; --bs-btn-hover-border-color:#64748b;
}

/* Utility link style used in auth pages */
.linklite{ color:#c7d2fe; text-decoration:none; }
.linklite:hover{ color:#fff; text-decoration:underline; }

/* Subtle status text */
.muted{ color:#9aa4b2; }

/* Iframe wrapper (survey wall) */
.iframe-wrap{ background:#0f172a; }

/* “Ghost” look used on some anchor buttons */
.btn-ghost{
  background:transparent; color:#c7d2fe; border:1px solid #334155; border-radius:10px; padding:10px 14px; text-decoration:none;
}
.btn-ghost:hover{ border-color:#55627a; color:#e2e8f0; }

/* Page wrapper helper used in several upgraded pages */
/* .page-wrap{ max-width:1100px; margin:32px auto; padding:0 16px; }   */

.page-wrap{
  width: 100%;
  max-width: 1100px;      /* comfortable default for laptops */
  margin: 32px auto;
  padding: 0 24px;        /* a bit more breathing room */
}

/* Spinner sizing (Bootstrap vars respected) */
.spinner-border{ --bs-spinner-width:1rem; --bs-spinner-height:1rem; }

/* -------------------------------------------------------------------------- */
/* Shell / sidebar layout for app-like pages (privacy, terms, account, etc.)  */
/* -------------------------------------------------------------------------- */

/* Flex shell: left sidebar + main content */
.ls-shell{
  min-height:100vh;
  display:flex;
  background:var(--bg);
  position:relative;
}

/* Sidebar where shell.js injects navigation */
.ls-sidebar{
  width:260px;
  max-width:80vw;
  background:#020617;
  border-right:1px solid var(--border);
  transition:transform .22s ease-out;
}

/* Main surface to the right of sidebar */
.ls-main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Navigation items in the sidebar */
.ls-nav-item{
  border-radius:0.5rem;
}
.ls-nav-item.active{
  background:#4f46e5;
  color:#ffffff !important;
}

/* Footer aliases for shell pages (reuse existing footer look) */
.ls-footer{
  border-top:1px solid var(--border);
  margin-top:24px;
}
.ls-footer-content{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#94a3b8;
}

/* Mobile nav toggle button (hamburger) */
.ls-nav-toggle{
  position:fixed;
  top:10px;
  left:10px;
  z-index:1050;
  border-radius:999px;
  padding:6px 10px;
  background:#020617;
  border:1px solid #374151;
  color:#e5e7eb;
  display:none; /* shown only on small screens */
}
.ls-nav-toggle span{
  display:block;
  width:16px;
  height:2px;
  border-radius:999px;
  background:#e5e7eb;
  margin:3px 0;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

/* For laptops and standard desktops (e.g. 1366px wide and up) */
@media (min-width: 1366px){
  .page-wrap{
    max-width: 1300px;
  }
}

/* For wide desktops / 1920x1080 and above */
@media (min-width: 1600px){
  .page-wrap{
    max-width: 1450px;
  }
}

@media (max-width:780px){
  .results .meta{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
}

/* Shell tweaks on small screens */
@media (max-width:768px){
  .ls-shell{
    flex-direction:column;
  }

  .ls-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    height:100vh;
    transform:translateX(-100%);
    z-index:1040;
  }

  body.ls-sidebar-open .ls-sidebar{
    transform:translateX(0);
  }

  .ls-main{
    min-height:100vh;
    padding-top:56px; /* space for toggle button / any future top bar */
  }

  .ls-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* Ensure desktop never keeps slide-in transform applied */
@media (min-width:769px){
  body.ls-sidebar-open .ls-sidebar{
    transform:none;
  }
  .ls-nav-toggle{
    display:none !important;
  }
}

[hidden]{display:none!important;}