/* ==========================================================================
   DeshipOS — Footer widget
   6-col footer at desktop: brand | product | solutions | resources | company
   | newsletter. Stacks down to 4 → 2 → 1 columns. Bottom bar with copyright.
   Depends on assets/css/base.css for design tokens.
   ========================================================================== */

.deshipos-footer {
	--dfo-divider:           #E2E8F0;
	--dfo-brand-ink:         #0F172A;
	--dfo-brand-accent:      #16A34A;
	--dfo-text:              #64748B;
	--dfo-title:             #0F172A;
	--dfo-link:              #64748B;
	--dfo-link-hover:        #16A34A;
	--dfo-social-color:      #475569;
	--dfo-social-border:     #E2E8F0;
	--dfo-social-hover-bg:   #16A34A;
	--dfo-social-hover-fg:   #FFFFFF;
	--dfo-input-border:      #E2E8F0;

	box-sizing: border-box;
	width: 100%;
	background: #FFFFFF;
	color: var(--dfo-text);
	font-family: inherit;
	border-top: 1px solid #dddddd70;
}
.deshipos-footer *,
.deshipos-footer *::before,
.deshipos-footer *::after { box-sizing: border-box; }

.deshipos-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 0px !important;
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr) 1.8fr;
	gap: 15px;
	align-items: flex-start;
}

/* ============================================================
   Brand column
   ============================================================ */
.deshipos-footer__brand {
	min-width: 0;
}

.deshipos-footer__brand-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	margin-bottom: 14px;
}
.deshipos-footer__brand-link:hover { text-decoration: none; }

/* Baseline only — the actual width comes from the editor's "Logo Width"
   control, which writes `width: {{VALUE}}px; height: auto;` here. Height
   stays auto so the upload keeps its native aspect ratio. */
.deshipos-footer__brand-logo {
	display: block;
	width: 36px;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

/* Fallback bullet shown when the Logo Image is empty but a Brand Name is set —
   a small green ringed dot so the brand line still has visual identity. */
.deshipos-footer__brand-mark {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, #FFFFFF 0 22%, transparent 23%),
		linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
	flex-shrink: 0;
}

.deshipos-footer__brand-name {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--dew-tracking-tight, -.01em);
	color: var(--dfo-brand-ink);
	white-space: nowrap;
}
.deshipos-footer__brand-name-accent {
	color: var(--dfo-brand-accent);
}

.deshipos-footer__brand-desc {
	margin: 0 0 18px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--dfo-text);
	max-width: 280px;
}

/* ============================================================
   Social icons
   ============================================================ */
.deshipos-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.deshipos-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--dfo-social-border);
	color: var(--dfo-social-color);
	background: transparent;
	text-decoration: none;
	font-size: .875rem;
	transition:
		background var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		color      var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		border-color var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		transform  var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease);
}
.deshipos-footer__social-link:hover,
.deshipos-footer__social-link:focus-visible {
	background: var(--dfo-social-hover-bg);
	border-color: var(--dfo-social-hover-bg);
	color: var(--dfo-social-hover-fg);
	transform: translateY(-1px);
}
.deshipos-footer__social-link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.deshipos-footer__social-link i {
	font-size: 1em;
	line-height: 1;
}

/* ============================================================
   Link columns (Product / Solutions / Resources / Company)
   ============================================================ */
.deshipos-footer__col {
	min-width: 0;
}

.deshipos-footer__col-title {
	margin: 0 0 16px;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--dew-tracking-snug, -.005em);
	color: var(--dfo-title);
}

.deshipos-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.deshipos-footer__link {
	display: inline-block;
	color: var(--dfo-link);
	text-decoration: none;
	font-size: .9375rem;
	line-height: 1.4;
	transition: color var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease);
}
.deshipos-footer__link:hover,
.deshipos-footer__link:focus-visible {
	color: var(--dfo-link-hover);
}

/* ============================================================
   Newsletter
   ============================================================ */
.deshipos-footer__newsletter {
	min-width: 0;
}

.deshipos-footer__newsletter-desc {
	margin: 0 0 14px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--dfo-text);
}

.deshipos-footer__newsletter-form {
	display: flex;
	align-items: stretch;
	gap: 0px;
	max-width: 420px;
	background: #FFFFFF;
	border: 1.5px solid var(--dfo-input-border);
	border-radius: 999px;
	padding: 4px 4px 4px 6px;
}

.deshipos-footer__newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0 5px;
	background: transparent;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 14px;
	color: #0F172A;
}
.deshipos-footer__newsletter-input::placeholder {
	color: #94A3B8;
	opacity: 1;
}

.deshipos-footer__newsletter-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 15px;
	background: #16A34A;
	color: #FFFFFF;
	border: 1.5px solid #16A34A;
	border-radius: 999px;
	font: inherit;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: var(--dew-tracking-snug, -.005em);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		border-color var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		transform var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease);
}
.deshipos-footer__newsletter-btn:hover,
.deshipos-footer__newsletter-btn:focus-visible {
	background: #15803D;
	border-color: #15803D;
}
.deshipos-footer__newsletter-btn:active { transform: scale(.98); }
.deshipos-footer__newsletter-btn[disabled],
.deshipos-footer__newsletter-input[disabled] {
	opacity: .65;
	cursor: not-allowed;
}

/* Honeypot — visible to bots, invisible to humans. We don't use `display:none`
   or `hidden` because spam bots learned to skip those years ago. */
