/**
 * HK Card Compare – Public (frontend) styles.
 * Mobile-first design for a 65% mobile / 35% desktop audience.
 *
 * FlyAsia branding — no purple/green; brand-consistent palette only.
 */

/* ----------------------------------------------------------------
 * Google Fonts
 * -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ----------------------------------------------------------------
 * Variables – FlyAsia Branding
 * -------------------------------------------------------------- */
:root {
	--hkcc-primary: #b38850;
	--hkcc-primary-dark: #998263;
	--hkcc-primary-light: #f5efe6;
	--hkcc-accent: #5099b3;
	--hkcc-accent-dark: #3d7a8f;
	--hkcc-accent-light: #e8f3f7;
	--hkcc-cta: #b20000;
	--hkcc-cta-hover: #981e1e;
	--hkcc-bg: #F7F6F0;
	--hkcc-minor-bg: #f5f5f3;
	--hkcc-minor-text: #777;
	--hkcc-border: #e0e0e0;
	--hkcc-border-light: #f0f0f0;
	--hkcc-text: #333;
	--hkcc-text-muted: #777;
	--hkcc-radius: 12px;
	--hkcc-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	--hkcc-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
	--hkcc-dimmed: #999;
}

/* ----------------------------------------------------------------
 * Base & Reset
 * -------------------------------------------------------------- */
.hkcc-comparison,
.hkcc-suggest,
.hkcc-single-card {
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--hkcc-text);
	line-height: 1.6;
}

.hkcc-comparison *,
.hkcc-suggest *,
.hkcc-single-card * {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------
 * Buttons — nuclear specificity override for Flatsome theme.
 * Repeated .hkcc-btn class triples specificity (0-3-0) to beat
 * theme selectors like .entry-content button (0-1-1).
 * -------------------------------------------------------------- */
.hkcc-btn.hkcc-btn.hkcc-btn,
a.hkcc-btn.hkcc-btn.hkcc-btn,
a.hkcc-btn.hkcc-btn.hkcc-btn:link,
a.hkcc-btn.hkcc-btn.hkcc-btn:visited,
button.hkcc-btn.hkcc-btn.hkcc-btn {
	all: unset !important;
	display: inline-block !important;
	padding: 10px 20px !important;
	font-family: 'Lato', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-radius: 8px !important;
	border: none !important;
	cursor: pointer !important;
	text-align: center !important;
	min-height: 44px !important;
	line-height: 24px !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Restore flex sizing inside action bars — must come after all:unset */
.hkcc-card-actions .hkcc-btn.hkcc-btn.hkcc-btn {
	flex: 1 1 0% !important;
	min-width: 0 !important;
}

.hkcc-single-footer .hkcc-btn.hkcc-btn.hkcc-btn {
	flex: 1 1 0% !important;
	min-width: 0 !important;
}

.hkcc-btn.hkcc-btn.hkcc-btn:focus-visible {
	outline: 2px solid var(--hkcc-accent) !important;
	outline-offset: 2px !important;
}

.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary,
a.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary:link,
a.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary:visited,
button.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary {
	background: var(--hkcc-border-light) !important;
	color: var(--hkcc-text) !important;
}

.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary:hover,
a.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary:hover,
button.hkcc-btn-secondary.hkcc-btn-secondary.hkcc-btn-secondary:hover {
	background: var(--hkcc-border) !important;
	color: var(--hkcc-text) !important;
}

.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta,
a.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:link,
a.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:visited,
button.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta {
	background: var(--hkcc-cta) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	box-shadow: 0 2px 8px rgba(178, 0, 0, 0.3) !important;
}

.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:hover,
a.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:hover,
button.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:hover {
	background: var(--hkcc-cta-hover) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(178, 0, 0, 0.4) !important;
	transform: translateY(-1px) !important;
}

.hkcc-btn-cta.hkcc-btn-cta.hkcc-btn-cta:active {
	transform: translateY(0) !important;
}

.hkcc-btn-primary.hkcc-btn-primary.hkcc-btn-primary {
	background: var(--hkcc-primary) !important;
	color: #fff !important;
}

.hkcc-btn-primary.hkcc-btn-primary.hkcc-btn-primary:hover {
	background: var(--hkcc-primary-dark) !important;
	color: #fff !important;
}

/* ----------------------------------------------------------------
 * Unified toolbar (filters + sort + toggle + clear)
 * Redesigned: toggle on top, sort next, then filters below
 * -------------------------------------------------------------- */
.hkcc-toolbar {
	background: #fff;
	border: 1px solid var(--hkcc-border);
	border-radius: var(--hkcc-radius);
	margin-bottom: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.hkcc-toolbar-header {
	padding: 12px 16px;
	cursor: pointer;
	user-select: none;
}

.hkcc-toolbar-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
}

.hkcc-toggle-arrow {
	margin-left: auto;
	transition: transform 0.2s;
}

.hkcc-toolbar.open .hkcc-toggle-arrow {
	transform: rotate(180deg);
}

.hkcc-active-count {
	font-size: 13px;
	font-weight: 400;
	color: var(--hkcc-text-muted);
}

.hkcc-toolbar-body {
	padding: 0 16px 16px;
}

/* Primary controls: toggle + sort — always visible on top */
.hkcc-toolbar-primary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--hkcc-border-light);
}

