/* Ocean Contact – all rules are scoped to #ocean-contact / .ocean-contact. */

.ocean-contact {
	--ocean-contact-primary: #16873a;
	--ocean-contact-primary-light: var(--ocean-contact-primary);
	--ocean-contact-primary-dark: var(--ocean-contact-primary);
	--ocean-contact-primary-soft: #eef7f1;
	--ocean-contact-primary-line: #cfe6d7;
	--ocean-contact-halo: rgba(22, 135, 58, 0.34);
	--ocean-contact-offset-desktop: 24px;
	--ocean-contact-offset-mobile: 88px;
	--ocean-contact-offset: var(--ocean-contact-offset-desktop);
	--ocean-contact-side: 20px;
	--ocean-contact-size: 66px;
	--ocean-contact-gap: 14px;
	--ocean-contact-panel-width: 352px;
	--ocean-contact-breath: 3s;
	--ocean-contact-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ocean-contact-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ocean-contact-ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
	--ocean-contact-whatsapp: #25d366;
	--ocean-contact-whatsapp-ink: #138a43;
	--ocean-contact-whatsapp-soft: #e9f9ef;
	--ocean-contact-whatsapp-line: #c4ecd3;
	--ocean-contact-heading: #101828;
	--ocean-contact-text: #344054;
	--ocean-contact-muted: #5d6779;
	--ocean-contact-border: #e6e9ee;

	/* Physical right corner regardless of page direction. */
	position: fixed;
	z-index: 9990;
	top: auto;
	right: calc(var(--ocean-contact-side) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--ocean-contact-offset) + env(safe-area-inset-bottom, 0px));
	left: auto;
	width: var(--ocean-contact-size);
	height: var(--ocean-contact-size);
	margin: 0;
	padding: 0;
	direction: rtl;
	text-align: right;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ocean-contact-text);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ocean-contact {
		--ocean-contact-primary-light: color-mix(in srgb, var(--ocean-contact-primary) 80%, #fff);
		--ocean-contact-primary-dark: color-mix(in srgb, var(--ocean-contact-primary) 78%, #000);
		--ocean-contact-primary-soft: color-mix(in srgb, var(--ocean-contact-primary) 7%, #fff);
		--ocean-contact-primary-line: color-mix(in srgb, var(--ocean-contact-primary) 24%, #fff);
		--ocean-contact-halo: color-mix(in srgb, var(--ocean-contact-primary) 34%, transparent);
	}
}

/* Hidden until the script is ready, so a non-working button is never shown. */
.ocean-contact:not(.ocean-contact--ready) {
	display: none;
}

.ocean-contact *,
.ocean-contact *::before,
.ocean-contact *::after {
	box-sizing: border-box;
}

.ocean-contact .ocean-contact__svg {
	display: block;
	flex: none;
	max-width: none;
	overflow: visible;
}

/*
 * Launcher layers, back to front:
 *   fx (halo + ring) – idle effects, faded out while open
 *   breath           – idle scale loop
 *   surface          – gradient, shadow and press feedback
 *   icon / label     – never scaled
 * The button itself stays a fixed, transparent hit area.
 */

.ocean-contact .ocean-contact__launcher {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: var(--ocean-contact-size);
	height: var(--ocean-contact-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 6px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	box-shadow: none;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.ocean-contact .ocean-contact__launcher:hover,
.ocean-contact .ocean-contact__launcher:focus,
.ocean-contact .ocean-contact__launcher:active {
	background: transparent;
	color: #fff;
}

.ocean-contact .ocean-contact__launcher:focus {
	outline: none;
}

.ocean-contact .ocean-contact__launcher:focus-visible {
	outline: 3px solid var(--ocean-contact-primary-dark);
	outline-offset: 4px;
}

.ocean-contact .ocean-contact__launcher-fx,
.ocean-contact .ocean-contact__launcher-halo,
.ocean-contact .ocean-contact__launcher-ring,
.ocean-contact .ocean-contact__launcher-breath,
.ocean-contact .ocean-contact__launcher-surface {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}

.ocean-contact .ocean-contact__launcher-fx {
	z-index: -2;
	display: none;
	transition: opacity 220ms ease;
}

.ocean-contact .ocean-contact__launcher-halo {
	inset: -9px;
	background: radial-gradient(closest-side, var(--ocean-contact-halo) 62%, transparent 100%);
	opacity: 0.45;
	transform: scale(0.94);
}

.ocean-contact .ocean-contact__launcher-ring {
	border: 2px solid var(--ocean-contact-primary);
	opacity: 0;
}

.ocean-contact .ocean-contact__launcher-breath {
	z-index: -1;
}

.ocean-contact .ocean-contact__launcher-surface {
	overflow: hidden;
	background: var(--ocean-contact-primary);
	background-image: linear-gradient(150deg, var(--ocean-contact-primary-light) 0%, var(--ocean-contact-primary) 50%, var(--ocean-contact-primary-dark) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -2px 5px rgba(0, 0, 0, 0.12),
		0 1px 2px rgba(16, 24, 40, 0.14),
		0 8px 22px -8px rgba(16, 24, 40, 0.34);
	transition: transform 220ms var(--ocean-contact-ease-out);
}

/* Interaction overlay: brightens on hover, darkens while open. */
.ocean-contact .ocean-contact__launcher-surface::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #fff;
	opacity: 0;
	transition: opacity 180ms ease, background-color 180ms ease;
}

.ocean-contact .ocean-contact__launcher:active .ocean-contact__launcher-surface {
	transform: scale(0.94);
	transition-duration: 90ms;
}

.ocean-contact .ocean-contact__launcher[aria-expanded="true"] .ocean-contact__launcher-surface::after {
	background: #000;
	opacity: 0.1;
}

@media (hover: hover) {
	.ocean-contact .ocean-contact__launcher:hover .ocean-contact__launcher-surface::after {
		opacity: 0.1;
	}

	.ocean-contact .ocean-contact__launcher[aria-expanded="true"]:hover .ocean-contact__launcher-surface::after {
		background: #000;
		opacity: 0.16;
	}
}

.ocean-contact .ocean-contact__launcher-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	line-height: 0;
}

.ocean-contact .ocean-contact__launcher-glyph {
	grid-area: 1 / 1;
	display: block;
	line-height: 0;
	transition:
		opacity 180ms ease,
		transform 260ms var(--ocean-contact-ease-out);
}

.ocean-contact .ocean-contact__launcher-glyph--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.75);
}

.ocean-contact .ocean-contact__launcher[aria-expanded="true"] .ocean-contact__launcher-glyph--open {
	opacity: 0;
	transform: rotate(45deg) scale(0.75);
}

.ocean-contact .ocean-contact__launcher[aria-expanded="true"] .ocean-contact__launcher-glyph--close {
	opacity: 1;
	transform: none;
}

.ocean-contact .ocean-contact__launcher-label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: inherit;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

/* Breathing: one shared cycle drives the surface, halo and ring. */

.ocean-contact--attention .ocean-contact__launcher-fx {
	display: block;
}

.ocean-contact--attention .ocean-contact__launcher-breath {
	animation: ocean-contact-breathe var(--ocean-contact-breath) var(--ocean-contact-ease-breath) infinite;
}

.ocean-contact--attention .ocean-contact__launcher-halo {
	animation: ocean-contact-halo var(--ocean-contact-breath) var(--ocean-contact-ease-breath) infinite;
}

.ocean-contact--attention .ocean-contact__launcher-ring {
	animation: ocean-contact-ring var(--ocean-contact-breath) var(--ocean-contact-ease-out) infinite;
}

.ocean-contact--attention.is-open .ocean-contact__launcher-fx {
	opacity: 0;
}

.ocean-contact--attention.is-open .ocean-contact__launcher-breath,
.ocean-contact--attention.is-open .ocean-contact__launcher-halo,
.ocean-contact--attention.is-open .ocean-contact__launcher-ring,
.ocean-contact--attention.ocean-contact--paused .ocean-contact__launcher-breath,
.ocean-contact--attention.ocean-contact--paused .ocean-contact__launcher-halo,
.ocean-contact--attention.ocean-contact--paused .ocean-contact__launcher-ring {
	animation-play-state: paused;
}

@media (hover: hover) {
	.ocean-contact--attention .ocean-contact__launcher:hover .ocean-contact__launcher-breath,
	.ocean-contact--attention .ocean-contact__launcher:hover .ocean-contact__launcher-halo,
	.ocean-contact--attention .ocean-contact__launcher:hover .ocean-contact__launcher-ring {
		animation-play-state: paused;
	}
}

@keyframes ocean-contact-breathe {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.035);
	}
}

