/**
 * TripMate Global Design System
 * ----------------------------
 * Site-wide presentation layer shared by every Elementor page.
 * Consumes Elementor Kit CSS variables (--e-global-*) when present.
 * Do NOT redefine these tokens per page — edit Site Settings instead.
 */

:root {
	/* Radius — global */
	--tm-radius-badge: 999px;
	--tm-radius-button: 14px;
	--tm-radius-input: 14px;
	--tm-radius-card: 24px;
	--tm-radius-image: 24px;
	--tm-radius-hero-card: 30px;
	--tm-radius-nav: 12px;
	--tm-radius-icon-well: 14px;

	/* Shadows — global */
	--tm-shadow-soft: 0 4px 14px rgba(30, 41, 59, 0.06);
	--tm-shadow-medium: 0 12px 30px rgba(30, 41, 59, 0.1);
	--tm-shadow-large: 0 22px 50px rgba(30, 41, 59, 0.14);
	--tm-shadow-glow: 0 12px 32px rgba(238, 86, 11, 0.38);
	--tm-shadow-glow-strong: 0 16px 40px rgba(238, 86, 11, 0.48);
	--tm-shadow-glass: 0 16px 48px rgba(30, 41, 59, 0.16);

	/* Section spacing — global */
	--tm-section-y: clamp(3.5rem, 6vw, 6rem);
	--tm-section-y-lg: clamp(4.5rem, 7vw, 7rem);

	/* Container — mirrors Kit Content Width (1320) */
	--tm-container-max: 1320px;
}

/* —— Elementor native Button → TripMate primary (override stale Kit Inter / 10px radius) —— */
.elementor-kit-6 button.elementor-button,
.elementor-kit-6 input[type="button"],
.elementor-kit-6 input[type="submit"],
.elementor-kit-6 .elementor-button,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
.elementor-button {
	font-family: "Roboto", sans-serif !important;
	font-weight: 600;
	border-radius: var(--tm-radius-button) !important;
	min-height: 54px;
	transition: transform var(--tm-duration, 300ms) var(--tm-ease, cubic-bezier(0.4, 0, 0.2, 1)),
		background-color var(--tm-duration, 300ms) ease,
		box-shadow var(--tm-duration, 300ms) ease,
		border-color var(--tm-duration, 300ms) ease;
}

.elementor-button:hover,
.elementor-button:focus {
	transform: translateY(-4px) scale(1.04);
}

/* Never let Kit button styles paint TripMate structural buttons orange */
.elementor-kit-6 button.tm-accordion__trigger,
.elementor-kit-6 button.tm-icon-btn {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Hero nav — kill kit orange shadow/transform only; glass + color from home.css */
.elementor-kit-6 button.tm-hero__nav-btn {
	box-shadow: none !important;
	transform: none !important;
	color: #ffffff !important;
}

/* Check Availability — colors/border only (beats Elementor kit button rules) */
.elementor-kit-6 button.tm-btn--check {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid #ffffff !important;
	color: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
}

.elementor-kit-6 button.tm-btn--check:hover,
.elementor-kit-6 button.tm-btn--check:focus,
.elementor-kit-6 button.tm-btn--check:active {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #111111 !important;
}

/* —— Elementor form fields inherit Kit + TripMate radius —— */
.elementor-field-group .elementor-field,
.elementor-field-textual,
.elementor-field-group input:not([type="submit"]):not([type="button"]),
.elementor-field-group textarea,
.elementor-field-group select {
	font-family: var(--tm-font, "Roboto", sans-serif);
	border-radius: var(--tm-radius-input);
	min-height: 2.75rem;
}

/* —— Prefer TripMate container width when using .tm-container —— */
.tm-container {
	width: min(100% - 2rem, var(--tm-container-max, 1320px));
	margin-inline: auto;
}

@media (min-width: 768px) {
	.tm-container {
		width: min(100% - 3rem, var(--tm-container-max, 1320px));
	}
}

/* —— Icon wells (non-booking) —— shared primitive —— */
.tm-icon-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: var(--tm-radius-icon-well);
	background: color-mix(in srgb, var(--tm-primary) 10%, transparent);
	color: var(--tm-primary);
	transition: background var(--tm-duration, 300ms) ease, transform var(--tm-duration, 300ms) ease;
}

.tm-icon-well svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--tm-duration, 300ms) ease;
}

.tm-card--hover:hover .tm-icon-well,
.tm-card--hover:hover .tm-icon-well--service {
	transform: translateY(-2px);
}

.tm-card--hover:hover .tm-icon-well svg,
.tm-card--hover:hover .tm-icon-well--service svg {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.tm-phone-attention {
		animation: none !important;
	}
}

.tm-icon-well--service {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
}

.tm-icon-well--service svg {
	width: 1.25rem;
	height: 1.25rem;
}

.tm-icon-well--sm {
	width: 2.5rem;
	height: 2.5rem;
}

.tm-icon-well--sm svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Colored well variants (use when reference calls for them) */
.tm-icon-well--orange {
	background: color-mix(in srgb, var(--tm-primary) 12%, transparent);
	color: var(--tm-primary);
}

.tm-icon-well--blue {
	background: color-mix(in srgb, #3b82f6 12%, transparent);
	color: #2563eb;
}

.tm-icon-well--green {
	background: color-mix(in srgb, var(--tm-success, #22c55e) 12%, transparent);
	color: var(--tm-success, #16a34a);
}

.tm-icon-well--purple {
	background: color-mix(in srgb, #8b5cf6 12%, transparent);
	color: #7c3aed;
}

.tm-icon-well--teal {
	background: color-mix(in srgb, #14b8a6 12%, transparent);
	color: #0d9488;
}

.tm-icon-well--amber {
	background: color-mix(in srgb, var(--tm-warning, #f59e0b) 12%, transparent);
	color: var(--tm-warning, #d97706);
}

.tm-icon-well--pink {
	background: color-mix(in srgb, #ec4899 12%, transparent);
	color: #db2777;
}

/* Booking form icons stay clean — never inherit wells */
.tm-booking-field__icon {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* —— Cards —— shared primitive (pages inherit via TripMate widgets) —— */
.tm-card {
	border-radius: var(--tm-radius-card);
	box-shadow: var(--tm-shadow-soft);
}

/* —— Section rhythm —— */
.tm-section {
	/* padding-block: var(--tm-section-y); */
}

.tm-section--lg {
	/* padding-block: var(--tm-section-y-lg); */
}

/* —— Avoid Elementor inline typography fighting design tokens —— */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--tm-font-heading, "Inter", sans-serif);
}

.elementor-widget-text-editor,
.elementor-widget-button .elementor-button {
	font-family: var(--tm-font, "Roboto", sans-serif);
}