/* =====================================================
   COMCMS LGPD — Frontend CSS v1.1
   ===================================================== */

#lgpd-banner-root *, #lgpd-settings-panel-root *, #lgpd-fab-root * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════
   FLOATING ACTION BUTTON — GoAdopt style
   ══════════════════════════════════════════════════ */
#lgpd-fab {
    position: fixed;
    z-index: 999990;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    outline: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    /* posição definida pelas classes abaixo — sem default aqui */
    bottom: auto; left: auto; right: auto; top: auto;
}
#lgpd-fab:hover { transform: scale(1.12); }
#lgpd-fab:active { transform: scale(.95); }

.lgpd-fab-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--lgpd-fab-color, #00DD80);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: background .3s, box-shadow .3s;
    position: relative; overflow: hidden;
}
.lgpd-fab-circle::before {
    content: '';
    position: absolute;
    top: -25%; left: -10%;
    width: 55%; height: 55%;
    background: rgba(255,255,255,.3);
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
}
#lgpd-fab:hover .lgpd-fab-circle { box-shadow: 0 6px 26px rgba(0,0,0,.3); }

.lgpd-fab-svg { width: 26px; height: 26px; flex-shrink: 0; position: relative; z-index: 1; }

/* Tamanhos */
#lgpd-fab.lgpd-fab--sm .lgpd-fab-circle { width: 36px; height: 36px; }
#lgpd-fab.lgpd-fab--sm .lgpd-fab-svg    { width: 20px; height: 20px; }
#lgpd-fab.lgpd-fab--lg .lgpd-fab-circle { width: 58px; height: 58px; }
#lgpd-fab.lgpd-fab--lg .lgpd-fab-svg    { width: 32px; height: 32px; }

/* Posicionamento FAB */
#lgpd-fab.lgpd-fab--bottom-left  { bottom: 20px !important; left:  20px !important; right: auto !important; top: auto !important; }
#lgpd-fab.lgpd-fab--bottom-right { bottom: 20px !important; right: 20px !important; left:  auto !important; top: auto !important; }
#lgpd-fab.lgpd-fab--top-left     { top: 20px !important; left:  20px !important; right: auto !important; bottom: auto !important; }
#lgpd-fab.lgpd-fab--top-right    { top: 20px !important; right: 20px !important; left:  auto !important; bottom: auto !important; }

/* ══════════════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════════════ */
#lgpd-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999991;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
    backdrop-filter: blur(2px);
}
#lgpd-overlay.lgpd-visible { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════════════════
   BANNER COMPACTO
   ══════════════════════════════════════════════════ */
#lgpd-banner {
    position: fixed;
    z-index: 999998;
    background: var(--lgpd-bg, #fff);
    color: var(--lgpd-text, #34464C);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    opacity: 0; pointer-events: none;
    transition: opacity .35s, transform .35s cubic-bezier(.4,0,.2,1);
    max-width: 316px;
    width: calc(100vw - 32px);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.07);
}
#lgpd-banner.lgpd-show { opacity: 1; pointer-events: all; }

/* Posições banner */
#lgpd-banner.lgpd-pos--bottom-left  { bottom: 80px; left: 16px; right: auto; transform: translateY(14px); }
#lgpd-banner.lgpd-pos--bottom-right { bottom: 80px; right: 16px; left: auto; transform: translateY(14px); }
#lgpd-banner.lgpd-pos--top-left     { top: 80px; left: 16px; right: auto; transform: translateY(-14px); }
#lgpd-banner.lgpd-pos--top-right    { top: 80px; right: 16px; left: auto; transform: translateY(-14px); }
#lgpd-banner.lgpd-pos--bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%) translateY(14px); right: auto; }
#lgpd-banner.lgpd-pos--top-center   { top: 20px; left: 50%; transform: translateX(-50%) translateY(-14px); right: auto; }
#lgpd-banner.lgpd-pos--modal-center { top: 50%; left: 50%; transform: translate(-50%, -46%); max-width: 480px; }