.deshipos-footer__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Subscribe form feedback — empty by default, populated by the AJAX handler. */
.deshipos-footer__newsletter-msg {
	margin: 10px 0 0;
	min-height: 1.4em;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--dfo-text);
}
.deshipos-footer__newsletter-msg.is-success { color: #15803D; }
.deshipos-footer__newsletter-msg.is-error   { color: #B91C1C; }

/* Screen-reader-only label for the email field. */
.deshipos-footer__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Bottom bar (copyright)
   ============================================================ */
.deshipos-footer__bottom {
	border-top: 1px solid var(--dfo-divider);
}
.deshipos-footer__bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 32px;
	text-align: center;
}
.deshipos-footer__copy {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--dfo-text);
}
.deshipos-footer__copy a {
	color: inherit;
	text-decoration: underline;
}

/* ============================================================
   Back to Top button
   Fixed bottom-right. Hidden (and non-interactive) until JS adds
   .is-visible once the visitor scrolls past the configured offset.
   ============================================================ */
.deshipos-footer__totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #16A34A;
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity   var(--dew-dur-base, 220ms) var(--dew-ease-out, ease),
		transform var(--dew-dur-base, 220ms) var(--dew-ease-out, ease),
		visibility var(--dew-dur-base, 220ms) var(--dew-ease-out, ease),
		background var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease);
}
.deshipos-footer__totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.deshipos-footer__totop:hover { background: #15803D; }
.deshipos-footer__totop:active { transform: translateY(0) scale(.94); }
.deshipos-footer__totop:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.deshipos-footer__totop svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor; /* SVG icons inherit the white icon color */
}
.deshipos-footer__totop svg path { fill: currentColor; }
.deshipos-footer__totop i {
	font-size: 18px;
	line-height: 1;
	color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.deshipos-footer__totop {
		transition: opacity .01ms, visibility .01ms;
		transform: none;
	}
	.deshipos-footer__totop.is-visible { transform: none; }
}

/* ============================================================
   Floating WhatsApp button — always visible; stacks above the
   Back-to-Top button when that one is also enabled.
   ============================================================ */
.deshipos-footer__whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9991;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
	transition:
		transform  var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		background var(--dew-dur-fast, 120ms) var(--dew-ease-out, ease),
		box-shadow var(--dew-dur-base, 220ms) var(--dew-ease-out, ease);
}
/* 24px (totop bottom) + 46px (totop height) + 12px gap = 82px */
.deshipos-footer__whatsapp--with-totop { bottom: 82px; }

.deshipos-footer__whatsapp:hover {
	background: #1EBE5D;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
}
.deshipos-footer__whatsapp:active { transform: scale(.94); }
.deshipos-footer__whatsapp:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.deshipos-footer__whatsapp svg {
	width: 26px;
	height: 26px;
	display: block;
	fill: currentColor;
	position: relative;
	z-index: 1; /* stay above the pulse rings */
	transform-origin: center;
	animation: deshipos-wa-beat 2.4s ease-in-out infinite;
}

/* Idle attention animation: two staggered radar-pulse rings ripple out from
   behind the button, while the icon gives a periodic little wave. */
.deshipos-footer__whatsapp::before,
.deshipos-footer__whatsapp::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
	animation: deshipos-wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
.deshipos-footer__whatsapp::after { animation-delay: 1.2s; }

@keyframes deshipos-wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes deshipos-wa-beat {
	0%, 50%, 100% { transform: rotate(0); }
	58% { transform: rotate(-13deg); }
	66% { transform: rotate(11deg); }
	74% { transform: rotate(-8deg); }
	82% { transform: rotate(6deg); }
	90% { transform: rotate(0); }
}

@media (max-width: 599px) {
	.deshipos-footer__whatsapp { width: 50px; height: 50px; }
	.deshipos-footer__whatsapp--with-totop { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
	.deshipos-footer__whatsapp { transition: background .01ms; }
	.deshipos-footer__whatsapp:hover { transform: none; }
	.deshipos-footer__whatsapp::before,
	.deshipos-footer__whatsapp::after,
	.deshipos-footer__whatsapp svg { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — brand and newsletter span the full row; the four link columns
   sit on their own row in a 4-up grid. */
@media (max-width: 1100px) {
	.deshipos-footer__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 24px;
		padding: 48px 28px;
	}
	.deshipos-footer__brand,
	.deshipos-footer__newsletter {
		grid-column: 1 / -1;
	}
	.deshipos-footer__brand-desc {
		max-width: 480px;
	}
	.deshipos-footer__newsletter-form {
		max-width: 460px;
	}
}

/* Small tablet / large phone — link columns drop to 2x2. */
@media (max-width: 720px) {
	.deshipos-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
		padding: 40px 22px;
	}
	.deshipos-footer__bottom-inner {
		padding: 18px 22px;
	}
}

/* Phone — everything stacks; newsletter input + button stack vertically and
   the rounded pill expands to a comfortable tap target. */
@media (max-width: 480px) {
	.deshipos-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 36px 18px;
	}
	.deshipos-footer__newsletter-form {
		flex-direction: column;
		border-radius: 18px;
		padding: 6px;
		gap: 6px;
	}
	.deshipos-footer__newsletter-input {
		height: 42px;
		padding: 0 14px;
	}
	.deshipos-footer__newsletter-btn {
		height: 42px;
		width: 100%;
		border-radius: 12px;
	}
	.deshipos-footer__copy {
		font-size: .75rem;
	}
	.deshipos-footer__bottom-inner {
		padding: 16px 18px;
	}
}

/* Reduced motion — strip hover transitions. */
@media (prefers-reduced-motion: reduce) {
	.deshipos-footer__social-link,
	.deshipos-footer__newsletter-btn,
	.deshipos-footer__link {
		transition-duration: .01ms !important;
	}
	.deshipos-footer__social-link:hover,
	.deshipos-footer__newsletter-btn:active { transform: none; }
}