/* Base Nav Styles */
	.customer-nav.svelte-f7owph {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		background-color: transparent !important;
		transition:
			background-color 0.3s ease,
			box-shadow 0.3s ease;
		padding-top: env(safe-area-inset-top);
	}

	.customer-nav.scrolled.svelte-f7owph {
		background-color: white !important;
		box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
	}

	/* Logo */
	.logo-button.svelte-f7owph {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		transition: opacity 0.2s ease;
	}

	.logo-button.svelte-f7owph:hover {
		opacity: 0.8;
	}

	.logo-text.svelte-f7owph {
		font-size: 1.5rem;
		font-weight: 700;
	}

	/* Company Name */
	.company-name.svelte-f7owph {
		font-size: 1.125rem;
		font-weight: 600;
		color: white;
		transition: color 0.2s ease;
	}

	.scrolled.svelte-f7owph .company-name:where(.svelte-f7owph) {
		color: #1f2937;
	}

	/* Phone Link */
	.phone-link.svelte-f7owph {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		font-size: 0.9375rem;
		font-weight: 600;
		color: white;
		border-radius: 0.5rem;
		transition: all 0.2s ease;
	}

	.phone-link.svelte-f7owph:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.scrolled.svelte-f7owph .phone-link:where(.svelte-f7owph) {
		color: #1f2937;
	}

	.scrolled.svelte-f7owph .phone-link:where(.svelte-f7owph):hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	/* Desktop Nav Links */
	.nav-link.svelte-f7owph {
		position: relative;
		padding: 0.5rem 0;
		font-size: 1rem;
		font-weight: 500;
		color: white;
		transition: color 0.2s ease;
	}

	.scrolled.svelte-f7owph .nav-link:where(.svelte-f7owph) {
		color: #1f2937;
	}

	.nav-link.svelte-f7owph:hover {
		opacity: 0.8;
	}

	.nav-link.active.svelte-f7owph {
		color: var(--primary-color);
	}

	.nav-link.active.svelte-f7owph::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2px;
		background-color: var(--primary-color);
		border-radius: 9999px;
	}

	/* Login Button */
	.login-button.svelte-f7owph {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.625rem 1.5rem;
		font-weight: 600;
		border-radius: 9999px;
		background-color: white;
		color: #1f2937;
		transition: all 0.2s ease;
	}

	.scrolled.svelte-f7owph .login-button:where(.svelte-f7owph) {
		background-color: var(--primary-color);
		color: white;
	}

	.login-button.svelte-f7owph:hover {
		opacity: 0.9;
	}

	/* Mobile Menu Button */
	.mobile-menu-button.svelte-f7owph {
		padding: 0.5rem;
		border-radius: 0.5rem;
		color: white;
		transition: color 0.2s ease;
	}

	.scrolled.svelte-f7owph .mobile-menu-button:where(.svelte-f7owph) {
		color: #1f2937;
	}

	/* Mobile Menu */
	.mobile-menu.svelte-f7owph {
		background-color: white;
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	}

	.mobile-nav-link.svelte-f7owph {
		display: block;
		width: 100%;
		text-align: left;
		padding: 0.75rem 1rem;
		border-radius: 0.5rem;
		font-weight: 500;
		color: #1f2937;
		transition: background-color 0.2s ease;
	}

	.mobile-nav-link.svelte-f7owph:hover {
		background-color: #f9fafb;
	}

	.mobile-nav-link.active.svelte-f7owph {
		background-color: #f9fafb;
		color: var(--primary-color);
	}

	.mobile-login-button.svelte-f7owph {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.75rem 1rem;
		margin-top: 1rem;
		border-radius: 0.5rem;
		font-weight: 600;
		color: white;
		transition: opacity 0.2s ease;
	}

	.mobile-login-button.svelte-f7owph:hover {
		opacity: 0.9;
	}

	/* Preview Badge */
	.preview-badge.svelte-f7owph {
		display: inline-flex;
		align-items: center;
		padding: 0.25rem 0.5rem;
		margin-left: 0.5rem;
		font-size: 0.75rem;
		font-weight: 700;
		color: #854d0e;
		background-color: #fef3c7;
		border: 1px solid #fbbf24;
		border-radius: 0.375rem;
		letter-spacing: 0.025em;
	}

	.scrolled.svelte-f7owph .preview-badge:where(.svelte-f7owph) {
		color: #854d0e;
		background-color: #fef3c7;
		border-color: #fbbf24;
	}