/*
 * Tangerine Cookies — banner + modal styles.
 * Matches the Tangerine Design theme palette (Inter, accent #ea580c).
 * Works on any theme — uses local CSS variables, not theme tokens.
 */

.tck-banner,
.tck-modal-backdrop {
	--tck-bg:        #ffffff;
	--tck-bg-soft:   #f6f7f9;
	--tck-text:      #1d2327;
	--tck-muted:     #6b7280;
	--tck-border:    #e3e5e8;
	--tck-accent:    #ea580c;
	--tck-accent-2:  #c2410c;
	--tck-radius:    8px;
	--tck-shadow:    0 8px 32px rgba(0,0,0,.12);
	--tck-font:      -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-family:     var(--tck-font);
	color:           var(--tck-text);
	box-sizing:      border-box;
	line-height:     1.5;
	font-size:       14px;
}
.tck-banner *,
.tck-modal-backdrop * { box-sizing: border-box; }

/* Dark theme override */
.tck-banner.tck-theme-dark,
.tck-modal-backdrop.tck-theme-dark {
	--tck-bg:      #1a1a1a;
	--tck-bg-soft: #262626;
	--tck-text:    #fafafa;
	--tck-muted:   #a3a3a3;
	--tck-border:  #2d2d2d;
}
@media (prefers-color-scheme: dark) {
	.tck-banner.tck-theme-auto,
	.tck-modal-backdrop.tck-theme-auto {
		--tck-bg:      #1a1a1a;
		--tck-bg-soft: #262626;
		--tck-text:    #fafafa;
		--tck-muted:   #a3a3a3;
		--tck-border:  #2d2d2d;
	}
}

/* ------------------------------------------------------------------ banner */
.tck-banner {
	position: fixed;
	z-index: 99998;
	max-width: 540px;
	background: var(--tck-bg);
	color: var(--tck-text);
	border: 1px solid var(--tck-border);
	border-radius: var(--tck-radius);
	box-shadow: var(--tck-shadow);
	padding: 18px 20px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .2s ease, transform .25s ease;
}
.tck-banner.is-visible { opacity: 1; transform: translateY(0); }

.tck-banner.tck-pos-bottom        { left: 50%; bottom: 20px; transform: translate(-50%, 20px); }
.tck-banner.tck-pos-bottom.is-visible { transform: translate(-50%, 0); }
.tck-banner.tck-pos-bottom-left   { left: 20px; bottom: 20px; }
.tck-banner.tck-pos-bottom-right  { right: 20px; bottom: 20px; }
.tck-banner.tck-pos-center        { left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 20px)); }
.tck-banner.tck-pos-center.is-visible { transform: translate(-50%, -50%); }

.tck-banner__inner { display: flex; flex-direction: column; gap: 14px; }
.tck-banner__title { display: block; font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.tck-banner__msg   { margin: 0; color: var(--tck-muted); font-size: 13.5px; }
.tck-banner__msg a { color: var(--tck-accent); text-decoration: underline; }
.tck-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ modal */
.tck-modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.42);
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	opacity: 0;
	transition: opacity .18s ease;
}
.tck-modal-backdrop.is-open { opacity: 1; }

.tck-modal {
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	background: var(--tck-bg);
	color: var(--tck-text);
	border-radius: var(--tck-radius);
	box-shadow: var(--tck-shadow);
	display: flex; flex-direction: column;
	overflow: hidden;
	transform: translateY(12px);
	transition: transform .22s ease;
}
.tck-modal-backdrop.is-open .tck-modal { transform: translateY(0); }

.tck-modal__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--tck-border);
}
.tck-modal__head strong { font-size: 16px; font-weight: 600; }
.tck-modal__close {
	background: transparent; border: 0; cursor: pointer;
	font-size: 22px; line-height: 1;
	color: var(--tck-muted); padding: 4px 8px; border-radius: 4px;
}
.tck-modal__close:hover { color: var(--tck-text); background: var(--tck-bg-soft); }

.tck-modal__body { padding: 16px 20px; overflow-y: auto; }
.tck-modal__intro { margin: 0 0 16px; color: var(--tck-muted); font-size: 13px; }

.tck-modal__foot {
	display: flex; justify-content: flex-end; gap: 8px;
	padding: 12px 20px;
	border-top: 1px solid var(--tck-border);
	background: var(--tck-bg-soft);
}