@keyframes ocean-contact-halo {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.94);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.08);
	}
}

@keyframes ocean-contact-ring {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	12% {
		opacity: 0.38;
		transform: scale(1.02);
	}
	72%,
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}

/* Panel – anchored to the launcher container, right edges aligned. */

.ocean-contact .ocean-contact__panel {
	position: absolute;
	top: auto;
	right: 0;
	bottom: calc(100% + var(--ocean-contact-gap));
	left: auto;
	width: var(--ocean-contact-panel-width);
	max-width: calc(100vw - (2 * var(--ocean-contact-side)) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
	max-height: calc(100vh - var(--ocean-contact-offset) - var(--ocean-contact-size) - var(--ocean-contact-gap) - 16px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--ocean-contact-border);
	border-radius: 22px;
	background: #fff;
	color: var(--ocean-contact-text);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.05),
		0 12px 28px -10px rgba(16, 24, 40, 0.16),
		0 32px 64px -20px rgba(16, 24, 40, 0.22);
	opacity: 0;
	transform: translateY(10px) scale(0.97);
	transform-origin: 100% 100%;
	transition:
		opacity 170ms var(--ocean-contact-ease-in),
		transform 190ms var(--ocean-contact-ease-in);
}

@supports (height: 100dvh) {
	.ocean-contact .ocean-contact__panel {
		max-height: calc(100dvh - var(--ocean-contact-offset) - var(--ocean-contact-size) - var(--ocean-contact-gap) - 16px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
	}
}

.ocean-contact .ocean-contact__panel[hidden] {
	display: none;
}

.ocean-contact .ocean-contact__panel.is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity 240ms var(--ocean-contact-ease-out),
		transform 270ms var(--ocean-contact-ease-out);
}

