/* ----------------------------------------------------------------
   Cookie Consent Modal Styles
   ---------------------------------------------------------------- */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

   :root {
     --cc-bg:           #0f0f0f;
     --cc-surface:      #1a1a1a;
     --cc-surface2:     #242424;
     --cc-border:       #2e2e2e;
     --cc-text:         #e8e8e8;
     --cc-text-muted:   #888;
     --cc-accent:       #0080ff;
     --cc-accent-hover: #3399ff;
     --cc-green:        #4caf7d;
     --cc-radius:       14px;
     --cc-radius-sm:    8px;
     --cc-shadow:       0 32px 80px rgba(0,0,0,0.7);
     --cc-font:         'Poppins', sans-serif;
     --cc-font-display: 'Poppins', sans-serif;
     --cc-transition:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   #cc-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.75);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     z-index: 99999;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 16px;
     opacity: 0;
     transition: opacity var(--cc-transition);
     pointer-events: none;
   }
   #cc-overlay.cc-visible {
     opacity: 1;
     pointer-events: all;
   }
   
   #cc-modal {
     background: var(--cc-bg);
     border: 1px solid var(--cc-border);
     border-radius: var(--cc-radius);
     box-shadow: var(--cc-shadow);
     width: 100%;
     max-width: 580px;
     max-height: 90vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transform: translateY(20px) scale(0.97);
     transition: transform var(--cc-transition);
     font-family: var(--cc-font);
     color: var(--cc-text);
   }
   #cc-overlay.cc-visible #cc-modal {
     transform: translateY(0) scale(1);
   }
   
   /* Header */
   .cc-header {
     padding: 28px 28px 20px;
     border-bottom: 1px solid var(--cc-border);
     position: relative;
   }
   .cc-logo-line {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
   }
   .cc-icon {
     width: 36px;
     height: 36px;
     background: linear-gradient(135deg, var(--cc-accent), #0055cc);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex-shrink: 0;
   }
   .cc-header h2 {
     font-family: var(--cc-font-display);
     font-size: 22px;
     font-weight: 400;
     line-height: 1.2;
     margin: 0;
     color: var(--cc-text);
   }
   .cc-header p {
     font-size: 13.5px;
     line-height: 1.6;
     color: var(--cc-text-muted);
     margin: 0;
   }
   
   /* Tabs */
   .cc-tabs {
     display: flex;
     border-bottom: 1px solid var(--cc-border);
     background: var(--cc-surface);
   }
   .cc-tab {
     flex: 1;
     padding: 12px 16px;
     font-size: 13px;
     font-weight: 500;
     color: var(--cc-text-muted);
     background: none;
     border: none;
     cursor: pointer;
     transition: color var(--cc-transition), background var(--cc-transition);
     font-family: var(--cc-font);
     position: relative;
   }
   .cc-tab::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--cc-accent);
     transform: scaleX(0);
     transition: transform var(--cc-transition);
   }
   .cc-tab.active {
     color: var(--cc-accent);
   }
   .cc-tab.active::after {
     transform: scaleX(1);
   }
   .cc-tab:hover {
     color: var(--cc-text);
     background: var(--cc-surface2);
   }
   
   /* Body */
   .cc-body {
     overflow-y: auto;
     flex: 1;
     scrollbar-width: thin;
     scrollbar-color: var(--cc-border) transparent;
   }
   .cc-body::-webkit-scrollbar { width: 4px; }
   .cc-body::-webkit-scrollbar-track { background: transparent; }
   .cc-body::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 4px; }
   
   /* Tab panes */
   .cc-pane {
     display: none;
     padding: 20px 28px;
   }
   .cc-pane.active {
     display: block;
   }
   
   /* Category cards */
   .cc-category {
     background: var(--cc-surface);
     border: 1px solid var(--cc-border);
     border-radius: var(--cc-radius-sm);
     margin-bottom: 12px;
     overflow: hidden;
     transition: border-color var(--cc-transition);
   }
   .cc-category:hover {
     border-color: #3e3e3e;
   }
   .cc-category-header {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px 18px;
     cursor: pointer;
     user-select: none;
   }
   .cc-category-header:hover {
     background: var(--cc-surface2);
   }
   .cc-category-icon {
     font-size: 20px;
     width: 32px;
     text-align: center;
     flex-shrink: 0;
   }
   .cc-category-info {
     flex: 1;
   }
   .cc-category-info strong {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--cc-text);
     margin-bottom: 2px;
   }
   .cc-category-info span {
     font-size: 12px;
     color: var(--cc-text-muted);
   }
   .cc-category-body {
     padding: 0 18px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease, padding 0.3s ease;
   }
   .cc-category-body.open {
     max-height: 300px;
     padding: 0 18px 16px;
   }
   .cc-category-body p {
     font-size: 13px;
     color: var(--cc-text-muted);
     line-height: 1.6;
     margin: 0 0 12px;
   }
   .cc-cookie-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 12px;
   }
   .cc-cookie-table th {
     text-align: left;
     color: var(--cc-text-muted);
     font-weight: 500;
     padding: 4px 8px 8px 0;
     border-bottom: 1px solid var(--cc-border);
   }
   .cc-cookie-table td {
     padding: 6px 8px 6px 0;
     color: var(--cc-text-muted);
     border-bottom: 1px solid rgba(255,255,255,0.04);
     vertical-align: top;
   }
   .cc-cookie-table td:first-child {
     color: var(--cc-text);
     font-family: monospace;
     font-size: 11px;
   }
   .cc-chevron {
     font-size: 10px;
     color: var(--cc-text-muted);
     transition: transform var(--cc-transition);
     flex-shrink: 0;
   }
   .cc-category-header.open .cc-chevron {
     transform: rotate(180deg);
   }
   
   /* Toggle switch */
   .cc-toggle {
     position: relative;
     width: 44px;
     height: 24px;
     flex-shrink: 0;
   }
   .cc-toggle input {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
   }
   .cc-toggle-track {
     position: absolute;
     inset: 0;
     background: var(--cc-surface2);
     border: 1px solid var(--cc-border);
     border-radius: 100px;
     cursor: pointer;
     transition: background var(--cc-transition), border-color var(--cc-transition);
   }
   .cc-toggle-track::after {
     content: '';
     position: absolute;
     top: 3px;
     left: 3px;
     width: 16px;
     height: 16px;
     background: var(--cc-text-muted);
     border-radius: 50%;
     transition: transform var(--cc-transition), background var(--cc-transition);
   }
   .cc-toggle input:checked + .cc-toggle-track {
     background: var(--cc-green);
     border-color: var(--cc-green);
   }
   .cc-toggle input:checked + .cc-toggle-track::after {
     transform: translateX(20px);
     background: #fff;
   }
   .cc-toggle.disabled .cc-toggle-track {
     cursor: default;
     opacity: 0.5;
   }
   
   /* Always active badge */
   .cc-always-active {
     font-size: 11px;
     font-weight: 600;
     color: var(--cc-green);
     background: rgba(76, 175, 125, 0.12);
     padding: 3px 8px;
     border-radius: 100px;
     white-space: nowrap;
     flex-shrink: 0;
   }
   
   /* Footer */
   .cc-footer {
     padding: 20px 28px;
     border-top: 1px solid var(--cc-border);
     background: var(--cc-surface);
   }
   .cc-footer-links {
     display: flex;
     gap: 16px;
     margin-bottom: 16px;
   }
   .cc-footer-links a {
     font-size: 12px;
     color: var(--cc-text-muted);
     text-decoration: none;
     transition: color var(--cc-transition);
   }
   .cc-footer-links a:hover {
     color: var(--cc-accent);
   }
   .cc-footer-date {
     font-size: 11px;
     color: #555;
     margin-bottom: 16px;
   }
   .cc-buttons {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
   }
   .cc-btn {
     flex: 1;
     min-width: 130px;
     padding: 11px 16px;
     border-radius: var(--cc-radius-sm);
     font-size: 13.5px;
     font-weight: 600;
     font-family: var(--cc-font);
     cursor: pointer;
     border: none;
     transition: all var(--cc-transition);
     white-space: nowrap;
   }
   .cc-btn-primary {
     background: var(--cc-accent);
     color: #ffffff;
     order: -1;
   }
   .cc-btn-primary:hover {
     background: var(--cc-accent-hover);
     transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(0,128,255,0.3);
   }
   .cc-btn-secondary {
     background: var(--cc-surface2);
     color: var(--cc-text);
     border: 1px solid var(--cc-border);
   }
   .cc-btn-secondary:hover {
     background: #2e2e2e;
     border-color: #3e3e3e;
   }
   .cc-btn-ghost {
     background: transparent;
     color: var(--cc-text-muted);
     border: 1px solid var(--cc-border);
     font-weight: 400;
     font-size: 12.5px;
   }
   .cc-btn-ghost:hover {
     color: var(--cc-text);
     border-color: #3e3e3e;
   }
   
   /* Settings view */
   .cc-settings-view .cc-footer-buttons-settings {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
   }
   
   /* Overview items - pouze text, žádné toggles */
   .cc-overview-cats {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .cc-overview-item {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 14px 16px;
     background: var(--cc-surface);
     border: 1px solid var(--cc-border);
     border-radius: var(--cc-radius-sm);
   }
   .cc-ov-icon {
     font-size: 20px;
     width: 32px;
     text-align: center;
     flex-shrink: 0;
     margin-top: 1px;
   }
   .cc-overview-item .cc-category-info {
     flex: 1;
   }
   .cc-overview-item .cc-category-info strong {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--cc-text);
     margin-bottom: 4px;
   }
   .cc-overview-item .cc-category-info span {
     font-size: 12.5px;
     color: var(--cc-text-muted);
     line-height: 1.5;
   }
   
   /* Responsive */
   @media (max-width: 480px) {
     .cc-header { padding: 20px 20px 16px; }
     .cc-pane { padding: 16px 20px; }
     .cc-footer { padding: 16px 20px; }
     .cc-header h2 { font-size: 19px; }
     .cc-btn { min-width: 100%; }
   }