/**
 * Postal Coaching Courses — front-end card catalogue.
 *
 * A faithful port of the approved hard-coded design (test.php): Poppins,
 * pill tabs with a solid active fill, cards with a 5px accent top border,
 * fully rounded buttons and a red outlined Checklist.
 *
 * The !important flags are inherited from that reference on purpose — this
 * markup drops into a page alongside a theme that styles a, button, table and
 * h3 aggressively, and the design has to win.
 *
 * Where the design hard-coded #0089c8 we use var(--pc-accent, #0089c8) so the
 * Settings → Accent colour option keeps working; the fallback is the exact
 * reference colour, so an unset property renders identically.
 */

.ace-wp-wrapper {
	font-family: 'Poppins', sans-serif !important;
	color: #2d3748 !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 15px !important;
	box-sizing: border-box !important;
}

.ace-wp-wrapper * {
	box-sizing: border-box !important;
}

/* Optional heading from [postal_coaching heading="…"] — not in the reference,
   styled to sit with it. */
.ace-wp-heading {
	font-family: 'Poppins', sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

/* ---------------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------------ */

.ace-wp-tabs-nav {
	display: block !important;
	width: 100% !important;
	margin: 0 0 25px 0 !important;
	padding: 0 0 15px 0 !important;
	border-bottom: 2px solid #e2e8f0 !important;
	text-align: left !important;
}

.ace-wp-tab-btn {
	display: inline-block !important;
	background: #f7fafc !important;
	border: 1px solid #e2e8f0 !important;
	padding: 10px 18px !important;
	margin: 0 8px 8px 0 !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4a5568 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	text-transform: none !important;
	transition: all 0.2s ease !important;
	line-height: inherit !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.ace-wp-tab-btn:hover {
	background: #edf2f7 !important;
	color: #0089c8 !important;
	color: var(--pc-accent, #0089c8) !important;
}

.ace-wp-tab-btn.active {
	background: #0089c8 !important;
	background: var(--pc-accent, #0089c8) !important;
	color: #ffffff !important;
	border-color: #0089c8 !important;
	border-color: var(--pc-accent, #0089c8) !important;
}

.ace-wp-tab-btn:focus-visible {
	outline: 2px solid #2b6cb0 !important;
	outline-offset: 2px !important;
}

.ace-wp-tab-panel {
	display: none !important;
	width: 100% !important;
	text-align: left !important;
}

.ace-wp-tab-panel.active {
	display: block !important;
}

/* Heading shown per group when tabs="no" — not in the reference. */
.ace-wp-panel-title {
	font-family: 'Poppins', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.ace-wp-tab-panel + .ace-wp-tab-panel .ace-wp-panel-title {
	margin-top: 10px !important;
}

/* ---------------------------------------------------------------------------
 * Grid — inline-block columns with the font-size:0 whitespace fix
 * ------------------------------------------------------------------------ */

.ace-wp-card-grid {
	display: block !important;
	width: 100% !important;
	margin: 0 -10px !important;
	text-align: left !important;
	font-size: 0 !important;
}

.ace-wp-card-box {
	display: inline-block !important;
	vertical-align: top !important;
	width: 33.333% !important;
	padding: 0 10px !important;
	margin-bottom: 20px !important;
	font-size: 14px !important;
}

.ace-wp-cols-2 .ace-wp-card-box {
	width: 50% !important;
}

.ace-wp-cols-3 .ace-wp-card-box {
	width: 33.333% !important;
}

.ace-wp-cols-4 .ace-wp-card-box {
	width: 25% !important;
}

@media (max-width: 1200px) {
	.ace-wp-cols-4 .ace-wp-card-box {
		width: 33.333% !important;
	}
}

@media (max-width: 991px) {
	.ace-wp-card-box,
	.ace-wp-cols-3 .ace-wp-card-box,
	.ace-wp-cols-4 .ace-wp-card-box {
		width: 50% !important;
	}
}

@media (max-width: 600px) {
	.ace-wp-card-box,
	.ace-wp-cols-2 .ace-wp-card-box,
	.ace-wp-cols-3 .ace-wp-card-box,
	.ace-wp-cols-4 .ace-wp-card-box {
		width: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.ace-wp-card {
	background: #ffffff !important;
	border-radius: 12px !important;
	border: 1px solid #e2e8f0 !important;
	border-top: 5px solid #0089c8 !important;
	border-top-color: var(--pc-accent, #0089c8) !important;
	padding: 20px 20px 15px 20px !important;
	min-height: 240px !important;
	position: relative !important;
	text-align: left !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	display: flex !important;
	flex-direction: column !important;
}

.ace-wp-badge-row {
	margin-bottom: 8px !important;
	display: block !important;
	text-align: left !important;
}

.ace-wp-badge-delivery {
	display: inline-block !important;
	background: #e6f4ea !important;
	color: #137333 !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 3px 10px !important;
	border-radius: 50px !important;
	margin-right: 5px !important;
	vertical-align: middle !important;
}

.ace-wp-badge-branch {
	display: inline-block !important;
	background: #ebf8ff !important;
	color: #2b6cb0 !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
}

/* The delivery icon is an inline SVG rather than an emoji (see pc_icon()), so
   it inherits the badge colour and never depends on font coverage. */
.ace-wp-ico {
	display: inline-block !important;
	vertical-align: -1px !important;
	margin-right: 1px !important;
}

.ace-wp-card-title {
	font-family: 'Poppins', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	overflow: hidden !important;
	text-align: left !important;
}

.ace-wp-card-subtext {
	font-size: 12px !important;
	color: #718096 !important;
	margin: -6px 0 10px 0 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	font-weight: 500 !important;
}

.ace-wp-stream-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 5px !important;
	margin: 0 0 18px 0 !important;
}

.ace-wp-stream-chip {
	display: inline-block !important;
	background: #ebf8ff !important;
	color: #2b6cb0 !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	padding: 3px 9px !important;
	border-radius: 50px !important;
	line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------------
 * Fees
 *
 * margin-top:auto is the one intentional addition to the reference: the card
 * is a flex column with min-height:240px, so on short cards this pins the
 * fees + footer block to the bottom edge instead of leaving the gap below it.
 * ------------------------------------------------------------------------ */

.ace-wp-fees {
	border-bottom: 1px solid #edf2f7 !important;
	padding-bottom: 8px !important;
	margin: auto 0 0 0 !important;
	display: block !important;
	text-align: left !important;
}

.ace-wp-fee-row {
	display: block !important;
	width: 100% !important;
	margin-bottom: 4px !important;
	font-size: 13px !important;
	color: #718096 !important;
	min-height: 18px !important;
	text-align: left !important;
}

.ace-wp-fee-label {
	display: inline-block !important;
	width: 49% !important;
	text-align: left !important;
	vertical-align: top !important;
}

.ace-wp-fee-value {
	display: inline-block !important;
	width: 49% !important;
	text-align: right !important;
	font-weight: 500 !important;
	color: #4a5568 !important;
	vertical-align: top !important;
}

/* ---------------------------------------------------------------------------
 * View more
 * ------------------------------------------------------------------------ */

.ace-wp-view-more-link {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #0089c8 !important;
	color: var(--pc-accent, #0089c8) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	margin: 8px 0 0 0 !important;
	box-shadow: none !important;
}

.ace-wp-view-more-link:hover {
	text-decoration: underline !important;
}

.ace-wp-description {
	display: none !important;
	font-size: 12px !important;
	color: #718096 !important;
	line-height: 1.5 !important;
	margin: 6px 0 0 0 !important;
}

.ace-wp-description.show {
	display: block !important;
}

.ace-wp-description p {
	margin: 0 0 6px 0 !important;
	font-size: 12px !important;
	color: #718096 !important;
	line-height: 1.5 !important;
}

.ace-wp-description p:last-child,
.ace-wp-description ul:last-child,
.ace-wp-description ol:last-child {
	margin-bottom: 0 !important;
}

.ace-wp-description ul,
.ace-wp-description ol {
	margin: 0 0 6px 0 !important;
	padding-left: 18px !important;
}

.ace-wp-description a {
	color: #0089c8 !important;
	color: var(--pc-accent, #0089c8) !important;
	text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
 * Footer table
 * ------------------------------------------------------------------------ */

.ace-wp-card-footer-table {
	display: table !important;
	width: 100% !important;
	height: 40px !important;
	border-collapse: collapse !important;
	border: none !important;
	margin: 12px 0 0 0 !important;
	padding: 0 !important;
	table-layout: fixed !important;
	background: transparent !important;
}

.ace-wp-footer-cell {
	display: table-cell !important;
	vertical-align: middle !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
}

.ace-wp-total-label {
	font-size: 9px !important;
	text-transform: uppercase !important;
	color: #a0aec0 !important;
	display: block !important;
	line-height: 1 !important;
	margin-bottom: 1px !important;
	text-align: left !important;
}

.ace-wp-total-price {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #0089c8 !important;
	color: var(--pc-accent, #0089c8) !important;
	line-height: 1.1 !important;
	display: block !important;
	text-align: left !important;
}

.ace-wp-checklist-btn {
	display: block !important;
	background: #fff !important;
	color: #dc3545 !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	padding: 10px 2px !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	border: 1px solid #f5c6cb !important;
	text-align: center !important;
	line-height: 1 !important;
	transition: all 0.2s ease !important;
	width: 92% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-shadow: none !important;
}

.ace-wp-checklist-btn:hover {
	background: #fff5f5 !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
}

.ace-wp-enroll-btn {
	display: block !important;
	background: #0089c8 !important;
	background: var(--pc-accent, #0089c8) !important;
	color: #ffffff !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	padding: 11px 2px !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	border: none !important;
	text-align: center !important;
	line-height: 1 !important;
	width: 100% !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.ace-wp-enroll-btn:hover,
.ace-wp-enroll-btn:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
 * Stream dropdown
 * ------------------------------------------------------------------------ */

.ace-wp-enroll-wrap {
	position: relative !important;
	width: 100% !important;
}

.ace-wp-stream-panel {
	display: none !important;
	position: absolute !important;
	bottom: 48px !important;
	right: 0 !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
	padding: 6px !important;
	z-index: 20 !important;
	min-width: 170px !important;
	text-align: left !important;
}

.ace-wp-stream-panel.show {
	display: block !important;
}

/* Opens downwards when the card sits too close to the top of the viewport for
   the panel to fit above the button. */
.ace-wp-stream-panel.is-flipped {
	bottom: auto !important;
	top: 48px !important;
}

.ace-wp-stream-link {
	display: block !important;
	padding: 7px 10px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #2b6cb0 !important;
	text-decoration: none !important;
	border-radius: 5px !important;
	white-space: nowrap !important;
	box-shadow: none !important;
}

.ace-wp-stream-link:hover {
	background: #ebf8ff !important;
	color: #2b6cb0 !important;
	text-decoration: none !important;
}

/* On the narrowest screens a nowrap panel can overflow the card. */
@media (max-width: 600px) {
	.ace-wp-stream-panel {
		min-width: 0 !important;
		width: 100% !important;
	}

	.ace-wp-stream-link {
		white-space: normal !important;
	}
}

/* ---------------------------------------------------------------------------
 * Checklist popup
 *
 * The document lives hidden inside each card and is cloned into a single
 * overlay appended to <body>, so it escapes any theme container that clips or
 * stacks below other page furniture.
 * ------------------------------------------------------------------------ */

.ace-wp-checklist-doc[hidden] {
	display: none !important;
}

.ace-wp-cl-overlay {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 24px 16px !important;
	overflow-y: auto !important;
	background: rgba(15, 25, 35, 0.62) !important;
	font-family: 'Poppins', sans-serif !important;
	-webkit-overflow-scrolling: touch !important;
}

.ace-wp-cl-overlay[hidden] {
	display: none !important;
}

.ace-wp-cl-dialog {
	position: relative !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: auto !important;
	background: #ffffff !important;
	border-radius: 10px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
	padding: 22px !important;
	box-sizing: border-box !important;
}

.ace-wp-cl-close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #718096 !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 30px !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.ace-wp-cl-close:hover,
.ace-wp-cl-close:focus {
	background: #edf2f7 !important;
	color: #1a202c !important;
}

/* Logo -------------------------------------------------------------------- */

.ace-wp-cl-brand {
	text-align: center !important;
	margin: 4px 0 14px 0 !important;
}

.ace-wp-cl-logo {
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 62px !important;
	margin: 0 auto !important;
	border: none !important;
	box-shadow: none !important;
}

/* The document table ------------------------------------------------------ */

.ace-wp-cl-table {
	width: 100% !important;
	margin: 0 !important;
	border-collapse: collapse !important;
	border: 1px solid #000000 !important;
	background: #ffffff !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	table-layout: fixed !important;
}

.ace-wp-cl-table th,
.ace-wp-cl-table td {
	border: 1px solid #000000 !important;
	padding: 5px 8px !important;
	vertical-align: middle !important;
	color: #1a202c !important;
	background: transparent !important;
}

.ace-wp-cl-head th {
	background: #dce6f1 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-align: center !important;
	white-space: nowrap !important;
}

.ace-wp-cl-head .ace-wp-cl-c-name {
	text-align: center !important;
}

.ace-wp-cl-caption th {
	background: #dce6f1 !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	text-align: center !important;
	padding: 6px 8px !important;
}

.ace-wp-cl-table tbody tr.ace-wp-cl-alt td {
	background: #ededed !important;
}

.ace-wp-cl-c-num {
	width: 52px !important;
	text-align: center !important;
}

.ace-wp-cl-c-type {
	width: 116px !important;
	text-align: center !important;
}

.ace-wp-cl-c-remark {
	width: 88px !important;
	text-align: center !important;
}

.ace-wp-cl-c-name {
	text-align: left !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.ace-wp-cl-foot td {
	background: #ffffff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-align: center !important;
	padding: 7px 8px !important;
}

/* Long lists --------------------------------------------------------------
 *
 * A short list keeps the plain layout: the sheet grows and the overlay
 * scrolls. Past the row threshold the dialog is capped to the viewport, the
 * table area scrolls inside it and the column header sticks, so "S No. /
 * Name of the Subject Book / …" stays visible at row 90. The class is added by
 * JS only when needed, so a normal 9-book list renders exactly as before.
 * ------------------------------------------------------------------------ */

.ace-wp-cl-long .ace-wp-cl-dialog {
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(100vh - 48px) !important;
}

.ace-wp-cl-long .ace-wp-cl-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

.ace-wp-cl-long .ace-wp-cl-head th {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 2 !important;
	/* border-collapse drops the borders on sticky cells — redraw them. */
	box-shadow: 0 1px 0 0 #000000, 0 -1px 0 0 #000000 !important;
}

.ace-wp-cl-long .ace-wp-cl-count {
	flex: 0 0 auto !important;
	margin: 0 0 8px 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #718096 !important;
	text-align: right !important;
}

.ace-wp-cl-count {
	display: none !important;
}

.ace-wp-cl-long .ace-wp-cl-actions {
	flex: 0 0 auto !important;
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid #e2e8f0 !important;
}

/* Actions ---------------------------------------------------------------- */

.ace-wp-cl-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	justify-content: center !important;
	margin: 16px 0 0 0 !important;
}

.ace-wp-cl-actions .ace-wp-cl-btn {
	display: inline-block !important;
	width: auto !important;
	padding: 9px 20px !important;
	border: 1px solid #0089c8 !important;
	border-color: var(--pc-accent, #0089c8) !important;
	border-radius: 50px !important;
	background: #ffffff !important;
	color: #0089c8 !important;
	color: var(--pc-accent, #0089c8) !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.ace-wp-cl-actions .ace-wp-cl-btn-primary {
	background: #0089c8 !important;
	background: var(--pc-accent, #0089c8) !important;
	color: #ffffff !important;
}

.ace-wp-cl-actions .ace-wp-cl-btn:hover,
.ace-wp-cl-actions .ace-wp-cl-btn:focus {
	text-decoration: none !important;
}

/* The trigger is a <button>, so undo the theme's button chrome. */
button.ace-wp-checklist-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: 'Poppins', sans-serif !important;
	cursor: pointer !important;
}

@media (max-width: 600px) {
	.ace-wp-cl-overlay {
		padding: 12px 8px !important;
	}

	.ace-wp-cl-dialog {
		padding: 16px 12px !important;
	}

	.ace-wp-cl-table {
		font-size: 11.5px !important;
	}

	.ace-wp-cl-table th,
	.ace-wp-cl-table td {
		padding: 4px 5px !important;
	}

	.ace-wp-cl-c-num {
		width: 34px !important;
	}

	.ace-wp-cl-c-type {
		width: 74px !important;
	}

	.ace-wp-cl-c-remark {
		width: 58px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Print — show every panel, drop the interactive bits
 * ------------------------------------------------------------------------ */

@media print {
	.ace-wp-tab-panel {
		display: block !important;
	}

	.ace-wp-tabs-nav,
	.ace-wp-enroll-wrap,
	.ace-wp-view-more-link {
		display: none !important;
	}

	.ace-wp-card {
		box-shadow: none !important;
		break-inside: avoid !important;
	}

	/* Printing the popup: hide the page behind it and let the sheet flow. */
	body.ace-wp-cl-printing > *:not(.ace-wp-cl-overlay) {
		display: none !important;
	}

	body.ace-wp-cl-printing .ace-wp-cl-overlay {
		position: static !important;
		display: block !important;
		padding: 0 !important;
		overflow: visible !important;
		background: transparent !important;
	}

	body.ace-wp-cl-printing .ace-wp-cl-dialog {
		max-width: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	body.ace-wp-cl-printing .ace-wp-cl-close,
	body.ace-wp-cl-printing .ace-wp-cl-actions,
	body.ace-wp-cl-printing .ace-wp-cl-count {
		display: none !important;
	}

	/* Undo the long-list viewport cap so all 100 rows reach the paper. */
	body.ace-wp-cl-printing .ace-wp-cl-dialog {
		display: block !important;
		max-height: none !important;
	}

	body.ace-wp-cl-printing .ace-wp-cl-body {
		overflow: visible !important;
	}

	body.ace-wp-cl-printing .ace-wp-cl-head th {
		position: static !important;
		box-shadow: none !important;
	}

	/* Repeat the column header on every printed page, and never split a row. */
	.ace-wp-cl-table thead {
		display: table-header-group !important;
	}

	.ace-wp-cl-table tr {
		break-inside: avoid !important;
		page-break-inside: avoid !important;
	}

	.ace-wp-cl-table tbody tr.ace-wp-cl-alt td,
	.ace-wp-cl-head th,
	.ace-wp-cl-caption th {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}