/* ═══════════════════════════════════════════════════════════════════════════
   VM Cookie Consent — Frontend Styles
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --vm-cc-bg:          #fff;
  --vm-cc-text:        #1a1a2e;
  --vm-cc-muted:       #6b7280;
  --vm-cc-border:      #e5e7eb;
  --vm-cc-primary:     #2563eb;
  --vm-cc-primary-h:   #1d4ed8;
  --vm-cc-danger:      #dc2626;
  --vm-cc-success:     #16a34a;
  --vm-cc-overlay:     rgba(0,0,0,.55);
  --vm-cc-radius:      12px;
  --vm-cc-shadow:      0 8px 32px rgba(0,0,0,.18);
  --vm-cc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vm-cc-z:           999999;
}

/* ─── Reset inside plugin ─────────────────────────────────────────────────── */
#vm-cc-banner *,
#vm-cc-modal  * {
  box-sizing: border-box;
}

/* Zero-specificity reset for browser defaults so class rules always win */
:where(#vm-cc-banner, #vm-cc-modal) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, button, input, select, textarea) {
  margin:      0;
  padding:     0;
  list-style:  none;
  font-size:   inherit;
  font-weight: inherit;
  font-family: inherit;
}

/* ─── Banner ──────────────────────────────────────────────────────────────── */
#vm-cc-banner {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  z-index:       var(--vm-cc-z);
  background:    var(--vm-cc-bg);
  border-top:    3px solid var(--vm-cc-primary);
  box-shadow:    0 -4px 24px rgba(0,0,0,.12);
  font-family:   var(--vm-cc-font);
  font-size:     14px;
  color:         var(--vm-cc-text);
  transform:     translateY(110%);
  transition:    transform .35s cubic-bezier(.4,0,.2,1);
}
#vm-cc-banner.vm-cc-visible { transform: translateY(0); }

#vm-cc-banner[data-position="top"] {
  top:        0;
  bottom:     auto;
  border-top: none;
  border-bottom: 3px solid var(--vm-cc-primary);
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  transform:  translateY(-110%);
}
#vm-cc-banner[data-position="top"].vm-cc-visible { transform: translateY(0); }

.vm-cc-banner-inner {
  max-width:      1200px;
  margin:         0 auto;
  padding:        20px 24px;
  display:        flex;
  align-items:    center;
  gap:            24px;
  flex-wrap:      wrap;
}

.vm-cc-banner-text { flex: 1; min-width: 260px; }
.vm-cc-banner-text h2 {
  font-size:   17px;
  font-weight: 700;
  margin-bottom: 6px;
  color:       var(--vm-cc-text);
}
.vm-cc-banner-text p {
  font-size:   13px;
  line-height: 1.6;
  color:       var(--vm-cc-muted);
}
.vm-cc-banner-text a { color: var(--vm-cc-primary); text-decoration: underline; }

.vm-cc-banner-actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  align-items: center;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.vm-cc-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  padding:        10px 20px;
  border-radius:  8px;
  font-family:    var(--vm-cc-font);
  font-size:      13px;
  font-weight:    600;
  cursor:         pointer;
  border:         2px solid transparent;
  transition:     background .18s, border-color .18s, color .18s, transform .1s;
  white-space:    nowrap;
  text-decoration: none;
}
.vm-cc-btn:active { transform: scale(.97); }

.vm-cc-btn--primary {
  background:  var(--vm-cc-primary);
  color:       #fff;
  border-color: var(--vm-cc-primary);
}
.vm-cc-btn--primary:hover {
  background:  var(--vm-cc-primary-h);
  border-color: var(--vm-cc-primary-h);
}

.vm-cc-btn--outline {
  background:  transparent;
  color:       var(--vm-cc-primary);
  border-color: var(--vm-cc-primary);
}
.vm-cc-btn--outline:hover {
  background:  var(--vm-cc-primary);
  color:       #fff;
}

.vm-cc-btn--ghost {
  background:  transparent;
  color:       var(--vm-cc-muted);
  border-color: var(--vm-cc-border);
}
.vm-cc-btn--ghost:hover {
  border-color: var(--vm-cc-muted);
  color:        var(--vm-cc-text);
}