#lgpd-banner.lgpd-show.lgpd-pos--bottom-left,
#lgpd-banner.lgpd-show.lgpd-pos--bottom-right { transform: translateY(0); }
#lgpd-banner.lgpd-show.lgpd-pos--top-left,
#lgpd-banner.lgpd-show.lgpd-pos--top-right    { transform: translateY(0); }
#lgpd-banner.lgpd-show.lgpd-pos--bottom-center { transform: translateX(-50%) translateY(0); }
#lgpd-banner.lgpd-show.lgpd-pos--top-center    { transform: translateX(-50%) translateY(0); }
#lgpd-banner.lgpd-show.lgpd-pos--modal-center  { transform: translate(-50%, -50%); }

/* Barras */
#lgpd-banner.lgpd-pos--bar-bottom {
    bottom: 0; left: 0; right: 0; max-width: 100%; width: 100%;
    border-radius: 0; border-top: 3px solid var(--lgpd-fab-color, #00DD80);
    transform: translateY(100%);
}
#lgpd-banner.lgpd-pos--bar-top {
    top: 0; left: 0; right: 0; max-width: 100%; width: 100%;
    border-radius: 0; border-bottom: 3px solid var(--lgpd-fab-color, #00DD80);
    transform: translateY(-100%);
}
#lgpd-banner.lgpd-show.lgpd-pos--bar-bottom,
#lgpd-banner.lgpd-show.lgpd-pos--bar-top { transform: none; }

