/* ==========================================================================
   ShieldConsent — UI v2 (Sprint 2.2) — CLEAN
   - No Bootstrap dependency
   - Banner positions via .shieldconsent-banner--pos-*
   - Mobile: always full width bottom for usability
   - Modal: header + scrollable body + sticky footer actions
   ========================================================================== */

:root{
  --sc-radius-lg: 16px;
  --sc-radius-md: 12px;
  --sc-shadow: 0 10px 30px rgba(0,0,0,.18);
  --sc-border: rgba(0,0,0,.12);

  --sc-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Set inline from Banner.php; keep fallbacks */
  --sc-banner-bg: #111111;
  --sc-banner-fg: #ffffff;
  --sc-btn-bg: #ffffff;
  --sc-btn-fg: #111111;

  --sc-panel-bg: #ffffff;
  --sc-panel-fg: #0f172a;

  --sc-muted: rgba(15, 23, 42, .72);
  --sc-soft: rgba(15, 23, 42, .06);
}

/* -----------------------------
   Banner — base
------------------------------ */

.shieldconsent-banner{
  position: fixed;
  z-index: 99999;
  font-family: var(--sc-font);
  color: var(--sc-banner-fg);
  background: var(--sc-banner-bg);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow);
  border: 1px solid rgba(255,255,255,.10);

  padding: 14px;
  max-width: 560px;

  /* Ensure transforms only applied by position classes */
  transform: none;
}

.shieldconsent-banner-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.shieldconsent-banner-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .1px;
}

.shieldconsent-banner-links{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shieldconsent-link{
  color: var(--sc-banner-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
.shieldconsent-link:hover{ opacity: 1; }

/* Actions layout */
.shieldconsent-banner-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

/* -----------------------------
   Buttons (shared)
------------------------------ */

.shieldconsent-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .05s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
  font-family: var(--sc-font);
  white-space: nowrap;
}
.shieldconsent-btn:active{ transform: translateY(1px); }

.shieldconsent-btn--primary{
  background: var(--sc-btn-bg);
  color: var(--sc-btn-fg);
  border-color: rgba(255,255,255,.12);
}

.shieldconsent-btn--ghost{
  background: rgba(255,255,255,.10);
  color: var(--sc-banner-fg);
  border-color: rgba(255,255,255,.18);
}

.shieldconsent-btn--secondary{
  background: transparent;
  color: var(--sc-banner-fg);
  border-color: rgba(255,255,255,.28);
}

.shieldconsent-btn--link{
  background: transparent;
  border-color: transparent;
  color: var(--sc-panel-fg);
  opacity: .85;
  padding-left: 6px;
  padding-right: 6px;
}
.shieldconsent-btn--link:hover{ opacity: 1; }

.shieldconsent-btn:focus{ outline: none; }
.shieldconsent-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* When buttons are used on light backgrounds (modal footer), improve focus ring */
.shieldconsent-modal .shieldconsent-btn:focus-visible{
  outline: 3px solid rgba(37, 99, 235, .35);
}

/* -----------------------------
   Banner positions (desktop)
   Classes emitted by Banner.php:
   .shieldconsent-banner--pos-bottom_left|bottom_center|bottom_full|top_full
------------------------------ */

.shieldconsent-banner--pos-bottom_left{
  left: 18px;
  bottom: 18px;
}

.shieldconsent-banner--pos-bottom_center{
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

.shieldconsent-banner--pos-bottom_full{
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-width: none;
}

.shieldconsent-banner--pos-top_full{
  left: 18px;
  right: 18px;
  top: 18px;
  bottom: auto;
  max-width: none;
}

/* -----------------------------
   Mobile banner behavior
   Always full width bottom, and ALWAYS neutralize transforms
------------------------------ */

@media (max-width: 768px){
  .shieldconsent-banner{
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    max-width: none !important;
    border-radius: 14px;
    padding: 12px;
    transform: none !important;
  }

  .shieldconsent-banner-actions{
    gap: 8px;
  }

  .shieldconsent-btn{
    padding: 11px 12px;
    font-size: 13px;
  }
}

/* -----------------------------
   Floating button (FAB)
------------------------------ */

.shieldconsent-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  z-index: 100000;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  transition: transform .12s ease, opacity .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
}

.shieldconsent-fab:hover{ transform: scale(1.05); }
.shieldconsent-fab:active{ transform: scale(1.01); }

.shieldconsent-fab::before{
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: url("dessert-sweet-cookie-bakery_1.svg") no-repeat center / contain;
  mask: url("dessert-sweet-cookie-bakery_1.svg") no-repeat center / contain;
}

@media (max-width: 768px){
  .shieldconsent-fab{ bottom: 86px; left: 12px; }
}

/* -----------------------------
   Modal overlay + panel
   Structure expected (from corrected Banner.php):
   .shieldconsent-modal
     .shieldconsent-modal-panel
       .shieldconsent-modal-header
       .shieldconsent-modal-intro
       form
         .shieldconsent-modal-body
         .shieldconsent-modal-actions
------------------------------ */

.shieldconsent-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100001;
  background: rgba(0,0,0,.55);
  padding: 22px;
}

.shieldconsent-modal-panel{
  position: relative;
  width: min(860px, 100%);
  max-height: 82vh;
  margin: 40px auto;
  background: var(--sc-panel-bg);
  color: var(--sc-panel-fg);
  border-radius: 22px;
  box-shadow: var(--sc-shadow);
  border: 1px solid var(--sc-border);
  font-family: var(--sc-font);

  /* IMPORTANT: make panel a flex column so body can scroll and footer sticks */
  display: flex;
  flex-direction: column;

  /* Prevent outer panel from scrolling (we scroll body only) */
  overflow: hidden;
}

@media (max-width: 768px){
  .shieldconsent-modal{ padding: 14px; }
  .shieldconsent-modal-panel{
    margin: 18px auto;
    max-height: 86vh;
    border-radius: 18px;
  }
}

/* Header row */
.shieldconsent-modal-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

@media (max-width: 768px){
  .shieldconsent-modal-header{ padding: 16px 14px 0; }
}

.shieldconsent-modal-close{
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(15,23,42,.03);
  cursor: pointer;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 28px;
  line-height: 1;
  color: rgba(15,23,42,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.shieldconsent-modal-close:hover{ color: rgba(15,23,42,.95); }

.shieldconsent-modal-title{
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: .2px;
}

.shieldconsent-modal-intro{
  margin: 10px 0 0 0;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sc-muted);
}

@media (max-width: 768px){
  .shieldconsent-modal-intro{ padding: 0 14px; }
}

/* Scrollable body */
.shieldconsent-modal-body{
  padding: 12px 18px 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

@media (max-width: 768px){
  .shieldconsent-modal-body{ padding: 10px 14px 10px; }
}

/* -----------------------------
   Categories (accordion rows)
------------------------------ */

.shieldconsent-cat{
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.96);
  margin: 10px 0;
}

.shieldconsent-cat-row{
  display: grid;
  grid-template-columns: 36px 1fr 44px;
  gap: 10px;
  align-items: center;
}

.shieldconsent-cat-toggle{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--sc-border);
  background: var(--sc-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.chevron-icon{
  width: 16px;
  height: 16px;
  display: none;
}

.category-arrow[aria-expanded="false"] .chevron-down{ display: block; }
.category-arrow[aria-expanded="true"]  .chevron-up{ display: block; }

.shieldconsent-cat-label{
  font-size: 14px;
  font-weight: 650;
}

.shieldconsent-cat-control{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.shieldconsent-cat-control input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

.shieldconsent-cat-details{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.shieldconsent-cat-desc{
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,.78);
}

/* -----------------------------
   Cookies table (responsive)
------------------------------ */

.shieldconsent-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
}

.shieldconsent-cookies-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 680px;
}

.shieldconsent-cookies-table th,
.shieldconsent-cookies-table td{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 10px;
  vertical-align: top;
}

.shieldconsent-cookies-table th{
  background: rgba(15,23,42,.04);
  font-weight: 700;
  text-align: left;
}

/* -----------------------------
   Modal actions (sticky footer)
------------------------------ */

.shieldconsent-modal-actions{
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.98);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;

  /* keep footer visible */
  flex: 0 0 auto;
}

@media (max-width: 768px){
  .shieldconsent-modal-actions{ padding: 12px 14px 14px; }
}

/* Buttons in modal: use dark text by default */
.shieldconsent-modal .shieldconsent-btn--secondary{
  color: var(--sc-panel-fg);
  border-color: rgba(15,23,42,.18);
}
.shieldconsent-modal .shieldconsent-btn--ghost{
  color: var(--sc-panel-fg);
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.12);
}
.shieldconsent-modal .shieldconsent-btn--primary{
  background: #2563eb;
  color: #fff;
  border-color: rgba(37,99,235,.35);
}
.shieldconsent-modal .shieldconsent-btn--link{
  color: var(--sc-panel-fg);
}

