/* Cookie banner and settings panel. Same soft language as the rest of the site:
   Century Gothic, pill buttons, rounded cards, soft shadows. */

.sp-bar{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:300;
  max-width:520px; background:#0e2029; color:#c9dbe6;
  border-radius:18px; box-shadow:0 26px 60px -22px rgba(4,20,36,.7);
  padding:22px 24px; font-size:15.5px; line-height:1.6;
}
.sp-bar strong{color:#fff;}
.sp-bar a{color:#6fd3ad; text-decoration:underline;}

.sp-actions{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;}
.sp-btn{
  font:inherit; font-size:14.5px; font-weight:700; border-radius:999px;
  padding:11px 18px; cursor:pointer; border:1.5px solid transparent; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s;
}
.sp-btn--solid{background:#004998; color:#fff;}
.sp-btn--solid:hover{background:#0a5cb8;}
.sp-btn--ghost{background:transparent; color:#d3e3ec; border-color:rgba(255,255,255,.3);}
.sp-btn--ghost:hover{border-color:#fff; color:#fff;}

.sp-box{
  position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center;
  background:rgba(6,20,32,.6); padding:20px;
}
.sp-card{
  background:#fff; color:#0e2029; border-radius:20px; max-width:540px; width:100%;
  padding:30px 30px 26px; position:relative; max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 70px -24px rgba(4,20,36,.5);
}
.sp-close{
  position:absolute; top:12px; right:16px; background:none; border:0; font-size:30px;
  line-height:1; cursor:pointer; color:#5b6c7b;
}
.sp-close:hover{color:#0e2029;}
.sp-card h2{font-size:26px; font-weight:400; color:#004998; margin:0 0 8px;}
.sp-lead{font-size:16px; color:#5b6c7b; line-height:1.6; margin:0 0 14px;}

.sp-opt{
  display:flex; align-items:flex-start; gap:14px; justify-content:space-between;
  padding:15px 0; border-top:1px solid #e0e8ee; font-size:16px; line-height:1.55;
}
.sp-opt span{color:#4a5c6b;}
.sp-opt b{color:#0e2029;}
.sp-opt input{width:21px; height:21px; flex:none; margin-top:2px; accent-color:#004998; cursor:pointer;}
.sp-opt--fixed input{cursor:not-allowed; opacity:.55;}

.sp-actions--box{margin-top:22px;}
.sp-actions--box .sp-btn--ghost{color:#4a5c6b; border-color:#d3dde4;}
.sp-actions--box .sp-btn--ghost:hover{border-color:#0e2029; color:#0e2029;}

@media (max-width:560px){
  .sp-bar{left:10px; right:10px; bottom:10px; max-width:none; padding:18px 18px 16px; font-size:15px;}
  .sp-actions .sp-btn{flex:1 1 auto;}
  .sp-card{padding:26px 20px 22px;}
  .sp-card h2{font-size:23px;}
}

/* Persistent way back into the settings once the bar is gone. Bottom left, so it
   never sits over a form field or the footer CTAs. Collapsed to a circle, widens
   to show its label on hover and keyboard focus. */
.sp-fab{
  position:fixed; left:16px; bottom:16px; z-index:290;
  height:46px; padding:0; width:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:#0e2029; color:#cfe2f2;
  display:inline-flex; align-items:center; gap:0; overflow:hidden; cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(4,20,36,.65); opacity:.82;
  transition:width .2s ease, gap .2s ease, padding .2s ease, opacity .16s, background .16s;
}
.sp-fab svg{width:22px; height:22px; flex:none; margin:0 11px;}
.sp-fab__label{
  font:inherit; font-size:14.5px; font-weight:700; white-space:nowrap;
  opacity:0; transition:opacity .16s; padding-right:0;
}
.sp-fab:hover,.sp-fab:focus-visible{
  width:158px; opacity:1; background:#14313f; color:#fff; outline:none;
}
.sp-fab:hover .sp-fab__label,.sp-fab:focus-visible .sp-fab__label{opacity:1; padding-right:16px;}
.sp-fab:focus-visible{box-shadow:0 0 0 3px rgba(111,211,173,.5);}

@media (max-width:560px){
  /* no hover on a phone, so keep it a plain circle and nudge it clear of the edge */
  .sp-fab{left:12px; bottom:12px; height:42px; width:42px;}
  .sp-fab svg{width:20px; height:20px; margin:0 10px;}
  .sp-fab:hover{width:42px;}
  .sp-fab:hover .sp-fab__label{opacity:0; padding-right:0;}
}
@media (prefers-reduced-motion: reduce){ .sp-fab{transition:none;} }