:root {
	--primary-color:#0073e6;
	--primary-dark:#005bb3;
	--primary-light:#dbe9ff;
	--secondary-color:#6c757d;
	--success-color:#20c997;
	--danger-color:#f25c54;
	--warning-color:#ffb830;
	--light-color:#f8f9fa;
	--dark-color:#212529;
	--background-color:#f9fbfd;
	--accent: #22c55e;
	--accent-2: #16a34a;
	--card-bg:#ffffff;
	--text-color:#343a40;
	--text-muted:#6c757d;
	--border-color:#e9ecef;
	--shadow:0 8px 30px rgba(0,115,230,0.08);
	--border-radius:16px;
	--transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1);
}
* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html {
	scroll-behavior:smooth;
}
body {
	font-family:'Noto Sans TC',sans-serif;
	background-color:var(--background-color);
	color:var(--text-color);
	line-height:1.7;
	min-height:100vh;
	overflow-x:hidden;
}
/* --- 全域與響應式基礎設定 --- */
        .container {
	width:100%;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding-left:1.5rem;
	padding-right:1.5rem;
}
.section {
	padding:6rem 0;
	position:relative;
}
.section-title {
	text-align:center;
	font-size:clamp(2rem,6vw,2.8rem);
	font-weight:900;
	margin-bottom:1rem;
	color:var(--dark-color);
}
.section-subtitle {
	text-align:center;
	font-size:clamp(1rem,4vw,1.15rem);
	color:var(--text-muted);
	max-width:600px;
	margin:0 auto 4rem auto;
}
.fade-in-up {
	opacity:0;
	transform:translateY(40px);
	transition:opacity 0.8s var(--transition),transform 0.8s var(--transition);
}
.fade-in-up.is-visible {
	opacity:1;
	transform:translateY(0);
}
main {
	padding-top:80px;
}
/* --- Header 重構：漢堡選單 --- */
        .main-header {
	background-color:rgba(255,255,255,0.85);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	padding:0.75rem 0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	border-bottom:1px solid var(--border-color);
	transition:all 0.3s ease-in-out;
}
.main-header.scrolled {
	border-bottom-color:var(--border-color);
	box-shadow:0 4px 20px rgba(0,0,0,0.05);
}
.header-content {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.logo a {
	display:inline-block;
}
.logo-image {
	height:45px;
	width:auto;
	display:block;
}
.header-tools {
	display:flex;
	align-items:center;
	gap:1.5rem;
}
/* 桌面版導覽列 */
        .main-nav-desktop {
	display:flex;
	gap:1rem;
}
.nav-link {
	color:var(--text-color);
	text-decoration:none;
	font-weight:500;
	padding:0.5rem 1rem;
	position:relative;
	transition:color 0.3s;
}
.nav-link::after {
	content:'';
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:0;
	height:2px;
	background-color:var(--primary-color);
	transition:width 0.3s;
}
.nav-link:hover {
	color:var(--primary-color);
}
.nav-link:hover::after {
	width:100%;
}
/* 漢堡選單按鈕 */
        .hamburger-btn {
	background:none;
	border:none;
	cursor:pointer;
	padding:0.5rem;
	z-index:1002;
	height:30px;
	width:30px;
	display:none;
	/* 在桌面版預設隱藏 */
            flex-direction:column;
	justify-content:space-around;
}
.hamburger-btn span {
	display:block;
	width:100%;
	height:3px;
	background-color:var(--dark-color);
	border-radius:3px;
	transition:all 0.3s ease-in-out;
}
/* 手機版側滑選單 (預設隱藏) */
        .mobile-nav-menu {
	position:fixed;
	top:0;
	right:0;
	width:80%;
	max-width:320px;
	height:100%;
	background-color:#fff;
	box-shadow:-5px 0 15px rgba(0,0,0,0.1);
	z-index:1001;
	transform:translateX(100%);
	transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);
	display:flex;
	flex-direction:column;
}
.mobile-nav-header {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:1rem 1.5rem;
	border-bottom:1px solid var(--border-color);
}
.mobile-menu-title {
	font-size:1.2rem;
	font-weight:700;
	color:var(--dark-color);
}
.close-btn {
	background:none;
	border:none;
	font-size:2rem;
	color:var(--text-muted);
	cursor:pointer;
	line-height:1;
}
.mobile-nav-links {
	padding:1.5rem 0;
	flex-grow:1;
	overflow-y:auto;
}
.mobile-nav-links .nav-link {
	display:block;
	padding:1rem 1.5rem;
	font-size:1.1rem;
	font-weight:500;
	border-bottom:1px solid var(--border-color);
}
.mobile-nav-links .nav-link:last-child {
	border-bottom:none;
}
.mobile-nav-links .nav-link.cart-link {
	display:flex;
	align-items:center;
	gap:0.75rem;
	background-color:var(--light-color);
	margin-top:1rem;
}
.mobile-nav-links .cart-item-count {
	position:static;
	transform:none;
	border:none;
	background-color:var(--primary-color);
	color:white;
	display:inline-flex;
	width:22px;
	height:22px;
	align-items:center;
	justify-content:center;
}
.mobile-nav-links .cart-item-count:not(.visible) {
	display:none;
}
/* 背景遮罩 (預設隱藏) */
        .menu-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.4s,visibility 0.4s;
}
/* 選單開啟時的狀態 */
        body.menu-open {
	overflow:hidden;
}
body.menu-open .mobile-nav-menu {
	transform:translateX(0);
}
body.menu-open .menu-overlay {
	opacity:1;
	visibility:visible;
}
/* --- End Header --- */

        #hero {
	padding:7rem 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:radial-gradient(circle,rgba(230,245,255,0.8) 0%,rgba(249,251,253,0) 70%);
	overflow:hidden;
}
#hero .hero-title {
	font-size:clamp(2.5rem,6vw,4rem);
	font-weight:900;
	color:var(--dark-color);
	line-height:1.2;
	/* 【核心修正】設定一個足以容納兩行文字的高度 */
    /* line-height (1.2) * font-size * 2行 + 一些緩衝 */
    /* 這裡使用 calc 和 em 單位來動態計算，確保響應式效果 */
    height:calc(1.2em * 2 + 1rem);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
