/*
 * Pusat Bantuan Azadel — token diselaraskan dengan
 * reference/design-system/colors_and_type.css (Biru #0095d3, Emas #FFB800).
 * Semua warna & selector diberi !important pada elemen interaktif (butang,
 * pautan, tab) sebab tema Enfold memuatkan peraturan warna `a`/`button` yang
 * lebih spesifik (cth. #top .content a) dan akan menindih CSS kita tanpa itu.
 */

.azs-bantuan {
	--azs-blue: #0095d3;
	--azs-blue-600: #0080b8;
	--azs-blue-700: #006a99;
	--azs-blue-100: #e1f3fb;
	--azs-blue-50: #f1f9fd;
	--azs-gold: #ffb800;
	--azs-gold-600: #e6a600;
	--azs-ink: #1a1a2e;
	--azs-n-50: #f8f9fb;
	--azs-n-100: #f1f3f6;
	--azs-n-200: #e6e9ee;
	--azs-n-300: #d2d7df;
	--azs-n-500: #6b7280;
	--azs-n-700: #374151;
	--azs-radius-md: 10px;
	--azs-radius-lg: 14px;
	--azs-radius-pill: 999px;
	--azs-shadow-sm: 0 1px 3px rgba(26,26,46,.06), 0 1px 2px rgba(26,26,46,.04);
	--azs-shadow-md: 0 4px 14px rgba(26,26,46,.08);

	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px 60px;
	font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--azs-ink) !important;
}

.azs-bantuan * {
	box-sizing: border-box;
}

.azs-bantuan h1,
.azs-bantuan h2,
.azs-bantuan h3 {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	color: var(--azs-ink) !important;
	margin: 0 !important;
}

/* ── Hero ── */

.azs-hero {
	text-align: center;
	padding: 48px 24px;
	margin: 24px 0 32px;
	border-radius: var(--azs-radius-lg);
	background: linear-gradient(135deg, var(--azs-blue) 0%, #00b4ff 100%);
	box-shadow: 0 8px 24px rgba(0,149,211,.25);
}

.azs-hero h1 {
	color: #fff !important;
	font-size: clamp(24px, 3.4vw, 34px) !important;
	font-weight: 800 !important;
	margin-bottom: 10px !important;
}

.azs-hero p {
	color: rgba(255,255,255,.92) !important;
	margin: 0 0 24px !important;
	font-size: 15px;
}

.azs-hero-compact {
	padding: 28px 24px;
	margin-bottom: 24px;
}

.azs-hero-compact p {
	margin: 0 !important;
}

.azs-search {
	display: flex;
	align-items: stretch;
	gap: 6px;
	max-width: 560px;
	height: 52px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--azs-radius-pill);
	padding: 6px 6px 6px 22px;
	box-shadow: var(--azs-shadow-md);
}

.azs-search-input {
	flex: 1;
	height: 100%;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 14px;
	padding: 0 !important;
	color: var(--azs-ink) !important;
}

.azs-search .azs-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 22px !important;
	white-space: nowrap;
}

.azs-search-inline {
	margin: 0 0 28px;
	max-width: 100%;
	height: 48px;
}

/* ── Section titles ── */

/*
 * Selector guna "h2.azs-section-title" (bukan sekadar ".azs-section-title")
 * supaya spesifisiti (0,1,1) sepadan/menang berbanding reset umum
 * ".azs-bantuan h1,h2,h3{margin:0 !important}" di atas — kalau tidak,
 * reset umum itu menang (spesifisiti sama tinggi + !important, tapi
 * datang dahulu dalam fail dengan selector lebih kuat) dan margin di sini
 * terus diabaikan walaupun ada !important.
 */
.azs-bantuan h2.azs-section-title {
	font-size: 19px !important;
	font-weight: 700 !important;
	margin: 36px 0 22px !important;
}

.azs-bantuan h2.azs-section-title:first-child {
	margin-top: 0 !important;
}

/* ── Category cards ── */

.azs-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.azs-cat-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: var(--azs-radius-lg);
	background: #fff;
	border: 1px solid var(--azs-n-200);
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.azs-cat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--azs-shadow-md);
	border-color: var(--azs-blue);
}