.ocean-contact .ocean-contact__panel:focus {
	outline: none;
}

.ocean-contact .ocean-contact__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 18px 16px;
	border-bottom: 1px solid var(--ocean-contact-primary-line);
	background: var(--ocean-contact-primary-soft);
	background-image: linear-gradient(180deg, var(--ocean-contact-primary-soft) 0%, #fff 100%);
}

.ocean-contact .ocean-contact__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ocean-contact-primary-line);
	border-radius: 12px;
	background: #fff;
	color: var(--ocean-contact-primary);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ocean-contact .ocean-contact__heading {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 1px;
}

.ocean-contact .ocean-contact__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ocean-contact-heading);
}

.ocean-contact .ocean-contact__title::before,
.ocean-contact .ocean-contact__title::after {
	content: none;
}

.ocean-contact .ocean-contact__description {
	margin: 3px 0 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--ocean-contact-muted);
}

.ocean-contact .ocean-contact__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	margin: -6px 0 0 -6px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ocean-contact-muted);
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.ocean-contact .ocean-contact__close:hover {
	background: rgba(16, 24, 40, 0.06);
	color: var(--ocean-contact-heading);
}

.ocean-contact .ocean-contact__close:active {
	transform: scale(0.92);
}

.ocean-contact .ocean-contact__close:focus {
	outline: none;
}

.ocean-contact .ocean-contact__close:focus-visible {
	outline: 2px solid var(--ocean-contact-primary);
	outline-offset: 1px;
}

/* Staggered reveal: header content, then each contact row (40ms apart). */

.ocean-contact .ocean-contact__header > *,
.ocean-contact .ocean-contact__list-item {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 120ms ease, transform 120ms ease;
}

.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__header > *,
.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item {
	opacity: 1;
	transform: none;
	transition:
		opacity 220ms var(--ocean-contact-ease-out) 40ms,
		transform 260ms var(--ocean-contact-ease-out) 40ms;
}

.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item:nth-child(1) {
	transition-delay: 80ms;
}

.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item:nth-child(2) {
	transition-delay: 120ms;
}

/* Contact rows */

.ocean-contact .ocean-contact__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 14px 14px 16px;
	list-style: none;
}

.ocean-contact .ocean-contact__list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ocean-contact .ocean-contact__list-item::before,
.ocean-contact .ocean-contact__list-item::marker {
	content: none;
}

.ocean-contact .ocean-contact__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 70px;
	margin: 0;
	padding: 12px 14px 12px 12px;
	border: 1px solid var(--ocean-contact-border);
	border-radius: 16px;
	background: #fff;
	color: var(--ocean-contact-text);
	font: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ocean-contact-ease-out);
}

.ocean-contact .ocean-contact__item:hover,
.ocean-contact .ocean-contact__item:focus-visible {
	border-color: var(--ocean-contact-primary-line);
	background: var(--ocean-contact-primary-soft);
	color: var(--ocean-contact-text);
	text-decoration: none;
}

.ocean-contact .ocean-contact__item--whatsapp:hover,
.ocean-contact .ocean-contact__item--whatsapp:focus-visible {
	border-color: var(--ocean-contact-whatsapp-line);
	background: var(--ocean-contact-whatsapp-soft);
}

.ocean-contact .ocean-contact__item:active {
	transform: scale(0.985);
	transition-duration: 90ms;
}

.ocean-contact .ocean-contact__item:focus {
	outline: none;
}

.ocean-contact .ocean-contact__item:focus-visible {
	outline: 2px solid var(--ocean-contact-primary);
	outline-offset: 2px;
}

.ocean-contact .ocean-contact__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--ocean-contact-primary-soft);
	color: var(--ocean-contact-primary);
	box-shadow: inset 0 0 0 1px var(--ocean-contact-primary-line);
	transition: transform 200ms var(--ocean-contact-ease-out);
}