/* ------------------------------------------------------------------ category card */
.tck-cat {
	padding: 12px 14px;
	border: 1px solid var(--tck-border);
	border-radius: 6px;
	margin-bottom: 10px;
}
.tck-cat__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 4px;
}
.tck-cat__toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.tck-cat__toggle input { width: 38px; height: 22px; position: relative; appearance: none; background: var(--tck-border); border-radius: 999px; cursor: pointer; transition: background .15s; }
.tck-cat__toggle input::after {
	content: ""; position: absolute; left: 2px; top: 2px;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; transition: transform .15s;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tck-cat__toggle input:checked { background: var(--tck-accent); }
.tck-cat__toggle input:checked::after { transform: translateX(16px); }
.tck-cat__toggle input:disabled { opacity: .55; cursor: not-allowed; }
.tck-cat__name { font-weight: 600; font-size: 13.5px; }
.tck-cat__tag  { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 11px; color: var(--tck-muted); background: var(--tck-bg-soft); padding: 2px 8px; border-radius: 999px; }
.tck-cat__desc { margin: 4px 0 4px; color: var(--tck-muted); font-size: 12.5px; }
.tck-cat__svc  { margin: 4px 0 0; color: var(--tck-muted); font-size: 11px; font-family: ui-monospace, monospace; }

/* ------------------------------------------------------------------ buttons */
.tck-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--tck-text);
	font-family: inherit; font-size: 13px; font-weight: 500;
	cursor: pointer; text-decoration: none;
	transition: background .12s, border-color .12s, transform .05s;
}
.tck-btn:active { transform: translateY(1px); }
.tck-btn--primary { background: var(--tck-accent); color: #fff; border-color: var(--tck-accent); }
.tck-btn--primary:hover { background: var(--tck-accent-2); border-color: var(--tck-accent-2); }
.tck-btn--ghost   { border-color: var(--tck-border); color: var(--tck-text); }
.tck-btn--ghost:hover { background: var(--tck-bg-soft); }

/* ------------------------------------------------------------------ floating cookie button */
.tck-fab {
	--tck-fab-bg: #ea580c;
	--tck-fab-color: #fff7ee;
	position: fixed;
	z-index: 99997;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tck-fab-bg);
	color: var(--tck-fab-color);
	box-shadow:
		0 6px 16px rgba(234,88,12,.32),
		0 2px 6px rgba(0,0,0,.12),
		0 0 0 2px rgba(255,255,255,.6);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	opacity: 0;
	transform: translateY(8px) scale(.92);
	transition: opacity .25s ease, transform .25s ease, box-shadow .2s, background .15s;
}
.tck-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.tck-fab:hover {
	background: #c2410c;
	box-shadow:
		0 8px 22px rgba(234,88,12,.42),
		0 2px 8px rgba(0,0,0,.16),
		0 0 0 2px rgba(255,255,255,.7);
	transform: translateY(-2px) scale(1.02);
}
.tck-fab:focus-visible { outline: 3px solid rgba(234,88,12,.4); outline-offset: 3px; }
.tck-fab:active { transform: translateY(0) scale(.98); }
.tck-fab svg { width: 28px; height: 28px; display: block; }

.tck-fab--bottom-left  { left: 20px;  bottom: 20px; }
.tck-fab--bottom-right { right: 20px; bottom: 20px; }

/* On mobile, pull the FAB in a bit so it doesn't overlap the banner. */
@media (max-width: 560px) {
	.tck-fab { width: 46px; height: 46px; }
	.tck-fab svg { width: 24px; height: 24px; }
	.tck-fab--bottom-left  { left: 14px;  bottom: 14px; }
	.tck-fab--bottom-right { right: 14px; bottom: 14px; }
}

/* "Reopen" link button used in footer or via shortcode */
.tck-reopen {
	background: transparent; border: 0; padding: 0; margin: 0;
	color: inherit; cursor: pointer; font: inherit; text-decoration: underline;
	text-underline-offset: 2px;
}
.tck-reopen:hover { color: var(--tck-accent); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 560px) {
	/* All positions collapse to a bottom drawer on phones — both for the default
	   "bottom" and the "center" mode, otherwise the center transform leaves the
	   banner half-off-screen on narrow viewports. */
	.tck-banner,
	.tck-banner.tck-pos-bottom,
	.tck-banner.tck-pos-bottom-left,
	.tck-banner.tck-pos-bottom-right,
	.tck-banner.tck-pos-center {
		left: 12px !important;
		right: 12px !important;
		top: auto !important;
		bottom: 12px !important;
		max-width: none !important;
		transform: translateY(20px) !important;
	}
	.tck-banner.is-visible,
	.tck-banner.tck-pos-bottom.is-visible,
	.tck-banner.tck-pos-bottom-left.is-visible,
	.tck-banner.tck-pos-bottom-right.is-visible,
	.tck-banner.tck-pos-center.is-visible {
		transform: translateY(0) !important;
	}
	.tck-banner__actions { flex-direction: column; }
	.tck-banner__actions .tck-btn { width: 100%; }

	/* Modal becomes a bottom sheet — explicit positioning defeats any parent
	   transform that breaks `inset:0` based fixed positioning. */
	.tck-modal-backdrop {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		padding: 0 !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}
	.tck-modal {
		width: 100% !important;
		max-width: none !important;
		max-height: 92vh !important;
		border-radius: 16px 16px 0 0 !important;
		transform: translateY(100%) !important;
		transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
	}
	.tck-modal-backdrop.is-open .tck-modal {
		transform: translateY(0) !important;
	}
	.tck-modal__head {
		padding: 14px 18px !important;
		position: relative;
	}
	/* Drag-handle visual */
	.tck-modal__head::before {
		content: "";
		position: absolute;
		top: 6px; left: 50%;
		transform: translateX(-50%);
		width: 36px; height: 4px;
		border-radius: 2px;
		background: var(--tck-border);
	}
	.tck-modal__body { padding: 12px 18px 18px !important; }
	.tck-modal__foot {
		padding: 12px 18px env(safe-area-inset-bottom, 12px) !important;
		flex-direction: column-reverse !important;
		gap: 8px !important;
	}
	.tck-modal__foot .tck-btn { width: 100%; padding: 12px 16px; font-size: 14px; }
	.tck-cat { padding: 12px 12px; }
}