/* ═══════════════════════════════════════════════════
   Vela — Common CSS
   Condiviso tra index, cookie-policy, privacy-policy
   ═══════════════════════════════════════════════════ */

/* ── VARIABILI ── */
:root {
	--v-dark: #0c0f1a;
	--v-dark-2: #141829;
	--v-dark-3: #1a1040;
	--v-accent: #6c5ce7;
	--v-accent-light: #a29bfe;
	--v-accent-glow: rgba(108, 92, 231, 0.25);
	--v-surface: #fff;
	--v-surface-alt: #f8f7fc;
	--v-text: #e2e0f0;
	--v-text-muted: rgba(255, 255, 255, 0.5);
	--v-text-dark: #2d3436;
	--v-text-dark-muted: #818a96;
	--v-border: rgba(255, 255, 255, 0.08);
	--v-border-light: #e8ecf1;
}

/* ── BASE ── */
* { font-family: 'DM Sans', system-ui, sans-serif; }
body { color: var(--v-text); background: var(--v-dark); overflow-x: hidden; }
html { scroll-behavior: smooth; }

/* ── BUTTONS ── */
.btn-v {
	background: linear-gradient(135deg, var(--v-accent), #8b7cf6);
	color: #fff; border: none;
	padding: 0.6rem 1.6rem; font-weight: 600; font-size: 0.9rem;
	border-radius: 8px; transition: all 0.25s;
	box-shadow: 0 4px 20px var(--v-accent-glow);
}
.btn-v:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(108,92,231,0.4); }

.btn-v-outline {
	background: none; color: var(--v-accent-light);
	border: 1.5px solid rgba(162,155,254,0.4);
	padding: 0.55rem 1.6rem; font-weight: 600; font-size: 0.9rem;
	border-radius: 8px; transition: all 0.25s;
}
.btn-v-outline:hover { background: rgba(108,92,231,0.1); color: #fff; border-color: var(--v-accent-light); }

.btn-v-white {
	background: #fff; color: var(--v-accent); border: none;
	padding: 0.75rem 2rem; font-weight: 700; font-size: 1rem;
	border-radius: 8px; transition: all 0.25s;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.btn-v-white:hover { background: var(--v-surface-alt); color: #5a4bd1; transform: translateY(-2px); }

.btn-v-ghost {
	background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
	border: 1px solid rgba(255,255,255,0.1);
	padding: 0.55rem 1.4rem; font-weight: 500; font-size: 0.88rem;
	border-radius: 8px; transition: all 0.2s;
}
.btn-v-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ── TYPOGRAPHY ── */
.v-title {
	font-family: 'Playfair Display', serif;
	font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: -0.5px;
}
.v-sub {
	font-size: 1.05rem; color: var(--v-text-muted);
	max-width: 500px; margin: 0 auto; line-height: 1.7;
}
.v-label {
	font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1.5px; color: var(--v-accent-light); margin-bottom: 0.5rem;
}

/* ── HEADER (legal pages) ── */
.v-legal-header {
	background: linear-gradient(160deg, #0c0f1a, #1a1040, #0c0f1a);
	padding: 4rem 0 3rem; text-align: center;
	position: relative; overflow: hidden;
	border-bottom: 1px solid var(--v-border);
}
.v-legal-header::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse 400px 400px at 50% 80%, rgba(108,92,231,0.08), transparent 70%);
	pointer-events: none;
}
.v-legal-header h1 {
	font-family: 'Playfair Display', serif;
	font-size: 2.4rem; font-weight: 700; color: #fff;
	margin-bottom: 0.5rem; position: relative;
}
.v-legal-header p { color: rgba(255,255,255,0.4); font-size: 0.95rem; position: relative; }

/* ── CONTENT (legal pages) ── */
.v-legal-content {
	max-width: 780px; margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	line-height: 1.9; font-size: 0.95rem;
}
.v-legal-content h2 {
	font-family: 'Playfair Display', serif;
	color: #fff; font-size: 1.3rem;
	margin-top: 2.5rem; margin-bottom: 0.75rem;
}
.v-legal-content h3 {
	color: rgba(255,255,255,0.9); font-size: 1.05rem;
	font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem;
}
.v-legal-content p { margin-bottom: 1rem; }
.v-legal-content a { color: var(--v-accent-light); text-decoration: underline; }
.v-legal-content a:hover { color: #fff; }
.v-legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.v-legal-content li { margin-bottom: 0.4rem; }
.v-legal-content strong { color: rgba(255,255,255,0.9); }

/* ── BACK LINK ── */
.v-back {
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: var(--v-accent-light); text-decoration: none;
	font-weight: 600; font-size: 0.9rem; transition: color 0.2s;
}
.v-back:hover { color: #fff; }

/* ── FOOTER ── */
.v-footer {
	background: var(--v-dark);
	border-top: 1px solid var(--v-border);
	padding: 1.5rem 0;
	color: rgba(255,255,255,0.55); font-size: 0.8rem;
}
.v-footer a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.v-footer a:hover { color: var(--v-accent-light); }

/* ── COOKIE STATUS ── */
.v-cookie-status {
	padding: 1.25rem; border-radius: 10px;
	text-align: center; margin: 2rem 0; font-weight: 600;
}
.v-cookie-actions {
	display: flex; gap: 0.75rem; justify-content: center; margin: 1.5rem 0;
}
.v-cookie-actions .btn {
	padding: 0.6rem 1.8rem; border-radius: 8px;
	font-weight: 600; font-size: 0.9rem;
}

/* ── COOKIE TABLE ── */
.v-cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.88rem; }
.v-cookie-table th { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); font-weight: 600; }
.v-cookie-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.v-cookie-table code { color: var(--v-accent-light); font-size: 0.82rem; }

/* ── STARS ── */
.v-stars, .v-pricing-stars, .v-cta-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.v-star {
	position: absolute; width: 2px; height: 2px;
	background: #fff; border-radius: 50%;
	animation: vTwinkle 3s ease-in-out infinite alternate;
}
@keyframes vTwinkle { 0% { opacity: 0.15; } 100% { opacity: 0.7; } }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
	.v-title { font-size: 1.7rem; }
	.v-legal-header h1 { font-size: 1.8rem; }
}