/* ==========================================================================
   TattooClub — Consent UI (banner + preference center)
   Layout = Elementor templates (containers + native widgets). This file:
   positioning/visibility states, the switch control, cookie lists and the
   responsive behaviour (mobile bottom sheet + list/detail views).
   Tokens: ink #111111, ivory #F9F5EF, line #E8E4DC, muted #68645E,
   electric green #B7E41C.
   ========================================================================== */

#tc-consent-banner, #tc-consent-prefs {
	--cs-ink: #111111; --cs-muted: #68645E; --cs-line: #E8E4DC; --cs-green: #B7E41C; --cs-ivory: #F9F5EF;
	--container-default-padding-top: 0px; --container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px; --container-default-padding-left: 0px;
	font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#tc-consent-banner p, #tc-consent-prefs p { margin: 0; }
#tc-consent-banner a:focus-visible, #tc-consent-prefs a:focus-visible,
#tc-consent-banner [role="button"]:focus-visible, #tc-consent-prefs [role="button"]:focus-visible,
#tc-consent-prefs button:focus-visible, #tc-consent-prefs [tabindex="-1"]:focus-visible {
	outline: 2px solid var(--cs-ink); outline-offset: 2px; border-radius: 6px;
}

/* ------------------------------------------------------------- Banner */
#tc-consent-banner {
	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
	width: min(980px, calc(100% - 32px)); z-index: 2147480000;
	display: none !important;
}
html.tc-consent-needed #tc-consent-banner,
#tc-consent-banner[data-state="saved"],
#tc-consent-banner[data-state="refused"] { display: flex !important; }
html.tc-cp-open #tc-consent-banner { display: none !important; }

#tc-consent-banner .tc-cb-state { display: none !important; }
html.tc-consent-needed #tc-consent-banner:not([data-state]) .tc-cb-state--initial,
#tc-consent-banner[data-state="saved"] .tc-cb-state--saved,
#tc-consent-banner[data-state="refused"] .tc-cb-state--refused { display: flex !important; }

