/* =========================================================
   Academic Certificate Generator — Frontend Styles v1.4
   Portrait A4, layout-driven absolute positioning.
   No gold underlines anywhere.
   ========================================================= */

.coc-certificate {
	--acg-accent: #1a3b5d;
	--acg-gold:   #b48c3c;
	--acg-light:  #f0f5fc;
	--acg-text:   #1a1a1a;
	--acg-grey:   #5a5a5a;
	--acg-border: #d7dce4;
	/* Scale factor: element font-sizes are in mm; this converts to screen px.
	   Recalculated by JS when the certificate is rendered at a known width. */
	--acg-scale: 3.78; /* 1mm ≈ 3.78px at 96dpi */
}

/* ---- Outer shell — portrait aspect ratio ------------------ */
.coc-certificate {
	position: relative;
	max-width: 620px;
	margin: 0 auto 30px;
	background: #fffdf8;
	box-sizing: border-box;
	overflow: hidden;
	aspect-ratio: 210 / 297;
	font-family: Georgia, 'Times New Roman', serif;
}

/* ---- Borders (rectangular — no underlines) ---------------- */
.acg-border-outer,
.acg-border-inner {
	position: absolute;
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}

.acg-border-outer {
	inset: 0;
	border: 10px solid var(--acg-accent);
}

.acg-border-inner {
	inset: 13px;
	border: 2px solid var(--acg-gold);
}

/* ---- Background layers ------------------------------------ */
.coc-bg-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

.acg-overlay-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ---- All layout elements are absolutely positioned -------- */
.acg-el {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	line-height: 1.2;
	overflow: visible;
}

.acg-el-text {
	justify-content: center; /* overridden by text-align on the element */
}

.acg-el-text[style*="text-align:left"]   { justify-content: flex-start; }
.acg-el-text[style*="text-align:right"]  { justify-content: flex-end; }
.acg-el-text[style*="text-align:center"] { justify-content: center; }

/* ---- Header band ------------------------------------------ */
.acg-header-band {
	background: var(--acg-accent);
	z-index: 2;
}

/* ---- Details list (stacked, centred, one field per row) --- */
.acg-el-table {
	align-items: flex-start;
	display: block;
}

.acg-details-list {
	width: 100%;
	font-family: Arial, sans-serif;
	font-size: 11px;
}

/* Each row: label right-aligned + value left-aligned,
   meeting at the horizontal centre of the element block.
   This creates a clean centred appearance for all rows. */
.acg-detail-row {
	display: flex;
	align-items: baseline;
	padding: 4px 0;
}

.acg-detail-alt {
	/* no background — lines removed */
}

/* Label occupies left half, right-aligned */
.acg-label {
	font-weight: bold;
	color: var(--acg-accent);
	font-size: 9.5px;
	font-family: Arial, sans-serif;
	flex: 0 0 50%;
	text-align: right;
	padding-right: 8px;
	box-sizing: border-box;
}

/* Value occupies right half, left-aligned */
.acg-detail-value {
	color: var(--acg-text);
	font-size: 11px;
	flex: 0 0 50%;
	text-align: left;
	padding-left: 8px;
	box-sizing: border-box;
}

