/*
 * ============================================================
 * TABLE OF CONTENTS (目錄)
 * ============================================================
 *
 *  1.  Partners Hero Visual
 *
 *  2.  FAQ List & Item
 *      2-1. FAQ Item 基本樣式
 *      2-2. light-mode 變體
 *      2-3. transparent-mode 變體
 *
 *  3.  FAQ Header Item
 *
 *  4.  FAQ Content
 *
 *  5.  RWD: max-width: 767px
 *
 *  6.  RWD: max-width: 576px
 *
 * ============================================================
 */

/* ============================================================
 * 1. Partners Hero Visual
 * ============================================================ */
.partners-hero-visual {
		opacity: 1;
		-webkit-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		transition: opacity 0.3s ease;
}
.partners-hero-visual.fade-out {
		opacity: 0;
		pointer-events: none; /* 防止隱藏後還能點擊 */
}

/* ============================================================
 * 2. FAQ List & Item
 * ============================================================ */
/* ---- 2-1. FAQ Item 基本樣式 ---- */
.faq-list {
		margin: 0 auto;
}
.faq-item {
		background-color: var(--color-light-gray);
		margin-bottom: 15px;
		border-radius: 8px;
		overflow: hidden;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		border: 1px solid var(--color-gray);
}
.faq-list .faq-item:hover {
		border-color: var(--color-black);
}
/* ---- 2-2. light-mode 變體 ---- */
.faq-list.light-mode .faq-item {
		background-color: var(--color-white);
		border: 1px solid var(--border-color);
}
.faq-list.light-mode .faq-item:hover {
		border-color: var(--color-gray);
}
.faq-list.light-mode .faq-header-item span {
		color: var(--dark-blue);
}
/* ---- 2-3. transparent-mode 變體 ---- */
.faq-list.transparent-mode .faq-item {
		background-color: transparent;
		border-color: transparent;
}
.faq-list.transparent-mode .faq-header-item img {
		margin-left: 0;
		margin-right: 10px;
		-webkit-filter: var(--svg-hover-white);
		filter: var(--svg-hover-white);
}
.faq-list.transparent-mode .faq-header-item span {
		font-size: var(--font-size-lg);
		font-weight: normal;
		color: var(--color-white);
}
.faq-list.transparent-mode .faq-item.active .faq-header-item span,
.faq-list.transparent-mode .faq-header-item:hover span {
		color: var(--color-yellow);
}
.faq-list.transparent-mode .faq-item.active .faq-header-item img,
.faq-list.transparent-mode .faq-header-item:hover img {
		-webkit-filter: var(--svg-hover-yellow);
		filter: var(--svg-hover-yellow);
}
.faq-list.transparent-mode .faq-item.active {
		background-color: rgba(255, 255, 255, .25);
		border-color: var(--color-white);
}
.faq-list.transparent-mode .faq-content {
		color: var(--color-white);
}
.faq-list.transparent-mode .faq-content p {
		color: var(--color-white);
}

/* ============================================================
 * 3. FAQ Header Item
 * ============================================================ */
.faq-header-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 10px 20px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: background-color 0.3s ease;
		-o-transition: background-color 0.3s ease;
		transition: background-color 0.3s ease;
}
.faq-item.active .faq-header-item {}
.faq-header-item span {
		font-size: var(--font-size-base-lg);
		font-weight: 600;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
}
.faq-header-item img {
		width: 24px;
		height: 24px;
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		-o-transition: transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		margin-left: 15px;
}

/* ============================================================
 * 4. FAQ Content
 * ============================================================ */
.faq-content {
		max-height: 0;
		overflow: hidden;
		padding: 0 20px 0 20px;
		-webkit-transition: max-height 0.3s ease, padding 0.3s ease;
		-o-transition: max-height 0.3s ease, padding 0.3s ease;
		transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-content {
		max-height: 500px;
		padding: 0 20px 15px 20px;
}
.faq-content p {
		font-size: var(--font-size-base);
		line-height: 1.8;
		color: #666;
		margin: 0;
}

/* ============================================================
 * 5. RWD: max-width: 767px
 * ============================================================ */
@media (max-width: 767px) {
		.faq-header h3 {
				font-size: var(--font-size-2lg);
		}
		.faq-header-item {
				padding: 15px;
		}
		.faq-header-item span {
				font-size: var(--font-size-base);
		}
		.faq-item.active .faq-content {
				padding: 0 15px 15px 15px;
		}
		.faq-content p {
				font-size: var(--font-size-sm);
		}
		.faq-list.transparent-mode .faq-header-item span {
				font-size: var(--font-size-base-lg);
		}
}

/* ============================================================
 * 6. RWD: max-width: 576px
 * ============================================================ */
@media (max-width: 576px) {
		.faq-list.transparent-mode .faq-header-item {
				padding: 10px;
		}
}