:root {
      --bg: #111827;            /* slate-900 */
      --panel: #0b1220f2;       /* translucent deep panel */
      --text: #e5e7eb;          /* gray-200 */
      --muted: #686c73;         /* gray-400 */
      --accent: orange;        /* blue-400 */
      --accent-strong: bisque; /* blue-500 */
      --ok: orange;            /* emerald-500 */
      --ring: #ffffff33;        /* subtle ring */
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.35);
      --cookie-offset: 0px; /* dynamic bottom padding so banner doesn't cover footer */
    }

    body{
        padding-bottom: var(--cookie-offset); /* lift page content above banner when visible */
    }
 

    /* Banner container */
    .cookie-banner {
      position: fixed;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      z-index: 9999;
      display: grid;
      place-items: center;
      pointer-events: none; /* so only the panel captures pointer */
     
    }

    .cookie-panel {
      width: min(720px, 100%);
      background: var(--panel);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid #ffffff14;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      pointer-events: auto; /* re-enable inside */
      overflow: hidden;
    }

    .cookie-inner {
      padding: 1rem 1rem 0.75rem;
    }

    .cookie-title { font-size: 1rem; font-weight: 700; color: orange; }

    .cookie-desc { margin: 0.35rem 0 0.75rem; color: var(--muted); line-height: 1.5; }

    .cookie-actions {
      display: grid;
      grid-template-columns: 1fr auto 1fr 1fr;
      gap: .5rem;
     /*  flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start; */
    }
    .spaceBTN{
        width: 40%;
    }
    .btn {
        -webkit-appearance: none;
      appearance: none;
      
      border: 0;
      border-radius: 999px;
      padding: .6rem .9rem;
      
      line-height: 1;
      cursor: pointer;
      color: var(--muted);
      background: #1f2937; /* gray-800 */
      transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
      box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 10px rgba(0,0,0,.25);
    }

    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

    .btn-ok { background: var(--ok); color: #062b1f; font-weight: 900; }
    .btn-ok:hover { filter: brightness(1.05); }

    .btn-privacy { background: #0b1220; color: var(--accent); font-weight: 200; }
    .btn-privacy:hover { color: var(--accent-strong); }

    /* Expandable policy */
    .cookie-policy {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
      border-top: 1px solid #ffffff14;
    }

    .cookie-policy-content {
      padding: .9rem 1rem 1rem;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.5;
    }

    .cookie-panel[aria-expanded="true"] .cookie-policy { max-height: 30rem; }
/* Also allow a class-based toggle as a fallback */
.cookie-panel.is-expanded .cookie-policy { max-height: 30rem; }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .cookie-policy { transition: none; }
      .btn { transition: none; }
    }

    /* Small screens pin to full width at bottom */
    @media (max-width: 420px) {
      .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; }
      .cookie-inner { padding: .85rem .85rem .6rem; }
      .cookie-policy-content { padding: .7rem .85rem .85rem; }
    }