#hero .hero-title .highlight {
	color:var(--primary-color);
	position:relative;
}
#animated-text::after {
	content:'|';
	display:inline-block;
	animation:blink 0.7s infinite;
	color:var(--primary-color);
	font-weight:bold;
}
@keyframes blink {
	0%,100% {
	opacity:1;
}
50% {
	opacity:0;
}
}#hero .hero-subtitle {
	font-size:1.3rem;
	margin:1.5rem auto 3rem;
	max-width:700px;
	color:var(--text-muted);
}
.cta-button {
	background:var(--primary-color);
	color:#fff;
	text-decoration:none;
	padding:1.1rem 2.8rem;
	font-size:1.1rem;
	font-weight:700;
	border-radius:50px;
	transition:var(--transition);
	box-shadow:0 6px 20px rgba(0,115,230,0.3);
	border:none;
	cursor:pointer;
}
.cta-button:hover {
	transform:translateY(-5px) scale(1.05);
	box-shadow:0 10px 25px rgba(0,115,230,0.4);
}
#why-us {
	background-color:#fff;
}
.features-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:2.5rem;
}
.feature-item {
	text-align:center;
	padding:2.5rem;
	border-radius:var(--border-radius);
	transition:var(--transition);
	/* --- 優化點 1:預先定義 box-shadow，但設為透明 --- */
            box-shadow:0 8px 30px rgba(0,115,230,0);
	/* --- 優化點 2:提示瀏覽器此元件將有 transform 動畫 --- */
            will-change:transform,box-shadow;
}
.feature-item:hover {
	transform:translateY(-10px);
	background:#fff;
	/* --- 優化點 3:hover 時只改變 box-shadow 的透明度 --- */
            box-shadow:var(--shadow);
	/* var(--shadow) 是 0 8px 30px rgba(0,115,230,0.08) */
}
.feature-icon {
	font-size:3rem;
	margin-bottom:1.5rem;
	background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.feature-item h3 {
	font-size:1.3rem;
	font-weight:700;
	margin-bottom:0.5rem;
}
#store-location {
	background-color:#fff;
}
.location-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2.5rem;
	align-items:center;
}
.location-map {
	border-radius:var(--border-radius);
	overflow:hidden;
	box-shadow:0 15px 35px rgba(0,115,230,0.1),0 5px 15px rgba(0,0,0,0.05);
	transition:transform 0.4s var(--transition),box-shadow 0.4s var(--transition);
}
.location-map:hover {
	transform:translateY(-5px);
	box-shadow:0 20px 40px rgba(0,115,230,0.15),0 8px 20px rgba(0,0,0,0.08);
}
.location-map iframe {
	width:100%;
	height:450px;
	border:none;
	display:block;
}
.location-details h3 {
	font-size:1.8rem;
	font-weight:700;
	margin-bottom:1.5rem;
	color:var(--dark-color);
}
.location-details ul {
	list-style:none;
	padding:0;
}
.location-details li {
	display:flex;
	align-items:center;
	font-size:1.1rem;
	margin-bottom:1.2rem;
	color:var(--text-color);
}
.location-details li i {
	font-size:1.2rem;
	color:var(--primary-color);
	width:30px;
	text-align:center;
	margin-right:1rem;
}
.location-details li a {
	color:inherit;
	text-decoration:none;
	transition:color 0.3s;
}
.location-details li a:hover {
	color:var(--primary-color);
}
#price-checker {
	background:var(--background-color);
}
.checker-container {
	max-width:700px;
	margin:0 auto;
}
.main-checker-card {
	background-color:var(--card-bg);
	border-radius:var(--border-radius);
	box-shadow:var(--shadow);
	border:1px solid var(--border-color);
	transition:var(--transition);
	padding:2.5rem;
}
.main-checker-card:hover {
	transform:translateY(-5px);
	box-shadow:0 12px 40px rgba(0,115,230,0.12);
}
body.modal-open {
	overflow:hidden;
}
.card-header {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:2rem;
	padding-bottom:1rem;
	border-bottom:1px solid var(--border-color);
}
.header-actions {
	display:flex;
	align-items:center;
	gap:1.5rem;
}
.main-checker-card h1 {
	font-size:1.75rem;
	font-weight:900;
	color:var(--dark-color);
	display:flex;
	align-items:center;
	gap:0.75rem;
}
.main-checker-card h1 i {
	color:var(--primary-color);
}
.lock-icon {
	font-size:1.5rem;
	cursor:pointer;
	color:var(--text-muted);
	transition:var(--transition);
}
.lock-icon:hover {
	transform:scale(1.1);
	color:var(--primary-color);
}
.lock-icon.fa-unlock-alt {
	color:var(--success-color);
}
.form-grid {
	display:grid;
	gap:1.75rem;
}
.form-group label {
	font-weight:700;
	font-size:1rem;
	margin-bottom:0.75rem;
	display:flex;
	align-items:center;
	gap:0.5rem;
}
.form-group label .step-bubble {
	background-color:var(--primary-color);
	color:white;
	border-radius:50%;
	width:24px;
	height:24px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:0.8rem;
	font-weight:700;
}
select,.filter-input {
	width:100%;
	padding:0.8rem 1rem;
	font-size:1rem;
	border-radius:8px;
	border:1px solid var(--border-color);
	background-color:#fff;
	appearance:none;
	background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%236c757d"><path d="M8 11.293l-3.646-3.647a.5.5 0 0 1 .708-.708L8 10.586l3.646-3.647a.5.5 0 0 1 .708.708L8 11.293z"/></svg>');
	background-repeat:no-repeat;
	background-position:right 1rem center;
	background-size:16px auto;
	transition:var(--transition);
}
select:focus,.filter-input:focus {
	outline:none;
	border-color:var(--primary-color);
	box-shadow:0 0 0 3px rgba(0,115,230,0.25);
}
select:disabled {
	background-color:var(--background-color);
	cursor:not-allowed;
	opacity:0.7;
}
.quick-select-group {
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
	margin-top:0.5rem;
}
.quick-select-btn {
	padding:0.4rem 0.9rem;
	font-size:0.85rem;
	font-weight:500;
	color:var(--primary-color);
	background-color:#e7f3ff;
	border:1px solid var(--primary-color);
	border-radius:20px;
	cursor:pointer;
	transition:var(--transition);
}
.quick-select-btn:hover {
	background-color:var(--primary-color);
	color:#fff;
	transform:translateY(-2px);
}
#plan-tips-container {
	margin-top:1rem;
}
#results-card {
	opacity:0;
	transform:translateY(20px);
	transition:opacity 0.5s ease,transform 0.5s ease;
	display:none;
	margin-top:2rem;
	background:var(--card-bg);
	border-radius:var(--border-radius);
	padding:2.5rem;
	border:1px solid var(--border-color);
	box-shadow:var(--shadow);
}
#results-card.visible {
	opacity:1;
	transform:translateY(0);
	display:block;
}
.price-display {
	text-align:center;
	margin-bottom:2rem;
}
.price-label {
	font-size:1rem;
	color:var(--text-muted);
	font-weight:500;
	display:block;
}
.price-label-distributor {
	color:var(--success-color);
	font-weight:700;
}
.price-display .final-price {
	font-size:2.5rem;
	font-weight:900;
	color:var(--primary-color);
	line-height:1.2;
	margin:0.5rem 0;
	transition:opacity 0.3s ease,transform 0.3s ease;
}
.price-display .final-price.animate-price {
	opacity:0;
	transform:scale(0.95);
}
.price-display .final-price small {
	font-size:1.2rem;
	font-weight:500;
	margin-left:0.25rem;
}
.price-display .original-price {
	font-size:1.1rem;
	color:var(--text-muted);
	text-decoration:line-through;
}
.selection-summary {
	font-size:1.1rem;
	font-weight:500;
	padding:1rem;
	background-color:var(--background-color);
	border-radius:8px;
	text-align:center;
}
.tips-section {
	padding:1.5rem;
	background:linear-gradient(135deg,#fff9e6 0%,#ffffff 100%);
	border-radius:var(--border-radius);
	box-shadow:0 4px 12px rgba(0,0,0,0.1);
	opacity:0;
	transform:translateY(20px);
	animation:slide-in 0.5s ease forwards;
}
@keyframes slide-in {
	to {
	opacity:1;
	transform:translateY(0);
}
}.tips-section h3 {
	font-size:1.25rem;
	font-weight:700;
	color:var(--primary-dark);
	display:flex;
	align-items:center;
	gap:0.75rem;
	margin-bottom:1rem;
}
.tips-section h3 i {
	color:var(--warning-color);
	font-size:1.5rem;
	animation:pulse-icon 1.5s ease-in-out infinite;
}
@keyframes pulse-icon {
	0%,100% {
	transform:scale(1);
}
50% {
	transform:scale(1.2);
}
}.tip-box {
	background-color:#fff;
	border-left:5px solid var(--warning-color);
	padding:1.2rem;
	margin-bottom:1rem;
	border-radius:0 10px 10px 0;
	font-size:0.95rem;
	line-height:1.7;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
	opacity:0;
	transition:opacity 0.3s ease,transform 0.3s ease;
}
.tip-box:last-child {
	margin-bottom:0;
}
.tip-box.animate-tip {
	opacity:1;
	transform:translateX(0);
}
.tip-box:hover {
	transform:scale(1.02);
	box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
.loading-placeholder {
	text-align:center;
	padding:2rem;
	color:var(--text-muted);
}
.loading-placeholder .fa-spinner {
	font-size:2rem;
	margin-bottom:1rem;
}
.cart-icon-container {
	position:relative;
	cursor:pointer;
	font-size:1.5rem;
	color:var(--text-color);
	transition:var(--transition);
}
.cart-icon-container:hover {
	color:var(--primary-color);
	transform:scale(1.1);
}
.cart-item-count {
	position:absolute;
	top:-8px;
	right:-12px;
	background-color:var(--danger-color);
	color:white;
	border-radius:50%;
	width:22px;
	height:22px;
	font-size:0.75rem;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	border:2px solid var(--card-bg);
	transform:scale(0);
	transition:transform 0.3s ease-in-out;
}
.cart-item-count.visible {
	transform:scale(1);
}
.daily-plan-notice {
	background-color:#e7f3ff;
	border:1px solid var(--primary-color);
	padding:0.8rem 1rem;
	margin:1rem 0;
	border-radius:8px;
	font-size:0.95rem;
	font-weight:500;
	text-align:center;
	color:var(--primary-dark);
}
.daily-plan-notice i {
	margin-right:0.5rem;
}
.add-to-cart-section {
	padding-top:1.5rem;
	margin-top:1.5rem;
	border-top:1px dashed var(--border-color);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1rem;
	flex-wrap:wrap;
}
.quantity-section {
	display:flex;
	align-items:center;
	gap:0.5rem;
}
.quantity-selector {
	display:flex;
	align-items:center;
	border:1px solid var(--border-color);
	border-radius:8px;
	background-color:var(--card-bg);
	box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.quantity-selector button {
	background:none;
	border:none;
	font-size:1.2rem;
	cursor:pointer;
	padding:0.75rem 1.25rem;
	color:var(--dark-color);
	transition:var(--transition);
}
.quantity-selector button:hover {
	background-color:var(--light-color);
	color:var(--primary-color);
}
.quantity-selector input {
	width:60px;
	text-align:center;
	font-size:1rem;
	font-weight:700;
	border:none;
	border-left:1px solid var(--border-color);
	border-right:1px solid var(--border-color);
	padding:0.75rem 0;
	background-color:transparent;
}
.quantity-selector input:focus {
	outline:none;
	background-color:#f0f6ff;
}
.dynamic-day-display {
	background-color:var(--primary-color);
	color:white;
	font-weight:700;
	padding:0.65rem 1.2rem;
	border-radius:8px;
	display:none;
	font-size:0.95rem;
	margin-left:0.5rem;
	transition:opacity 0.3s ease,transform 0.3s ease;
}
.dynamic-day-display.visible {
	display:inline-flex;
	align-items:center;
	opacity:1;
}
.dynamic-day-display.animate-days {
	opacity:0;
	transform:translateY(10px);
}
.add-to-cart-btn {
	background-color:var(--success-color);
	color:white;
	border:none;
	padding:0.8rem 1.5rem;
	font-size:1rem;
	font-weight:700;
	border-radius:8px;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:0.5rem;
	transition:var(--transition);
}
.add-to-cart-btn:hover {
	background-color:#1baa80;
	transform:translateY(-2px);
	box-shadow:0 4px 15px rgba(32,201,151,0.4);
}
.cart-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.6);
	z-index:1001;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease,visibility 0.3s;
	backdrop-filter:blur(5px);
}
.cart-overlay.open {
	opacity:1;
	visibility:visible;
}
.cart-modal {
	background:var(--background-color);
	border-radius:var(--border-radius);
	box-shadow:0 15px 40px rgba(0,0,0,0.2);
	width:100%;
	max-width:500px;
	max-height:90vh;
	display:flex;
	flex-direction:column;
	transform:scale(0.95);
	opacity:0;
	transition:var(--transition);
}
.cart-overlay.open .cart-modal {
	transform:scale(1);
	opacity:1;
}
.cart-modal-header {
	padding:1.2rem 1.5rem;
	border-bottom:1px solid var(--border-color);
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:var(--card-bg);
	border-radius:var(--border-radius) var(--border-radius) 0 0;
}
.cart-modal-header h2 {
	font-size:1.5rem;
	color:var(--dark-color);
}
.cart-modal-header .header-buttons {
	display:flex;
	align-items:center;
	gap:1rem;
}
.clear-cart-btn {
	background:#fff0f2;
	color:var(--danger-color);
	border:1px solid var(--danger-color);
	padding:0.4rem 0.8rem;
	border-radius:8px;
	cursor:pointer;
	font-weight:500;
	display:flex;
	align-items:center;
	gap:0.5rem;
	transition:var(--transition);
}
.clear-cart-btn:hover {
	background:var(--danger-color);
	color:white;
}
.clear-cart-btn.hidden {
	display:none;
}
.close-cart-btn {
	background:none;
	border:none;
	font-size:2rem;
	color:var(--text-muted);
	cursor:pointer;
	line-height:1;
	transition:transform 0.3s;
}
.close-cart-btn:hover {
	transform:rotate(90deg);
}
.cart-modal-body {
	flex-grow:1;
	overflow-y:auto;
	padding:1.5rem;
}
.cart-empty-msg {
	text-align:center;
	color:var(--text-muted);
	padding:3rem 0;
}
.cart-group {
	margin-bottom:2rem;
}
.cart-group:last-child {
	margin-bottom:0;
}
.cart-group-title {
	font-size:1.1rem;
	font-weight:700;
	color:var(--primary-dark);
	padding-bottom:0.75rem;
	margin-bottom:1rem;
	border-bottom:2px solid var(--primary-color);
}
.cart-item {
	display:flex;
	gap:1rem;
	padding:1rem;
	margin-bottom:1rem;
	background:var(--card-bg);
	border:1px solid var(--border-color);
	border-radius:8px;
	align-items:center;
	transition:transform 0.2s ease;
}
.cart-item:hover {
	transform:translateX(5px);
}
.cart-item-details {
	flex-grow:1;
}
.cart-item-name {
	font-weight:700;
	margin-bottom:0.25rem;
}
.cart-item-price {
	color:var(--dark-color);
	font-weight:500;
}
.cart-item-price strong {
	color:var(--primary-color);
	font-weight:700;
}
.cart-item-actions {
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.cart-item-remove-btn {
	background:none;
	border:none;
	color:var(--text-muted);
	font-size:1.1rem;
	cursor:pointer;
	transition:var(--transition);
	padding:0.5rem;
}
.cart-item-remove-btn:hover {
	color:var(--danger-color);
	transform:scale(1.2);
}
.cart-modal-footer {
	padding:1.5rem;
	border-top:1px solid var(--border-color);
	background-color:rgba(255,255,255,0.8);
	backdrop-filter:blur(5px);
	border-radius:0 0 var(--border-radius) var(--border-radius);
}
.esim-notice {
	background-color:#fff9e6;
	padding:1rem;
	border-radius:8px;
	margin-bottom:1.5rem;
	font-size:0.9rem;
	line-height:1.5;
	display:none;
	border-left:4px solid var(--warning-color);
}
.esim-notice.visible {
	display:block;
}
.esim-notice label {
	display:flex;
	align-items:flex-start;
	cursor:pointer;
	font-weight:500;
}
.esim-notice input {
	margin-right:0.75rem;
	margin-top:0.2rem;
	flex-shrink:0;
}
.remarks-section label {
	font-weight:700;
	font-size:1rem;
	margin-bottom:0.5rem;
	display:block;
}
.remarks-section textarea {
	width:100%;
	min-height:80px;
	padding:0.75rem;
	border-radius:8px;
	border:1px solid var(--border-color);
	font-size:1rem;
	font-family:inherit;
	resize:vertical;
}
.cart-total {
	display:flex;
	justify-content:space-between;
	font-size:1.2rem;
	font-weight:700;
	margin-top:1rem;
	margin-bottom:1rem;
	padding-top:1rem;
	border-top:1px dashed var(--border-color);
}
.checkout-btn {
	width:100%;
	padding:1rem;
	font-size:1.1rem;
	font-weight:700;
	background:var(--primary-color);
	color:white;
	border:none;
	border-radius:8px;
	cursor:pointer;
	transition:var(--transition);
}
.checkout-btn:hover {
	background:var(--primary-dark);
	transform:translateY(-3px);
	box-shadow:0 6px 15px rgba(0,115,230,0.3);
}
.checkout-btn:disabled {
	background:var(--secondary-color);
	cursor:not-allowed;
	opacity:0.7;
	transform:none;
	box-shadow:none;
}
.swal2-popup {
	border-radius:var(--border-radius) !important;
	box-shadow:var(--shadow) !important;
	font-family:'Noto Sans TC',sans-serif !important;
}
.swal2-title {
	color:var(--dark-color) !important;
}
.swal2-confirm,.swal2-cancel {
	border-radius:8px !important;
	padding:0.75rem 1.5rem !important;
	font-weight:500 !important;
	transition:var(--transition) !important;
}
.swal2-confirm {
	background-color:var(--primary-color) !important;
}
.swal2-confirm:hover {
	background-color:var(--primary-dark) !important;
	transform:translateY(-2px);
}
.swal2-cancel {
	background-color:var(--secondary-color) !important;
}
.swal2-input {
	height:3rem !important;
	border-radius:8px !important;
	border-color:var(--border-color) !important;
}
.swal2-input:focus {
	border-color:var(--primary-color) !important;
	box-shadow:0 0 0 3px rgba(0,115,230,0.25) !important;
}
#esim-tutorial {
	background-color:#fff;
}
.tutorial-container {
	max-width:900px;
	margin:0 auto;
}
.tutorial-tabs {
	display:flex;
	justify-content:center;
	gap:1rem;
	margin-bottom:2.5rem;
	border-bottom:2px solid var(--border-color);
}
.tab-link {
	padding:1rem 1.8rem;
	font-size:1.1rem;
	font-weight:700;
	cursor:pointer;
	border:none;
	background:none;
	color:var(--text-muted);
	position:relative;
	transition:color 0.3s;
}
.tab-link::after {
	content:'';
	position:absolute;
	bottom:-2px;
	left:0;
	width:100%;
	height:3px;
	background-color:var(--primary-color);
	transform:scaleX(0);
	transition:transform 0.4s var(--transition);
}
.tab-link.active {
	color:var(--primary-color);
}
.tab-link.active::after {
	transform:scaleX(1);
}
.tab-content {
	display:none;
}
.tab-content.active {
	display:block;
	animation:contentFadeIn 0.6s var(--transition);
}
@keyframes contentFadeIn {
	from {
	opacity:0;
	transform:translateY(10px);
}
to {
	opacity:1;
	transform:translateY(0);
}
}.tutorial-steps {
	display:grid;
	grid-template-columns:1fr;
	gap:1.5rem;
}
.step {
	display:flex;
	align-items:flex-start;
	gap:1.5rem;
	padding:1.5rem;
	border:1px solid transparent;
	border-radius:var(--border-radius);
	transition:var(--transition);
}
.step:hover {
	border-color:var(--border-color);
	background:var(--background-color);
	transform:translateX(10px);
}
.step-number {
	flex-shrink:0;
	background-color:var(--primary-color);
	color:white;
	font-weight:700;
	width:40px;
	height:40px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.2rem;
}
.step-text h4 {
	font-size:1.2rem;
	font-weight:700;
	margin-bottom:0.5rem;
}
#faq {
	background-color:var(--background-color);
	overflow:hidden;
}
.faq-container {
	max-width:900px;
	margin:0 auto;
}
.faq-item {
	background-color:#fff;
	border-radius:var(--border-radius);
	border:1px solid var(--border-color);
	margin-bottom:1rem;
	overflow:hidden;
	transition:var(--transition);
}
.faq-item:hover {
	box-shadow:var(--shadow);
	transform:translateY(-5px);
}
.faq-question {
	padding:1.5rem;
	font-size:1.15rem;
	font-weight:700;
	cursor:pointer;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.faq-question i {
	transition:transform 0.4s var(--transition);
	color:var(--primary-color);
}
.faq-answer {
	max-height:0;
	overflow:hidden;
	transition:max-height 0.5s ease-in-out,padding 0.5s ease-in-out;
}
.faq-answer-content {
	padding:0 1.5rem;
	color:var(--text-muted);
	border-top:1px solid var(--border-color);
	margin-top:-1px;
}
.faq-answer-content p,.faq-answer-content ul,.faq-answer-content ol {
	margin-bottom:1rem;
	line-height:1.8;
}
.faq-answer-content a {
	color:var(--primary-color);
	font-weight:500;
	text-decoration:none;
}
.faq-answer-content a:hover {
	text-decoration:underline;
}
.faq-item.active .faq-question i {
	transform:rotate(180deg);
}
.faq-item.active .faq-answer {
	max-height:500px;
	padding-bottom:1.5rem;
}
.faq-item.active .faq-answer-content {
	padding-top:1.5rem;
}
/* ========== Start of Replacement Footer CSS Block (V6.1) ========== */

.main-footer {
	background-color:#0b1a2c;
	color:rgba(255,255,255,0.7);
	padding:5rem 0 3rem;
	font-size:0.95rem;
	border-top:4px solid var(--primary-color);
}
.footer-top-grid {
	display:grid;
	grid-template-columns:1fr 2.5fr;
	/* 調整品牌和連結區塊的比例 */
    gap:3rem;
}
.footer-col-brand p {
	margin-top:1.5rem;
	line-height:1.8;
	color:rgba(255,255,255,0.6);
}
.footer-socials {
	margin-top:1.5rem;
	display:flex;
	gap:1.5rem;
}
.footer-socials a {
	color:rgba(255,255,255,0.7);
	font-size:1.5rem;
	transition:var(--transition);
}
.footer-socials a:hover {
	color:#fff;
	transform:scale(1.1) translateY(-2px);
}
.links-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	/* 恢復為四欄 */
    gap:2rem;
}
.footer-links-subtitle {
	font-weight:700;
	color:#fff;
	font-size:1rem;
	margin-bottom:1.5rem;
	padding-bottom:0.75rem;
	border-bottom:1px solid rgba(255,255,255,0.15);
}
.footer-col ul {
	list-style:none;
	padding:0;
}
.footer-col ul li {
	margin-bottom:1rem;
}
.footer-col ul li a,.footer-col ul li span {
	color:rgba(255,255,255,0.7);
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:0.75rem;
	transition:var(--transition);
}
.footer-col ul li a:hover {
	color:#fff;
	transform:translateX(3px);
}
/* 全新的熱門地區區塊樣式 */
.footer-hot-locations {
	margin-top:3rem;
	padding-top:2.5rem;
	border-top:1px solid rgba(255,255,255,0.1);
}
.footer-hot-locations .footer-links-subtitle {
	text-align:center;
	border-bottom:none;
	margin-bottom:1.5rem;
}
.hot-locations-list {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.8rem 1.5rem;
	padding:0;
	list-style:none;
}
.hot-locations-list li a {
	color:rgba(255,255,255,0.8);
	text-decoration:none;
	font-weight:500;
	padding:0.5rem 1rem;
	border:1px solid rgba(255,255,255,0.2);
	border-radius:50px;
	transition:var(--transition);
}
.hot-locations-list li a:hover {
	background-color:var(--primary-color);
	border-color:var(--primary-color);
	color:#fff;
}
.hot-locations-list .all-locations-link {
	font-weight:bold;
	color:#fff;
	background-color:rgba(255,255,255,0.1);
}
.hot-locations-list .all-locations-link:hover {
	background-color:var(--primary-color);
	color:#fff;
}
.footer-bottom {
	text-align:center;
	padding-top:3rem;
	margin-top:3rem;
	font-size:0.9rem;
	color:rgba(255,255,255,0.5);
	border-top:1px solid rgba(255,255,255,0.1);
}
/* 響應式調整 */
@media (max-width:992px) {
	.footer-top-grid {
	grid-template-columns:1fr;
}
.links-grid {
	grid-template-columns:repeat(2,1fr);
}
}@media (max-width:576px) {
	.links-grid {
	grid-template-columns:1fr;
}
.footer-top-grid {
	text-align:center;
}
.footer-socials {
	justify-content:center;
}
}.logo-image-footer {
	height:60px;
	width:auto;
	filter:brightness(0) invert(1) opacity(0.8);
}
/* ========== End of Replacement Footer CSS Block (V6.1) ========== */
        
        #testimonials {
	background-color:var(--background-color);
	overflow-x:hidden;
}
.testimonials-slider {
	overflow:visible;
	padding-bottom:50px;
}
.swiper-wrapper {
	display:flex;
	flex-wrap:nowrap;
}
.swiper-slide {
	height:auto;
	display:flex;
	justify-content:center;
	align-items:stretch;
	box-sizing:border-box;
}
.testimonial-card {
	background:var(--card-bg);
	padding:2.5rem;
	border-radius:var(--border-radius);
	box-shadow:var(--shadow);
	border-top:4px solid var(--primary-color);
	width:100%;
	display:flex;
	flex-direction:column;
}
.testimonial-card .stars {
	color:#ffc107;
	font-size:1.2rem;
	margin-bottom:1.5rem;
}
.testimonial-card blockquote {
	font-size:1.1rem;
	font-style:italic;
	border-left:3px solid var(--border-color);
	padding-left:1.5rem;
	margin:0 0 1.5rem 0;
	color:var(--text-color);
	flex-grow:1;
}
.testimonial-card cite {
	font-weight:700;
	color:var(--text-muted);
}
.swiper-pagination-bullet {
	background:var(--secondary-color);
	opacity:0.5;
	transition:all 0.3s;
}
.swiper-pagination-bullet-active {
	background:var(--primary-color);
	opacity:1;
	transform:scale(1.2);
}
#popular-plans {
	background-color:var(--background-color);
}
.plans-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:2rem;
}
.plan-card {
	background:var(--card-bg);
	border-radius:var(--border-radius);
	box-shadow:var(--shadow);
	padding:2.5rem;
	text-align:center;
	transition:var(--transition);
	border:1px solid var(--border-color);
}
.plan-card:hover {
	transform:translateY(-10px);
	box-shadow:0 20px 40px rgba(0,115,230,0.15);
}
.plan-icon {
	font-size:3.5rem;
	margin-bottom:1.5rem;
}
.plan-card h3 {
	font-size:clamp(1.3rem,5vw,1.5rem);
	font-weight:700;
	margin-bottom:1rem;
}
.plan-card p {
	color:var(--text-muted);
	margin-bottom:1.5rem;
	min-height:50px;
}
.plan-price {
	font-size:1.8rem;
	font-weight:900;
	color:var(--primary-color);
	margin-bottom:2rem;
}
.plan-cta {
	display:inline-block;
	width:100%;
}
#partners {
	background:#fff;
	padding-top:4rem;
	padding-bottom:4rem;
}
#partners .section-title {
	font-size:1.5rem;
	color:var(--text-muted);
	font-weight:500;
}
.logos-container {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:3rem;
}
.logos-container img {
	height:40px;
	max-width:150px;
	filter:grayscale(100%) opacity(0.6);
	transition:var(--transition);
}
.logos-container img:hover {
	filter:grayscale(0%) opacity(1);
	transform:scale(1.1);
}
.floating-buttons {
	position:fixed;
	bottom:1rem;
	right:1rem;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
	z-index:999;
}
.fab-btn {
	width:3.5rem;
	height:3.5rem;
	border:none;
	border-radius:50%;
	background-color:var(--primary-color);
	color:#fff;
	font-size:1.25rem;
	box-shadow:0 4px 12px rgba(0,0,0,0.2);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:1;
	transition:transform 0.2s,opacity 0.2s;
	position:relative;
}
.fab-btn:hover {
	transform:scale(1.1);
}
.fab-cart-count {
	position:absolute;
	top:-6px;
	right:-6px;
	min-width:1.2rem;
	height:1.2rem;
	padding:0 0.25rem;
	background-color:var(--danger-color);
	color:#fff;
	font-size:0.75rem;
	font-weight:700;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 0 0 2px #fff;
	pointer-events:none;
	transition:transform 0.2s;
}
.fab-cart-count:hover {
	transform:scale(1.1);
}
.fab-btn.hidden {
	opacity:0;
	pointer-events:none;
}
.floating-buttons.scrolling .fab-btn:not(.hidden) {
	opacity:0.5;
}
/* --- 響應式設計調整 (Media Queries) --- */

        /* 平板與手機 (小於 992px) */
        @media (max-width:992px) {
	.container {
	padding-left:1rem;
	padding-right:1rem;
}
/* --- Header Logo 置中修改 --- */
            .header-content {
	position:relative;
	/* 設定為定位基準 */
                justify-content:center;
	/* 將內容 (Logo) 水平置中 */
}
.header-tools {
	position:absolute;
	/* 將漢堡選單容器絕對定位 */
                right:0;
	/* 靠右對齊 (相對於 .container 的 padding) */
                top:50%;
	/* 垂直置中 */
                transform:translateY(-50%);
	/* 垂直置中 */
}
/* --- End Header Logo 置中修改 --- */
            .main-nav-desktop,#cart-icon-container {
	display:none;
}
.hamburger-btn {
	display:flex;
}
.floating-cart-icon {
	display:none !important;
}
.location-grid,.footer-grid {
	grid-template-columns:1fr;
	gap:3rem;
}
}/* 平板與更小裝置 (小於 768px) */
        @media (max-width:768px) {
	.section {
	padding:4rem 0;
}
#hero .hero-title {
	min-height:auto;
}
.main-checker-card,#results-card,.feature-item,.plan-card,.testimonial-card,.faq-question,.step {
	padding:1.5rem;
}
.testimonial-card {
	padding:2rem 1.5rem;
}
.links-grid {
	grid-template-columns:1fr 1fr;
}
.location-details h3 {
	font-size:1.5rem;
}
}/* 手機 (小於 576px) */
        @media (max-width:576px) {
	body {
	line-height:1.6;
}
.section {
	padding:3rem 0;
}
#hero {
	padding:5rem 0;
}
.links-grid {
	grid-template-columns:1fr;
}
.footer-grid {
	text-align:center;
}
.footer-col-brand p {
	padding-right:0;
}
.footer-socials {
	justify-content:center;
}
.add-to-cart-section {
	flex-direction:column;
	align-items:stretch;
	gap:1rem;
}
.add-to-cart-btn {
	justify-content:center;
}
}.fab-cart-count.animate-scale {
	transform:scale(1.2);
	transition:transform 0.2s ease-in-out;
}
/* --- [V2] 查詢區塊實用工具連結 - 美化樣式 --- */
.utility-links-group {
	background-color:#f0f6ff;
	/* 使用更柔和的淡藍色背景 */
    border:1px solid rgba(0,115,230,0.2);
	/* 帶透明度的藍色邊框 */
    border-radius:12px;
	/* 圓角使其看起來像一個小卡片 */
    padding:0.75rem 1rem;
	margin-top:-0.5rem;
	/* 稍微向上移動，視覺上更緊湊 */
    margin-bottom:1.5rem;
	display:flex;
	flex-direction:column;
	gap:0.5rem;
	/* 【核心修正】縮小連結之間的行距 */
}
.utility-link {
	display:inline-flex;
	align-items:center;
	gap:0.6rem;
	text-decoration:none;
	color:var(--primary-dark);
	/* 使用較深的藍色，易於閱讀 */
    font-weight:500;
	font-size:0.9rem;
	padding:0.25rem;
	border-radius:6px;
	/* 為 hover 效果準備 */
    transition:color 0.3s ease,transform 0.3s ease,background-color 0.3s ease;
}
.utility-link:hover {
	color:var(--primary-color);
	/* 滑鼠懸停時變為亮藍色 */
    transform:translateX(5px);
	/* 輕微的右移效果 */
    background-color:rgba(255,255,255,0.5);
	/* 增加一個非常微妙的白色高光 */
}
.utility-link i {
	font-size:1rem;
	width:20px;
	text-align:center;
	color:var(--primary-color);
	/* 讓圖示始終保持主題亮藍色 */
}
.esim-check-link-container {
	/* 預設隱藏，透過 JS 控制顯示 */
    display:none;
	opacity:0;
	transform:translateY(-10px);
	transition:opacity 0.4s ease,transform 0.4s ease,display 0s 0.4s;
}
.esim-check-link-container.visible {
	display:flex;
	opacity:1;
	transform:translateY(0);
	transition:opacity 0.4s ease,transform 0.4s ease,display 0s;
}
.utility-link.esim-check {
	color:var(--success-color);
	/* eSIM 連結使用成功綠色 */
    font-weight:700;
}
.utility-link.esim-check i {
	color:var(--success-color);
	/* 圖示也使用綠色 */
}
.utility-link.esim-check:hover {
	color:#158b6b;
	/* 滑鼠懸停時變為深綠色 */
    background-color:rgba(32,201,151,0.1);
	/* 增加一個淡綠色高光 */
}
/* --- [V11] 全站搜尋功能樣式 --- */
.search-tool {
	font-size:1.5rem;
	color:var(--text-color);
	cursor:pointer;
	transition:var(--transition);
}
.search-tool:hover {
	color:var(--primary-color);
	transform:scale(1.1);
}
.search-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.6);
	z-index:2000;
	display:flex;
	align-items:flex-start;
	/* 讓 modal 從頂部出現 */
    justify-content:center;
	padding-top:10vh;
	/* 距離頂部 10% 的視窗高度 */
    opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease,visibility 0.3s;
	backdrop-filter:blur(5px);
}
.search-overlay.open {
	opacity:1;
	visibility:visible;
}
.search-modal {
	background:var(--card-bg);
	border-radius:var(--border-radius);
	box-shadow:0 15px 40px rgba(0,0,0,0.2);
	width:100%;
	max-width:600px;
	max-height:80vh;
	display:flex;
	flex-direction:column;
	transform:scale(0.95) translateY(-20px);
	opacity:0;
	transition:var(--transition);
}
.search-overlay.open .search-modal {
	transform:scale(1) translateY(0);
	opacity:1;
}
.search-modal-header {
	padding:1.2rem 1.5rem;
	border-bottom:1px solid var(--border-color);
	display:flex;
	align-items:center;
	gap:1rem;
}
#search-input {
	flex-grow:1;
	border:none;
	background:none;
	font-size:1.2rem;
	font-weight:500;
	font-family:inherit;
	padding:0.5rem;
}
#search-input:focus {
	outline:none;
}
.search-modal-body {
	flex-grow:1;
	overflow-y:auto;
	padding:0.5rem;
}
.search-results-list {
	list-style:none;
	padding:0;
	margin:0;
}
.search-result-item a {
	display:block;
	padding:1rem 1.5rem;
	border-radius:8px;
	text-decoration:none;
	color:var(--text-color);
	transition:background-color 0.2s;
}
.search-result-item a:hover {
	background-color:var(--light-color);
}
.search-result-name {
	font-weight:700;
	font-size:1.05rem;
	margin-bottom:0.25rem;
}
.search-result-name .highlight {
	background-color:#fff3cd;
	/* 淡黃色高亮 */
    color:#856404;
}
.search-result-details {
	font-size:0.9rem;
	color:var(--text-muted);
}
.search-result-details .country-tag {
	background-color:#e7f3ff;
	color:var(--primary-dark);
	padding:0.2rem 0.5rem;
	border-radius:4px;
	font-weight:500;
	margin-right:0.5rem;
}
.search-message {
	padding:2rem;
	text-align:center;
	color:var(--text-muted);
}
.search-message .fa-spinner {
	font-size:1.5rem;
}
/* --- 【新增】經銷商狀態顯示樣式 for index.php --- */
.main-checker-card .card-header {
	justify-content:space-between;
	/* 確保標題和工具區左右對齊 */
}
.page-header-tools {
	display:flex;
	align-items:center;
}
#price-mode-label-status {
	font-size:0.9rem;
	font-weight:700;
	color:var(--success-color);
	background-color:#e9f9f4;
	padding:0.3rem 0.8rem;
	border-radius:20px;
	display:none;
	/* 預設隱藏 */
}
#price-mode-label-status.visible {
	display:inline-block;
}
/* ========== [V4.2 美化增強版] 產品詳情區塊樣式 ========== */
.product-details-card {
	margin-top:2.5rem;
	/* 增加與上方內容的間距 */
    border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--card-bg);
	/* 使用純白背景，與頁面背景區分 */
    box-shadow:0 4px 15px rgba(0,0,0,0.04);
	/* 添加細緻的陰影 */
    overflow:hidden;
	/* 確保子元素的圓角不會溢出 */
}
.details-header {
	padding:1rem 1.5rem;
	font-size:1.2rem;
	font-weight:700;
	color:var(--dark-color);
	background-color:var(--light-color);
	/* 為標頭添加淺灰色背景 */
    border-bottom:1px solid var(--border-color);
	display:flex;
	align-items:center;
	gap:0.75rem;
}
.details-body {
	padding:1.5rem;
	/* 增加內邊距，讓內容更寬鬆 */
    display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1.5rem;
	/* 增加基礎資訊的欄間距 */
}
.detail-item {
	padding:0;
	/* 移除舊的 padding */
}
.detail-item .label {
	font-size:0.9rem;
	color:var(--text-muted);
	font-weight:500;
	margin-bottom:0.35rem;
	/* 增加與值的間距 */
    display:block;
}
.detail-item .value {
	font-size:1rem;
	font-weight:700;
	color:var(--dark-color);
}
.detail-item .value.badge-like {
	display:inline-block;
	padding:0.3em 0.8em;
	border-radius:20px;
	font-size:0.9rem;
}
.detail-item .value.badge-native {
	background-color:#e8f0fe;
	color:#1967d2;
}
.detail-item .value.badge-roaming {
	background-color:#e6f7ff;
	color:#005f87;
}
/* --- 全新美化的手風琴 (Accordion) 樣式 (已修正作用域) --- */
.product-details-card .accordion {
    grid-column: 1 / -1; /* 佔滿兩欄 */
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.product-details-card .accordion-item {
    background-color: #fcfdff; /* 給每個項目一個極淡的藍色背景 */
    border: 1px solid var(--border-color);
    border-radius: 10px; /* 圓角化 */
    margin-bottom: 0.75rem; /* 增加項目間的垂直間距 */
    transition: all 0.25s ease-in-out;
}
.product-details-card .accordion-item:last-child {
    margin-bottom: 0;
}
.product-details-card .accordion-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 115, 230, 0.08);
    border-color: var(--primary-light);
}

