/* Alpine.js x-cloak: Hide elements until Alpine initializes to prevent flash of unstyled content */
[x-cloak] {
	display: none !important;
}

/* Generic shimmer animation helper */
.shimmer {
	animation: shimmer 2s infinite linear;
	background-size: 200% 100%;
}

/* Neutral grey shimmer gradient */
.shimmer-neutral {
	background: linear-gradient(270deg, #f9fafb 18.75%, #e5e7eb 179.69%);
}

.shimmer-container {
	background: linear-gradient(60deg, #e5e7eb 25%, #f9fafb 50%, #e5e7eb 75%);
	background-size: 200% 100%;
	animation: shimmer 2s infinite linear;
}

.reseller-price-skeleton {
	background: linear-gradient(60deg, #3083ff 25%, #95c0ff 50%, #3083ff 75%);
	background-size: 200% 100%;
	animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.hide-scrollbar {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}

.no-select {
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* Disable Tailwind reset inside .no-tailwind */
.no-tailwind,
.no-tailwind * {
	all: revert;
}

/* Footer info */
.no-tailwind.footer-content,
.no-tailwind.footer-content * {
	color: #7f7f7f;
}

.no-tailwind.footer-content a {
	font-weight: 700;
	text-decoration: underline;
}

.no-tailwind.promo-content,
.no-tailwind.promo-content * {
	color: #706d6e;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

/* Reset default margins inside promo content to prevent doubled spacing */
.no-tailwind.promo-content p,
.no-tailwind.promo-content ul,
.no-tailwind.promo-content ol,
.no-tailwind.promo-content h1,
.no-tailwind.promo-content h2,
.no-tailwind.promo-content h3,
.no-tailwind.promo-content h4,
.no-tailwind.promo-content h5,
.no-tailwind.promo-content h6 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.no-tailwind.promo-content a {
	font-weight: 700;
	text-decoration: underline;
}

@media (max-width: 1279px) {
	.no-tailwind.promo-content,
	.no-tailwind.promo-content * {
		color: #000000;
	}
}

/* Air Datepicker custom css */

.air-datepicker-body--day-name {
	color: #1973d7 !important;
	font-weight: 500 !important;
	font-size: 0.75rem !important;
}

.air-datepicker-cell.-current- {
	color: #1973d7 !important;
	font-weight: 600 !important;
}

.air-datepicker-cell.-selected- {
	background-color: #1973d7 !important;
	color: white !important;
}

.air-datepicker-button {
	color: #1973d7 !important;
}

/* Input field styling */
.date-input {
	background-image: url("/static/assets/icons/calendar.svg");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.25rem;
}

/* Poppins font and global color overrides */
@font-face {
	font-family: "Poppins";
	src: url("/static/fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/static/fonts/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Use Poppins only for specific elements */
.contact-title {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #4f4c4d;
}

/* Submit button on contact form should use Poppins explicitly */
.contact-submit-btn {
	font-family: "Poppins", sans-serif !important;
}

/* Contact form placeholder styling (scoped) */
.custom-form input::placeholder,
.custom-form textarea::placeholder,
.custom-form input::-webkit-input-placeholder,
.custom-form textarea::-webkit-input-placeholder,
.custom-form input::-moz-placeholder,
.custom-form textarea::-moz-placeholder,
.custom-form input:-ms-input-placeholder,
.custom-form textarea:-ms-input-placeholder,
.custom-form input:-moz-placeholder,
.custom-form textarea:-moz-placeholder {
	font-family: "Poppins", sans-serif;
	color: #908e8f;
	opacity: 1; /* ensure color shows consistently */
}

/* Contact form error message style */
.contact-error-msg {
	font-family: "Poppins", sans-serif;
	color: #de121d;
}

/* Error border for inputs */
.contact-error-border {
	border-color: #de121d !important;
}

/* Ensure error border stays red on focus and remove any shadow from focus styles */
.custom-form input.contact-error-border:focus,
.custom-form textarea.contact-error-border:focus {
	border-color: #de121d !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Label style for 'Jam operasional:' on contact page */
.contact-ops-label {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #231f20;
}

/* Body text for Jam operasional (uses Poppins and brand neutral color) */
.contact-ops-text {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #4f4c4d;
}

/* Department line styling: Poppins and brand neutral color */
.contact-dept {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #4f4c4d;
}

/* Ministry label and phone styling */
.contact-ministry {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #231f20;
}

/* Partner heading styling */
.contact-partner {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #231f20;
}

/* Small fragment used in partner description */
.contact-desc-fragment {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #4f4c4d;
}

/* Partnership email specific bolding */
.contact-partnership-email {
	font-weight: 600; /* match .font-semibold used on Partnership link */
}

/* Form labels for contact page */
.contact-form-label {
	font-family:
		"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans";
	color: #706d6e;
}

@media screen and (max-width: 1279.98px) {
	.date-input {
		background-size: 1rem; /* 16px in rem */
	}
}

/* Phone input + country dropdown fixes for mobile (iOS Safari) */
.phone-input-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.phone-input-group .country-dropdown-btn {
	flex: 0 0 auto; /* don't shrink or grow */
	overflow: hidden; /* prevent arrow overflow on iOS */
	-webkit-appearance: none;
	appearance: none;
}

.phone-input-group input[type="text"],
.phone-input-group input[type="tel"] {
	flex: 1 1 auto;
}

/* Ensure the dropdown menu is positioned correctly and doesn't cause overflow */
.country-dropdown-btn + .absolute {
	left: 0;
}

/* iOS specific tweak to prevent weird subpixel overflow */
@supports (-webkit-overflow-scrolling: touch) {
	.phone-input-group .country-dropdown-btn img {
		display: block;
	}
}

/* Hide country dropdown arrow specifically on small iOS devices (iPhone) to avoid overflow
   - Use a combination of feature-detection for iOS and a max-width so tablets and desktops are untouched.
*/


/* Additional iPhone-only spacing so the country button and phone input don't touch when arrow is hidden */
@supports (-webkit-overflow-scrolling: touch) {
	@media screen and (max-width: 768px) {
		.country-dropdown-btn {
			margin-right: 0.125rem; /* visual gap between button and input */
			min-width: 56px; /* ensure button keeps a sensible width without arrow */
			box-sizing: border-box;
		}
		/* ensure the phone input keeps its rounded look and doesn't overlap */
		.phone-input-group input {
			min-width: 0; /* allow flex to shrink properly */
		}
		/* Add explicit left gap for the phone input wrapper so the two controls never touch */
		.phone-input-group.w-full {
			margin-left: 0; /* small visual separation on iPhone */
			width: auto; /* Prevent overflow caused by w-full + margin */
			flex: 1;     /* Correctly fill remaining space */
		}
		/* Separator element between dropdown and phone input */
		.country-separator {
			width: 8px; /* space width */
			height: 36px;
			display: inline-block;
			vertical-align: middle;
		}
		/* Visible thin line for clearer separation */
		/* Keep separator spacing but hide visible line on iPhone */
		.country-separator::after {
			/* hidden intentionally to preserve spacing only */
			display: none !important;
			content: none !important;
		}
		.country-separator {
			background: transparent !important;
			border: none !important;
		}
	}
}

/* Non-iOS small-screen adjustments: slightly reduce country dropdown width on Android and desktop
	 emulation so it looks balanced next to the phone input. We intentionally exclude iOS using
	 inverse feature-detection so iPhone rules above remain unchanged. */
@supports not (-webkit-overflow-scrolling: touch) {
	@media screen and (max-width: 768px) {
		.country-dropdown-btn {
			/* Aggressively narrow the button on non-iOS small screens as requested */
			min-width: 32px;
			margin-right: 0.1875rem; /* ~3px */
			box-sizing: border-box;
			padding-left: 0.25rem; /* reduce horizontal padding */
			padding-right: 0.25rem;
			/* reduce visual weight to fit smaller width */
			font-size: 0.75rem;
		}

		/* Make separator a touch smaller on non-iOS so it remains subtle */
		.country-separator {
			width: 6px;
			height: 36px;
			display: inline-block;
			vertical-align: middle;
		}
	}
}

/* Further non-iOS small-screen layout tweaks: reduce gap and ensure phone input expands */
@media screen and (max-width: 768px) {
	.phone-input-group {
		gap: 0.125rem; /* reduce gap so phone input gets more space */
	}

	/* Ensure the input inside phone-input-group can grow on small non-iOS screens */
	.phone-input-group input[type="text"],
	.phone-input-group input[type="tel"] {
		flex: 1 1 0%;
		min-width: 0; /* allow shrinking properly */
	}

	/* Shrink flag and arrow images and phone code slightly */
	.country-dropdown-btn img {
		/* flags and arrow */
		width: 0.75rem; /* ~12px */
		height: 0.75rem;
	}


}

.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* No Header Footer (nhf) styles */
body.nhf header,
body.nhf footer {
	display: none !important;
}

body.nhf .page-content,
body.nhf main {
	padding-top: 30px;
}