/* Web/app/static/css/base.css */
body {
  background: #1e1e2f;
  color: #ddd;
  font-family: sans-serif;
}
h1 { color: #a67cff; }
a { color: #7e57c2; text-decoration: none; }

.container {
  /* adjust to taste */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.card {
  background: #2e2e42;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.card h2 {
  margin-top: 0;
  color: #7e57c2;
}
.card ul {
  list-style: none;
  padding: 0;
}
.card ul li {
  margin: 0.5rem 0;
}

/* ───────────── Sticky‐Footer Layout ───────────── */

body {
  background: #1e1e2f;
  color: #ddd;
  font-family: sans-serif;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

main {
  flex: 1;
}

/* ─────────────────────────────────────────────── */
/* ------------------------------------
   Cookie‐Consent Banner (dark theme)
   ------------------------------------ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2e2e42;           /* match your .card background */
  color: var(--text-color);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
  z-index: 1000;
  flex-wrap: wrap;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  flex: 1 1 auto;
}

.cookie-banner a {
  color: var(--accent-color);
  text-decoration: underline;
}

.cookie-banner a:hover {
  color: #a67cff;                /* slightly lighter on hover */
}

.cookie-banner button {
  background: var(--accent-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: 1rem;
  flex: 0 0 auto;
}

.cookie-banner button:hover {
  background: var(--accent-dark);
}

/* centred flex column, no side-padding offset */
.download-block{
  max-width: 800px;          /* limit giant 4K screens */
  margin-inline: auto;       /* centre horizontally */
  padding: 0 1rem;           /* tiny mobile gutter */
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* big, responsive screenshot */
.download-shot{
  width: 100%;
  max-width: 700px;          /* ← “large and big” */
  height: auto;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  border-radius: 0.5rem;
}

/* shared button tweaks (optional) */
.download-btn{
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
}

/* ──────────────────────────────────────────────────────
   1A)  ROOT-LEVEL ADJUSTMENTS FOR SMALL SCREENS
   ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  html { font-size: 15px; }                 /* default 16-px → 15-px for better fit */

  body {
    padding-left: 0;                        /* you set body{display:flex} already   */
    padding-right: 0;                       /* so we keep the sticky-footer layout  */
  }

  /* Most “.container” blocks already have horizontal padding;
     on phones we can safely shrink it a bit. */
  .container { padding-inline: 1rem; }

  /* 1B)  Make tables swipe-able instead of squashing text   */
  table { width: 100%; overflow-x: auto; display: block; }

  /* 1C)  Hero headings rarely fit on a single line on phones */
  h1 { font-size: 1.9rem; line-height: 1.2; }
  h2 { font-size: 1.4rem; line-height: 1.3; }

  /* 1D)  Buttons should fill the viewport’s width *slightly* more */
  .btn { padding: 0.65rem 1.25rem; font-size: 1rem; }

  /* 1E)  Make .card sections breathe less to avoid endless scroll */
  .card { padding: 1.25rem; }
}

/* The hamburger button is hidden on desktop */
.hamburger{
  display:none;background:none;border:0;
  font-size:1.9rem;color:var(--text-color);
}

/* Mobile navigation (≤ 640 px) */
@media (max-width:640px){

  /* 1) Show the burger */
  .hamburger{display:block;}

  /* 2) Full-height slide-down menu */
  .nav-links{
    position:fixed;          /* take it *out* of the navbar flow      */
    top:56px;                /* 56 px ≈ navbar height                  */
    left:0; right:0; bottom:0;
    z-index:999;             /* sit above other content                */

    display:flex;
    flex-direction:column;
    gap:0.75rem;
    padding:1.25rem 1rem;

    background:var(--bg-color);
    overflow-y:auto;         /* scroll if the list is taller than view */

    /* start hidden just above the viewport */
    transform:translateY(-110%);
    transition:transform .25s ease;
  }

  /* 3) JS toggles .open → slide into view */
  .nav-links.open{transform:translateY(0);}
}

.table-wrap{overflow-x:auto; width:100%;}

@media (max-width:640px){
  #creditQty{
    font-size:1.4rem;
    width:6rem;              /* 4 rem → 6 rem so iOS zoom-in is avoided              */
    padding:0.4rem 0.6rem;
  }
}

.modal-content{width:min(90vw,300px);max-height:90vh;overflow-y:auto;background:#2e2e42;                 /* same colour as .card */
  color:var(--text-color);
  border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.65);
  /* NEW – centre everything */
  display:flex;
  flex-direction:column;
  align-items:center;  /* horizontal centre */
  text-align:center;   /* centre headings/labels */
  gap:1rem;            /* tidy vertical rhythm */
  padding:2rem 1.5rem; /* breathing room       */

  position:relative;   /* keeps the “×” close button anchored */}

h1{
  font-size:clamp(1.9rem, 4vw + 0.5rem, 3rem);
  line-height:1.2;                /* keep the existing line-height               */
}

/* ------------------------------
   Centre auth / contact blocks
   ------------------------------ */
.auth-container,
.contact-container{
  /* keeps the 260-400 px max-width rule you already have,
     but now the browser splits the remaining space 50 / 50 */
  margin-left:  auto;
  margin-right: auto;
}

/* --- tiny loader -------------------------------------------------- */
.spinner{
  width:28px;height:28px;
  border:3px solid #888;
  border-top-color:var(--accent-color);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:.75rem auto;          /* centre horizontally */
}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none;}