.acg-expired-text { color: #c0392b; font-weight: bold; }

/* ---- QR code ---------------------------------------------- */
.acg-el-qr { flex-direction: column; align-items: center; }
.acg-qr-label {
	font-size: 9px;
	color: #aaa;
	font-family: Arial, sans-serif;
	margin-top: 3px;
	text-align: center;
}

/* ---- Signature -------------------------------------------- */
.acg-el-sig { flex-direction: column; align-items: center; justify-content: flex-end; }

.acg-signature-line {
	width: 100%;
	border-top: 1px solid #444;
	margin-bottom: 4px;
}

.acg-signature-label {
	font-size: 10px;
	font-family: Arial, sans-serif;
	color: var(--acg-grey);
	text-align: center;
}

.acg-signature-org {
	font-size: 9px;
	font-family: Arial, sans-serif;
	color: #bbb;
	text-align: center;
	margin-top: 2px;
}

/* ---- EXPIRED ribbon --------------------------------------- */
.acg-expired-banner {
	position: absolute;
	top: 28px; right: -46px;
	background: #c0392b;
	color: #fff;
	padding: 7px 60px;
	transform: rotate(35deg);
	font-weight: bold;
	letter-spacing: 2px;
	font-family: Arial, sans-serif;
	font-size: 13px;
	z-index: 10;
}

/* ---- Suppress-default mode (custom bg) -------------------- */
.acg-suppress-default .acg-border-outer { border-color: transparent; }
.acg-suppress-default .acg-border-inner { border-color: transparent; }

/* ---- Action buttons (below the certificate box) ----------- */
.acg-actions {
	position: relative;
	z-index: 5;
	display: flex;
	gap: 10px;
	justify-content: center;
	padding: 12px 16px;
	flex-wrap: wrap;
	background: #f7f9fc;
	border-top: 1px solid var(--acg-border);
}

.coc-btn-pdf, .coc-btn-verify {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 20px;
	border-radius: 4px;
	font-family: Arial, sans-serif;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.coc-btn-pdf { background: var(--acg-accent); color: #fff; border: 2px solid var(--acg-accent); }
.coc-btn-pdf:hover { background: #11284a; border-color: #11284a; color: #fff; }
.coc-btn-verify { background: transparent; color: var(--acg-accent); border: 2px solid var(--acg-accent); }
.coc-btn-verify:hover { background: var(--acg-accent); color: #fff; }

/* ---- Verification page ------------------------------------ */
.acg-verify-page { max-width: 680px; margin: 40px auto; padding: 0 20px; }
.acg-verify-result { border-radius: 6px; padding: 20px; margin-top: 20px; border: 1px solid #e0e0e0; }
.acg-verify-valid    h2 { color: #1e7e34; }
.acg-verify-expired  h2 { color: #c0392b; }
.acg-verify-notfound h2 { color: #c0392b; }

/* ---- Lookup form ----------------------------------------- */
.acg-lookup-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; font-family: Arial, sans-serif; }
.acg-lookup-form label { display: block; width: 100%; font-weight: bold; margin-bottom: 4px; }
.acg-lookup-form input[type="text"] { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.acg-lookup-form button { padding: 10px 22px; background: var(--acg-accent,#1a3b5d); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
.acg-lookup-form button:hover { background: #11284a; }

/* ---- Print ------------------------------------------------ */
@media print {
	.acg-actions { display: none !important; }
	.coc-certificate { max-width: 100%; aspect-ratio: unset; }
	.coc-bg-layer, .acg-overlay-layer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---- Mobile ----------------------------------------------- */
@media (max-width: 480px) {
	.coc-certificate { max-width: 100%; }
	.acg-actions { flex-direction: column; align-items: stretch; }
	.coc-btn-pdf, .coc-btn-verify { justify-content: center; }
}

/* =========================================================
   Verification page — plain data display (no template)
   ========================================================= */

.acg-verify-data {
	max-width: 560px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
}

.acg-verify-fields {
	margin: 20px 0 24px;
	padding: 0;
	border: 1px solid #e0e5ec;
	border-radius: 6px;
	overflow: hidden;
}

.acg-verify-field-row {
	display: flex;
	align-items: baseline;
	padding: 10px 16px;
	border-bottom: 1px solid #e0e5ec;
	gap: 12px;
}

.acg-verify-field-row:last-child {
	border-bottom: none;
}

.acg-verify-field-row:nth-child(odd) {
	background: #f7f9fc;
}

.acg-verify-field-expired dd {
	color: #c0392b;
	font-weight: bold;
}

.acg-verify-fields dt {
	font-weight: 700;
	color: #1a3b5d;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	flex: 0 0 42%;
	min-width: 0;
}

.acg-verify-fields dd {
	margin: 0;
	color: #222;
	font-size: 14px;
	flex: 1;
	word-break: break-word;
}

.acg-verify-actions {
	text-align: center;
	margin-top: 8px;
}

/* =========================================================
   Front-end designer add-on wrapper
   ========================================================= */

.acg-frontend-designer {
	font-family: Arial, sans-serif;
	font-size: 13px;
	max-width: 100%;
	overflow-x: auto;
}

/* Notice shown when add-on is disabled or user lacks access */
.acg-fd-notice {
	padding: 14px 18px;
	background: #f8f9fa;
	border-left: 4px solid #b48c3c;
	border-radius: 0 4px 4px 0;
	color: #555;
	margin: 12px 0;
}

.acg-fd-notice p { margin: 0; }

/* Make the canvas scroll container shrink to fit the viewport */
.acg-frontend-designer .coc-canvas-scroll {
	min-height: 500px;
}

/* Scale canvas on narrow viewports so it stays usable */
@media (max-width: 900px) {
	.acg-frontend-designer .coc-canvas-scroll {
		overflow: auto;
		padding: 12px;
	}
}

/* ============================================================
   Verification Page — Centred Table Layout
   ============================================================ */

.coc-verify-page {
    max-width: 680px;
    margin: 48px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Result box */
.coc-verify-result {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.10);
}

.coc-verify-result h2 {
    margin: 0;
    padding: 20px 28px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}

/* Status colours */
.coc-verify-result.coc-verify-valid    h2,
.coc-verify-result.acg-verify-valid    h2 { background: #1e7e34; }
.coc-verify-result.coc-verify-expired  h2,
.coc-verify-result.acg-verify-expired  h2 { background: #b71c1c; }
.coc-verify-result.coc-verify-notfound h2,
.coc-verify-result.acg-verify-notfound h2 { background: #555; }

/* Table wrapper — centres the table */
.coc-verify-table-wrap {
    display: flex;
    justify-content: center;
    padding: 28px 24px 8px;
    background: #fff;
}

/* The actual table */
.coc-verify-table {
    width: 100%;
    max-width: 560px;
    border-collapse: collapse;
    font-size: .95rem;
    color: #222;
}

.coc-verify-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background .15s;
}

.coc-verify-table tbody tr:last-child {
    border-bottom: none;
}

.coc-verify-table tbody tr:hover {
    background: #f7f9fc;
}

.coc-verify-table th {
    width: 42%;
    padding: 13px 16px 13px 0;
    text-align: left;
    font-weight: 600;
    color: #444;
    vertical-align: top;
    white-space: nowrap;
}

.coc-verify-table td {
    padding: 13px 0 13px 16px;
    text-align: left;
    vertical-align: top;
    color: #111;
    word-break: break-word;
}

/* Expired row highlight */
.coc-verify-row-expired th,
.coc-verify-row-expired td {
    color: #b71c1c;
    font-weight: 600;
}

/* PDF download button */
.coc-verify-actions {
    display: flex;
    justify-content: center;
    padding: 20px 24px 28px;
    background: #fff;
}

.coc-verify-data .coc-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 5px;
    background: #1a3b5d !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: none;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(26,59,93,.30);
}

.coc-verify-data .coc-btn-pdf:hover,
.coc-verify-data .coc-btn-pdf:focus {
    background: #122b44 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(26,59,93,.40);
    text-decoration: none !important;
}

/* Not-found / lookup form */
.coc-verify-result p {
    padding: 20px 28px 0;
    margin: 0;
    background: #fff;
    color: #444;
}

/* Responsive */
@media ( max-width: 520px ) {
    .coc-verify-table th { width: 38%; white-space: normal; }
    .coc-verify-table th,
    .coc-verify-table td { padding: 10px 8px; font-size: .88rem; }
}