.azs-cat-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--azs-radius-md);
	background: var(--azs-blue-100);
	color: var(--azs-blue) !important;
}

.azs-cat-icon i {
	width: 22px;
	height: 22px;
}

.azs-cat-label {
	font-weight: 700 !important;
	color: var(--azs-ink) !important;
	font-size: 15px;
}

.azs-cat-desc {
	color: var(--azs-n-500) !important;
	font-size: 13px;
	line-height: 1.5;
}

/* ── Article / popular guide cards ── */

.azs-article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.azs-article-card {
	display: block;
	padding: 18px 20px;
	border-radius: var(--azs-radius-lg);
	background: #fff;
	border: 1px solid var(--azs-n-200);
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease;
}

.azs-article-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--azs-shadow-md);
}

.azs-article-tag {
	display: inline-block;
	background: var(--azs-gold);
	color: var(--azs-ink) !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 3px 10px;
	border-radius: var(--azs-radius-pill);
	margin-bottom: 10px;
}

.azs-article-card h3 {
	font-size: 15px !important;
	font-weight: 700 !important;
	margin-bottom: 6px !important;
	color: var(--azs-ink) !important;
}

.azs-article-card p {
	color: var(--azs-n-500) !important;
	font-size: 13px;
	line-height: 1.5;
	margin: 0 !important;
}

/* ── Tabs ── */

.azs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	border-bottom: 2px solid var(--azs-n-200);
	margin-bottom: 28px;
	padding-bottom: 12px;
}

.azs-bantuan a.azs-tab {
	padding: 8px 16px;
	border-radius: var(--azs-radius-pill);
	text-decoration: none !important;
	color: var(--azs-ink) !important;
	background: var(--azs-n-100) !important;
	font-weight: 600 !important;
	font-size: 14px;
	border: 1px solid transparent;
}

.azs-bantuan a.azs-tab:hover {
	border-color: var(--azs-blue);
}

.azs-bantuan a.azs-tab.azs-tab-active {
	background: var(--azs-blue) !important;
	color: #fff !important;
}

/*
 * Tab "Tiket Saya" sengaja emas — ia satu-satunya tab yang bawa pengguna
 * KELUAR dari kandungan panduan/FAQ untuk hubungi terus pasukan sokongan,
 * jadi ia patut serlah berbeza daripada tab panduan yang lain, sentiasa
 * (bukan hanya bila aktif).
 */
.azs-bantuan a.azs-tab.azs-tab-ticket {
	background: var(--azs-gold) !important;
	color: var(--azs-ink) !important;
}

.azs-bantuan a.azs-tab.azs-tab-ticket:hover {
	border-color: var(--azs-gold-600);
}

.azs-bantuan a.azs-tab.azs-tab-ticket.azs-tab-active {
	background: var(--azs-gold-600) !important;
	color: var(--azs-ink) !important;
}

.azs-subtabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.azs-bantuan a.azs-subtab {
	padding: 5px 12px;
	border: 1px solid var(--azs-n-300);
	border-radius: var(--azs-radius-md);
	text-decoration: none !important;
	color: var(--azs-ink) !important;
	font-size: 13px;
	background: #fff !important;
}

.azs-bantuan a.azs-subtab.azs-subtab-active {
	background: var(--azs-gold) !important;
	border-color: var(--azs-gold) !important;
	color: var(--azs-ink) !important;
	font-weight: 700 !important;
}

/* ── FAQ accordion ── */

.azs-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.azs-faq-item {
	border: 1px solid var(--azs-n-200);
	border-radius: var(--azs-radius-md);
	padding: 14px 16px;
	background: #fff;
}

.azs-faq-item summary {
	cursor: pointer;
	font-weight: 600 !important;
	color: var(--azs-blue) !important;
	list-style: none;
}

.azs-faq-item summary::-webkit-details-marker {
	display: none;
}

.azs-faq-item summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 8px;
	transition: transform .16s ease;
	color: var(--azs-blue);
}

.azs-faq-item[open] summary::before {
	transform: rotate(90deg);
}

.azs-faq-answer {
	margin-top: 10px;
	line-height: 1.65;
	color: var(--azs-n-700) !important;
}

/* ── Panduan articles ── */