.product-details-card .accordion-header {
    padding: 1rem 1.25rem; /* 調整內邊距 */
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-color); /* 標題顏色加深 */
}
.product-details-card .accordion-header i {
    color: var(--primary-color); /* 圖示統一使用主題色 */
}
.product-details-card .accordion-header::after {
    content: '\f078'; /* FontAwesome caret-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 0.9rem;
}

.product-details-card .accordion-header.active {
    color: var(--primary-dark); /* Active 狀態下標題顏色加深 */
}
.product-details-card .accordion-header.active::after {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.product-details-card .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, padding 0.3s ease-in-out; /* 優化過渡效果 */
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    padding: 0 1.25rem; /* 左右內邊距 */
}
.product-details-card .accordion-content.visible {
    max-height: 2000px; /* 從 500px 大幅增加，以容納更多內容 */
    padding: 0 1.25rem 1.25rem 1.25rem; /* Active 時加上下邊距 */
}
.product-details-card .accordion-content p { margin: 0 0 0.5rem 0; }
.product-details-card .accordion-content ul { padding-left: 1.25rem; margin: 0; }
.product-details-card .accordion-content ul li { margin-bottom: 0.25rem; }


/* admin/templates/header.php 或其他後台專用的 CSS 檔案中 */

.full-search-item {
    background-color: #eef7ff; /* 淡藍色背景 */
    text-align: center;
    border-radius: 8px;
    margin: 8px 0;
}

