/* ============================================================
   Cookie Banner — self-contained
   Todos os selectores usam IDs para máxima especificidade
   e não conflituam com Materialize nem qualquer outro CSS.
   ============================================================ */

/* ── Banner ── */

#cb-banner {
    display:     none;        /* escondido por defeito — JS adiciona .show */
    position:    fixed;
    bottom:      0;
    left:        0;
    right:       0;
    z-index:     2147483647;  /* máximo possível */
    background:  #ffffff;
    border-top:  3px solid #00838f;
    box-shadow:  0 -4px 24px rgba(0, 0, 0, .12);
    font-family: sans-serif;
    font-size:   14px;
    line-height: 1.5;
    color:       #1a2e35;
    box-sizing:  border-box;
}

/* Classe adicionada pelo JS para mostrar — nunca tocamos em style= */
#cb-banner.show {
    display: block;
    animation: cb-slide-up .3s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes cb-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes cb-slide-down {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

#cb-banner.hide {
    animation: cb-slide-down .25s ease forwards;
}

/* ── Inner layout ── */

#cb-banner-inner {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             16px;
    max-width:       1280px;
    margin:          0 auto;
    padding:         16px 24px;
    box-sizing:      border-box;
}

#cb-banner-text {
    flex:        1;
    min-width:   260px;
    display:     flex;
    flex-direction: column;
    gap:         4px;
}

#cb-banner-text strong {
    font-size:   1.2rem;
    font-weight: 600;
    color:       #1a2e2d;
}

#cb-banner-text span {
    font-size:   1.1rem;
    color:       #5a6e6d;
}

#cb-banner-text a {
    color:                  #00838f;
    text-decoration:        underline;
    text-underline-offset:  2px;
}

#cb-banner-actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* ── Buttons ── */

#cb-banner button,
#cb-modal-box button {
    /* reset completo — ignora Materialize e qualquer CSS global */
    all:          unset;
    display:      inline-block;
    cursor:       pointer;
    font-family:  sans-serif;
    font-size:    1.1rem;
    font-weight:  600;
    border-radius: 6px;
    padding:      9px 18px;
    white-space:  nowrap;
    box-sizing:   border-box;
    transition:   background .15s, box-shadow .15s;
}

#cb-accept {
    background:  #00838f;
    color:       #ffffff;
    box-shadow:  0 2px 8px rgba(0,131,143,.25);
}
#cb-accept:hover {
    background:  #006064;
    box-shadow:  0 4px 12px rgba(0,131,143,.35);
}

#cb-reject {
    background:  transparent;
    color:       #00838f;
    border:      1.5px solid #00838f;
}
#cb-reject:hover { background: rgba(0,131,143,.07); }

#cb-manage {
    background:  transparent;
    color:       #5a6e6d;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-left:  4px;
    padding-right: 4px;
}
#cb-manage:hover { color: #1a2e2d; }

/* ── Modal overlay ── */

#cb-modal {
    position:        fixed;
    inset:           0;
    z-index:         2147483647;
    background:      rgba(0, 0, 0, .5);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    box-sizing:      border-box;
    animation:       cb-fade-in .2s ease both;
}

#cb-modal.show {
    display: flex !important;
    animation: cb-slide-up .3s cubic-bezier(.22,.68,0,1.2) both;
}

#cb-modal.hide {
    display: none !important;
}

@keyframes cb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal box ── */

#cb-modal-box {
    background:    #ffffff;
    border-radius: 14px;
    box-shadow:    0 20px 60px rgba(0, 0, 0, .2);
    width:         100%;
    max-width:     520px;
    max-height:    90vh;
    overflow-y:    auto;
    font-family:   sans-serif;
    font-size:     14px;
    color:         #1a2e35;
    box-sizing:    border-box;
    animation:     cb-modal-in .3s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes cb-modal-in {
    from { transform: scale(.94) translateY(16px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

#cb-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         22px 24px 0;
}

#cb-modal-title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       #1a2e2d;
    margin:      0;
}

#cb-modal-close {
    all:           unset;
    cursor:        pointer;
    font-size:     1.1rem;
    color:         #5a6e6d;
    padding:       6px 10px;
    border-radius: 50%;
    transition:    background .15s;
}
#cb-modal-close:hover { background: #f1f5f6; }

#cb-modal-body {
    padding: 16px 24px;
}

#cb-modal-body > p {
    font-size:  .85rem;
    color:      #5a6e6d;
    margin:     0 0 16px;
    line-height: 1.6;
}

/* ── Cookie rows ── */

.cb-row {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             16px;
    padding:         14px 0;
    border-top:      1px solid #eef2f2;
}

.cb-row-info {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           1;
}

.cb-row-info strong {
    font-size:   .88rem;
    font-weight: 600;
    color:       #1a2e2d;
}

.cb-row-info span {
    font-size:   .78rem;
    color:       #5a6e6d;
    line-height: 1.5;
}

.cb-always-on {
    font-size:      .72rem;
    font-weight:    600;
    color:          #00838f;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space:    nowrap;
    padding-top:    2px;
    flex-shrink:    0;
}

/* ── Toggle switch ── */

.cb-toggle {
    position:  relative;
    display:   inline-block;
    width:     42px;
    height:    24px;
    cursor:    pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.cb-toggle input {
    opacity: 0;
    width:   0;
    height:  0;
    position: absolute;
}

.cb-toggle-slider {
    position:      absolute;
    inset:         0;
    background:    #cdd5d5;
    border-radius: 24px;
    transition:    background .2s;
}

.cb-toggle-slider::before {
    content:       '';
    position:      absolute;
    width:         18px;
    height:        18px;
    left:          3px;
    bottom:        3px;
    background:    #ffffff;
    border-radius: 50%;
    transition:    transform .2s;
    box-shadow:    0 1px 4px rgba(0,0,0,.18);
}

.cb-toggle input:checked + .cb-toggle-slider {
    background: #00838f;
}

.cb-toggle input:checked + .cb-toggle-slider::before {
    transform: translateX(18px);
}

/* ── Modal footer ── */

#cb-modal-footer {
    padding: 4px 24px 24px;
}

#cb-save {
    all:           unset;
    display:       block;
    width:         100%;
    text-align:    center;
    cursor:        pointer;
    font-family:   sans-serif;
    font-size:     .9rem;
    font-weight:   600;
    background:    #00838f;
    color:         #ffffff;
    border-radius: 8px;
    padding:       12px;
    box-sizing:    border-box;
    transition:    background .15s;
}
#cb-save:hover { background: #006064; }

/* ── Responsive ── */

@media (max-width: 600px) {
    #cb-banner-inner  { flex-direction: column; align-items: flex-start; }
    #cb-banner-actions { width: 100%; justify-content: flex-end; }
    #cb-manage { padding-left: 0; }
}