.vm-cc-btn--danger {
  background:  transparent;
  color:       var(--vm-cc-danger);
  border-color: var(--vm-cc-danger);
}
.vm-cc-btn--danger:hover {
  background:  var(--vm-cc-danger);
  color:       #fff;
}

/* ─── Modal overlay ───────────────────────────────────────────────────────── */
#vm-cc-modal {
  position:   fixed;
  inset:      0;
  z-index:    calc(var(--vm-cc-z) + 1);
  display:    flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vm-cc-font);
  font-size:   14px;
  color:       var(--vm-cc-text);
  opacity:     0;
  pointer-events: none;
  transition: opacity .25s;
}
#vm-cc-modal.vm-cc-visible {
  opacity:        1;
  pointer-events: all;
}

.vm-cc-modal-overlay {
  position:   absolute;
  inset:      0;
  background: var(--vm-cc-overlay);
  cursor:     pointer;
}

.vm-cc-modal-box {
  position:     relative;
  background:   var(--vm-cc-bg);
  border-radius: var(--vm-cc-radius);
  box-shadow:   var(--vm-cc-shadow);
  width:        min(680px, calc(100vw - 32px));
  max-height:   calc(100vh - 40px);
  display:      flex;
  flex-direction: column;
  overflow:     hidden;
}

.vm-cc-modal-header {
  padding:       20px 24px 16px;
  border-bottom: 1px solid var(--vm-cc-border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.vm-cc-modal-header h2 { font-size: 18px; font-weight: 700; }

.vm-cc-modal-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     4px;
  color:       var(--vm-cc-muted);
  font-size:   22px;
  line-height: 1;
  transition:  color .15s;
}
.vm-cc-modal-close:hover { color: var(--vm-cc-text); }

.vm-cc-modal-body {
  overflow-y: auto;
  flex:       1;
  padding:    0 24px;
}

.vm-cc-modal-footer {
  padding:       16px 24px;
  border-top:    1px solid var(--vm-cc-border);
  display:       flex;
  gap:           10px;
  flex-wrap:     wrap;
  justify-content: flex-end;
}

/* ─── Category accordion ─────────────────────────────────────────────────── */
.vm-cc-category {
  border-bottom: 1px solid var(--vm-cc-border);
}
.vm-cc-category:last-child { border-bottom: none; }

.vm-cc-category-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     16px 0;
  cursor:      pointer;
}
.vm-cc-category-header:hover .vm-cc-category-label { color: var(--vm-cc-primary); }

.vm-cc-category-info { flex: 1; }
.vm-cc-category-label {
  font-weight:   600;
  font-size:     14px;
  transition:    color .15s;
  display:       flex;
  align-items:   center;
  gap:           6px;
}
.vm-cc-category-desc {
  font-size:   12px;
  color:       var(--vm-cc-muted);
  margin-top:  3px;
  line-height: 1.5;
}

.vm-cc-accordion-icon {
  font-size:   10px;
  color:       var(--vm-cc-muted);
  transition:  transform .2s;
  flex-shrink: 0;
}
.vm-cc-category.open .vm-cc-accordion-icon { transform: rotate(180deg); }

.vm-cc-category-details {
  display:       none;
  padding:       0 0 16px;
}
.vm-cc-category.open .vm-cc-category-details { display: block; }

/* ─── Toggle switch ──────────────────────────────────────────────────────── */
.vm-cc-toggle-wrap {
  position:   relative;
  flex-shrink: 0;
}

.vm-cc-toggle {
  width:  0;
  height: 0;
  opacity: 0;
  position: absolute;
}

.vm-cc-toggle + label {
  display:       block;
  width:         44px;
  height:        24px;
  background:    var(--vm-cc-border);
  border-radius: 12px;
  cursor:        pointer;
  position:      relative;
  transition:    background .2s;
}
.vm-cc-toggle + label::after {
  content:       '';
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         18px;
  height:        18px;
  background:    #fff;
  border-radius: 50%;
  box-shadow:    0 1px 3px rgba(0,0,0,.2);
  transition:    left .2s;
}
.vm-cc-toggle:checked + label { background: var(--vm-cc-success); }
.vm-cc-toggle:checked + label::after { left: 23px; }
.vm-cc-toggle:disabled + label { opacity: .5; cursor: not-allowed; }
.vm-cc-toggle:focus-visible + label { outline: 2px solid var(--vm-cc-primary); outline-offset: 2px; }

