/* Reusable button system — matches Next.js Button variants */



.tm-btn {

	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 0.5rem;

	overflow: hidden;

	border-radius: var(--tm-radius-button);

	font-family: var(--tm-font-body);

	font-weight: 600;

	line-height: 1.2;

	border: 2px solid transparent;

	cursor: pointer;

	text-decoration: none;

	transition: transform var(--tm-duration) var(--tm-ease),

		background-color var(--tm-duration) var(--tm-ease),

		border-color var(--tm-duration) var(--tm-ease),

		color var(--tm-duration) var(--tm-ease),

		box-shadow var(--tm-duration) var(--tm-ease),

		opacity var(--tm-duration) var(--tm-ease);

	will-change: transform;

	box-sizing: border-box;

}



.tm-btn:focus-visible {

	outline: 2px solid var(--tm-primary);

	outline-offset: 2px;

}



.tm-btn:disabled,

.tm-btn.is-disabled {

	opacity: 0.6;

	cursor: not-allowed;

	pointer-events: none;

}



.tm-btn--sm {

	min-height: 2.75rem;

	padding: 0.5rem 1.25rem;

	font-size: var(--tm-text-sm);

}



/* Hero Explore CTAs — requested 48px */

.tm-btn--hero-cta {

	min-height: 48px;

	height: 48px;

	padding: 0.5rem 1.75rem;

	font-size: var(--tm-text-base);

}



/* Hero Check Availability — transparent → white hover, 45px */

.tm-btn--check {

	min-height: 45px;

	height: 45px;

	padding: 0.4rem 1.25rem;

	font-size: var(--tm-text-sm);

	background: transparent;

	background-color: transparent;

	border: 1px solid #ffffff;

	color: #ffffff;

	box-shadow: none;

}



.tm-btn--check:hover,

.tm-btn--check:focus,

.tm-btn--check:active {

	background: #ffffff;

	background-color: #ffffff;

	border-color: #ffffff;

	color: #111111;

	box-shadow: none;

	transform: translateY(-2px);

}



.tm-btn--md {

	min-height: 54px;

	padding: 0.75rem 2rem;

	font-size: var(--tm-text-base);

}



.tm-btn--lg {

	min-height: 3.5rem;

	padding: 0.875rem 2.5rem;

	font-size: var(--tm-text-base);

}



.tm-btn--full {

	width: 100%;

}



.tm-btn--primary {

	background: var(--tm-primary);

	color: var(--tm-white);

	box-shadow: var(--tm-shadow-glow);

}



.tm-btn--primary:hover {

	background: var(--tm-primary-hover);

	transform: translateY(-4px) scale(1.04);

	box-shadow: var(--tm-shadow-glow-strong);

	color: var(--tm-white);

}



.tm-btn--primary:active {

	transform: scale(0.98);

}



.tm-btn--secondary {

	background: transparent;

    border-color: var(--tm-secondary);

    color: var(--tm-secondary);

}



.tm-btn--secondary:hover {

	background: var(--tm-secondary);

	color: var(--tm-white);

	/* box-shadow: var(--tm-shadow-glow); */

	transform: translateY(-2px);

}



.tm-btn--outline {

	background: transparent;

	border-color: var(--tm-secondary);

	color: var(--tm-secondary);

}



.tm-btn--outline:hover {

	background: var(--tm-secondary);

	color: var(--tm-white);

}



.tm-btn--ghost {

	background: transparent;

	color: var(--tm-heading);

}



.tm-btn--ghost:hover {

	background: var(--tm-section);

}



.tm-icon-btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 2.75rem;

	height: 2.75rem;

	border-radius: var(--tm-radius-button);

	border: 1px solid var(--tm-border);

	background: var(--tm-white);

	color: var(--tm-heading);

	cursor: pointer;

	transition: border-color var(--tm-duration) var(--tm-ease),

		color var(--tm-duration) var(--tm-ease),

		background-color var(--tm-duration) var(--tm-ease);

}



.tm-icon-btn:hover {

	border-color: var(--tm-primary);

	color: var(--tm-primary);

}



.tm-icon-btn:focus-visible {

	outline: 2px solid var(--tm-primary);

	outline-offset: 2px;

}



.tm-icon-btn svg {

	width: 2.25rem;

	height: 2.25rem;

	stroke: rgb(238 86 11);;

	fill: none;

	stroke-width: 2;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.tm-input {

	width: 100%;

	min-height: 2.75rem;

	padding: 0.625rem 0.875rem;

	border: 1px solid rgba(255, 255, 255, 0.16);

	border-radius: var(--tm-radius-button);

	background: rgba(255, 255, 255, 0.04);

	color: var(--tm-white);

	font-size: var(--tm-text-sm);

	font-family: var(--tm-font-body);

	box-sizing: border-box;

}



.tm-input::placeholder {

	color: rgba(255, 255, 255, 0.45);

}



.tm-input:focus {

	outline: 2px solid var(--tm-primary);

	outline-offset: 1px;

	border-color: var(--tm-primary);

}



/* TripMate Elementor pagination — shared Blog treatment (.elementor-pagination) */

.elementor-pagination {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

	gap: 0.5rem;

	width: 100%;

	margin-top: 2rem;

	text-align: center;

}



.elementor-pagination .page-numbers {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 2.75rem;

	min-height: 2.75rem;

	padding: 0.5rem 0.875rem;

	border: 1px solid var(--tm-secondary, #425365);

	border-radius: var(--tm-radius-button, 14px);

	background: transparent;

	color: var(--tm-secondary, #425365);

	font-family: var(--tm-font-body, Roboto), "Roboto", sans-serif;

	font-size: 0.9375rem;

	font-weight: 500;

	line-height: 1;

	text-decoration: none;

	box-sizing: border-box;

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

}



.elementor-pagination a.page-numbers:hover {

	background: var(--tm-secondary, #425365);

	border-color: var(--tm-secondary, #425365);

	color: var(--tm-white, #ffffff);

}



.elementor-pagination .page-numbers.current {

	background: var(--tm-primary, #ee560b);

	border-color: var(--tm-primary, #ee560b);

	color: var(--tm-white, #ffffff);

	box-shadow: var(--tm-shadow-glow, 0 12px 32px rgba(238, 86, 11, 0.38));

}



.elementor-pagination .page-numbers.prev,

.elementor-pagination .page-numbers.next {

	min-width: auto;

	padding-left: 1rem;

	padding-right: 1rem;

}



@media (max-width: 767px) {

	.elementor-pagination {

		gap: 0.375rem;

		margin-top: 1.5rem;

	}



	.elementor-pagination .page-numbers {

		min-width: 2.5rem;

		min-height: 2.5rem;

		padding: 0.4rem 0.65rem;

		font-size: 0.875rem;

	}

}