/* Webboll Consent Manager - Frontend CSS */
:root {
  --wcm-primary: #2563eb;
  --wcm-secondary: #f1f5f9;
  --wcm-text: #1e293b;
  --wcm-btn-text: #ffffff;
  --wcm-bg: #ffffff;
  --wcm-radius: 12px;
  --wcm-font-size: 14px;
}

/* Banner */
.wcm-banner {
  position: fixed;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--wcm-font-size);
  color: var(--wcm-text);
  background: var(--wcm-bg);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  animation: wcmSlideIn .3s ease;
  line-height: 1.5;
}

@keyframes wcmSlideIn {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Positions */
.wcm-bottom    { bottom:0; left:0; right:0; }
.wcm-top       { top:0; left:0; right:0; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.wcm-bottom-left  { bottom:24px; left:24px; max-width:420px; border-radius: var(--wcm-radius); }
.wcm-bottom-right { bottom:24px; right:24px; max-width:420px; border-radius: var(--wcm-radius); }

/* Styles */
.wcm-style-bar .wcm-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  flex-wrap: wrap;
}
.wcm-style-bar .wcm-banner-content { flex:1; min-width:200px; }
.wcm-style-bar .wcm-buttons { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.wcm-style-box .wcm-banner-inner,
.wcm-style-modal .wcm-banner-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wcm-style-box .wcm-buttons,
.wcm-style-modal .wcm-buttons { display:flex; gap:8px; flex-wrap:wrap; }

.wcm-style-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 480px;
  width: calc(100% - 40px);
  border-radius: var(--wcm-radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.25);
}

.wcm-title {
  margin: 0 0 6px;
  font-size: calc(var(--wcm-font-size) + 2px);
  font-weight: 700;
  color: var(--wcm-text);
}
.wcm-text { margin:0; color: var(--wcm-text); opacity:.85; }
.wcm-links { margin-top:6px; display:flex; gap:12px; flex-wrap:wrap; }
.wcm-links a { color: var(--wcm-primary); text-decoration:underline; font-size:.9em; }

/* Buttons */
.wcm-btn {
  cursor: pointer;
  border: none;
  border-radius: calc(var(--wcm-radius) / 2);
  font-size: var(--wcm-font-size);
  font-weight: 600;
  padding: 9px 18px;
  transition: opacity .2s, transform .1s;
  white-space: nowrap;
}
.wcm-btn:hover { opacity:.88; transform:translateY(-1px); }
.wcm-btn:active { transform:translateY(0); }
.wcm-btn-primary  { background: var(--wcm-primary); color: var(--wcm-btn-text); }
.wcm-btn-secondary { background: var(--wcm-secondary); color: var(--wcm-text); }
.wcm-btn-link { background:none; color: var(--wcm-primary); text-decoration:underline; padding: 9px 4px; }

/* Overlay */
.wcm-overlay {
  position: fixed; inset:0; z-index:999998;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* Modal */
.wcm-modal {
  position: fixed; inset:0; z-index:9999999;
  display: flex; align-items:center; justify-content:center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--wcm-font-size);
}
.wcm-modal-backdrop {
  position:absolute; inset:0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
}
.wcm-modal-box {
  position:relative; z-index:1;
  background: var(--wcm-bg);
  border-radius: var(--wcm-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: wcmModalIn .25s ease;
}
@keyframes wcmModalIn {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
.wcm-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wcm-modal-header h3 { margin:0; font-size:1.1em; font-weight:700; color:var(--wcm-text); }
.wcm-modal-close {
  background:none; border:none; cursor:pointer;
  font-size:22px; color:var(--wcm-text); opacity:.5; line-height:1;
  padding:0 4px;
  transition: opacity .2s;
}
.wcm-modal-close:hover { opacity:1; }
.wcm-modal-body { overflow-y:auto; padding:16px 24px; flex:1; }
.wcm-modal-footer {
  padding:16px 24px 20px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex; gap:8px; flex-wrap:wrap;
}

/* Cookie group */
.wcm-group {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.wcm-group:last-child { border-bottom:none; }
.wcm-group-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:6px;
}
.wcm-group-info { flex:1; }
.wcm-group-label { font-weight:700; color:var(--wcm-text); display:block; margin-bottom:2px; }
.wcm-group-cookies { font-size:.8em; opacity:.6; font-family:monospace; }
.wcm-group-desc { margin:0; opacity:.75; font-size:.9em; color:var(--wcm-text); }
.wcm-required-badge {
  background: rgba(0,0,0,.08); color:var(--wcm-text);
  border-radius:99px; padding:3px 10px; font-size:.8em; font-weight:600;
  white-space: nowrap;
}

/* Toggle switch */
.wcm-toggle { position:relative; display:inline-block; width:46px; height:24px; flex-shrink:0; }
.wcm-toggle input { opacity:0; width:0; height:0; }
.wcm-toggle-slider {
  position:absolute; inset:0;
  background:#cbd5e1; border-radius:99px; cursor:pointer;
  transition:background .2s;
}
.wcm-toggle-slider::before {
  content:''; position:absolute;
  width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.wcm-toggle input:checked + .wcm-toggle-slider { background:var(--wcm-primary); }
.wcm-toggle input:checked + .wcm-toggle-slider::before { transform:translateX(22px); }

/* Re-open button */
.wcm-reopen {
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 99999;
  background: var(--wcm-primary);
  color: var(--wcm-btn-text);
  border: none; border-radius:50%;
  width:44px; height:44px;
  cursor:pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, opacity .2s;
}
.wcm-reopen:hover { transform:scale(1.1); }

/* Reopen button position variants */
.wcm-reopen.wcm-reopen-bottom-left   { bottom:20px; left:20px; right:auto; top:auto; }
.wcm-reopen.wcm-reopen-bottom-right  { bottom:20px; right:20px; left:auto; top:auto; }
.wcm-reopen.wcm-reopen-top           { top:20px; left:20px; right:auto; bottom:auto; }
.wcm-reopen.wcm-reopen-bottom        { bottom:20px; left:20px; right:auto; top:auto; }

@media (max-width:600px) {
  .wcm-style-bar .wcm-banner-inner { flex-direction:column; }
  .wcm-bottom-left, .wcm-bottom-right { left:12px; right:12px; max-width:none; bottom:12px; }
}