/* View selector dropdown (miles / cash / hotel programs) */
.hkcc-view-selector {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
}

.hkcc-view-selector label {
	font-weight: 600;
	white-space: nowrap;
}

.hkcc-view-select,
.hkcc-sort-select {
	padding: 6px 10px !important;
	border: 1px solid var(--hkcc-border) !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-family: 'Lato', sans-serif !important;
	font-weight: 400 !important;
	background: #fff !important;
	cursor: pointer !important;
	min-height: 36px !important;
	color: var(--hkcc-text) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	padding-right: 28px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Sort bar */
.hkcc-sort-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-left: auto;
}

.hkcc-sort-bar label {
	font-weight: 600;
	white-space: nowrap;
}

/* Filter chips (shared by feature filters, bank, network) */
.hkcc-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.hkcc-filter-chip {
	display: none !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.hkcc-filter-chip + label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	background: var(--hkcc-bg);
	border: 1px solid var(--hkcc-border);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hkcc-text);
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
	min-height: 36px;
}

.hkcc-filter-chip + label:hover {
	border-color: var(--hkcc-primary);
	background: var(--hkcc-primary-light);
}

.hkcc-filter-chip:checked + label {
	background: var(--hkcc-primary);
	border-color: var(--hkcc-primary);
	color: #fff;
	font-weight: 600;
}

/* Taxonomy filter groups */
.hkcc-filter-group {
	margin-bottom: 12px;
}

.hkcc-filter-heading {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
	padding: 4px 0;
	color: var(--hkcc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Filter chip sections — grouped by category */
.hkcc-filter-chip-section {
	margin-bottom: 10px;
}

.hkcc-filter-chip-section .hkcc-filter-heading {
	margin-bottom: 6px;
}


.hkcc-clear-filters {
	background: none;
	border: none;
	color: var(--hkcc-accent);
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
	margin-top: 4px;
}

/* ----------------------------------------------------------------
 * Card count
 * -------------------------------------------------------------- */
.hkcc-card-count {
	font-size: 13px;
	color: var(--hkcc-text-muted);
	padding: 6px 0 12px;
}

/* ----------------------------------------------------------------
 * Listing card (collapsed)
 * -------------------------------------------------------------- */
.hkcc-listing-card {
	background: #fff;
	border: 1px solid var(--hkcc-border);
	border-radius: var(--hkcc-radius);
	margin-bottom: 20px;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	box-shadow: var(--hkcc-shadow);
	position: relative;
}

.hkcc-listing-card:hover {
	box-shadow: var(--hkcc-shadow-hover);
	transform: translateY(-2px);
}

.hkcc-card-collapsed {
	padding: 20px;
	padding-top: 42px;
}

/* Tagline bookmark — ribbon style, positioned top-left but OUTSIDE card-collapsed
   so it never overlays card face image or content */
.hkcc-tagline-bookmark {
	position: absolute;
	top: 14px;
	left: 0;
	background: var(--hkcc-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 14px 4px 10px;
	border-radius: 0 4px 4px 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	z-index: 2;
	max-width: 70%;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Cards without tagline don't need the extra top padding */
.hkcc-listing-card:not(:has(.hkcc-tagline-bookmark)) .hkcc-card-collapsed {
	padding-top: 20px;
}

/* When no card face image: same padding since bookmark is outside collapsed */
.hkcc-no-cardface .hkcc-card-collapsed {
	padding-top: 42px;
}

.hkcc-no-cardface:not(:has(.hkcc-tagline-bookmark)) .hkcc-card-collapsed {
	padding-top: 20px;
}

.hkcc-card-image {
	margin-bottom: 14px;
	text-align: center;
}

.hkcc-card-image a {
	display: inline-block;
}

.hkcc-card-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s ease;
}

/* Mobile: limit card face size */
.hkcc-card-collapsed .hkcc-card-image img {
	max-width: 260px;
}

.hkcc-listing-card:hover .hkcc-card-image img {
	transform: scale(1.02);
}

.hkcc-card-header {
	margin-bottom: 6px;
}

.hkcc-card-name {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #111;
}

.hkcc-welcome-preview {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: var(--hkcc-primary-light);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--hkcc-primary-dark);
}

.hkcc-welcome-preview-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.hkcc-welcome-preview-text {
	font-weight: 500;
	line-height: 1.4;
}

.hkcc-featured-params {
	background: var(--hkcc-bg);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 14px;
}

.hkcc-featured-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 14px;
}

.hkcc-featured-row + .hkcc-featured-row {
	border-top: 1px solid var(--hkcc-border-light);
}

.hkcc-featured-label {
	color: var(--hkcc-text-muted);
}

.hkcc-featured-value {
	font-weight: 700;
	color: var(--hkcc-primary);
	font-size: 15px;
}

.hkcc-card-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: 14px;
}


