/* Provision Cookie Consent – Frontend Styles
   Design: clean enterprise B2B (dark navy + blue accent) matching ProvisionAI */

/* ── Reset scope ────────────────────────────────────────────────────────── */
#pcc-banner,
#pcc-modal,
#pcc-modal-overlay,
#pcc-reopen-btn,
.pcc-overlay {
    box-sizing: border-box;
    font-family: var(--pcc-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--pcc-font-size, 14px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#pcc-banner *,
#pcc-modal * {
    box-sizing: border-box;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Banner ─────────────────────────────────────────────────────────────── */
#pcc-banner {
    position: fixed;
    z-index: 999990;
    left: 0;
    right: 0;
    background: var(--pcc-banner-bg, #0a2540);
    color: var(--pcc-banner-text, #fff);
    padding: var(--pcc-banner-padding-v, 20px) var(--pcc-banner-padding-h, 24px);
    border: var(--pcc-banner-border, none);
    box-shadow: 0 -4px 24px rgba(0,0,0,.22);
    animation: pcc-slide-up .35s cubic-bezier(.22,1,.36,1) both;
}

#pcc-banner.pcc-pos-bottom { bottom: 0; border-radius: var(--pcc-radius, 12px) var(--pcc-radius, 12px) 0 0; }
#pcc-banner.pcc-pos-top    { top: 0;    border-radius: 0 0 var(--pcc-radius, 12px) var(--pcc-radius, 12px); animation-name: pcc-slide-down; }

#pcc-banner.pcc-pos-bottom-left,
#pcc-banner.pcc-pos-bottom-right {
    left: auto;
    right: auto;
    width: 420px;
    bottom: 24px;
    border-radius: var(--pcc-radius, 12px);
    animation-name: pcc-fade-up;
}

#pcc-banner.pcc-pos-bottom-left  { left:  24px; }
#pcc-banner.pcc-pos-bottom-right { right: 24px; }

@keyframes pcc-slide-up   { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pcc-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pcc-fade-up    { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pcc-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.pcc-banner-logo {
    height: var(--pcc-logo-height, 36px);
    width: auto;
    flex-shrink: 0;
}

.pcc-banner-text {
    flex: 1;
    min-width: 220px;
}

.pcc-banner-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pcc-banner-text, #fff);
}

.pcc-banner-desc {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255,255,255,.8);
    line-height: 1.55;
}

.pcc-dns-link {
    color: var(--pcc-primary, #3b7dea);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.pcc-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.pcc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: calc(var(--pcc-font-size, 14px) - 0.5px);
    font-weight: 600;
    border-radius: var(--pcc-btn-radius, 8px);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, opacity .18s;
    line-height: 1;
    font-family: var(--pcc-font, inherit);
}

.pcc-btn:focus-visible {
    outline: 3px solid var(--pcc-primary, #3b7dea);
    outline-offset: 2px;
}

.pcc-btn-primary {
    background: var(--pcc-primary, #3b7dea);
    color: var(--pcc-btn-text, #fff);
    border-color: var(--pcc-primary, #3b7dea);
}
.pcc-btn-primary:hover { opacity: .88; }

.pcc-btn-secondary {
    background: rgba(255,255,255,.12);
    color: var(--pcc-banner-text, #fff);
    border-color: rgba(255,255,255,.3);
}
.pcc-btn-secondary:hover { background: rgba(255,255,255,.2); }

.pcc-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,.75);
    border-color: transparent;
    text-decoration: underline;
    padding-left: 8px;
    padding-right: 8px;
}
.pcc-btn-ghost:hover { color: #fff; }

.pcc-btn-outline {
    background: transparent;
    color: var(--pcc-primary, #3b7dea);
    border-color: var(--pcc-primary, #3b7dea);
}
.pcc-btn-outline:hover { background: color-mix(in srgb, var(--pcc-primary, #3b7dea) 10%, transparent); }

/* ── Overlay ────────────────────────────────────────────────────────────── */
.pcc-overlay {
    position: fixed;
    inset: 0;
    z-index: 999991;
    background: color-mix(in srgb, var(--pcc-overlay-color, #0a2540) 55%, transparent);
    backdrop-filter: blur(3px);
    animation: pcc-fade-in .2s ease both;
}

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

/* ── Modal ──────────────────────────────────────────────────────────────── */
#pcc-modal {
    position: fixed;
    z-index: 999992;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--pcc-modal-bg, #fff);
    color: var(--pcc-modal-text, #1a1a2e);
    border: var(--pcc-modal-border, 1px solid #e2e8f0);
    border-radius: var(--pcc-radius, 12px);
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    animation: pcc-modal-in .25s cubic-bezier(.22,1,.36,1) both;
    overflow: hidden;
}

@keyframes pcc-modal-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Modal header */
.pcc-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e8edf3;
    flex-shrink: 0;
    background: #f7f9fc;
}

.pcc-modal-logo { height: 28px; width: auto; }

#pcc-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0a2540;
    flex: 1;
}

.pcc-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.pcc-modal-close:hover { color: #0a2540; background: #e8edf3; }

/* Modal body */
.pcc-modal-body {
    overflow-y: auto;
    padding: var(--pcc-modal-padding, 24px);
    flex: 1;
}

.pcc-modal-intro {
    margin: 0 0 20px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
}

/* Categories */
.pcc-category {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pcc-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
}

.pcc-category-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcc-category-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0a2540;
}

.pcc-category-count {
    font-size: 12px;
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 20px;
}

.pcc-always-on {
    font-size: 12px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Toggle in modal */
.pcc-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.pcc-toggle-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pcc-slider {
    display: block;
    width: 48px;
    height: 26px;
    background: #cbd5e1;
    border-radius: 26px;
    transition: background .2s;
    position: relative;
    flex-shrink: 0;
}

.pcc-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.pcc-toggle-wrap input:checked + .pcc-slider { background: var(--pcc-primary, #3b7dea); }
.pcc-toggle-wrap input:checked + .pcc-slider::before { transform: translateX(22px); }
.pcc-toggle-wrap input:focus-visible + .pcc-slider { outline: 3px solid var(--pcc-primary, #3b7dea); outline-offset: 2px; }

/* Category body */
.pcc-category-body {
    padding: 14px 18px;
}

.pcc-category-desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #475569;
}

/* Cookie detail table */
.pcc-cookie-details summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--pcc-primary, #3b7dea);
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
}

.pcc-cookie-details summary::-webkit-details-marker { display: none; }
.pcc-cookie-details summary::before { content: '▸ '; }
.pcc-cookie-details[open] summary::before { content: '▾ '; }

.pcc-cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12.5px;
}

.pcc-cookie-table th,
.pcc-cookie-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: top;
}

.pcc-cookie-table th {
    font-weight: 600;
    color: #374151;
    background: #f8fafc;
}

.pcc-cookie-table td code {
    font-size: 11.5px;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}

/* Modal footer */
.pcc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #e8edf3;
    background: #f7f9fc;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.pcc-ccpa-note {
    font-size: 12px;
    color: #64748b;
}

.pcc-ccpa-note a {
    color: var(--pcc-primary, #3b7dea);
}

.pcc-modal-footer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* In the modal the secondary button looks different (dark) */
#pcc-btn-reject-modal,
#pcc-btn-reject-modal.pcc-btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}
#pcc-btn-reject-modal:hover { background: #e2e8f0; }

/* ── Re-open button (floating badge) ───────────────────────────────────── */
#pcc-reopen-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999989;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pcc-banner-bg, #0a2540);
    color: var(--pcc-banner-text, #fff);
    border: 2px solid rgba(255,255,255,.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s;
    animation: pcc-fade-in .3s ease both;
}

#pcc-reopen-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .pcc-banner-inner { flex-direction: column; align-items: flex-start; }
    .pcc-banner-actions { width: 100%; justify-content: stretch; }
    .pcc-btn { flex: 1; text-align: center; }

    #pcc-banner.pcc-pos-bottom-left,
    #pcc-banner.pcc-pos-bottom-right {
        width: calc(100vw - 32px);
        left: 16px;
        right: 16px;
    }

    .pcc-modal-footer { flex-direction: column; }
    .pcc-modal-footer-actions { width: 100%; }
    .pcc-modal-footer-actions .pcc-btn { flex: 1; }
}