.full-search-link {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--primary-color); /* 使用您的主題色 */
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.full-search-link:hover {
    background-color: #dbeeff; /* 滑鼠懸停時顏色加深 */
}

/* 讓產品名稱中的高亮更明顯 */
.search-result-name .highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 1px 3px;
    border-radius: 3px;
}

/* --- 最新公告區塊樣式 --- */
.announcement-card {
    background-color: #fff;
    border-radius: var(--card-border-radius, 16px);
    padding: 2rem;
    border: 1px solid var(--border-color, #e9ecef);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}
.announcement-card:not(:last-child) {
    margin-bottom: 1.5rem;
}
.announcement-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow, 0 12px 30px rgba(0, 115, 230, 0.1));
    border-color: var(--primary-color, #0073e6);
}
.announcement-icon {
    font-size: 2rem;
    color: var(--primary-color, #0073e6);
    flex-shrink: 0;
}
.announcement-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}
.announcement-content p {
    margin: 0;
    color: var(--text-muted, #6c757d);
    font-size: 0.95rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.announcement-meta {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
}
.announcement-link {
    text-decoration: none;
    color: inherit;
}
.all-news-link {
    margin-top: 2rem;
    text-align: center;
}

/* --- 【全新美化版】AI 功能介紹區塊樣式 (V6.1 - 修正RWD) --- */
#ai-features {
    padding: 5rem 0;
    background-color: var(--soft, #f1f5f9);
    position: relative;
    overflow: hidden;
}

/* 1. 微妙的背景光暈 (從卡片底部透出) */
#ai-features .ai-features-grid {
    position: relative;
    z-index: 1; /* 確保網格在背景之上 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* 2. 卡片主體 (核心修改) */
.ai-feature-card {
    position: relative;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: var(--card-border-radius, 16px);
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e9ecef);
    
    /* 預設陰影變得更淡 */
    box-shadow: 0 4px 15px rgba(0, 115, 230, 0.04);
    
    /* 動畫效果：更加平滑的曲線 */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.4s ease;

    /* 新增：滑鼠追蹤光標的準備 */
    background-size: 200% 200%;
    background-position: 50% 50%;
}

/* 3. 【核心美化】滑鼠懸停時的光影互動效果 */
.ai-feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.5); /* 邊框變亮 */
    
    /* 陰影變得更深、更立體 */
    box-shadow: 0 15px 35px rgba(0, 115, 230, 0.1);

    /* 核心：背景產生一個追蹤滑鼠的柔和光斑 */
    background-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(231, 240, 255, 0.8) 0%,
        rgba(255, 255, 255, 0) 40%
    );
}