.tc-cb-card { box-shadow: 0 16px 40px rgba(17, 17, 17, .18), 0 2px 8px rgba(17, 17, 17, .06); }
#tc-consent-banner .tc-cb-state--saved, #tc-consent-banner .tc-cb-state--refused { max-width: 720px; margin: 0 auto; }
.tc-cb-text a { color: var(--cs-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.tc-cb-actions .elementor-button, .tc-cp-actions .elementor-button { white-space: nowrap; justify-content: center; width: 100%; }
.tc-cb-dismiss .elementor-icon { cursor: pointer; padding: 10px; border-radius: 50%; }
.tc-cb-dismiss .elementor-icon:hover { background: #F2EFE9; }
.tc-cb-icon { flex: 0 0 auto; }

@media (max-width: 767px) {
	#tc-consent-banner { bottom: 10px; width: calc(100% - 20px); }
	.tc-cb-actions > .elementor-widget { width: 100%; }
}

/* ---------------------------------------------------- Preference center */
#tc-consent-prefs {
	position: fixed; inset: 0; z-index: 2147482400;
	display: flex !important; align-items: center; justify-content: center;
	padding: 24px; background: rgba(17, 17, 17, .55);
}
#tc-consent-prefs[hidden] { display: none !important; }
html.tc-cp-open, html.tc-cp-open body { overflow: hidden; }

#tc-consent-prefs .tc-cp-panel {
	width: min(880px, 100%); max-height: calc(100vh - 48px);
	overflow: hidden; box-shadow: 0 24px 64px rgba(17, 17, 17, .35);
	animation: tc-cp-in .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes tc-cp-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.tc-cp-body { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.tc-cp-nav, .tc-cp-panes { overflow-y: auto; max-height: calc(100vh - 230px); }
.tc-cp-close .elementor-icon, .tc-cp-back .elementor-icon { cursor: pointer; padding: 10px; border-radius: 50%; }
.tc-cp-close .elementor-icon:hover, .tc-cp-back .elementor-icon:hover { background: #F2EFE9; }
.tc-cp-back { display: none; }

/* Navigation (desktop: vertical tabs) */
.tc-cp-navrow { border-radius: 10px; }
.tc-cp-navrow .elementor-button { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; background: transparent !important; }
.tc-cp-navrow.is-active { background: #EEF7CF; box-shadow: inset 3px 0 0 var(--cs-green); }
.tc-cp-navrow.is-active .elementor-button { font-weight: 700; }
.tc-cp-navrow:hover { background: #F2EFE9; }
.tc-cp-navrow.is-active:hover { background: #EEF7CF; }
.tc-cp-navswitch, .tc-cp-navmeta { display: none; }
.tc-cp-pane[hidden] { display: none !important; }
.tc-cp-infobox .elementor-icon-box-wrapper { padding: 14px 16px; border: 1px solid var(--cs-line); border-radius: 12px; }
.tc-cp-infobox a:hover .elementor-icon-box-title { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- Switch */
.tc-cs { display: inline-flex; align-items: center; gap: 10px; }
.tc-cs__state { font-size: 12.5px; font-weight: 600; color: var(--cs-muted); min-width: 64px; text-align: right; }
#tc-consent-prefs .tc-cs__switch {
	position: relative; width: 48px; height: 28px; flex: 0 0 48px; padding: 0; margin: 0; min-height: 0;
	border: 2px solid var(--cs-ink); border-radius: 999px; background: #FFFFFF; cursor: pointer;
	box-shadow: none; transition: background .15s ease, border-color .15s ease;
}
#tc-consent-prefs .tc-cs__knob {
	position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--cs-ink); transition: transform .18s ease;
}
#tc-consent-prefs .tc-cs__switch[aria-checked="true"] { background: var(--cs-ink); }
#tc-consent-prefs .tc-cs__switch[aria-checked="true"] .tc-cs__knob { transform: translateX(20px); background: var(--cs-green); }
#tc-consent-prefs .tc-cs__switch:focus-visible { outline: 3px solid var(--cs-green); outline-offset: 2px; }
#tc-consent-prefs .tc-cs--locked .tc-cs__switch { cursor: not-allowed; border-color: #BDB6A8; background: #E7E2D8; }
#tc-consent-prefs .tc-cs--locked .tc-cs__knob { transform: translateX(20px); background: #8F887B; }

/* --------------------------------------------------------- Cookie list */
.tc-cc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-line); }
.tc-cc__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--cs-line); }
.tc-cc__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--cs-ink); overflow-wrap: anywhere; }
.tc-cc__desc { font-size: 13px; line-height: 1.45; color: #2B2926; }
.tc-cc__meta { font-size: 12px; color: var(--cs-muted); }
.tc-cc-empty { font-size: 13px; line-height: 1.5; color: var(--cs-muted); padding: 12px 14px; background: #F4F1EA; border-radius: 10px; }

/* ------------------------------------------------------------- Mobile */
@media (max-width: 767px) {
	#tc-consent-prefs { padding: 0; align-items: flex-end; }
	#tc-consent-prefs .tc-cp-panel {
		width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0 !important;
		animation-name: tc-cp-up;
	}
	@keyframes tc-cp-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
	.tc-cp-nav, .tc-cp-panes { max-height: calc(92vh - 250px); }

	/* List view = categories with inline switches; detail view = one pane */
	#tc-consent-prefs[data-view="list"] .tc-cp-panes { display: none !important; }
	#tc-consent-prefs[data-view="detail"] .tc-cp-nav { display: none !important; }
	#tc-consent-prefs[data-view="detail"] .tc-cp-back { display: block; }
	.tc-cp-navrow { border: 1px solid var(--cs-line); background: #FFFFFF; }
	.tc-cp-navrow.is-active { background: #FFFFFF; box-shadow: none; }
	.tc-cp-navrow .elementor-button::after { content: "›"; margin-left: auto; font-size: 20px; line-height: 1; padding-left: 10px; }
	.tc-cp-navrow--performance .elementor-button::after, .tc-cp-navrow--marketing .elementor-button::after { content: none; }
	.tc-cp-navswitch, .tc-cp-navmeta { display: block; }
	.tc-cp-navrow--overview { display: none !important; }
	.tc-cs__state { display: none; }
	.tc-cp-actions > .elementor-widget { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	#tc-consent-prefs .tc-cp-panel { animation: none; }
	#tc-consent-prefs .tc-cs__knob, #tc-consent-prefs .tc-cs__switch { transition: none; }
}
@media print { #tc-consent-banner, #tc-consent-prefs { display: none !important; } }

/* Closed unless consent.js opened it (no flash while JS is deferred). */
#tc-consent-prefs:not(.is-open) { display: none !important; }
.tc-cp-navrow .elementor-button-content-wrapper { justify-content: flex-start; width: 100%; }
.tc-cp-navrow .elementor-button-icon { flex: 0 0 18px; }
#tc-consent-prefs .elementor-heading-title[tabindex="-1"]:focus { outline: none; }
@media (max-width: 767px) {
	#tc-consent-banner .tc-cb-state--saved, #tc-consent-banner .tc-cb-state--refused { flex-wrap: nowrap !important; }
	#tc-consent-banner .tc-cb-state--saved > .e-con, #tc-consent-banner .tc-cb-state--refused > .e-con { --width: auto; flex: 1 1 auto !important; min-width: 0; }
	#tc-consent-banner .tc-cb-status-text { font-size: 13px; }
	#tc-consent-banner .tc-cb-state--saved .elementor-button, #tc-consent-banner .tc-cb-state--refused .elementor-button { padding: 8px 12px; }
	#tc-consent-banner .tc-cb-dismiss .elementor-icon { padding: 8px; }
}
#tc-consent-prefs .tc-cp-head { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; }
#tc-consent-prefs .tc-cp-head > .e-con { --width: auto; flex: 1 1 auto !important; min-width: 0; }
#tc-consent-prefs .tc-cp-head > .elementor-widget { width: auto !important; flex: 0 0 auto; }
#tc-consent-prefs .elementor-heading-title[tabindex="-1"] { outline: none !important; }
@media (max-width: 767px) {
	#tc-consent-prefs .tc-cp-nav { background: #FFFFFF !important; border: 0 !important; gap: 8px; }
	.tc-cp-navrow .elementor-button::after { content: none !important; }
	.tc-cp-navrow--necessary .elementor-button-content-wrapper::after, .tc-cp-navrow--info .elementor-button-content-wrapper::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; padding-left: 10px; }
}
@media (max-width: 767px) { #tc-consent-prefs { justify-content: flex-end !important; align-items: stretch !important; } }
@media (max-width: 767px) {
	/* Mobile banner: icon beside the title, Accept full width, the two neutral choices side by side. */
	#tc-consent-banner .tc-cb-main { flex-direction: row !important; flex-wrap: nowrap !important; }
	#tc-consent-banner .tc-cb-main > .elementor-widget-icon { width: auto !important; flex: 0 0 auto; }
	#tc-consent-banner .tc-cb-main > .e-con { --width: auto; flex: 1 1 auto !important; min-width: 0; }
	#tc-consent-banner .tc-cb-main .elementor-icon { font-size: 24px !important; }
	#tc-consent-banner .tc-cb-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
	#tc-consent-banner .tc-cb-actions > .tc-consent-btn--primary { grid-column: 1 / -1; order: -1; }
	#tc-consent-banner .tc-cb-actions .elementor-button { padding-top: 12px; padding-bottom: 12px; }
}
#tc-consent-prefs .elementor-heading-title[tabindex="-1"]:focus { box-shadow: none !important; }
@media (max-width: 767px) { #tc-consent-banner .tc-cb-text, #tc-consent-banner .tc-cb-text p { font-size: 13px !important; line-height: 1.45 !important; } #tc-consent-banner .tc-cb-state--initial { gap: 12px !important; } }
#tc-consent-prefs .tc-cp-panehead { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; }
#tc-consent-prefs .tc-cp-panehead > .e-con { --width: auto; flex: 1 1 auto !important; min-width: 0; }
#tc-consent-prefs .tc-cp-panehead > .elementor-widget { width: auto !important; flex: 0 0 auto; }
#tc-consent-prefs .tc-cp-panel { flex-wrap: nowrap !important; }
#tc-consent-prefs .tc-cp-panel > .tc-cp-head, #tc-consent-prefs .tc-cp-panel > .tc-cp-actions { flex: 0 0 auto !important; }
#tc-consent-prefs .tc-cp-panel > .tc-cp-body { flex: 1 1 auto !important; min-height: 0; }
#tc-consent-prefs .tc-cp-nav, #tc-consent-prefs .tc-cp-panes, #tc-consent-prefs .tc-cp-pane { flex-wrap: nowrap !important; }
#tc-consent-prefs .tc-cp-nav > .e-con, #tc-consent-prefs .tc-cp-pane > * { flex-shrink: 0; }
#tc-consent-prefs .tc-cp-navrow { flex-wrap: nowrap !important; }
#tc-consent-prefs .tc-cp-navrow > .tc-cp-tab { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
#tc-consent-prefs .tc-cp-navrow > .tc-cp-navswitch { flex: 0 0 auto; width: auto !important; }