/*
 * IKAR Tools · Corner Dock — the widget itself, the same file for the site and
 * the admin preview.
 *
 * Specificity. The widget lands on someone else's theme that already styled
 * button, a and input, so there is a reset (.ikar-cd button and the like).
 * That selector is (0,1,1) — stronger than a single class like .ikar-cd-btn
 * (0,1,0), which would lose to the reset and stay without a background.
 * So every component rule starts with ".ikar-cd ": (0,2,x) beats both the
 * reset and ordinary theme rules. Keep the prefix.
 *
 * !important. Specificity does not help against a theme that puts
 * !important on button/a/input (page builders often force border-radius and
 * padding on every button). So every visual property of buttons, links and
 * fields here has !important too — otherwise the round buttons turn square on
 * some sites. Change such a value together with its !important, never instead.
 *
 * Buttons, links and fields in the markup (see widget-render.js):
 * .ikar-cd-btn, .ikar-cd-item (and .ikar-cd-empty), .ikar-cd-send, .ikar-cd-back,
 * .ikar-cd-plink — <button> or <a>; text, tel and checkbox inputs and the
 * textarea inside .ikar-cd-form.
 */

.ikar-cd {
	--ikar-cd-ease: cubic-bezier(.2, .85, .25, 1);
	--ikar-cd-ink: #22201f;
	--ikar-cd-ink-soft: #585251;
	--ikar-cd-muted: #6d655f;
	--ikar-cd-surface: #f6f4f2;
	--ikar-cd-line: #dcd7d3;
	--ikar-cd-line-soft: #e9e5e1;
	--ikar-cd-shadow-lg: 0 20px 44px -22px rgba(34, 32, 31, .4);
	--ikar-cd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ikar-cd-font-mono: ui-monospace, Menlo, Consolas, monospace;
	font-family: var(--ikar-cd-font) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-align: left !important;
	color: var(--ikar-cd-ink) !important;
}

/* ── Reset of theme styles (see specificity and !important above) ── */
.ikar-cd, .ikar-cd *, .ikar-cd *::before, .ikar-cd *::after { box-sizing: border-box !important; }
.ikar-cd p, .ikar-cd h4, .ikar-cd ul, .ikar-cd ol { margin: 0 !important; padding: 0 !important; }
.ikar-cd button {
	font: inherit !important; color: inherit !important; cursor: pointer !important;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	padding: 0 !important; margin: 0 !important; box-shadow: none !important;
	text-transform: none !important; letter-spacing: normal !important; text-align: left !important;
	width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
}
.ikar-cd input {
	font: inherit !important; color: inherit !important; border-radius: 0 !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
}
.ikar-cd a {
	text-decoration: none !important; color: inherit !important; border: 0 !important;
	border-radius: 0 !important; box-shadow: none !important; text-transform: none !important;
}
.ikar-cd svg { display: block !important; }
.ikar-cd img { max-width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* Corner and offsets come from the settings: corner-dock.js puts them into
   --ikar-cd-x/-y (desktop) and --ikar-cd-mx/-my (phone) on the container,
   and the side into data-side. */
#ikar-cd-root.ikar-cd {
	position: fixed !important;
	right: var(--ikar-cd-x, 24px) !important;
	bottom: var(--ikar-cd-y, 24px) !important;
	z-index: 999999 !important;
}
#ikar-cd-root.ikar-cd[data-side="left"] { right: auto !important; left: var(--ikar-cd-x, 24px) !important; }
/* Narrow screens: a plain media query on the site (the admin preview
   switches with the .ikar-cd-mobile class instead). */
@media (max-width: 640px) {
	#ikar-cd-root.ikar-cd { right: var(--ikar-cd-mx, 14px) !important; bottom: var(--ikar-cd-my, 14px) !important; }
	#ikar-cd-root.ikar-cd[data-side="left"] { right: auto !important; left: var(--ikar-cd-mx, 14px) !important; }
	#ikar-cd-root .ikar-cd-wgt { --ikar-cd-btn: calc(52px * var(--ikar-cd-size, 1)); }
	#ikar-cd-root .ikar-cd-form { width: 262px !important; }
}