/* ----------------------------------------------------------------
 * Dimmed card — no affiliate link & no blog post link
 * -------------------------------------------------------------- */
.hkcc-card-dimmed .hkcc-tagline-bookmark {
	background: var(--hkcc-dimmed);
}

.hkcc-card-dimmed .hkcc-featured-params {
	background: #f5f5f5;
}

.hkcc-card-dimmed .hkcc-featured-value {
	color: var(--hkcc-dimmed);
}

.hkcc-card-dimmed .hkcc-welcome-preview {
	background: #f5f5f5;
	color: var(--hkcc-dimmed);
}

.hkcc-card-dimmed {
	opacity: 0.7;
}

.hkcc-card-dimmed:hover {
	opacity: 1;
}

/* ----------------------------------------------------------------
 * Listing card (expanded) — detail sections
 * -------------------------------------------------------------- */
.hkcc-card-expanded {
	padding: 0 20px 20px;
	border-top: 1px solid var(--hkcc-border-light);
}

/* Padding for first section after the border-top */
.hkcc-card-expanded > .hkcc-details-section:first-child {
	margin-top: 16px;
}

.hkcc-details-section {
	margin-bottom: 16px;
}

.hkcc-section-icon {
	margin-right: 6px;
}

.hkcc-details-section h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 18px 0 10px;
	color: #222;
}

.hkcc-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 14px;
	border-bottom: 1px dotted var(--hkcc-border-light);
}

.hkcc-detail-label {
	color: #555;
	flex-shrink: 0;
	margin-right: 8px;
}

.hkcc-detail-value {
	text-align: right;
	font-weight: 500;
}

/* Welcome section — brand primary */
.hkcc-section-welcome {
	background: var(--hkcc-primary-light);
	border-radius: 10px;
	padding: 2px 16px 12px;
	border-left: 4px solid var(--hkcc-primary);
}

.hkcc-section-welcome h4 {
	color: var(--hkcc-primary-dark);
}

.hkcc-welcome-banner {
	margin-bottom: 4px;
}

/* Welcome expiry date — white bubble with colored text (negative style) */
.hkcc-welcome-expiry-date {
	font-size: 13px;
	font-weight: 600;
	color: var(--hkcc-primary);
	background: #fff;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	margin: 0 0 8px;
	border: 1px solid rgba(179, 136, 80, 0.2);
}

.hkcc-welcome-desc {
	font-size: 14px;
	line-height: 1.7;
}

.hkcc-welcome-desc ul,
.hkcc-welcome-desc ol {
	padding-left: 1.5em;
	margin: 6px 0;
}

.hkcc-welcome-desc li {
	margin-bottom: 4px;
}

.hkcc-cooling {
	font-size: 13px;
	color: var(--hkcc-text-muted);
	margin-top: 4px;
}

/* Rewards section — brand accent */
.hkcc-section-rewards {
	background: var(--hkcc-accent-light);
	border-radius: 10px;
	padding: 2px 16px 12px;
	margin-top: 16px;
}

.hkcc-section-rewards h4 {
	color: var(--hkcc-accent-dark);
}

