/* PulsrWeb Cookie Consent System (GDPR/CCPA Compliant) - Enhanced Design */
:root {
    --cc-bg: rgba(22, 22, 30, 0.95); /* Semi-transparent for glassmorphism */
    --cc-text: #e2e8f0;
    --cc-primary: #00d4ff;
    --cc-primary-hover: #00a3cc;
    --cc-secondary: rgba(255, 255, 255, 0.05); /* Softer secondary */
    --cc-secondary-hover: rgba(255, 255, 255, 0.1);
    --cc-border: rgba(255, 255, 255, 0.1);
    --cc-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --cc-font: 'Inter', system-ui, -apple-system, sans-serif;
    --cc-radius: 12px;
}

#pulsr-cookie-banner {
    position: fixed;
    bottom: 20px; /* Floating look on desktop */
    left: 20px;
    right: 20px;
    max-width: 1200px;
    margin: 0 auto; /* Center on large screens */
    background: var(--cc-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--cc-shadow);
    z-index: 999999; /* Increased to stay on top of everything */
    font-family: var(--cc-font);
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#pulsr-cookie-banner.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.cc-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cc-text {
    flex: 1 1 600px;
    color: var(--cc-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.cc-text h3 {
    margin: 0 0 0.5rem 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-text p {
    margin: 0;
}

.cc-text a {
    color: var(--cc-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    border-bottom: 1px dotted var(--cc-primary);
}

.cc-text a:hover {
    color: #fff;
    border-bottom-style: solid;
}

.cc-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.cc-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    white-space: nowrap;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px; /* Accessible touch target */
}

.cc-btn-accept {
    background: var(--cc-primary);
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.cc-btn-accept:hover {
    background: var(--cc-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 212, 255, 0.3);
}

.cc-btn-accept:active {
    transform: translateY(0);
}

.cc-btn-reject {
    background: var(--cc-secondary);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
}

.cc-btn-reject:hover {
    background: var(--cc-secondary-hover);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

/* RTL Support */
html[dir="rtl"] .cc-text {
    text-align: right;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #pulsr-cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 1.25rem;
        border-radius: 12px;
    }

    .cc-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .cc-text {
        flex: 1 1 auto;
        text-align: center;
    }

    .cc-text h3 {
        justify-content: center;
    }
    
    html[dir="rtl"] .cc-text {
        text-align: center;
    }

    .cc-actions {
        flex-direction: column-reverse; /* Put Accept on top usually better? Or below? Let's verify. Usually Accept is Primary, so on mobile often Bottom is easier to reach, OR top. Actually Reverse puts existing HTML order (Reject first, Accept second) -> Accept first visually (Top). HTML is Reject then Accept. Column reverse makes Accept (last child) go to TOP. So Accept will be first button. */
        width: 100%;
        gap: 0.75rem;
    }

    .cc-btn {
        width: 100%;
        padding: 0.85rem; /* Larger touch area */
    }
}

/* Ultra Small Screens */
@media (max-width: 400px) {
    #pulsr-cookie-banner {
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px 16px 0 0; /* Flush to bottom */
        border-bottom: none;
        border-left: none;
        border-right: none;
    }
}