.ikar-cd.ikar-cd-wgt {
	position: relative !important;
	pointer-events: auto !important;
	/* --ikar-cd-size — button size from the settings, set by widget-render.js */
	--ikar-cd-btn: calc(56px * var(--ikar-cd-size, 1));
	--ikar-cd-accent: #0e7c56;
	--ikar-cd-on: #ffffff;
	--ikar-cd-deep: color-mix(in srgb, var(--ikar-cd-accent) 84%, #000);
	--ikar-cd-soft: color-mix(in srgb, var(--ikar-cd-on) 17%, transparent);
	--ikar-cd-edge: color-mix(in srgb, var(--ikar-cd-on) 22%, transparent);
}
.ikar-cd-mobile .ikar-cd.ikar-cd-wgt { --ikar-cd-btn: calc(52px * var(--ikar-cd-size, 1)); }

.ikar-cd .ikar-cd-stack { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 10px !important; }
.ikar-cd[data-labels="on"] .ikar-cd-stack { gap: 14px !important; }
.ikar-cd .ikar-cd-slot { display: flex !important; align-items: center !important; gap: 9px !important; flex-direction: row-reverse !important; }
.ikar-cd[data-labels="on"] .ikar-cd-slot { position: relative !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; }
.ikar-cd .ikar-cd-btn {
	position: relative !important; width: var(--ikar-cd-btn) !important; height: var(--ikar-cd-btn) !important;
	border-radius: 50% !important; border: 0 !important;
	background: var(--ikar-cd-accent) !important; color: var(--ikar-cd-on) !important; cursor: pointer !important;
	display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--ikar-cd-accent) 80%, #000) !important;
	transition: background .2s;
}
.ikar-cd .ikar-cd-btn svg { width: calc(24px * var(--ikar-cd-size, 1)) !important; height: calc(24px * var(--ikar-cd-size, 1)) !important; }
.ikar-cd .ikar-cd-btn img { width: calc(25px * var(--ikar-cd-size, 1)) !important; height: calc(25px * var(--ikar-cd-size, 1)) !important; object-fit: contain !important; }
.ikar-cd .ikar-cd-face, .ikar-cd .ikar-cd-cross {
	position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important;
	transition: opacity .2s, transform .3s var(--ikar-cd-ease);
}
.ikar-cd .ikar-cd-cross { opacity: 0 !important; transform: rotate(-45deg) scale(.6) !important; }
.ikar-cd .ikar-cd-slot.is-on .ikar-cd-btn { background: var(--ikar-cd-deep) !important; }
.ikar-cd .ikar-cd-slot.is-on .ikar-cd-face { opacity: 0 !important; transform: rotate(45deg) scale(.6) !important; }
.ikar-cd .ikar-cd-slot.is-on .ikar-cd-cross { opacity: 1 !important; transform: none !important; }
.ikar-cd .ikar-cd-btn::after {
	content: ""; position: absolute !important; inset: 0 !important; border-radius: 50% !important;
	border: 2px solid var(--ikar-cd-accent) !important; pointer-events: none !important;
	/* opacity has no !important on purpose: the ikarCdPulse animation changes
	   it, and an !important rule always beats @keyframes — the ring would
	   never show. A theme cannot reach a ::after of ours anyway. */
	opacity: 0;
}
.ikar-cd .ikar-cd-label {
	background: var(--ikar-cd-accent) !important; color: var(--ikar-cd-on) !important; border-radius: 999px !important;
	padding: 5px 12px !important; font-size: 12.5px !important; font-weight: 500 !important; white-space: nowrap !important;
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ikar-cd-accent) 80%, #000) !important;
}
.ikar-cd[data-labels="on"] .ikar-cd-label {
	position: absolute !important; left: 50% !important; bottom: -4px !important; transform: translateX(-50%) !important; z-index: 2 !important;
	font-size: 10px !important; font-weight: 700 !important; letter-spacing: .01em !important; padding: 3px 10px !important;
	border: 1.5px solid var(--ikar-cd-on) !important;
	box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .55) !important;
}
.ikar-cd[data-labels="on"][data-shift="on"] .ikar-cd-btn .ikar-cd-face,
.ikar-cd[data-labels="on"][data-shift="on"] .ikar-cd-btn .ikar-cd-cross { padding-bottom: 15px !important; }
.ikar-cd[data-labels="off"] .ikar-cd-label { display: none !important; }

