/* ──────────────────────────────────────────────
   PatriotChat – Cookie banner (matches /static/test/cookie-banner-test.html)
   Single-source, no legacy rules
   2025-07-28
────────────────────────────────────────────── */


   /* ─── Base container ─── */
#cookie-banner{
  position:fixed;                       /* keep it fixed */
  z-index:9999;
  background:#1e1e1e;
  color:#eee;
  font-family:inherit;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,.4);
  transition:all .4s ease-in-out;
  /*  🔴  NO  inset / left / right / width properties here  */
}

  
  /* ───── Large (initial) ───── */
  #cookie-banner.cookie-banner-large{
    bottom:1rem;
    left:50%;
    transform:translateX(-50%);
    padding:.75rem 1rem;
    font-size:1rem;
  }
  
  /* ───── Small (toast) ───── */
  #cookie-banner.cookie-banner-small{
    bottom:2.5rem;
    right:1rem;
    left:auto;
    padding:.5rem .75rem;
    font-size:.9rem;
    white-space:nowrap;
    min-width:320px;
    max-width:95%;
  }
  
  /* inner elements */
  #cookie-banner .label{font-weight:500;display:inline-flex;align-items:center;gap:.4rem}
  #cookie-banner .details{font-size:.85rem;color:#bbb}
  #cookie-banner.cookie-banner-small .details{display:none}
  #cookie-banner .manage-btn{
    background:none;border:none;color:#aaa;font-size:1.1rem;cursor:pointer;
  }
  #cookie-banner .manage-btn:hover{color:#fff}
  #cookie-banner .btn{
    padding:.4rem .75rem;font-size:.85rem;border:1px solid #555;border-radius:5px;
    background:#333;color:#fff;cursor:pointer;white-space:nowrap;
  }
  #cookie-banner .btn:hover{background:#444}
  #cookie-banner .btn-primary{background:#007bff;border:none}
  #cookie-banner .btn-primary:hover{background:#0056b3}
  
  /* ─── Mobile tweaks ─── */
  @media (max-width:600px){
    #cookie-banner.cookie-banner-large{flex-direction:column;align-items:flex-start}
    #cookie-banner.cookie-banner-large .btn{width:100%}
    #cookie-banner.cookie-banner-small{right:.5rem;left:.5rem;padding:0 .5rem}
    #cookie-banner .btn{font-size:.8rem;padding:.4rem .65rem}
    #cookie-banner .label{font-size:.9rem}
  }
  
/* ───────────────── Cookie-preferences modal ───────────────── */
.cookie-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:10000; display:none; place-items:center;
}
.cookie-overlay.show{ display:grid !important; }

#cookie-modal{
  background:#1e1e1e; color:#eee; width:90%; max-width:420px;
  border-radius:12px; padding:1.25rem 1.5rem;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}

#cookie-modal h3{font-size:1.2rem;margin-bottom:.75rem}
#cookie-modal label{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.95rem}
#cookie-modal .btn-row{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}
#cookie-modal button{padding:.45rem .9rem;border-radius:6px;cursor:pointer;border:none}
#cookie-modal .save-btn{background:#007bff;color:#fff}
#cookie-modal .close-btn{background:#444;color:#ccc}
#cookie-modal button:hover{opacity:.85}
.hidden{display:none!important}

/* keep banner buttons inline no matter what global CSS does */
#cookie-banner .btn{ display:inline-block !important; margin:0 !important; }


/* ───────── Overlay & Modal ───────── */
.cookie-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.55);
  display:none;                  /* hidden by default */
  place-items:center;            /* CSS-grid ➜ centre children */
}
.cookie-overlay.show{ display:grid !important; }

.cookie-modal{
  background:#1e1e1e; color:#eee;
  width:90%; max-width:420px;
  border-radius:12px; padding:1.25rem 1.5rem;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}

.modal-close{
  position:absolute; top:.6rem; right:.6rem;
  background:none; border:none; color:#ccc; font-size:1.1rem; cursor:pointer;
}
.modal-close:hover{color:#fff}

.hidden{display:none!important}


/* ——— prettier modal ——— */
.cookie-modal{
  position:relative;                 /* ← add this */
  background:#1e1e1e;
  color:#eee;
  width:90%; max-width:480px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1.75rem 2rem;
  box-shadow:0 12px 32px rgba(0,0,0,.65);
}

/* title & labels */
.cookie-modal h3{
  margin-top:0;
  font-size:1.35rem;
  margin-bottom:1rem;
}

.cookie-modal label{
  display:flex; gap:.6rem; align-items:center;
  margin:.6rem 0; font-size:.95rem;
}

/* save button style bump */
#prefSaveBtn{
  margin-top:1rem;
  background:#007bff;
  color:#fff;
  border:none; border-radius:6px;
  padding:.5rem 1rem; cursor:pointer;
}
#prefSaveBtn:hover{opacity:.9}

/* close button always visible */
.modal-close{
  position:absolute; top:.65rem; right:.75rem;
  background:none; border:none;
  color:#bbb; font-size:1.25rem; cursor:pointer;
}
.modal-close:hover{color:#fff}