/* Faixa colorida topo */
.lgpd-banner-stripe {
    height: 4px;
    background: var(--lgpd-fab-color, #00DD80);
}
.lgpd-pos--bar-bottom .lgpd-banner-stripe,
.lgpd-pos--bar-top    .lgpd-banner-stripe { display: none; }

/* Cabeçalho do banner */
.lgpd-banner-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 13px 0;
}
.lgpd-banner-brand { display: flex; align-items: center; gap: 6px; }
.lgpd-banner-brand-dot {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--lgpd-fab-color, #00DD80);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lgpd-banner-brand-dot svg { width: 11px; height: 11px; }
.lgpd-banner-brand-name {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--lgpd-fab-color, #00DD80);
}
.lgpd-banner-x {
    background: none; border: none; cursor: pointer;
    color: #bbb; font-size: 15px; line-height: 1;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .2s, color .2s;
}
.lgpd-banner-x:hover { background: #f0f0f0; color: #555; }

/* Corpo */
.lgpd-banner-body { padding: 7px 13px 13px; }
.lgpd-banner-title { font-size: 13px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; }
.lgpd-banner-msg {
    font-size: 11.5px; opacity: .75; margin: 0 0 9px; line-height: 1.5;
}
.lgpd-banner-links {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    margin: 8px 0 4px; padding-top: 7px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.lgpd-banner-links a {
    color: var(--lgpd-fab-color, #0073aa); text-decoration: none;
    font-size: 10.5px; font-weight: 600; opacity: .85; transition: opacity .15s;
}
.lgpd-banner-links a:hover { opacity: 1; text-decoration: underline; }
.lgpd-lsep { color: #ccc; font-size: 9px; padding: 0 1px; }

/* Links no painel de preferências */
.lgpd-panel-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    padding: 10px 16px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fafafa;
}
.lgpd-panel-links a {
    color: var(--lgpd-fab-color, #0073aa);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s;
}
.lgpd-panel-links a:hover { opacity: 1; text-decoration: underline; }

/* Ações */
/* ── Ações do banner ── */
.lgpd-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* Linha 1: Rejeitar + Personalizar (pequenos, lado a lado) */
.lgpd-banner-actions-row1 {
    display: flex;
    gap: 6px;
}

/* Linha 2: Aceitar todos (largo, ocupa tudo) */
.lgpd-banner-actions-row2 {
    display: flex;
}

/* Botão ACEITAR — largo, destaque total */
.lgpd-btn-accept {
    flex: 1;
    width: 100%;
    background: var(--lgpd-accept-color, #00DD80);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    letter-spacing: .3px;
    transition: filter .2s, transform .15s;
    white-space: nowrap;
}
.lgpd-btn-accept:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

/* Botão REJEITAR — menor, outline */
.lgpd-btn-reject {
    flex: 1;
    background: transparent;
    color: var(--lgpd-text, #34464C);
    border: 1.5px solid rgba(0,0,0,.18);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}
.lgpd-btn-reject:hover {
    background: rgba(0,0,0,.07);
    color: var(--lgpd-text, #34464C);
    border-color: rgba(0,0,0,.25);
}

/* Botão PERSONALIZAR — menor, ghost */
.lgpd-btn-settings {
    flex: 1;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,.13);
    color: var(--lgpd-text, #34464C);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.lgpd-btn-settings:hover {
    background: rgba(0,0,0,.07);
    color: var(--lgpd-text, #34464C);
    border-color: rgba(0,0,0,.22);
}

/* Barra horizontal */
.lgpd-pos--bar-bottom .lgpd-banner-head,
.lgpd-pos--bar-top    .lgpd-banner-head { display: none; }
.lgpd-pos--bar-bottom .lgpd-banner-body,
.lgpd-pos--bar-top    .lgpd-banner-body {
    display: flex; align-items: center; gap: 20px;
    padding: 13px 24px; flex-wrap: wrap;
}
.lgpd-pos--bar-bottom .lgpd-banner-content,
.lgpd-pos--bar-top    .lgpd-banner-content { flex: 1; }
.lgpd-pos--bar-bottom .lgpd-banner-msg,
.lgpd-pos--bar-top    .lgpd-banner-msg { margin: 0; }
.lgpd-pos--bar-bottom .lgpd-banner-links,
.lgpd-pos--bar-top    .lgpd-banner-links { margin: 0; }
/* Barra: botões ficam em linha */
.lgpd-pos--bar-bottom .lgpd-banner-actions,
.lgpd-pos--bar-top    .lgpd-banner-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.lgpd-pos--bar-bottom .lgpd-banner-actions-row1,
.lgpd-pos--bar-top    .lgpd-banner-actions-row1,
.lgpd-pos--bar-bottom .lgpd-banner-actions-row2,
.lgpd-pos--bar-top    .lgpd-banner-actions-row2 {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   PAINEL DE PREFERÊNCIAS
   ══════════════════════════════════════════════════ */
#lgpd-settings-panel {
    position: fixed; z-index: 999999;
    top: 50%; left: 50%; transform: translate(-50%, -46%);
    background: var(--lgpd-bg, #fff); border-radius: 16px;
    width: 100%; max-width: 480px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    border: 1px solid rgba(0,0,0,.07);
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}
#lgpd-settings-panel.lgpd-panel-open {
    opacity: 1; pointer-events: all;
    transform: translate(-50%, -50%);
}

.lgpd-panel-header {
    padding: 16px 18px 13px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: space-between;
}
.lgpd-panel-brand { display: flex; align-items: center; gap: 8px; }
.lgpd-panel-brand-icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--lgpd-fab-color, #00DD80);
    display: flex; align-items: center; justify-content: center;
}
.lgpd-panel-brand-icon svg { width: 14px; height: 14px; }
.lgpd-panel-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.lgpd-panel-close {
    background: none; border: none; cursor: pointer; color: #bbb;
    font-size: 18px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s; flex-shrink: 0;
}
.lgpd-panel-close:hover { background: #f0f0f0; color: #333; }

.lgpd-panel-body { padding: 13px 18px; overflow-y: auto; flex: 1; }
.lgpd-panel-intro { font-size: 12px; color: #888; margin: 0 0 13px; line-height: 1.5; }

/* Categorias */
.lgpd-cat-item {
    border: 1.5px solid rgba(0,0,0,.08); border-radius: 10px;
    margin-bottom: 7px; overflow: hidden; transition: border-color .2s;
}
.lgpd-cat-item:hover { border-color: rgba(0,0,0,.15); }
.lgpd-cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 13px; cursor: pointer; user-select: none; gap: 8px;
}
.lgpd-cat-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lgpd-cat-name { font-size: 12.5px; font-weight: 600; }
.lgpd-cat-req {
    font-size: 10px; background: #f2f2f2; color: #999;
    padding: 1px 6px; border-radius: 20px; font-weight: 600; flex-shrink: 0;
}
.lgpd-cat-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lgpd-cat-arr { font-size: 9px; color: #ccc; transition: transform .25s; }
.lgpd-cat-item.open .lgpd-cat-arr { transform: rotate(180deg); }

.lgpd-cat-body { display: none; padding: 0 13px 11px; border-top: 1px solid rgba(0,0,0,.05); }
.lgpd-cat-item.open .lgpd-cat-body { display: block; }
.lgpd-cat-desc { font-size: 11.5px; color: #999; margin: 9px 0 7px; line-height: 1.5; }

.lgpd-ck-list { list-style: none; margin: 0; padding: 0; }
.lgpd-ck-list li { display: flex; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.04); font-size: 11px; }
.lgpd-ck-list li:last-child { border: none; }
.lgpd-ck-nm { font-weight: 700; color: #444; min-width: 80px; flex-shrink: 0; }
.lgpd-ck-inf { color: #999; line-height: 1.4; }

/* Switch */
.lgpd-sw { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.lgpd-sw input { opacity: 0; width: 0; height: 0; }
.lgpd-sw-t {
    position: absolute; inset: 0;
    background: #ddd; border-radius: 20px;
    cursor: pointer; transition: background .25s;
}
.lgpd-sw-t::after {
    content: ''; position: absolute;
    width: 14px; height: 14px; top: 3px; left: 3px;
    background: #fff; border-radius: 50%;
    transition: transform .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.lgpd-sw input:checked + .lgpd-sw-t { background: var(--lgpd-fab-color, #00DD80); }
.lgpd-sw input:checked + .lgpd-sw-t::after { transform: translateX(16px); }
.lgpd-sw input:disabled + .lgpd-sw-t { opacity: .5; cursor: not-allowed; }

.lgpd-panel-footer {
    padding: 10px 16px 12px; border-top: 1px solid rgba(0,0,0,.08);
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.lgpd-credit-badge {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; margin-right: auto; flex-shrink: 0;
}
.lgpd-credit-badge img { display: block; max-width: 120px; }
.lgpd-credit-text {
    font-size: 9px; color: rgba(0,0,0,.35); line-height: 1.2;
    max-width: 120px; display: block;
}
.lgpd-pf-btns { display: flex; gap: 7px; }
.lgpd-pf-reject {
    background: transparent; border: 1.5px solid rgba(0,0,0,.12);
    color: var(--lgpd-text, #34464C); border-radius: 7px;
    padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .2s;
}
.lgpd-pf-reject:hover { background: #f5f5f5; }
.lgpd-pf-save {
    background: var(--lgpd-accept-color, #00DD80); color: #fff; border: none;
    border-radius: 7px; padding: 8px 18px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: filter .2s, transform .15s;
}
.lgpd-pf-save:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   FORMULÁRIO OPT-OUT
   ══════════════════════════════════════════════════ */
.lgpd-optout-wrapper { max-width: 560px; }
.lgpd-optout-intro {
    background: linear-gradient(135deg,#f0fdf8,#e8f5ff);
    border-left: 4px solid var(--lgpd-fab-color, #00DD80);
    padding: 14px 18px; margin-bottom: 24px; border-radius: 0 8px 8px 0; font-size: 14px;
}
.lgpd-optout-form .lgpd-field-group { margin-bottom: 16px; }
.lgpd-optout-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.lgpd-optout-form input,
.lgpd-optout-form select,
.lgpd-optout-form textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #e0e0e0; border-radius: 8px;
    font-size: 14px; transition: border-color .2s, box-shadow .2s; background: #fff;
}
.lgpd-optout-form input:focus,
.lgpd-optout-form select:focus,
.lgpd-optout-form textarea:focus {
    border-color: var(--lgpd-fab-color, #00DD80); outline: none;
    box-shadow: 0 0 0 3px rgba(0,221,128,.15);
}
.lgpd-btn-submit {
    background: var(--lgpd-accept-color, #00DD80); color: #fff; border: none;
    padding: 12px 28px; border-radius: 8px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: filter .2s, transform .15s;
}
.lgpd-btn-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lgpd-form-message { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.lgpd-form-message.success { background: #d4f5e5; color: #0a5c38; border: 1px solid #a3e6c7; }
.lgpd-form-message.error   { background: #fde8e8; color: #8b1a1a; border: 1px solid #f5b8b8; }

/* ══════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════ */
@media (max-width: 500px) {
    #lgpd-banner { max-width: calc(100vw - 24px); }
    #lgpd-banner.lgpd-pos--bottom-left  { left: 12px; }
    #lgpd-banner.lgpd-pos--bottom-right { right: 12px; }
    #lgpd-settings-panel { max-width: 96vw; }
    .lgpd-pos--bar-bottom .lgpd-banner-body,
    .lgpd-pos--bar-top    .lgpd-banner-body { flex-direction: column; padding: 12px 16px; }
}