/**

 * UNEVELLO - Cookie Banner CSS

 * 

 * DESKTOP: Banner vpravo dole

 * MOBIL: Plná šířka

 * 

 * OPRAVENO: Přepínače v nastavení FUNGUJÍ

 */



/* ========================================== */

/* COOKIE BANNER - DESKTOP (vpravo dole)      */

/* ========================================== */



.cookie-banner {

    position: fixed;

    bottom: var(--spacing-lg);

    right: var(--spacing-lg);

    z-index: 9999;

    max-width: 420px;

    background: rgba(10, 10, 10, 0.98);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: var(--spacing-lg);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);

    animation: slideInRight 0.4s ease-out;

}



@keyframes slideInRight {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}



.cookie-banner-content {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

}



/* Icon */

.cookie-banner-icon {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--spacing-xs);

}



.cookie-banner-icon svg {

    width: 20px;

    height: 20px;

    color: #000;

}



/* Text */

.cookie-banner-text h3 {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: var(--spacing-xs);

}



.cookie-banner-text p {

    font-size: 0.8125rem;

    color: var(--text-secondary);

    line-height: 1.5;

    margin: 0;

}



/* Buttons */

.cookie-banner-buttons {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.cookie-btn {

    padding: var(--spacing-sm) var(--spacing-md);

    font-family: 'Montserrat', sans-serif;

    font-size: 0.875rem;

    font-weight: 600;

    border-radius: var(--radius-sm);

    border: none;

    cursor: pointer;

    transition: all var(--transition-fast);

    text-align: center;

    width: 100%;

}



.cookie-btn-primary {

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    color: #000;

    box-shadow: 0 2px 8px rgba(253, 160, 133, 0.3);

}



.cookie-btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(253, 160, 133, 0.5);

}



.cookie-btn-secondary {

    background: var(--bg-secondary);

    color: var(--text-primary);

    border: 1px solid var(--border);

}



.cookie-btn-secondary:hover {

    border-color: var(--gold-end);

    background: rgba(253, 160, 133, 0.1);

}



.cookie-btn-text {

    background: transparent;

    color: var(--text-secondary);

    padding: var(--spacing-xs);

}



.cookie-btn-text:hover {

    color: var(--gold-end);

}



.cookie-btn-large {

    padding: var(--spacing-md) var(--spacing-lg);

    font-size: 1rem;

}



/* ========================================== */

/* SETTINGS MODAL                             */

/* ========================================== */



.cookie-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--spacing-lg);

    animation: fadeIn 0.3s ease-out;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



.cookie-modal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



.cookie-modal-content {

    position: relative;

    width: 100%;

    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: var(--spacing-2xl);

    animation: slideDown 0.3s ease-out;

}



@keyframes slideDown {

    from {

        transform: translateY(-20px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



/* Header */

.cookie-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: var(--spacing-lg);

}



.cookie-modal-header h2 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0;

}



.cookie-modal-close {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all var(--transition-fast);

    border-radius: var(--radius-sm);

}



.cookie-modal-close:hover {

    background: var(--bg-secondary);

    color: var(--text-primary);

}



.cookie-modal-close svg {

    width: 20px;

    height: 20px;

}



/* Description */

.cookie-modal-description {

    font-size: 0.9375rem;

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: var(--spacing-xl);

}



/* Categories */

.cookie-categories {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

}



.cookie-category {

    padding: var(--spacing-lg);

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

}



.cookie-category-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--spacing-lg);

}



.cookie-category-info {

    flex: 1;

}



.cookie-category-info h4 {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: var(--spacing-xs);

}



.cookie-category-info p {

    font-size: 0.875rem;

    color: var(--text-secondary);

    line-height: 1.6;

    margin: 0;

}



/* Toggle - OPRAVENO! */

.cookie-toggle-wrapper {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

}



.cookie-always-on {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-tertiary);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.cookie-toggle {

    position: relative;

    width: 48px;

    height: 24px;

    flex-shrink: 0;

    cursor: pointer; /* ⚠️ OPRAVENO: cursor na celém toggle */

}



