/**
 * theme-classic-app.css — lichte Datic app-laag (ALLEEN classic).
 * Hard-set tokens hier zodat FTP van alleen dit bestand + voorjou
 * al een zichtbare transformatie geeft (ook als tokens.css oud blijft).
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ========== FORCE classic identity ========== */
html[data-theme="classic"] {
	--datic-bg: #ffffff !important;
	--datic-bg-deep: #f3f4f7 !important;
	--datic-surface: #ffffff !important;
	--datic-surface-elevated: #ffffff !important;
	--datic-surface-muted: #f7f8fa !important;
	--datic-nav-bg: #ffffff !important;

	--datic-text: #15181e !important;
	--datic-text-muted: #5a6170 !important;
	--datic-text-faint: #8a92a0 !important;
	--datic-on-accent: #ffffff !important;

	--datic-border: #e6e9ef !important;
	--datic-border-strong: #d0d5e0 !important;
	--datic-shadow: 0 12px 32px rgba(21, 24, 30, 0.08) !important;
	--datic-shadow-soft: 0 4px 16px rgba(21, 24, 30, 0.05) !important;
	--datic-shadow-lift: 0 18px 44px rgba(21, 24, 30, 0.12) !important;

	/* Coral brand — not pharmacy green */
	--datic-accent: #ff4f6d !important;
	--datic-accent-deep: #e83858 !important;
	--datic-accent-soft: rgba(255, 79, 109, 0.12) !important;
	--datic-accent-glow: rgba(255, 79, 109, 0.3) !important;
	--datic-accent-alt: #7b6cf6 !important;
	--datic-accent-coral: #ff7a59 !important;
	--datic-accent-teal: #2db8a8 !important;
	--datic-cta-from: #ff4f6d !important;
	--datic-cta-to: #e83858 !important;

	--datic-mint: #ff4f6d !important;
	--datic-mint-deep: #e83858 !important;
	--datic-ink: #15181e !important;
	--datic-muted: #5a6170 !important;

	--datic-success: #22a06b !important;
	--datic-warning: #e5a100 !important;
	--datic-danger: #e5484d !important;
	--datic-info: #3b82f6 !important;

	--datic-input-bg: #ffffff !important;
	--datic-input-border: #e6e9ef !important;
	--datic-placeholder: #8a92a0 !important;

	--datic-radius: 20px !important;
	--datic-radius-sm: 12px !important;
	--datic-radius-lg: 26px !important;
	--datic-radius-pill: 999px !important;
	--datic-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
	--datic-display: "Plus Jakarta Sans", system-ui, sans-serif !important;
	--datic-ease: cubic-bezier(0.22, 1, 0.36, 1) !important;
	--datic-duration: 180ms !important;

	--datic-ambient-1: rgba(255, 79, 109, 0.12) !important;
	--datic-ambient-2: rgba(123, 108, 246, 0.1) !important;

	--warm-ink: #15181e !important;
	--warm-muted: #5a6170 !important;
	--warm-line: #e6e9ef !important;
	--warm-bg: #ffffff !important;
	--warm-panel: #ffffff !important;
	--warm-green: #ff4f6d !important;
	--warm-green-deep: #e83858 !important;
	--warm-blue: #7b6cf6 !important;
	--warm-font: "Plus Jakarta Sans", system-ui, sans-serif !important;
	--warm-display: "Plus Jakarta Sans", system-ui, sans-serif !important;

	color-scheme: light;
}

html[data-theme="classic"],
html[data-theme="classic"] body {
	font-family: var(--datic-font) !important;
	background: #ffffff !important;
	color: #15181e !important;
	-webkit-font-smoothing: antialiased;
}

html[data-theme="classic"].warm-page .wrapper,
html[data-theme="classic"].warm-page .wrapper.bg-default {
	background-color: #ffffff !important;
	background-image:
		radial-gradient(ellipse 80% 50% at 0% -20%, rgba(255, 79, 109, 0.14), transparent 55%),
		radial-gradient(ellipse 60% 40% at 100% 0%, rgba(123, 108, 246, 0.1), transparent 50%) !important;
	background-size: auto !important;
	background-repeat: no-repeat !important;
}

html[data-theme="classic"] h1,
html[data-theme="classic"] h2,
html[data-theme="classic"] h3,
html[data-theme="classic"] .fieldset-header,
html[data-theme="classic"] .warm-hero__title,
html[data-theme="classic"] .vj-card__name {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	letter-spacing: -0.03em;
}

