/* =========================================
   Modern UI/UX Design System (Shared Contact Edition)
   ========================================= */
.l-sub-layout__main {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.modern-contact-wrapper {
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	color: var(--text-main, #334155);
	padding: 1.5rem;
}

/* Colors & Themes */
.text-theme { color: var(--theme-primary); }
.bg-light-theme { background-color: var(--theme-primary-light, rgba(0,0,0,0.05)); }
.bg-theme { background-color: var(--theme-primary); }
.border-theme { border-color: var(--theme-primary); }
.border-left-theme { border-left: 4px solid var(--theme-primary); }

.badge-theme {
	background-color: var(--theme-primary);
	color: white;
}
.badge-outline-theme {
	border: 1px solid var(--theme-primary);
	color: var(--theme-primary);
}

.rounded-xl { border-radius: 1.25rem !important; }
.transition-smooth { transition: var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)); }
.hover-shadow:hover { box-shadow: 0 4px 15px var(--theme-primary-shadow, rgba(0,0,0,0.1)) !important; transform: translateY(-2px); }

/* Custom Design Elements for Left Cards */
.icon-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card-deco-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
}

/* Hero Section */
.icon-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
}
.icon-bg-glow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--theme-primary-glow, rgba(0,0,0,0.1)), var(--theme-secondary-glow, rgba(0,0,0,0.05)));
	border-radius: 50%;
	filter: blur(10px);
	transform: scale(1.2);
}
.text-gradient {
	font-size: 3.5rem;
	background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 1;
}
.modern-title {
	color: var(--theme-secondary);
	letter-spacing: -0.5px;
}
.modern-title span {
	font-size: 1rem;
	font-weight: normal;
	color: var(--theme-primary);
	margin-left: 8px;
}
.section-title {
	color: var(--theme-secondary);
	font-weight: 700;
	font-size: 1.15rem;
	border-bottom: 2px solid var(--input-border, #e2e8f0);
	padding-bottom: 0.75rem;
}
.section-title-sm {
	color: var(--theme-secondary);
	font-weight: 700;
	font-size: 1rem;
}

/* Input Groups */
.modern-input-group label {
	font-weight: 600;
	color: var(--text-main, #334155);
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}
.modern-input-group input.form-control,
.modern-input-group textarea.form-control,
.modern-input-group select.form-control {
	border: 2px solid var(--input-border, #e2e8f0);
	padding: 0.6rem 1rem;
	font-size: 1rem;
	transition: var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
	background-color: #f8fafc;
	box-shadow: none;
}
.modern-input-group input.form-control:focus,
.modern-input-group textarea.form-control:focus,
.modern-input-group select.form-control:focus {
	border-color: var(--theme-secondary);
	background-color: #fff;
	box-shadow: 0 0 0 4px var(--input-focus-ring);
}
.modern-input-group textarea.form-control {
	min-height: 120px;
	resize: vertical;
}

.form-control.is-invalid {
	border-color: var(--color-red);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat;
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.is-valid {
	border-color: var(--color-green);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat;
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/* Captcha Section */
#captcha-timer{
	display: block;text-align: right;
}
.invalid-feedback.captcha-feedback{
	display:none; color:var(--color-red); font-size: 80%;text-align: right;margin-top: 0;
}
.modern-captcha-section {
	border-color: var(--input-border, var(--color-input));
}
.modern-captcha-section input[type="text"] {
	border: 2px solid var(--input-border, var(--color-input));
	border-radius: var(--radius-sm, 8px);
	padding: 0.5rem 1rem;
	transition: var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
	width: 100%;
}
.modern-captcha-section input[type="text"]:focus {
	border-color: var(--theme-secondary);
	outline: none;
	box-shadow: 0 0 0 4px var(--input-focus-ring);
}

/* Buttons */
.modern-btn-primary {
	background: var(--theme-primary);
	transition: all 0.3s ease;
	border: 1px solid var(--theme-primary);
}
.modern-btn-primary:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
	background: var(--color-secondary);
	border: 1px solid var(--color-secondary);
}
.modern-btn-outline {
	background: transparent;
	color: var(--theme-secondary);
	border: 2px solid var(--input-border, var(--color-input));
	border-radius: 50px;
	padding: 0.8rem 2.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}
.modern-btn-outline:hover {
	border-color: var(--theme-secondary);
	background-color: var(--theme-primary-shadow, rgba(0,0,0,0.05));
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
	transform: translateY(-4px);
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.15s; opacity: 0; }
.delay-2 { animation-delay: 0.3s; opacity: 0; }

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}