/* Cookie Policy Page Styles - ValorantPL */

.policy-hero {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(180deg, rgba(255,70,85,0.06), rgba(0,217,255,0.06));
  border: 1px solid var(--color-gray-800);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.policy-hero .subtitle {
  color: var(--color-text-secondary);

}

.policy-hero .meta-updated {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.toc {
  margin-bottom: var(--space-6);
}

.toc-title { margin-bottom: var(--space-3); }

.toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 640px) {
  .toc-list { grid-template-columns: 1fr; }
}

.policy-section { margin-bottom: var(--space-6); }
.policy-section .list { margin-top: var(--space-2); padding-left: 1.25rem; list-style: disc; color: var(--color-text-secondary); }
.policy-section .list li { margin-bottom: var(--space-2); }

/* Preferences UI */
.cookie-preferences { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.pref-group { border: 1px solid var(--color-gray-800); border-radius: var(--radius-lg); padding: var(--space-4); }
.pref-group legend { font-family: var(--font-heading); font-weight: var(--font-weight-bold); padding: 0 var(--space-2); }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pref-text p { color: var(--color-text-secondary); }
.pref-control { display: flex; align-items: center; }

.prefs-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.slider { width: 46px; height: 26px; background: var(--color-gray-700); border-radius: 999px; display: inline-block; position: relative; transition: background var(--transition-base), box-shadow var(--transition-base); box-shadow: inset 0 0 0 2px var(--color-gray-600); }
.slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--color-gray-300); border-radius: 50%; transition: transform var(--transition-base), background var(--transition-base); }
.switch input:checked + .slider { background: var(--color-primary); box-shadow: 0 0 12px var(--color-primary-glow); }
.switch input:checked + .slider::after { transform: translateX(20px); background: #fff; }
.switch-label { margin-left: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Locked (essential) indication */
.switch-locked { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: var(--radius-full); background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: var(--font-size-sm); border: 1px solid var(--color-gray-700); }

/* Details */
details { background: var(--color-bg-secondary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-lg); padding: var(--space-4); }
details summary { cursor: pointer; font-weight: var(--font-weight-semibold); }
details[open] { box-shadow: var(--shadow-md); }

/* Minor spacing tweaks */
.type-block + .type-block { margin-top: var(--space-4); }

/* Accessibility states */
#prefs-status { margin-top: var(--space-2); }