.ikar-cd .ikar-cd-btn.ikar-cd-att-pulse::after { animation: ikarCdPulse .9s ease-out; }
@keyframes ikarCdPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.ikar-cd .ikar-cd-btn.ikar-cd-att-shake { animation: ikarCdShake .75s ease-in-out; }
@keyframes ikarCdShake {
	0%, 100% { transform: rotate(0); } 14% { transform: rotate(-10deg); } 30% { transform: rotate(9deg); }
	46% { transform: rotate(-6deg); } 62% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); }
}
.ikar-cd .ikar-cd-btn.ikar-cd-att-bounce { animation: ikarCdBounce .85s var(--ikar-cd-ease); }
@keyframes ikarCdBounce {
	0%, 100% { transform: translateY(0); } 28% { transform: translateY(-13px); }
	52% { transform: translateY(0); } 72% { transform: translateY(-5px); }
}

.ikar-cd .ikar-cd-list {
	position: absolute !important; right: 0 !important; bottom: calc(100% + 12px) !important;
	display: flex !important; flex-direction: column !important; gap: 9px !important; align-items: flex-end !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.ikar-cd .ikar-cd-item {
	display: flex !important; align-items: center !important; gap: 10px !important; height: 46px !important; padding: 0 7px 0 15px !important;
	border-radius: 999px !important; background: var(--ikar-cd-accent) !important;
	border: 1px solid var(--ikar-cd-edge) !important;
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ikar-cd-accent) 80%, #000) !important;
	color: var(--ikar-cd-on) !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important;
	text-decoration: none !important; cursor: pointer !important;
	transition: background .16s; animation-delay: calc(var(--i, 0) * 45ms);
}
.ikar-cd .ikar-cd-item:hover, .ikar-cd .ikar-cd-item:focus { background: var(--ikar-cd-deep) !important; color: var(--ikar-cd-on) !important; }
.ikar-cd[data-appear="rise"] .ikar-cd-item { animation: ikarCdRise .34s var(--ikar-cd-ease) both; }
@keyframes ikarCdRise { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.ikar-cd[data-appear="curtain"] .ikar-cd-item { animation: ikarCdCurtain .44s cubic-bezier(.3, 1.35, .4, 1) both; transform-origin: top center !important; }
@keyframes ikarCdCurtain { from { opacity: 0; transform: translateY(-26px) scaleY(.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.ikar-cd[data-appear="flip"] .ikar-cd-item { animation: ikarCdFlip .42s var(--ikar-cd-ease) both; transform-origin: bottom right !important; }
@keyframes ikarCdFlip { from { opacity: 0; transform: perspective(500px) rotateX(-75deg); } to { opacity: 1; transform: none; } }
.ikar-cd[data-appear="fade"] .ikar-cd-item { animation: ikarCdFade .34s var(--ikar-cd-ease) both; }
@keyframes ikarCdFade { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ikar-cd .ikar-cd-mini {
	width: 32px !important; height: 32px !important; border-radius: 50% !important; display: grid !important; place-items: center !important;
	flex: none !important; color: var(--ikar-cd-on) !important; background: var(--ikar-cd-soft) !important;
}
.ikar-cd .ikar-cd-mini svg { width: 18px !important; height: 18px !important; }
.ikar-cd .ikar-cd-mini img { width: 19px !important; height: 19px !important; object-fit: contain !important; }
/* The widget in the left corner: everything mirrored. Rules with
   [data-labels="on"] are repeated with [data-side], or the one lower in the
   file would win at equal specificity. */
.ikar-cd[data-side="left"] .ikar-cd-stack { align-items: flex-start !important; }
.ikar-cd[data-side="left"] .ikar-cd-slot { flex-direction: row !important; }
.ikar-cd[data-side="left"][data-labels="on"] .ikar-cd-slot { flex-direction: column !important; }
.ikar-cd[data-side="left"] .ikar-cd-list { right: auto !important; left: 0 !important; align-items: flex-start !important; }
.ikar-cd[data-side="left"] .ikar-cd-item { flex-direction: row-reverse !important; padding: 0 15px 0 7px !important; }
.ikar-cd[data-side="left"][data-appear="flip"] .ikar-cd-item { transform-origin: bottom left !important; }
.ikar-cd .ikar-cd-item.ikar-cd-empty {
	display: flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; padding: 0 15px !important;
	border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
	border: 1px dashed var(--ikar-cd-edge) !important; color: var(--ikar-cd-on) !important; opacity: .75 !important; cursor: default !important;
}

.ikar-cd .ikar-cd-form {
	/* The cap lets the whole form fit without scrolling: the request field does
	   not grow, so the height is fixed (about 440px with the error line).
	   The vh part is a safety net for low screens. */
	width: 290px !important; max-height: min(76vh, 470px) !important; overflow-y: auto !important; background: #fff !important;
	border: 1px solid var(--ikar-cd-line) !important; border-radius: 16px !important; box-shadow: var(--ikar-cd-shadow-lg) !important;
	padding: 15px 16px 16px !important; display: flex !important; flex-direction: column !important; gap: 9px !important; text-align: left !important;
	color: var(--ikar-cd-ink) !important; animation: ikarCdRise .34s var(--ikar-cd-ease) both;
}
.ikar-cd-mobile .ikar-cd .ikar-cd-form { width: 262px !important; }
/* A flex column with max-height shrinks its children when the content is
   taller — the send button kept its background but lost its text. On a low
   screen the form scrolls instead. */
.ikar-cd .ikar-cd-form > * { flex: none !important; }
.ikar-cd .ikar-cd-form h4 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--ikar-cd-ink) !important; }
.ikar-cd .ikar-cd-sub2 { margin: -5px 0 3px !important; font-size: 11.5px !important; color: var(--ikar-cd-muted) !important; line-height: 1.35 !important; }
.ikar-cd .ikar-cd-form label {
	display: flex !important; flex-direction: column !important; gap: 4px !important; font-family: var(--ikar-cd-font-mono) !important;
	font-size: 9.5px !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: var(--ikar-cd-muted) !important;
	font-weight: 400 !important; margin: 0 !important;
}
.ikar-cd .ikar-cd-form input[type=text], .ikar-cd .ikar-cd-form input[type=tel] {
	width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
	font-family: var(--ikar-cd-font) !important; font-size: 14px !important; color: var(--ikar-cd-ink) !important; background: var(--ikar-cd-surface) !important;
	border: 1px solid var(--ikar-cd-line) !important; border-radius: 9px !important; padding: 9px 11px !important;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
.ikar-cd .ikar-cd-form input[type=text]:focus, .ikar-cd .ikar-cd-form input[type=tel]:focus {
	outline: none !important; border-color: var(--ikar-cd-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ikar-cd-accent) 26%, transparent) !important;
}
.ikar-cd .ikar-cd-form input.ikar-cd-bad { border-color: #a3231b !important; background: #fdf3f2 !important; }
/* The optional request field appears once the phone is complete; without
   an animation the form would jump. label has display with !important
   above, so [hidden] needs it too. */
.ikar-cd .ikar-cd-form label[hidden] { display: none !important; }
.ikar-cd .ikar-cd-form textarea {
	/* Exactly three lines: the field does not grow by mouse or by text, long
	   text scrolls inside. Height = 3 lines × 1.4em + padding 9+9 + borders
	   1+1 (border-box). Change line-height or padding — recount this. */
	width: 100% !important; margin: 0 !important; resize: none !important; overflow-y: auto !important;
	height: calc(4.2em + 20px) !important; min-height: calc(4.2em + 20px) !important; max-height: calc(4.2em + 20px) !important;
	font-family: var(--ikar-cd-font) !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--ikar-cd-ink) !important;
	background: var(--ikar-cd-surface) !important; border: 1px solid var(--ikar-cd-line) !important; border-radius: 9px !important;
	padding: 9px 11px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
.ikar-cd .ikar-cd-form textarea:focus {
	outline: none !important; border-color: var(--ikar-cd-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ikar-cd-accent) 26%, transparent) !important;
}
.ikar-cd .ikar-cd-form .ikar-cd-need { animation: ikarCdNeedIn .26s var(--ikar-cd-ease) both; }
@keyframes ikarCdNeedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ikar-cd .ikar-cd-err { margin: -4px 0 0 !important; font-size: 11.5px !important; color: #a3231b !important; }
.ikar-cd .ikar-cd-consent {
	flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; font-family: var(--ikar-cd-font) !important;
	font-size: 11px !important; text-transform: none !important; letter-spacing: 0 !important;
	color: var(--ikar-cd-muted) !important; line-height: 1.4 !important; cursor: pointer !important;
}
/* The consent text sits in a <span> inside <label>. It would get the
   typography only by inheritance, and inheritance loses to any direct theme
   rule (form span, label span) — so the span gets the properties too. */
.ikar-cd .ikar-cd-consent, .ikar-cd .ikar-cd-consent span {
	font-family: var(--ikar-cd-font) !important; font-size: 11px !important; font-weight: 400 !important;
	text-transform: none !important; letter-spacing: 0 !important; color: var(--ikar-cd-muted) !important;
	line-height: 1.4 !important;
}
.ikar-cd .ikar-cd-consent input[type=checkbox] {
	accent-color: var(--ikar-cd-accent) !important; margin: 1px 0 0 !important; width: 14px !important; height: 14px !important; flex: none !important;
	appearance: auto !important; -webkit-appearance: checkbox !important; position: static !important; opacity: 1 !important;
}
.ikar-cd .ikar-cd-form .ikar-cd-plink {
	border: 0 !important; background: transparent !important; padding: 0 !important; font: inherit !important; color: var(--ikar-cd-accent) !important;
	text-decoration: underline !important; text-underline-offset: 2px !important; cursor: pointer !important;
}
.ikar-cd .ikar-cd-send {
	margin: 4px 0 0 !important; border: 0 !important; background: var(--ikar-cd-accent) !important; color: var(--ikar-cd-on) !important; border-radius: 10px !important;
	padding: 11px !important; font-size: 14px !important; font-weight: 500 !important; width: 100% !important; cursor: pointer !important;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background .16s;
	/* The owner may set a longer label: the height follows the text. */
	font-family: var(--ikar-cd-font) !important; line-height: 1.3 !important; height: auto !important; min-height: 0 !important;
	white-space: normal !important;
}
.ikar-cd .ikar-cd-send:hover { background: var(--ikar-cd-deep) !important; color: var(--ikar-cd-on) !important; }
.ikar-cd .ikar-cd-send[disabled] { opacity: .6 !important; cursor: default !important; }
.ikar-cd .ikar-cd-back {
	border: 0 !important; background: transparent !important; color: var(--ikar-cd-muted) !important; font-size: 12.5px !important;
	cursor: pointer !important; padding: 0 !important; text-align: center !important; width: auto !important;
}
.ikar-cd .ikar-cd-done { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
.ikar-cd .ikar-cd-done .ikar-cd-tick {
	width: 36px !important; height: 36px !important; border-radius: 50% !important;
	background: color-mix(in srgb, var(--ikar-cd-accent) 13%, transparent) !important; color: var(--ikar-cd-accent) !important;
	display: grid !important; place-items: center !important;
}
.ikar-cd .ikar-cd-done .ikar-cd-tick svg { width: 20px !important; height: 20px !important; }
.ikar-cd .ikar-cd-done b { font-size: 17px !important; font-weight: 700 !important; color: var(--ikar-cd-ink) !important; }
/* One sentence per line, but one paragraph: a smaller gap than between blocks. */
.ikar-cd .ikar-cd-done .ikar-cd-donetext {
	display: flex !important; flex-direction: column !important; gap: 3px !important; align-items: flex-start !important;
}
.ikar-cd .ikar-cd-done p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--ikar-cd-ink-soft) !important; }

@media (prefers-reduced-motion: reduce) {
	.ikar-cd *, .ikar-cd *::before, .ikar-cd *::after {
		transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
}