.hkcc-section-rewards .hkcc-detail-row {
	border-bottom-color: rgba(80, 153, 179, 0.12);
}

.hkcc-section-rewards .hkcc-reward-value {
	color: var(--hkcc-accent-dark);
	font-weight: 700;
	font-size: 15px;
}

/* Benefits section — lighter accent */
.hkcc-section-benefits {
	background: var(--hkcc-accent-light);
	border-radius: 10px;
	padding: 2px 16px 12px;
}

.hkcc-section-benefits h4 {
	color: var(--hkcc-accent-dark);
}

.hkcc-section-benefits .hkcc-detail-row {
	border-bottom-color: rgba(80, 153, 179, 0.1);
}

/* Minor info sections — unified for 發卡/結算機構, 申請資格, 費用, 備註 */
.hkcc-section-minor {
	background: var(--hkcc-minor-bg);
	border-radius: 8px;
	padding: 2px 16px 12px;
}

.hkcc-section-minor h4 {
	font-size: 14px;
	color: var(--hkcc-minor-text);
	font-weight: 600;
}

.hkcc-section-minor .hkcc-detail-row {
	font-size: 13px;
	color: var(--hkcc-minor-text);
}

.hkcc-section-minor .hkcc-detail-label,
.hkcc-section-minor .hkcc-detail-value {
	color: var(--hkcc-minor-text);
	font-weight: 400;
}

/* Footnotes */
.hkcc-footnote {
	font-size: 12px;
	color: var(--hkcc-text-muted);
	margin: 4px 0;
	line-height: 1.5;
}

.hkcc-footnote sup {
	color: var(--hkcc-primary);
	font-weight: 700;
	margin-right: 2px;
}

.hkcc-fn-ref {
	color: var(--hkcc-primary);
	font-weight: 700;
	font-size: 11px;
	margin-left: 2px;
}

/* Mid-section action buttons (between welcome & rewards bubbles) */
.hkcc-card-actions-mid {
	margin: 16px 0;
}

/* In spotlight cards, extra spacing between action buttons and footnotes */
.hkcc-spotlight-card .hkcc-card-actions-mid {
	margin-bottom: 24px;
}

.hkcc-card-actions-bottom {
	padding-top: 16px;
	border-top: 1px solid var(--hkcc-border-light);
}

/* ----------------------------------------------------------------
 * cc_suggest title
 * -------------------------------------------------------------- */
.hkcc-suggest-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
}

.hkcc-no-results {
	text-align: center;
	color: var(--hkcc-text-muted);
	padding: 40px 16px;
	font-size: 15px;
}

.hkcc-loading .hkcc-card-list {
	opacity: 0.5;
	pointer-events: none;
}

/* ----------------------------------------------------------------
 * Single card template
 * -------------------------------------------------------------- */
.hkcc-single-card {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.hkcc-single-card-preview {
	margin-bottom: 32px;
}

.hkcc-single-card-preview .hkcc-listing-card {
	margin-bottom: 0;
}

.hkcc-single-footer {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 20px 0;
	border-top: 1px solid var(--hkcc-border);
}

/* ----------------------------------------------------------------
 * Desktop (min-width: 768px)
 * -------------------------------------------------------------- */
@media (min-width: 768px) {
	.hkcc-comparison {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Desktop: always show toolbar body, stacked layout */
	.hkcc-toolbar-body {
		display: block !important;
	}

	.hkcc-toolbar-primary {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.hkcc-toggle-arrow {
		display: none;
	}

	.hkcc-card-collapsed {
		display: grid;
		grid-template-columns: 180px 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 0 20px;
		align-items: start;
	}

	.hkcc-card-collapsed .hkcc-card-image {
		grid-column: 1;
		grid-row: 1 / 5;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hkcc-card-collapsed .hkcc-card-image img {
		max-width: 170px;
	}

	.hkcc-card-collapsed .hkcc-card-header {
		grid-column: 2;
		grid-row: 1;
	}

	.hkcc-card-collapsed .hkcc-welcome-preview {
		grid-column: 2;
		grid-row: 2;
	}

	.hkcc-card-collapsed .hkcc-featured-params {
		grid-column: 2;
		grid-row: 3;
	}

	.hkcc-card-collapsed .hkcc-card-actions {
		grid-column: 2;
		grid-row: 4;
	}

	/* No-cardface cards: single column layout on desktop */
	.hkcc-no-cardface .hkcc-card-collapsed {
		display: block;
	}

	.hkcc-suggest {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}