.cookie-toggle input {

    position: absolute;

    opacity: 0;

    width: 100%;

    height: 100%;

    cursor: pointer; /* ⚠️ OPRAVENO: cursor i na inputu */

    z-index: 2;

}



.cookie-toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 12px;

    transition: all var(--transition-fast);

    pointer-events: none; /* ⚠️ OPRAVENO: slider nebere kliky, jen input */

}



.cookie-toggle-slider:before {

    position: absolute;

    content: "";

    height: 16px;

    width: 16px;

    left: 3px;

    bottom: 3px;

    background: var(--text-tertiary);

    border-radius: 50%;

    transition: all var(--transition-fast);

}



.cookie-toggle input:checked + .cookie-toggle-slider {

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    border-color: transparent;

}



.cookie-toggle input:checked + .cookie-toggle-slider:before {

    transform: translateX(24px);

    background: #000;

}



/* Disabled toggle */

.cookie-toggle-disabled {

    opacity: 0.5;

    cursor: not-allowed !important;

}



.cookie-toggle-disabled input {

    cursor: not-allowed !important;

}



.cookie-toggle-disabled .cookie-toggle-slider {

    cursor: not-allowed;

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    border-color: transparent;

}



.cookie-toggle-disabled .cookie-toggle-slider:before {

    transform: translateX(24px);

    background: #000;

}



/* Footer */

.cookie-modal-footer {

    display: flex;

    gap: var(--spacing-sm);

}



/* ========================================== */

/* RESPONSIVE - MOBIL (full width)            */

/* ========================================== */



@media (max-width: 768px) {

    .cookie-banner {

        bottom: 0;

        left: 0;

        right: 0;

        max-width: none;

        border-radius: 0;

        border-left: none;

        border-right: none;

        border-bottom: none;

        padding: var(--spacing-sm);

        animation: slideUp 0.4s ease-out;

    }

    

    @keyframes slideUp {

        from {

            transform: translateY(100%);

        }

        to {

            transform: translateY(0);

        }

    }

    

    .cookie-banner-content {

        gap: var(--spacing-sm);

    }

    

    .cookie-banner-icon {

        width: 32px;

        height: 32px;

        margin-bottom: 0;

    }

    

    .cookie-banner-icon svg {

        width: 16px;

        height: 16px;

    }

    

    .cookie-banner-text h3 {

        font-size: 0.875rem;

        margin-bottom: 4px;

    }

    

    .cookie-banner-text p {

        font-size: 0.75rem;

        line-height: 1.4;

    }

    

    .cookie-banner-buttons {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 6px;

    }

    

    .cookie-btn {

        font-size: 0.75rem;

        padding: 8px 12px;

        flex: 1;

        min-width: 100px;

    }

    

    .cookie-btn-text {

        flex: 0 0 100%;

        order: 3;

    }

    

    .cookie-modal {

        padding: var(--spacing-sm);

    }

    

    .cookie-modal-content {

        padding: var(--spacing-lg);

        max-height: 85vh;

    }

    

    .cookie-category-header {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

    

    .cookie-toggle-wrapper {

        justify-content: flex-start;

    }

}



@media (max-width: 480px) {

    .cookie-banner {

        padding: 8px;

    }

    

    .cookie-banner-text h3 {

        font-size: 0.8125rem;

    }

    

    .cookie-banner-text p {

        font-size: 0.6875rem;

    }

    

    .cookie-btn {

        font-size: 0.6875rem;

        padding: 6px 10px;

        min-width: 80px;

    }

}



/* ========================================== */

/* SCROLLBAR (pro modal)                      */

/* ========================================== */



.cookie-modal-content::-webkit-scrollbar {

    width: 8px;

}



.cookie-modal-content::-webkit-scrollbar-track {

    background: var(--bg-secondary);

    border-radius: 4px;

}



.cookie-modal-content::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 4px;

}



.cookie-modal-content::-webkit-scrollbar-thumb:hover {

    background: var(--text-tertiary);

}