.ocean-contact .ocean-contact__item--whatsapp .ocean-contact__item-icon {
	background: var(--ocean-contact-whatsapp-soft);
	color: var(--ocean-contact-whatsapp-ink);
	box-shadow: inset 0 0 0 1px var(--ocean-contact-whatsapp-line);
}

.ocean-contact .ocean-contact__item:hover .ocean-contact__item-icon,
.ocean-contact .ocean-contact__item:focus-visible .ocean-contact__item-icon {
	transform: scale(1.06);
}

.ocean-contact .ocean-contact__item-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ocean-contact .ocean-contact__item-label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ocean-contact-heading);
}

.ocean-contact .ocean-contact__item-meta {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ocean-contact-muted);
}

.ocean-contact .ocean-contact__number {
	direction: ltr;
	unicode-bidi: isolate;
	align-self: flex-start;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ocean-contact .ocean-contact__item-arrow {
	flex: none;
	line-height: 0;
	color: #98a2b3;
	transition: color 160ms ease, transform 200ms var(--ocean-contact-ease-out);
}

.ocean-contact .ocean-contact__item:hover .ocean-contact__item-arrow,
.ocean-contact .ocean-contact__item:focus-visible .ocean-contact__item-arrow {
	color: var(--ocean-contact-primary);
	transform: translateX(-3px);
}

.ocean-contact .ocean-contact__screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mobile and short landscape screens */

@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
	.ocean-contact {
		--ocean-contact-offset: var(--ocean-contact-offset-mobile);
		--ocean-contact-side: 16px;
		--ocean-contact-size: 64px;
		--ocean-contact-gap: 12px;
	}
}

@media (max-height: 520px) {
	.ocean-contact .ocean-contact__header {
		padding: 12px 14px;
	}

	.ocean-contact .ocean-contact__badge {
		display: none;
	}

	.ocean-contact .ocean-contact__list {
		gap: 8px;
		padding: 10px 12px 12px;
	}

	.ocean-contact .ocean-contact__item {
		min-height: 58px;
		padding: 8px 12px 8px 10px;
	}

	.ocean-contact .ocean-contact__item-icon {
		width: 42px;
		height: 42px;
	}
}

/* Reduced motion: immediate state changes, no idle effects. */

@media (prefers-reduced-motion: reduce) {
	.ocean-contact .ocean-contact__panel,
	.ocean-contact .ocean-contact__panel.is-visible,
	.ocean-contact .ocean-contact__header > *,
	.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__header > *,
	.ocean-contact .ocean-contact__list-item,
	.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item,
	.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item:nth-child(1),
	.ocean-contact .ocean-contact__panel.is-visible .ocean-contact__list-item:nth-child(2),
	.ocean-contact .ocean-contact__launcher-surface,
	.ocean-contact .ocean-contact__launcher-surface::after,
	.ocean-contact .ocean-contact__launcher-glyph,
	.ocean-contact .ocean-contact__item,
	.ocean-contact .ocean-contact__item-icon,
	.ocean-contact .ocean-contact__item-arrow,
	.ocean-contact .ocean-contact__close {
		transition: none;
	}

	.ocean-contact .ocean-contact__panel,
	.ocean-contact .ocean-contact__header > *,
	.ocean-contact .ocean-contact__list-item,
	.ocean-contact .ocean-contact__launcher-glyph,
	.ocean-contact .ocean-contact__launcher[aria-expanded="true"] .ocean-contact__launcher-glyph--open,
	.ocean-contact .ocean-contact__launcher:active .ocean-contact__launcher-surface,
	.ocean-contact .ocean-contact__item:active,
	.ocean-contact .ocean-contact__close:active,
	.ocean-contact .ocean-contact__item:hover .ocean-contact__item-icon,
	.ocean-contact .ocean-contact__item:focus-visible .ocean-contact__item-icon,
	.ocean-contact .ocean-contact__item:hover .ocean-contact__item-arrow,
	.ocean-contact .ocean-contact__item:focus-visible .ocean-contact__item-arrow {
		transform: none;
	}

	.ocean-contact .ocean-contact__header > *,
	.ocean-contact .ocean-contact__list-item {
		opacity: 1;
	}

	.ocean-contact--attention .ocean-contact__launcher-fx {
		display: none;
	}

	.ocean-contact--attention .ocean-contact__launcher-breath,
	.ocean-contact--attention .ocean-contact__launcher-halo,
	.ocean-contact--attention .ocean-contact__launcher-ring {
		animation: none;
	}
}

@media (forced-colors: active) {
	.ocean-contact .ocean-contact__launcher-surface {
		border: 2px solid ButtonText;
	}

	.ocean-contact .ocean-contact__launcher-fx {
		display: none;
	}

	.ocean-contact .ocean-contact__panel,
	.ocean-contact .ocean-contact__item {
		border: 1px solid CanvasText;
	}
}

@media print {
	.ocean-contact {
		display: none !important;
	}
}