/* ==========================================================================
   Votyv UI components
   One place for the handful of building blocks every page shares. Values
   mirror the Tailwind tokens in base.html (primary #5539CC, secondary/gold
   #F7BA17, radius: button 8px, lg 16px, xl 20px). Tailwind utilities still
   do the layout; these classes only pin down the parts that kept drifting.
   ========================================================================== */

:root {
	--votyv-primary: #5539CC;
	--votyv-primary-dark: #4630A8;
	--votyv-gold: #F7BA17;
	--votyv-gold-dark: #D9A20F;
}

/* ---------- Buttons ---------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: 0.625rem 1rem;
	border-radius: 8px;
	border: 1px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(85, 57, 204, .35); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; line-height: 1.5rem; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--votyv-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--votyv-primary-dark); }

.btn-secondary { background: #fff; color: #374151; border-color: #D1D5DB; }
.btn-secondary:hover:not(:disabled) { background: #F9FAFB; }

.btn-outline { background: #fff; color: var(--votyv-primary); border-color: var(--votyv-primary); }
.btn-outline:hover:not(:disabled) { background: rgba(85, 57, 204, .06); }

.btn-soft { background: rgba(85, 57, 204, .1); color: var(--votyv-primary); }
.btn-soft:hover:not(:disabled) { background: rgba(85, 57, 204, .18); }

.btn-ghost { background: transparent; color: #4B5563; }
.btn-ghost:hover:not(:disabled) { background: #F3F4F6; color: #111827; }

.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }

.btn-gold { background: var(--votyv-gold); color: #1F2937; }
.btn-gold:hover:not(:disabled) { background: var(--votyv-gold-dark); }

/* ---------- Inputs ----------------------------------------------------- */
.input {
	display: block;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #9CA3AF; }
.input:focus { outline: none; border-color: var(--votyv-primary); box-shadow: 0 0 0 3px rgba(85, 57, 204, .2); }
.input-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.input.is-invalid { border-color: #DC2626; }

.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
.help-text { font-size: 0.75rem; color: #6B7280; }
.error-text { font-size: 0.875rem; color: #DC2626; }

/* ---------- Cards ------------------------------------------------------ */
.card {
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

/* ---------- Pills / badges -------------------------------------------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1rem;
	white-space: nowrap;
}
.pill-neutral { background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB; }
.pill-primary { background: rgba(85, 57, 204, .1); color: var(--votyv-primary); }
.pill-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.pill-warning { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.pill-danger { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* The Votyv Member check: gold circle, purple check. One markup everywhere:
   <span class="member-badge"><i class="ri-check-line"></i></span> */
.member-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	background: var(--votyv-gold);
	color: var(--votyv-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
	flex-shrink: 0;
}
.member-badge-sm { width: 14px; height: 14px; font-size: 10px; }
.member-badge-lg { width: 20px; height: 20px; font-size: 14px; }
.member-badge-xl { width: 56px; height: 56px; font-size: 28px; }

/* ---------- Modals ---------------------------------------------------- */
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); }
.modal-panel { background: #fff; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.modal-close {
	width: 2rem; height: 2rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9999px; color: #6B7280;
	transition: background-color .15s ease, color .15s ease;
}
.modal-close:hover { background: #F3F4F6; color: #111827; }