/**
 * LGPD Compliance — Banner & Preference Center Styles
 *
 * Modern, accessible design using CSS custom properties.
 * Zero external dependencies.
 *
 * @package LGPD_Compliance
 * @since   1.0.0
 */

/* ──────────────────────────────────────────────────────────────────────────
 * CSS Custom Properties (overridable per-site)
 * ──────────────────────────────────────────────────────────────────────── */
:root {
--lgpd-primary:         #0073aa;
--lgpd-primary-rgb:     0,115,170;
--lgpd-text:            #1e1e1e;
--lgpd-bg:              #ffffff;
--lgpd-border:          #dddddd;
--lgpd-muted:           #646970;
--lgpd-radius:          6px;
--lgpd-shadow:          0 4px 24px rgba(0,0,0,.14);
--lgpd-z-index:         999999;
--lgpd-transition:      .25s ease;
--lgpd-overlay-bg:      rgba(0,0,0,.55);
--lgpd-toggle-width:    48px;
--lgpd-toggle-height:   26px;
--lgpd-close-hover-bg:  rgba(0,0,0,.08);
}

/* ── 1. Banner Base ───────────────────────────────────────────────────── */
.lgpd-banner {
box-sizing: border-box;
position: fixed;
z-index: var(--lgpd-z-index);
background-color: var(--lgpd-bg);
color: var(--lgpd-text);
border-top: 3px solid var(--lgpd-primary);
box-shadow: var(--lgpd-shadow);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 14px;
line-height: 1.6;
opacity: 0;
transform: translateY(20px);
transition: opacity var(--lgpd-transition), transform var(--lgpd-transition);
pointer-events: none;
}
.lgpd-banner[hidden]          { display: none !important; }
.lgpd-banner--visible         { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lgpd-banner--hidden          { opacity: 0; transform: translateY(20px); }

/* ── 1a. Positions ────────────────────────────────────────────────────── */
.lgpd-banner--bottom-bar      { bottom:0; left:0; right:0; width:100%; }
.lgpd-banner--top-bar         { top:0; left:0; right:0; width:100%; border-top:none; border-bottom:3px solid var(--lgpd-primary); transform:translateY(-20px); }
.lgpd-banner--top-bar.lgpd-banner--visible { transform:translateY(0); }

.lgpd-banner--modal {
top:50%; left:50%;
transform: translate(-50%,-50%) scale(.96);
width: min(600px,95vw); max-height:90vh; overflow-y:auto;
border-top:none; border-radius:var(--lgpd-radius);
}
.lgpd-banner--modal::before {
content:''; position:fixed; inset:0;
background-color:var(--lgpd-overlay-bg); z-index:-1;
}
.lgpd-banner--modal.lgpd-banner--visible { transform:translate(-50%,-50%) scale(1); }

.lgpd-banner--corner {
bottom:24px; right:24px;
width:min(380px,calc(100vw - 48px));
border-radius:var(--lgpd-radius); border-top:none;
border-left:3px solid var(--lgpd-primary);
}

/* ── 1b. Banner Content ───────────────────────────────────────────────── */
.lgpd-banner__content {
max-width:1200px; margin:0 auto; padding:16px 24px;
display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.lgpd-banner--modal .lgpd-banner__content,
.lgpd-banner--corner .lgpd-banner__content { flex-direction:column; align-items:flex-start; }
.lgpd-banner__logo            { flex-shrink:0; }
.lgpd-banner__logo img        { max-height:40px; width:auto; display:block; }
.lgpd-banner__text            { flex:1; min-width:200px; }
.lgpd-banner__title           { margin:0 0 4px; font-size:15px; font-weight:600; }
.lgpd-banner__description     { margin:0; color:var(--lgpd-muted); font-size:13px; }
.lgpd-banner__legal           { width:100%; font-size:11px; color:var(--lgpd-muted); margin:4px 0 0; }
.lgpd-banner__legal a         { color:var(--lgpd-primary); }

/* ── 2. Buttons ───────────────────────────────────────────────────────── */
.lgpd-banner__actions {
display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap;
}

/* Scoped inside plugin containers to win over theme button resets (specificity 1,1,0). */
#lgpd-banner .lgpd-btn,
#lgpd-preference-center .lgpd-btn {
display:inline-flex; align-items:center; justify-content:center;
padding:9px 18px; border-radius:var(--lgpd-radius);
font-size:13px; font-weight:600; line-height:1.4;
cursor:pointer; border:2px solid transparent;
transition:background-color var(--lgpd-transition),color var(--lgpd-transition),
           border-color var(--lgpd-transition),box-shadow var(--lgpd-transition),
           opacity var(--lgpd-transition);
text-decoration:none; white-space:nowrap; box-sizing:border-box;
}
#lgpd-banner .lgpd-btn:focus-visible,
#lgpd-preference-center .lgpd-btn:focus-visible { outline:2px solid var(--lgpd-primary); outline-offset:2px; }

/* Primary: inset dark rgba overlay — darkens any configured color without grey cast */
#lgpd-banner .lgpd-btn--primary,
#lgpd-preference-center .lgpd-btn--primary             { background-color:var(--lgpd-primary); color:#fff; border-color:var(--lgpd-primary); }
#lgpd-banner .lgpd-btn--primary:hover,
#lgpd-preference-center .lgpd-btn--primary:hover       { box-shadow:inset 0 0 0 999px rgba(0,0,0,.15); }

/* Secondary: rgba tint of primary → on-brand fill with any configured color */
#lgpd-banner .lgpd-btn--secondary,
#lgpd-preference-center .lgpd-btn--secondary           { background-color:transparent; color:var(--lgpd-primary); border-color:var(--lgpd-primary); }
#lgpd-banner .lgpd-btn--secondary:hover,
#lgpd-preference-center .lgpd-btn--secondary:hover     { background-color:rgba(var(--lgpd-primary-rgb),.12); color:var(--lgpd-primary); }

/* Text link: subtle color shift on hover */
#lgpd-banner .lgpd-btn--text,
#lgpd-preference-center .lgpd-btn--text                { background-color:transparent; color:var(--lgpd-muted); border-color:transparent; padding:9px 8px; text-decoration:underline; font-weight:400; }
#lgpd-banner .lgpd-btn--text:hover,
#lgpd-preference-center .lgpd-btn--text:hover          { color:var(--lgpd-primary); background-color:rgba(var(--lgpd-primary-rgb),.07); }

/* ── 3. Preference Center Modal ───────────────────────────────────────── */
.lgpd-preference-center {
position:fixed; inset:0; z-index:calc(var(--lgpd-z-index) + 10);
display:flex; align-items:center; justify-content:center; padding:16px;
box-sizing:border-box; opacity:0;
transition:opacity var(--lgpd-transition); pointer-events:none;
}
.lgpd-preference-center[hidden]       { display:none !important; }
.lgpd-preference-center--visible      { opacity:1; pointer-events:auto; }
.lgpd-preference-center__overlay      { position:fixed; inset:0; background-color:var(--lgpd-overlay-bg); z-index:-1; }
.lgpd-preference-center__modal {
position:relative; background-color:var(--lgpd-bg); color:var(--lgpd-text);
border-radius:calc(var(--lgpd-radius)*2); box-shadow:var(--lgpd-shadow);
width:min(640px,100%); max-height:90vh;
display:flex; flex-direction:column; overflow:hidden;
transform:scale(.95) translateY(10px); transition:transform var(--lgpd-transition);
}
.lgpd-preference-center--visible .lgpd-preference-center__modal { transform:scale(1) translateY(0); }
.lgpd-preference-center__header {
display:flex; align-items:center; justify-content:space-between;
padding:20px 24px 16px; border-bottom:1px solid var(--lgpd-border); flex-shrink:0;
}
.lgpd-preference-center__title        { margin:0; font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; }
.lgpd-preference-center__icon { flex-shrink:0; color:var(--lgpd-primary); }
.lgpd-preference-center__close {
background:transparent; border:none; cursor:pointer;
color:var(--lgpd-muted); font-size:24px; line-height:1;
padding:4px 8px; border-radius:var(--lgpd-radius);
transition:color var(--lgpd-transition),background-color var(--lgpd-transition);
}
/* rgba overlay — adapts to any bg color set by the user */
.lgpd-preference-center__close:hover  { color:var(--lgpd-text); background-color:var(--lgpd-close-hover-bg); }
.lgpd-preference-center__close:focus-visible { outline:2px solid var(--lgpd-primary); outline-offset:2px; }
.lgpd-preference-center__body         { overflow-y:auto; padding:20px 24px; flex:1; }
.lgpd-preference-center__intro        { margin:0 0 20px; color:var(--lgpd-muted); font-size:13px; }
.lgpd-preference-center__footer {
padding:16px 24px; border-top:1px solid var(--lgpd-border);
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; flex-shrink:0; background-color:var(--lgpd-bg);
}
.lgpd-preference-center__footer-links { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lgpd-preference-center__footer-links a {
color:var(--lgpd-primary); font-size:13px; text-decoration:underline;
}
.lgpd-preference-center__legal        { width:100%; font-size:11px; color:var(--lgpd-muted); margin:8px 0 0; }

/* ── 4. Category Cards ────────────────────────────────────────────────── */
.lgpd-category-card            { border:1px solid var(--lgpd-border); border-radius:var(--lgpd-radius); margin-bottom:12px; overflow:hidden; }
.lgpd-category-card:last-child { margin-bottom:0; }
.lgpd-category-card__header    { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background-color:var(--lgpd-bg); border-bottom:1px solid var(--lgpd-border); cursor:pointer; gap:12px; }
.lgpd-category-card__info      { flex:1; }
.lgpd-category-card__name      { font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.lgpd-category-card__count     { font-size:11px; color:var(--lgpd-muted); font-weight:400; }
.lgpd-category-card__description { font-size:12px; color:var(--lgpd-muted); margin:4px 0 0; line-height:1.5; }
.lgpd-category-card__body      { padding:0 16px; max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease; }
.lgpd-category-card--expanded .lgpd-category-card__body { max-height:500px; padding:12px 16px; }
.lgpd-category-card__chevron   { transition:transform .2s ease; color:var(--lgpd-muted); flex-shrink:0; }
.lgpd-category-card--expanded .lgpd-category-card__chevron { transform:rotate(180deg); }
.lgpd-cookie-list              { list-style:none; padding:0; margin:0; border-top:1px solid var(--lgpd-border); }
.lgpd-cookie-list__item        { padding:10px 0; border-bottom:1px solid var(--lgpd-border); font-size:12px; }
.lgpd-cookie-list__item:last-child { border-bottom:none; }
.lgpd-cookie-list__name        { font-weight:600; }
.lgpd-cookie-list__meta        { color:var(--lgpd-muted); margin-top:2px; }

/* ── 5. Toggle Switch ─────────────────────────────────────────────────── */
.lgpd-toggle                   { position:relative; display:inline-flex; flex-shrink:0; }
.lgpd-toggle__input            { opacity:0; width:0; height:0; position:absolute; }
.lgpd-toggle__slider {
display:block; width:var(--lgpd-toggle-width); height:var(--lgpd-toggle-height);
background-color:#c4c4c4; border-radius:999px;
transition:background-color var(--lgpd-transition); cursor:pointer; position:relative;
}
.lgpd-toggle__slider::after {
content:''; position:absolute; top:3px; left:3px;
width:calc(var(--lgpd-toggle-height) - 6px); height:calc(var(--lgpd-toggle-height) - 6px);
background-color:#fff; border-radius:50%;
transition:transform var(--lgpd-transition); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.lgpd-toggle__input:checked + .lgpd-toggle__slider                { background-color:var(--lgpd-primary); }
.lgpd-toggle__input:checked + .lgpd-toggle__slider::after         { transform:translateX(calc(var(--lgpd-toggle-width) - var(--lgpd-toggle-height))); }
.lgpd-toggle__input:focus-visible + .lgpd-toggle__slider          { outline:2px solid var(--lgpd-primary); outline-offset:2px; }
.lgpd-toggle__input:disabled + .lgpd-toggle__slider               { cursor:not-allowed; opacity:.7; }

/* ── 6. Floating Button ───────────────────────────────────────────────── */
.lgpd-floating-btn {
position:fixed; bottom:20px; right:20px; z-index:calc(var(--lgpd-z-index) - 1);
width:48px; height:48px; border-radius:50%;
background-color:var(--lgpd-primary); color:#fff; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 12px rgba(0,0,0,.25);
transition:filter var(--lgpd-transition),transform var(--lgpd-transition),box-shadow var(--lgpd-transition);
}
.lgpd-floating-btn:hover       { filter:brightness(.85); transform:scale(1.1); box-shadow:0 4px 16px rgba(0,0,0,.3); }
.lgpd-floating-btn:focus-visible { outline:2px solid var(--lgpd-primary); outline-offset:3px; }
.lgpd-floating-btn svg         { width:34px; height:34px; display:block; }

/* ── 6b. Footer Privacy Link ─────────────────────────────────────────── */
.lgpd-footer-link-bar {
background:var(--lgpd-footer-link-bg, #1b5f9d);
padding:6px 0;
}
.lgpd-footer-link-inner {
max-width:1220px; margin:0 auto; padding-left:12px; padding-right:32px;
text-align:right; box-sizing:border-box;
}
.lgpd-footer-link {
display:inline; font-size:11px; color:#fff; text-decoration:none; cursor:pointer;
background:none; border:none; padding:0; line-height:1.6;
transition:text-decoration var(--lgpd-transition);
}
.lgpd-footer-link:hover                { text-decoration:underline; color:#fff; }
.lgpd-footer-link:focus-visible        { outline:2px solid #fff; outline-offset:2px; border-radius:2px; color:#fff; }

/* ── 7. Screen Reader ─────────────────────────────────────────────────── */
.screen-reader-text {
border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
height:1px; margin:-1px; overflow:hidden; padding:0;
position:absolute; width:1px; word-wrap:normal !important;
}

/* ── 8. Responsive ────────────────────────────────────────────────────── */
@media (max-width:767px) {
.lgpd-banner__content  { flex-direction:column; align-items:stretch; padding:14px 16px; gap:12px; }
.lgpd-banner__actions  { flex-direction:column; width:100%; }
#lgpd-banner .lgpd-btn,
#lgpd-preference-center .lgpd-btn { width:100%; justify-content:center; }
.lgpd-banner--corner   { bottom:0; right:0; left:0; width:100%; border-radius:0; border-left:none; border-top:3px solid var(--lgpd-primary); }
.lgpd-banner--modal    { top:auto; left:0; right:0; bottom:0; transform:translateY(20px); width:100%; max-height:85vh; border-radius:12px 12px 0 0; }
.lgpd-banner--modal.lgpd-banner--visible { transform:translateY(0); }
.lgpd-preference-center__footer { flex-direction:column; align-items:stretch; }
.lgpd-preference-center__footer > .lgpd-btn { width:100%; }
}

/* ── 9. Dark Mode ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme:dark) {
:root {
--lgpd-bg:              #1e1e1e;
--lgpd-text:            #e8e8e8;
--lgpd-border:          #3a3a3a;
--lgpd-muted:           #9ba1a6;
--lgpd-overlay-bg:      rgba(0,0,0,.7);
--lgpd-close-hover-bg:  rgba(255,255,255,.10);
}
}

/* ── 10. High Contrast ────────────────────────────────────────────────── */
@media (prefers-contrast:high) {
.lgpd-banner                                                    { border-top-width:4px; }
#lgpd-banner .lgpd-btn--primary,
#lgpd-preference-center .lgpd-btn--primary                      { outline:2px solid #000; }
#lgpd-banner .lgpd-btn--secondary,
#lgpd-preference-center .lgpd-btn--secondary                    { border-width:3px; }
.lgpd-toggle__slider                                            { border:2px solid currentColor; }
}

/* ── 11. Reduced Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
.lgpd-banner,.lgpd-btn,.lgpd-toggle__slider,.lgpd-toggle__slider::after,
.lgpd-preference-center,.lgpd-preference-center__modal,
.lgpd-floating-btn,.lgpd-category-card__body,.lgpd-category-card__chevron {
transition:none !important;
}
}