.vm-cc-always-active {
  font-size:   11px;
  font-weight: 600;
  color:       var(--vm-cc-success);
  white-space: nowrap;
}

/* ─── Cookie table ────────────────────────────────────────────────────────── */
.vm-cc-cookie-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
  margin-top:      8px;
}
.vm-cc-cookie-table th,
.vm-cc-cookie-table td {
  text-align:  left;
  padding:     6px 8px;
  border:      1px solid var(--vm-cc-border);
}
.vm-cc-cookie-table th {
  background:  #f9fafb;
  font-weight: 600;
  font-size:   11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:       var(--vm-cc-muted);
}
.vm-cc-cookie-table code {
  font-family: monospace;
  font-size:   11px;
  background:  #f3f4f6;
  padding:     1px 4px;
  border-radius: 3px;
}

.vm-cc-tag {
  display:       inline-block;
  padding:       2px 6px;
  border-radius: 4px;
  font-size:     10px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vm-cc-tag--http { background: #dbeafe; color: #1e40af; }
.vm-cc-tag--js   { background: #fef3c7; color: #92400e; }

/* ─── Footer links ────────────────────────────────────────────────────────── */
.vm-cc-footer-links {
  padding:    14px 24px 16px;
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
  font-size:  12px;
  color:      var(--vm-cc-muted);
  border-top: 1px solid var(--vm-cc-border);
}
.vm-cc-footer-links a { color: var(--vm-cc-muted); text-decoration: underline; }
.vm-cc-footer-links a:hover { color: var(--vm-cc-primary); }
.vm-cc-powered { margin-left: auto; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .vm-cc-banner-inner { flex-direction: column; align-items: flex-start; }
  .vm-cc-banner-actions { width: 100%; }
  .vm-cc-btn { flex: 1; justify-content: center; }
  .vm-cc-modal-footer { flex-direction: column-reverse; }
  .vm-cc-modal-footer .vm-cc-btn { width: 100%; }
}

/* ─── No-cookies placeholder ─────────────────────────────────────────────── */
.vm-cc-no-cookies {
  font-size: 12px;
  color:     var(--vm-cc-muted);
  padding:   8px 0;
}

/* ─── Floating cookie button ─────────────────────────────────────────────── */
#vm-cc-floating-btn {
  position:        fixed;
  bottom:          24px;
  left:            24px;
  z-index:         calc(var(--vm-cc-z) - 1);
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         10px 14px 10px 12px;
  background:      var(--vm-cc-primary);
  color:           #fff;
  border:          none;
  border-radius:   50px;
  cursor:          pointer;
  font-family:     var(--vm-cc-font);
  font-size:       13px;
  font-weight:     600;
  box-shadow:      0 4px 16px rgba(37,99,235,.35);
  opacity:         0;
  transform:       translateY(8px);
  pointer-events:  none;
  transition:      opacity .25s, transform .25s, background .15s, box-shadow .15s;
  white-space:     nowrap;
}
#vm-cc-floating-btn.vm-cc-visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: all;
}
#vm-cc-floating-btn:hover {
  background:  var(--vm-cc-primary-h);
  box-shadow:  0 6px 20px rgba(37,99,235,.45);
}
#vm-cc-floating-btn:active  { transform: scale(.96); }
#vm-cc-floating-btn:focus-visible {
  outline:        2px solid #fff;
  outline-offset: 2px;
}

/* Hide label on very small screens, keep just the icon */
@media (max-width: 400px) {
  .vm-cc-floating-label { display: none; }
  #vm-cc-floating-btn   { padding: 11px; border-radius: 50%; }
}

/* Nudge up when banner is open so they don't overlap */
body.vm-cc-banner-open #vm-cc-floating-btn {
  bottom: calc(24px + 120px);
  transition: opacity .25s, transform .25s, bottom .35s cubic-bezier(.4,0,.2,1);
}