/* css/consent.css — the privacy card and "Privacy preferences" (S31 rebuild)
   One stylesheet in SignSoTech's own look (it used to be the old plum/gold card with a teal
   layer patched on top). Phone: a bottom sheet. Desktop: a card docked bottom-left with a light
   veil, so the page stays readable behind it. Accept and Reject are IDENTICAL in size and weight
   (equal prominence — Austin's decision). Text contrast ≥ 7:1 (AAA) on white. */

.sst-consent-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(6, 9, 15, .48); opacity: 0; pointer-events: none;
  transition: opacity .35s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sst-consent-overlay--visible { opacity: 1; pointer-events: auto; }

.sst-consent-card { --cc-ink: #0B1220; --cc-body: #2B3442; --cc-muted: #4B5565; --cc-line: #E3E8EF; --cc-soft: #F5F7FA; --cc-cyan: #0A6A93;
  position: fixed; z-index: 9999; left: 50%; bottom: 0; width: min(520px, 100vw); max-height: 92vh; overflow-y: auto;
  transform: translate(-50%, 110%); opacity: 0;
  background: #fff; color: var(--cc-ink); border: 1px solid var(--cc-line); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(6, 9, 15, .28); padding: 10px 20px 22px; font-family: Inter, system-ui, sans-serif;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; }
.sst-consent-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: inherit;
  background: linear-gradient(90deg, #ED2124 0 40%, #35C6F3 40% 75%, #060709 75%); }
.sst-consent-card:focus { outline: none; }
.sst-consent-card:focus-visible { box-shadow: 0 0 0 3px #35C6F3, 0 -20px 60px rgba(6, 9, 15, .28); }
.sst-consent-card--visible { transform: translate(-50%, 0); opacity: 1; }
.sst-consent-card--exit { transform: translate(-50%, 110%); opacity: 0; transition: transform .35s ease-in, opacity .25s ease; }

.sst-consent-drag-handle { width: 40px; height: 4px; margin: 8px auto 12px; border-radius: 2px; background: #CFD8E3; }

.sst-consent-header { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.sst-consent-mark { flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: conic-gradient(from 210deg, #ED2124 0 120deg, #35C6F3 120deg 240deg, #060709 240deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 7px, #000 7.5px); mask: radial-gradient(circle at 50% 50%, transparent 7px, #000 7.5px); }
.sst-consent-headline { flex: 1; margin: 0; font-family: Outfit, Inter, sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--cc-ink); }
.sst-consent-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--cc-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.sst-consent-close:hover { background: var(--cc-soft); color: var(--cc-ink); }

.sst-consent-body { margin: 0 0 14px; font-size: .93rem; line-height: 1.6; color: var(--cc-body); text-align: left; }
.sst-consent-body strong { color: var(--cc-ink); }

/* Accept and Reject: the same size, weight and style — equal prominence. */
.sst-consent-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sst-consent-accept, .sst-consent-decline, .sst-consent-save {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 18px; border-radius: 12px;
  border: 1.5px solid var(--cc-ink); background: #fff; color: var(--cc-ink);
  font: 700 .95rem/1.2 Outfit, Inter, sans-serif; letter-spacing: .01em; cursor: pointer; box-shadow: none; transform: none;
  transition: background .18s ease, color .18s ease; }
.sst-consent-accept:hover, .sst-consent-decline:hover, .sst-consent-save:hover { background: var(--cc-ink); color: #fff; }
.sst-consent-card :is(button, a, input):focus-visible { outline: 3px solid #35C6F3; outline-offset: 2px; }
.sst-consent-accept::before { content: none; }
.sst-consent-card button:disabled { opacity: .6; cursor: progress; }

.sst-consent-manage-toggle { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none;
  color: var(--cc-cyan); font: 700 .88rem Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sst-consent-manage-toggle:hover { color: #075577; }
.sst-consent-manage { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--cc-line); }
.sst-consent-manage[hidden] { display: none; }

.sst-consent-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 10px 12px;
  border-radius: 12px; background: var(--cc-soft); }
.sst-consent-toggle-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sst-consent-toggle-label { font-weight: 700; font-size: .92rem; color: var(--cc-ink); }
.sst-consent-toggle-sub { font-size: .8rem; line-height: 1.45; color: var(--cc-muted); }
.sst-consent-note { margin: 4px 2px 10px; }
.sst-consent-toggle-locked { flex: none; padding: 4px 10px; border-radius: 99px; background: #E7F7EF; color: #065F3F; font-size: .78rem; font-weight: 800; }

.sst-toggle { position: relative; flex: none; display: inline-block; width: 52px; height: 44px; cursor: pointer; }
.sst-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sst-toggle-track { position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; border-radius: 99px; background: #AEB9C6; transition: background .2s ease; }
.sst-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.sst-toggle input:checked + .sst-toggle-track { background: var(--cc-cyan); }
.sst-toggle input:checked + .sst-toggle-track::after { transform: translateX(24px); }
.sst-toggle input:focus-visible + .sst-toggle-track { outline: 3px solid #35C6F3; outline-offset: 3px; }
.sst-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sst-consent-footer { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--cc-muted); text-align: center; }
.sst-consent-policy-link { color: var(--cc-cyan); text-decoration: underline; text-underline-offset: 2px; }
.sst-consent-policy-link:hover { color: #075577; }
.sst-consent-status { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FEF0EE; color: #8A1C12; font-size: .85rem; line-height: 1.5; }
.sst-consent-status[hidden] { display: none; }
.sst-consent-confirmation { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #E7F7EF; color: #065F3F; font-size: .88rem; font-weight: 700; text-align: center; }
.sst-consent-confirmation[hidden] { display: none; }
.sst-consent-preferences .sst-consent-accept { margin-top: 12px; }

/* Footer "Privacy preferences" button (includes/footer.php) */
.sst-manage-privacy-footer { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
  .sst-consent-overlay { background: rgba(6, 9, 15, .22); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sst-consent-card { left: 24px; bottom: 24px; width: 440px; border-bottom: 1px solid var(--cc-line); border-radius: 20px; padding: 18px 22px 20px;
    transform: translateY(calc(100% + 40px)); box-shadow: 0 24px 70px rgba(6, 9, 15, .3); }
  .sst-consent-card--visible { transform: none; }
  .sst-consent-card--exit { transform: translateY(calc(100% + 40px)); }
  .sst-consent-drag-handle { display: none; }
  .sst-consent-actions { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sst-consent-card, .sst-consent-card--exit, .sst-consent-overlay { transition: opacity .2s ease; }
  .sst-toggle-track, .sst-toggle-track::after, .sst-consent-accept, .sst-consent-decline, .sst-consent-save { transition: none; }
}
@media (forced-colors: active) {
  .sst-consent-card { border: 2px solid CanvasText; }
  .sst-consent-accept, .sst-consent-decline, .sst-consent-save { border: 2px solid ButtonText; }
  .sst-toggle input:checked + .sst-toggle-track { background: Highlight; }
}