/* Cookie Consent Pro – Banner Styles */

:root {
  --ccp-bg:       #0f0f0f;
  --ccp-text:     #f5f5f5;
  --ccp-accent:   #4f46e5;
  --ccp-btn-text: #ffffff;
  --ccp-border:   rgba(255,255,255,0.1);
  --ccp-surface:  rgba(255,255,255,0.05);
  --ccp-radius:   16px;
  --ccp-shadow:   0 24px 64px rgba(0,0,0,0.7);
  --ccp-z:        2147483647;
}

/* ── RESET – anulează orice override din temă ── */
#ccp-overlay,
#ccp-overlay *,
#ccp-banner,
#ccp-banner * {
  box-sizing: border-box !important;
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif !important;
}

#ccp-banner p,
#ccp-banner h1,
#ccp-banner h2,
#ccp-banner h3,
#ccp-banner span,
#ccp-banner strong,
#ccp-banner label {
  color: var(--ccp-text) !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#ccp-banner button {
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ── OVERLAY – full-screen, blocks ALL interaction ── */
#ccp-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: var(--ccp-z) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  pointer-events: all !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#ccp-overlay[hidden] { display: none !important; pointer-events: none !important; }
#ccp-overlay.ccp-in  { opacity: 1; }

/* ── MODAL CARD ── */
#ccp-banner {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ccp-bg) !important;
  color: var(--ccp-text) !important;
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  border-radius: var(--ccp-radius);
  border: 1px solid var(--ccp-border);
  box-shadow: var(--ccp-shadow);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34,1.5,0.64,1);
}
#ccp-banner.ccp-in  { opacity: 1; transform: translateY(0) scale(1); }
#ccp-banner.ccp-out { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.2s ease, transform 0.2s ease; }

/* ── INNER LAYOUT ── */
.ccp-banner-inner { padding: 28px 28px 22px; }
.ccp-banner-main  { margin-bottom: 20px; }
.ccp-title { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 800 !important; color: var(--ccp-text) !important; letter-spacing: -0.01em !important; }
.ccp-body  { margin: 0; color: rgba(255,255,255,0.72) !important; font-size: 13px !important; }
.ccp-links { margin: 10px 0 0; font-size: 12px; }
.ccp-links a { color: var(--ccp-accent); text-decoration: none; }
.ccp-links a:hover { text-decoration: underline; }

/* ── BUTTONS ── */
.ccp-actions { display: flex; flex-direction: column; gap: 8px; }
.ccp-btn {
  display: block; width: 100%;
  padding: 13px 18px; border-radius: 10px;
  font-size: 14px !important; font-weight: 700 !important; cursor: pointer;
  border: none !important; text-align: center !important; line-height: 1.2 !important;
  transition: filter 0.15s, transform 0.15s;
  box-sizing: border-box !important;
}
.ccp-btn:hover  { filter: brightness(1.12); transform: translateY(-1px); }
.ccp-btn:active { transform: translateY(0); filter: brightness(0.92); }
.ccp-btn-primary {
  background: var(--ccp-accent) !important; color: var(--ccp-btn-text) !important;
  box-shadow: 0 4px 18px rgba(79,70,229,0.45);
}
.ccp-btn-ghost {
  background: transparent !important; color: rgba(255,255,255,0.5) !important;
  font-weight: 500; font-size: 13px;
  text-decoration: underline; padding: 6px 0;
}

/* ── PREFERENCES PANEL ── */
#ccp-prefs-panel {
  border-top: 1px solid var(--ccp-border);
  padding: 20px 28px 26px;
  background: rgba(255,255,255,0.03);
}
#ccp-prefs-panel h3 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}
#ccp-prefs-panel[hidden] { display: none; }
#ccp-save-prefs { margin-top: 18px; }

/* ── CATEGORY ROWS ── */
.ccp-cat-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ccp-cat-row:last-of-type { border-bottom: none; }
.ccp-cat-info { flex: 1; min-width: 0; }
.ccp-cat-info strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.ccp-cat-info span   { font-size: 12px; color: rgba(255,255,255,0.5); display: block; }

/* ── TOGGLE ── */
.ccp-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.ccp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ccp-slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 13px; cursor: pointer;
  transition: background 0.25s;
}
.ccp-slider::before {
  content: ''; position: absolute;
  height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ccp-toggle input:checked + .ccp-slider { background: var(--ccp-accent); }
.ccp-toggle input:checked + .ccp-slider::before { transform: translateX(20px); }
.ccp-toggle-locked { opacity: 0.4; pointer-events: none; }

/* ── MOBILE – slide up from bottom on small screens ── */
@media (max-width: 480px) {
  #ccp-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #ccp-banner {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    transform: translateY(100%);
  }
  #ccp-banner.ccp-in  { transform: translateY(0); }
  #ccp-banner.ccp-out { transform: translateY(40px); }
  .ccp-banner-inner { padding: 22px 20px 18px; }
  #ccp-prefs-panel  { padding: 16px 20px 24px; }
}