/* Kill serif leftovers on classic */
html[data-theme="classic"] .vj-card--focus .vj-card__name,
html[data-theme="classic"] .warm-hero__title,
html[data-theme="classic"] .identifier .fieldset-header {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* ========== Chrome ========== */
html[data-theme="classic"].warm-page body:not(.has-mobile-dock) #navigation-bar.navbar,
html[data-theme="classic"].warm-page body:not(.has-mobile-dock) #navigation-bar.bg-primary {
	background: rgba(255, 255, 255, 0.92) !important;
	border-bottom: 1px solid #e6e9ef !important;
	box-shadow: none !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
@media (max-width: 767px) {
	html[data-theme="classic"].warm-page body.has-mobile-dock #navigation-bar.navbar,
	html[data-theme="classic"].warm-page body.has-mobile-dock #navigation-bar.bg-primary {
		display: none !important;
		min-height: 0 !important;
		height: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

html[data-theme="classic"].warm-page .warm-hero {
	background: #ffffff !important;
	background-image: none !important;
	border-bottom: 1px solid #e6e9ef !important;
	padding: 0.75rem 1rem 0.85rem !important;
}

html[data-theme="classic"] .disc-tabs__bar {
	background: #f7f8fa !important;
	border: 1px solid #e6e9ef !important;
	border-radius: 999px !important;
	border-bottom: 1px solid #e6e9ef !important;
	padding: 0.28rem !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
	flex-wrap: nowrap !important;
}
html[data-theme="classic"] .disc-tabs__link,
html[data-theme="classic"] .disc-tabs__more {
	flex: 0 0 auto !important;
}

html[data-theme="classic"] .disc-tabs__link {
	border-radius: 999px !important;
	background: transparent !important;
	color: #5a6170 !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

html[data-theme="classic"] .disc-tabs__link.is-current {
	background: #ff4f6d !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(255, 79, 109, 0.35) !important;
}

html[data-theme="classic"] .datic-mobile-dock {
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid #e6e9ef !important;
	border-radius: 22px !important;
	box-shadow: 0 12px 36px rgba(21, 24, 30, 0.12) !important;
}

html[data-theme="classic"] .datic-mobile-dock__item {
	color: #5a6170 !important;
}

html[data-theme="classic"] .datic-mobile-dock__item.is-active {
	color: #e83858 !important;
	background: rgba(255, 79, 109, 0.12) !important;
}

/* ========== Buttons ========== */
html[data-theme="classic"] .btn {
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

html[data-theme="classic"] .btn-success,
html[data-theme="classic"] .btn-primary:not(.remove),
html[data-theme="classic"] .vj-btn--like {
	background: linear-gradient(165deg, #ff4f6d, #e83858) !important;
	border-color: #e83858 !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(255, 79, 109, 0.32) !important;
}

html[data-theme="classic"] .btn-secondary,
html[data-theme="classic"] .btn-default {
	background: #fff !important;
	border: 1px solid #d0d5e0 !important;
	color: #15181e !important;
}

/* Kill leftover Bootstrap greens on classic */
html[data-theme="classic"] .bg-primary,
html[data-theme="classic"] .bg-success,
html[data-theme="classic"] .btn-success {
	background-color: #ff4f6d !important;
	border-color: #e83858 !important;
}

html[data-theme="classic"] .text-success,
html[data-theme="classic"] .text-primary,
html[data-theme="classic"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.disc-tabs__link):not(.di-flow__tab):not(.datic-mobile-dock__item) {
	color: #e83858 !important;
}

/* ========== Voor jou — photo-first dating card ========== */
html[data-theme="classic"] .vj-page {
	background: #ffffff;
}

html[data-theme="classic"] .vj-toolbar__link,
html[data-theme="classic"] .vj-card__next-btn,
html[data-theme="classic"] .ix-vj-more a {
	color: #e83858 !important;
}

html[data-theme="classic"] .vj-card--focus {
	border: 0 !important;
	border-radius: 28px !important;
	overflow: hidden !important;
	box-shadow: 0 18px 48px rgba(21, 24, 30, 0.14) !important;
	background: #111 !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__photo {
	aspect-ratio: 3 / 4 !important;
	max-height: min(68vh, 560px) !important;
	position: relative;
}

html[data-theme="classic"] .vj-card--focus .vj-card__photo::after {
	content: '' !important;
	position: absolute !important;
	inset: auto 0 0 0 !important;
	height: 55% !important;
	opacity: 1 !important;
	background: linear-gradient(180deg, transparent 0%, rgba(10, 12, 16, 0.55) 42%, rgba(10, 12, 16, 0.92) 100%) !important;
	z-index: 2;
	pointer-events: none;
}

html[data-theme="classic"] .vj-card--focus .vj-card__body {
	position: relative;
	margin-top: -7.5rem;
	z-index: 3;
	padding: 0 1.15rem 1.25rem !important;
	background: transparent !important;
	gap: 0.45rem !important;
	color: #fff !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__name,
html[data-theme="classic"] .vj-card--focus .vj-card__name a {
	color: #fff !important;
	font-size: clamp(1.55rem, 5vw, 1.9rem) !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="classic"] .vj-card--focus .vj-card__age,
html[data-theme="classic"] .vj-card--focus .vj-card__loc {
	color: rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__fact,
html[data-theme="classic"] .vj-card--focus .vj-card__facts > span {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	backdrop-filter: blur(8px);
	gap: 0.35rem;
}

html[data-theme="classic"] .vj-card--focus .vj-card__facts strong {
	color: rgba(255, 255, 255, 0.7) !important;
}
html[data-theme="classic"] .vj-card--focus .vj-card__facts em {
	color: #fff !important;
	font-style: normal;
}

html[data-theme="classic"] .vj-card--focus .vj-card__why-block {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-left: 3px solid #ff4f6d !important;
	color: #fff !important;
	backdrop-filter: blur(10px);
}

html[data-theme="classic"] .vj-card--focus .vj-card__why-title {
	color: #ff8a9c !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__why-list,
html[data-theme="classic"] .vj-card--focus .vj-card__bio,
html[data-theme="classic"] .vj-card--focus .vj-card__bio p,
html[data-theme="classic"] .vj-card--focus .vj-card__bio-title {
	color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__actions--focus {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	gap: 0.75rem !important;
	padding-top: 0.75rem !important;
	align-items: center !important;
}

html[data-theme="classic"] .vj-card--focus .vj-btn--labeled {
	width: 3.35rem !important;
	height: 3.35rem !important;
	min-height: 3.35rem !important;
	padding: 0 !important;
	border-radius: 50% !important;
	flex: 0 0 auto !important;
	font-size: 1.15rem !important;
}

html[data-theme="classic"] .vj-card--focus .vj-btn--labeled span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

html[data-theme="classic"] .vj-card--focus .vj-btn--skip {
	background: rgba(255, 255, 255, 0.95) !important;
	color: #5a6170 !important;
	border: 0 !important;
	width: 3.1rem !important;
	height: 3.1rem !important;
}

html[data-theme="classic"] .vj-card--focus .vj-btn--profile {
	background: rgba(255, 255, 255, 0.95) !important;
	color: #7b6cf6 !important;
	border: 0 !important;
	width: 3.1rem !important;
	height: 3.1rem !important;
}

html[data-theme="classic"] .vj-card--focus .vj-btn--like {
	width: 3.85rem !important;
	height: 3.85rem !important;
	min-height: 3.85rem !important;
	font-size: 1.35rem !important;
	box-shadow: 0 10px 28px rgba(255, 79, 109, 0.45) !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__next {
	margin-top: 0.35rem !important;
}

html[data-theme="classic"] .vj-card--focus .vj-card__next-btn {
	color: rgba(255, 255, 255, 0.75) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

html[data-theme="classic"] .vj-swipe-hint {
	color: #5a6170 !important;
	font-weight: 600 !important;
}

/* ========== Profiel-nudge: coral light (niet goud) ========== */
html[data-theme="classic"] .datic-profile-nudge {
	background:
		radial-gradient(ellipse 70% 120% at 0% 50%, rgba(255, 79, 109, 0.1), transparent 55%),
		linear-gradient(135deg, #ffffff 0%, #fff5f7 55%, #ffffff 100%) !important;
	border-bottom: 1px solid rgba(255, 79, 109, 0.22) !important;
	color: #15181e !important;
}
html[data-theme="classic"] .datic-profile-nudge__close {
	background: rgba(255, 79, 109, 0.1) !important;
	color: #5a6170 !important;
}
html[data-theme="classic"] .datic-profile-nudge__close:hover,
html[data-theme="classic"] .datic-profile-nudge__close:focus {
	background: rgba(255, 79, 109, 0.2) !important;
	color: #15181e !important;
}
html[data-theme="classic"] .datic-profile-nudge__icon {
	background: linear-gradient(135deg, #ff4f6d, #e83858) !important;
	color: #fff !important;
}
html[data-theme="classic"] .datic-profile-nudge__icon .fa,
html[data-theme="classic"] .datic-profile-nudge__icon .fa-heart {
	color: #fff !important;
}
html[data-theme="classic"] .datic-profile-nudge__title {
	color: #15181e !important;
}
html[data-theme="classic"] .datic-profile-nudge__text {
	color: #5a6170 !important;
}
html[data-theme="classic"] .datic-profile-nudge__cta,
html[data-theme="classic"] a.datic-profile-nudge__cta.btn-success {
	color: #fff !important;
	background: linear-gradient(135deg, #ff4f6d, #e83858) !important;
	border: none !important;
	box-shadow: 0 6px 16px rgba(255, 79, 109, 0.28) !important;
}
html[data-theme="classic"] a.datic-profile-nudge__cta.btn-success:hover,
html[data-theme="classic"] a.datic-profile-nudge__cta.btn-success:focus {
	color: #fff !important;
	filter: brightness(1.05);
}

/* ========== Compacte meldingen-promo ========== */
html[data-theme="classic"] .datic-app-promo--compact .datic-app-promo__inner,
.datic-app-promo--compact .datic-app-promo__inner {
	align-items: center;
	padding: 0.65rem 0.85rem;
	gap: 0.65rem;
	background: #fff !important;
	border: 1px solid #e6e9ef !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 14px rgba(21, 24, 30, 0.04) !important;
}
.datic-app-promo--compact .datic-app-promo__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.85rem;
	flex: 1 1 auto;
}
.datic-app-promo--compact .datic-app-promo__title {
	margin: 0 !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
}
.datic-app-promo--compact .datic-app-promo__actions {
	margin: 0;
}
.datic-app-promo--compact .datic-app-promo__cta {
	padding: 0.45rem 0.9rem;
	font-size: 0.86rem;
}
.datic-app-promo--compact .datic-app-promo__hint {
	flex: 1 1 100%;
	margin: 0;
}
@media (max-width: 575px) {
	.datic-app-promo--compact .datic-app-promo__body {
		flex-direction: column;
		align-items: stretch;
	}
	.datic-app-promo--compact .datic-app-promo__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ========== Index "Ook van Datic" knoppen → coral ========== */
html[data-theme="classic"] #index.ix-home .ix-also__btn {
	background: linear-gradient(165deg, #ff4f6d, #e83858) !important;
	border: 0 !important;
	box-shadow: 0 6px 16px rgba(255, 79, 109, 0.28) !important;
	color: #fff !important;
}
html[data-theme="classic"] #index.ix-home .ix-also__btn:hover,
html[data-theme="classic"] #index.ix-home .ix-also__btn:focus {
	background: #e83858 !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 8px 20px rgba(255, 79, 109, 0.35) !important;
}

/* CrossPaths grote home-banner: forceer weg als die toch geladen wordt */
html[data-theme="classic"] .cp-datic-promo,
.cp-datic-promo#cpDaticPromo {
	display: none !important;
}

/* Berichtenoverzicht-titel: antraciet, niet koraal */
html[data-theme="classic"] #chat .chat-app__title,
html[data-theme="classic"] #chat .chat-app__title a,
html[data-theme="classic"] #chat .chat-app__title a:hover {
	color: #15181e !important;
}

html[data-theme="classic"] .datic-mobile-menu-root__sheet {
	background: #ffffff !important;
	border-color: #e6e9ef !important;
}
html[data-theme="classic"] .datic-mobile-menu-root__nav .nav-link,
html[data-theme="classic"] .datic-mobile-menu-root__nav .datic-nav-label {
	color: #15181e !important;
}
html[data-theme="classic"] .datic-mobile-menu-root__nav .nav-link.is-current {
	background: rgba(255, 79, 109, 0.12) !important;
	color: #e83858 !important;
}

/* Modals / forms */
html[data-theme="classic"] .modal-content {
	border-radius: 24px !important;
	border: 1px solid #e6e9ef !important;
}

html[data-theme="classic"] .modal .btn-primary:not(.remove) {
	background: linear-gradient(165deg, #ff4f6d, #e83858) !important;
	border-color: #e83858 !important;
}

@media (prefers-reduced-motion: reduce) {
	html[data-theme="classic"] *,
	html[data-theme="classic"] *::before,
	html[data-theme="classic"] *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}