/* 4. 卡片內容樣式 (微調) */
.ai-feature-card .ai-icon {
    font-size: 3rem;
    color: var(--primary-color, #0073e6);
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ai-feature-card:hover .ai-icon {
    transform: scale(1.1);
}

.ai-feature-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-color);
}
.ai-feature-card p {
    color: var(--text-muted, #6c757d);
    margin-bottom: 2rem;
    min-height: 80px;
}
.ai-feature-card .cta-button {
    display: inline-block;
    transition: transform 0.3s ease;
}

.ai-feature-card:hover .cta-button {
    transform: scale(1.05);
}

/* 5. 響應式調整 (已修正) */
@media (max-width: 992px) {
    /* 調整區塊在手機上的上下間距 */
    #ai-features {
        padding: 3rem 0;
    }
    
    /* 增加 ID 選擇器 #ai-features 以提高權重 */
    #ai-features .ai-features-grid {
        grid-template-columns: 1fr;
    }
    
    /* 在小螢幕上取消段落的最小高度限制 */
    .ai-feature-card p {
        min-height: auto;
    }
}

/* 最新消息列表：使用 gap 控制卡片間距 */
#latest-news .announcements-list {
  display: flex;
  flex-direction: column;
  gap: 28px;               /* ← 調整這個數值即可：28 / 32 / 36px */
  margin-top: 0.75rem;     /* 與標題拉開一點距離 */
}

/* 大螢幕再放大一點間距（可選） */
@media (min-width: 768px)  { #latest-news .announcements-list { gap: 32px; } }
@media (min-width: 1024px) { #latest-news .announcements-list { gap: 36px; } }

/* 確保整張卡片可點 */
#latest-news .announcement-link { display: block; }

/* 由 gap 接手間距，取消舊的 margin-bottom 以免雙重間距 */
#latest-news .announcement-card:not(:last-child) { margin-bottom: 0; }

/* 底部「查看所有公告」和清單拉開距離 */
#latest-news .all-news-link { margin-top: 2.25rem; }