.azs-panduan-item {
	border: 1px solid var(--azs-n-200);
	border-radius: var(--azs-radius-lg);
	padding: 22px 24px;
	margin-bottom: 18px;
	background: #fff;
	scroll-margin-top: 20px;
}

.azs-panduan-item h2 {
	color: var(--azs-blue) !important;
	margin-bottom: 12px !important;
}

.azs-panduan-body {
	color: var(--azs-n-700) !important;
	line-height: 1.65;
}

.azs-panduan-body ol,
.azs-panduan-body ul {
	padding-left: 22px;
}

/* ── Notices ── */

.azs-notice {
	padding: 12px 16px;
	border-radius: var(--azs-radius-md);
	margin-bottom: 18px;
	font-size: 14px;
}

.azs-notice-success {
	background: #e6f7ee;
	color: #1a7a4c !important;
	border: 1px solid #b8e6cd;
}

.azs-notice-error {
	background: #fdecec;
	color: #a5292c !important;
	border: 1px solid #f5c2c2;
}

.azs-notice-info {
	background: var(--azs-blue-50);
	color: var(--azs-blue) !important;
	border: 1px solid var(--azs-blue-100);
}

/* ── Forms ── */

.azs-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
}

.azs-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600 !important;
	font-size: 14px;
	color: var(--azs-ink) !important;
}

.azs-form input[type="text"],
.azs-form input[type="email"],
.azs-form select,
.azs-form textarea {
	padding: 9px 12px !important;
	border: 1px solid var(--azs-n-300) !important;
	border-radius: var(--azs-radius-md) !important;
	font-size: 14px;
	font-weight: normal !important;
	background: #fff !important;
	color: var(--azs-ink) !important;
}

.azs-form-inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	max-width: none;
}

.azs-divider {
	border: none;
	border-top: 1px solid var(--azs-n-200);
	margin: 32px 0;
}

/* ── Buttons ── */

.azs-bantuan a.azs-btn,
.azs-bantuan button.azs-btn {
	display: inline-block;
	padding: 9px 22px;
	border-radius: var(--azs-radius-md);
	background: var(--azs-blue) !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
}

.azs-bantuan a.azs-btn:hover,
.azs-bantuan button.azs-btn:hover {
	background: var(--azs-blue-600) !important;
	color: #fff !important;
}

.azs-bantuan .azs-btn-primary {
	background: var(--azs-gold) !important;
	color: var(--azs-ink) !important;
}

.azs-bantuan .azs-btn-primary:hover {
	background: var(--azs-gold-600) !important;
	color: var(--azs-ink) !important;
}

.azs-btn-small {
	padding: 5px 12px !important;
	font-size: 13px !important;
}

/* ── Ticket table ── */

.azs-ticket-table {
	width: 100%;
	border-collapse: collapse;
}

.azs-ticket-table th,
.azs-ticket-table td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid var(--azs-n-200);
	font-size: 14px;
}

.azs-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--azs-radius-pill);
	font-size: 12px;
	font-weight: 700 !important;
}

.azs-badge-baru {
	background: #fff3d6;
	color: #8a5c00 !important;
}

.azs-badge-dijawab {
	background: #e6f7ee;
	color: #1a7a4c !important;
}

.azs-badge-ditutup {
	background: var(--azs-n-100);
	color: var(--azs-n-500) !important;
}

/* ── Ticket thread ── */

.azs-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	max-height: 480px;
	overflow-y: auto;
}

.azs-msg {
	padding: 12px 16px;
	border-radius: var(--azs-radius-md);
	max-width: 640px;
}

.azs-msg-user {
	background: var(--azs-n-100);
	align-self: flex-start;
}

.azs-msg-admin {
	background: var(--azs-blue-50);
	align-self: flex-start;
	border-left: 3px solid var(--azs-blue);
}

.azs-msg-meta {
	font-size: 12px;
	color: var(--azs-n-500) !important;
	margin-bottom: 6px;
}

.azs-msg-body {
	color: var(--azs-ink) !important;
}

@media (max-width: 600px) {
	.azs-search {
		flex-wrap: wrap;
		border-radius: var(--azs-radius-lg);
	}
	.azs-search .azs-btn {
		width: 100%;
	}
}