/* Mobile: stack buttons nicely */
@media (max-width: 560px){
  .shieldconsent-modal-actions .shieldconsent-btn{
    flex: 1 1 auto;
  }
  .shieldconsent-modal-actions .shieldconsent-btn--link{
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Boot visibility overrides (MUST win against inline / theme overrides)
   - Default: hide both until boot decides (prevents flash)
   - sc-show-banner: show banner only
   - sc-show-fab: show FAB only
   ========================================================================== */

/* Default neutral state: hide both until JS boot sets a class */
html:not(.sc-show-banner):not(.sc-show-fab) .shieldconsent-banner,
html:not(.sc-show-banner):not(.sc-show-fab) .shieldconsent-fab{
  display: none !important;
}

/* sc-show-banner => banner visible, FAB hidden */
html.sc-show-banner .shieldconsent-banner{
  display: block !important;
}
html.sc-show-banner .shieldconsent-fab{
  display: none !important;
}

/* sc-show-fab => FAB visible, banner hidden */
html.sc-show-fab .shieldconsent-fab{
  display: inline-flex !important;
}
html.sc-show-fab .shieldconsent-banner{
  display: none !important;
}
/* Extra-specific overrides (if IDs exist) */
html.sc-show-banner #shieldconsent-banner{ display: block !important; }
html.sc-show-banner #cbrgpd-floating-button{ display: none !important; }

html.sc-show-fab #shieldconsent-banner{ display: none !important; }
html.sc-show-fab #cbrgpd-floating-button{ display: flex !important; }