/* ------------------------------- */
/* COOKIE BANNER BASE STYLES       */
/* ------------------------------- */
#cookie-banner { 
  position: fixed; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: var(--cb-bg); 
  color: var(--cb-text); 
  padding: 16px; 
  z-index: 9999; 
  box-shadow: 0 -8px 30px rgba(0,0,0,.25); 
  display: none; /* default hidden; JS will toggle */
  font-size: 14px; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

 

#cookie-banner .wrap { 
  max-width: 960px;   
  margin: 0 auto; 
  display: flex; 
  gap: 16px; 
  align-items: center; 
  justify-content: space-between;
}

 

#cookie-banner p { 
  margin: 0; 
  line-height: 1.5; 
  flex: 1;  
}

/* ------------------------------- */
/* ACTION BUTTONS                  */
/* ------------------------------- */
#cookie-banner .actions { 
  display: flex; 
  gap: 12px; 
  flex-shrink: 0; 
}

 

#cookie-banner .actions .btn { 
  padding: 10px 18px; 
  border-radius: 6px; 
  border: none; 
  cursor: pointer; 
  font-weight: 600; 
  transition: all 0.25s ease;
  min-width: 120px;   
  text-align: center;
}

 

#cookie-banner .btn-accept { 
  background: var(--cb-danger); 
  color: #fff; 
}
#cookie-banner .btn-accept:hover { 
  background: var(--cb-danger-hover); 
  transform: translateY(-2px);
}
#cookie-banner .btn-accept:hover { 
  background: var(--cb-danger-hover); 
  transform: translateY(-2px);
}

 

#cookie-banner .btn-reject { 
  background: var(--cb-success); 
  color: #fff; 
}
#cookie-banner .btn-reject:hover { 
  background: var(--cb-success-hover); 
  transform: translateY(-2px);
}

/* ------------------------------- */
/* POLICY LINKS                    */
/* ------------------------------- */
#cookie-banner .privacy {
  font-size: 13px;
  color: var(--cb-link);
  text-decoration: underline;
  margin-left: 4px;
  transition: color 0.25s ease;
}

#cookie-banner .privacy:hover {
  color: var(--cb-link-hover);
}

/* ------------------------------- */
/* RESPONSIVE LAYOUT               */
/* ------------------------------- */
@media (max-width: 768px) { 
  #cookie-banner .wrap { 
    flex-direction: column; 
    align-items: flex-start; 
    text-align: left; 
  } 
  #cookie-banner .actions { 
    margin-top: 12px; 
    width: 100%; 
    justify-content: flex-start; 
    flex-wrap: wrap;   
  } 
  #cookie-banner .actions .btn { 
    flex: unset; 
    min-width: 100px; 
  } 
}

@media (max-width: 480px) { 
  #cookie-banner { 
    font-size: 13px; 
    padding: 12px; 
  } 
  #cookie-banner .actions { 
    gap: 8px;
  }
  #cookie-banner .actions .btn { 
    padding: 8px 12px; 
    font-size: 13px; 
    min-width: 90px; 
  } 
}

/* ------------------------------- */
/* THEME VARIABLES                 */
/* ------------------------------- */

/* Default (light mode) */
:root {
  --cb-bg: #f8f9fa;
  --cb-text: #222;
  --cb-link: #0066cc;
  --cb-link-hover: #003366;
  --cb-danger: #d32f2f;
  --cb-danger-hover: #b71c1c;
  --cb-success: #388e3c;
  --cb-success-hover: #2e7d32;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --cb-bg: rgba(17, 17, 17, 0.95);
    --cb-text: #f1f1f1;
    --cb-link: #90caf9;
    --cb-link-hover: #ffffff;
    --cb-danger: #ef5350;
    --cb-danger-hover: #d32f2f;
    --cb-success: #66bb6a;
    --cb-success-hover: #388e3c;
  }
}

/* Force dark theme via class (optional) */
.dark-theme #cookie-banner {
  --cb-bg: rgba(17, 17, 17, 0.95);
  --cb-text: #f1f1f1;
  --cb-link: #90caf9;
  --cb-link-hover: #ffffff;
  --cb-danger: #ef5350;
  --cb-danger-hover: #d32f2f;
  --cb-success: #66bb6a;
  --cb-success-hover: #388e3c;
}

/* Force light theme via class (optional) */
.light-theme #cookie-banner {
  --cb-bg: #f8f9fa;
  --cb-text: #222;
  --cb-link: #0066cc;
  --cb-link-hover: #003366;
  --cb-danger: #d32f2f;
  --cb-danger-hover: #b71c1c;
  --cb-success: #388e3c;
  --cb-success-hover: #2e7d32;
}