#codigomuestra {
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-bottom: 12px;
	font-size: 16px;
	text-align: center;
}

.button-primary {
	background-color: #0088CC;
	color: white;
	padding: 0.5em 1em;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

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

.certificado-table td, .certificado-table th {
	border: 1px solid #ddd;
	padding: 8px;
}

.certificado-table tr:nth-child(even){background-color: #f2f2f2;}

/*.certificado-table tr:hover {background-color: #ddd;}*/

.error-vc {
	color: red;
}

.certificado-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
}

.invalid-code {
	font-size: 16px;
	text-align: center;
}

.close-button {
	padding: 8px 18px 8px 18px;
	background-color: #f44336;
	color: #ffffff;
	text-decoration: none;
	border-radius: 5px;
	border: 1px solid #007cba;
	padding-left: 40px;
}

.close-icon {
	width: 10px;
	height: 10px;
	vertical-align: middle;
	margin-right: 10px;
	background-position: 10px 10px;
	padding-left: 40px;
}

/* .stvc-dismiss {
	background-image: url('../css/close.svg', dirname( __FILE__ ));
} */

.stvc-notice-action {
	background-repeat: no-repeat;
	padding-left: 40px;
	background-position: 18px 8px;
	cursor: pointer;
}

.stvc-notice-actionw {
	padding: 8px 18px 8px 18px;
	background: #ffff;
	color: #007cba;
	border-radius: 5px;
	border: 1px solid #007cba;
}

.custom-dashboard-widget-stvc {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.custom-dashboard-widget-stvc p {
	margin-right: 20px; 
}


.centered-content-stvc {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
}

.centered-content-stvc form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
	margin-bottom: 10px;
}

.wrap {
	margin: 10px 20px 0 2px;
}

#top-menu{
	display: block;
}

#encabezado-menu{
	background-color: #fff;
	font-family: var(--e-a-font-family);
	right: 0;
	left: -20px;
	box-shadow: 0 4px 6px rgba(0,0,0,.03);
	position: absolute;
/* 	width: 105%; */
}

.mi-plugin-titulo {
	font-size: 15px;
	color: #333;
	display: flex;
	justify-content: space-between;
	padding: 10px 25px;
	font-weight: 700;
	align-items: center;
}

.mi-plugin-titulo h2,
.mi-plugin-titulo h1 {
    margin: 0;
}

.wp-heading-inline {
	display: inline-block;
	margin-top: 10px;
	font-size: 24px;
}

.h1 .wp-heading-inline{
	margin-bottom: 10px;
}

.wp-header-end {
	visibility: hidden;
	margin: -2px 0 0;
}

p.search-box {
	float: right;
	margin: 0;
}

.wp-list-table {
	margin-top: 1em;
}

#table.widefat {
	border: 1px solid #c3c4c7;
	box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.table.fixed {
	table-layout: fixed;
}

.widefat {
	border-spacing: 0;
	width: 100%;
	clear: both;
	margin: 0;
	margin-top: 0px;
}

.title-page-st{
	margin-top: 70px;
}

.page-title-action {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	
	text-decoration: none;
	padding: 8px 16px;
	outline: none;
	border: none;
	border-radius: 4px;
	background-color: #2271b1;
	color: white;

}

.page-title-action:hover {
	background-color: #1678c2;
	color: white;
	}
	

/* Estilos para el formulario */
.ui.form {
	max-width: 500px;
	margin: 0 auto;
}

/* Estilos para los campos */
	.ui.form .field {
	margin-bottom: 1em;
}

.ui.form label {
	display: block;
}

.ui.form .ui.labeled.input > label {
	width: auto; 
}

.ui.form input[type="text"],
.ui.form input[type="date"] {
	width: 100%; 
	padding: 0.2em; 
	border: 1.5px solid #ccc; 
	border-radius: 4px; 
}

/* Estilos para el botón */
.ui.form input[type="submit"] {
	padding: 0.5em 1em; 
	background-color: #2271b1;
	color: #FFF; 
	border: none; 
	border-radius: 4px;
	cursor: pointer; 
}

.ui.form input[type="submit"]:hover {
	background-color: #1678c2; 
}

/* Estilos para el botón primario */
.ui.primary.button {
	background-color: #2271b1;
	color: #FFF;
	border: none; 
	border-radius: 4px; 
	padding: 0.5em 1em; 
	cursor: pointer; 
}

.ui.primary.button:hover {
	background-color: #1678c2;
}

/* Estilos para el botón secundario */
.ui.secondary.button {
	background-color: #f8f8f8; 
	color: #333; 
	border: 1px solid #ccc; 
	border-radius: 4px; 
	padding: 0.5em 1em; 
	cursor: pointer; 
}

.ui.secondary.button:hover {
	background-color: #e0e0e0;
}
/* Estilos para la tabla */
.ui.table {
	width: 100%; 
	border-collapse: collapse;
}

/* Estilos para las filas impares */
.ui.table tbody tr:nth-child(odd) {
	background-color: #f9f9f9;
}

/* Estilos para las celdas */
.ui.table th,
.ui.table td {
	padding: 0.5em;
	border: 1px solid #ddd; 
}

/* Estilos para las cabeceras */
.ui.table th {
	background-color: #f2f2f2; 
	font-weight: bold;
}

/* Estilos para la segment UI */
.ui.segment {
	border-radius: 0.28571429rem;
	padding: 1em 1em;
}

/* Estilos para la grid UI */
.ui.grid {
	margin-left: -1rem;
	margin-right: -1rem;
}

.ui.grid > .column {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Estilos para la rejilla de dos columnas */
.ui.two.column.grid {
	display: flex;
	flex-wrap: wrap;
}

.ui.two.column.grid > .column {
	flex: 0 0 auto;
	width: 50%;
	box-sizing: border-box;
	padding: 0 1em; 
}

/* Estilos para los inputs con etiquetas */
.ui.labeled.input {
	display: flex;
	align-items: stretch;
}

.ui.labeled.input > input {
	flex: 1;
}

/* Estilos para los botones */
.ui.button {
	display: inline-block;
	vertical-align: middle;
	outline: 0;
	border: none;
	border-radius: 0.28571429rem;
	padding: 0.6em 1em;
	margin: 0 0 0 0px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	background-color: #2271b1;
	color: #333;
}

.ui.button:hover {
	background-color: #e0e0e0;
}

/* Ajuste adicional para el checkbox */
.checkbox-small {
    margin: 0 !important ;
    top: 50%;
}

/* Estilos para dispositivos móviles (celulares) */
@media screen and (max-width:600px) {


	
	.ui.form {
		max-width: 350px;
		margin: 0 auto;
	}

	.wrap .page-title-action{
		padding: 1px 10px;
	}
	
	p.search-box{
		display: flow-root list-item;
	}

	.mi-plugin-titulo{
		padding-left: 25px;
	}

}

/* ============================================================
   Premium verification certificate — London Aesthetics UK
   Landscape "document" layout (target ~1280x640 on desktop),
   gold & ivory palette, Libre Baskerville headings + Montserrat body.
   ============================================================ */

.stvc-lac-card {
	--stvc-gold: #B8860B;
	--stvc-gold-deep: #8A5A12;
	--stvc-gold-soft: #F6ECD9;
	--stvc-gold-border: #E4D3AC;
	--stvc-ivory: #FDFBF6;
	--stvc-ivory-deep: #F3EEE3;
	--stvc-charcoal: #221E19;
	--stvc-charcoal-soft: #4A4940;
	--stvc-maroon-bg: #F3E2DE;
	--stvc-maroon-text: #7A3226;
	--stvc-taupe-bg: #EFEAE0;
	--stvc-taupe-text: #6B6355;

	/* Customizable from the "Certificate Design" admin page — these defaults
	   are overridden per-request via an inline <style> block. */
	--stvc-header-start: #221E19;
	--stvc-header-end: #302A22;
	--stvc-footer-start: #FDFBF6;
	--stvc-footer-end: #F3EEE3;
	--stvc-heading-color: #221E19;
	--stvc-text-color: #221E19;
	--stvc-details-bg: transparent;
	--stvc-font-heading: 'Libre Baskerville', Baskerville, Georgia, "Times New Roman", serif;
	--stvc-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--stvc-font-size-base: 16px;

	position: relative;
	width: 100%;
	max-width: 1280px;
	/* Always keep the certificate's real landscape proportions — even on a
	   phone — instead of reflowing into a stacked "portrait" layout. Below
	   this width the card is visually shrunk to fit as a whole (see
	   .stvc-lac-scale-wrapper and the scale-to-fit script), the same way a
	   printed landscape certificate would just look smaller on a small
	   screen rather than change shape. */
	/* Must comfortably fit the fixed-width left panel (300px + its padding)
	   PLUS the right panel's own min-width (700px + its padding) side by
	   side — anything smaller and the right panel's content (the 4-box
	   stat grid, course badges) gets pushed past the card's own edge and
	   clipped instead of nicely laid out before scaling down. Widened from
	   1120px so a long certificate number (e.g. "LA-LHR-202611-WU7K8F")
	   has room to stay on one line instead of wrapping inside its box. */
	min-width: 1180px;
	/* Vertical spacing moved to .stvc-lac-scale-wrapper's padding instead of
	   a margin here — margin is invisible to scrollHeight/scrollWidth
	   measurements, so the scale-to-fit script was under-measuring the
	   card's true footprint by exactly this margin and cutting off content
	   at the bottom (including the "Save as Image" button) by that amount.
	   Horizontal centering (on wide desktop screens, where the card is
	   narrower than max-width:1280px allows) still works the same via
	   auto left/right margins. */
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--stvc-gold-border);
	font-family: var(--stvc-font-body);
	font-size: var(--stvc-font-size-base);
	background: linear-gradient(160deg, var(--stvc-ivory), var(--stvc-ivory-deep));
	box-shadow: 0 12px 34px rgba(40, 28, 6, 0.14);
}

/* Wraps .stvc-lac-card so the scale-to-fit transform (applied by JS on
   small screens) doesn't leave blank space below the shrunk card — the
   wrapper's height is set to match the scaled-down card exactly. The 24px
   top/bottom padding here (not a margin on the card itself) is what gives
   the card its breathing room above/below — see the note on
   .stvc-lac-card's margin for why it has to live here instead. */
.stvc-lac-scale-wrapper {
	overflow: hidden;
	padding: 24px 0;
}

.stvc-lac-heading-font {
	font-family: var(--stvc-font-heading);
}

.stvc-lac-header {
	position: relative;
	z-index: 1;
	background: linear-gradient(120deg, var(--stvc-header-start), var(--stvc-header-end));
	border-bottom: 3px solid var(--stvc-gold);
	padding: 22px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.stvc-lac-header-logo {
	height: var(--stvc-logo-height, 86px);
	max-width: 320px;
	object-fit: contain;
	flex-shrink: 0;
}

.stvc-lac-header-brand {
	display: flex;
	align-items: center;
}

.stvc-lac-brand {
	font-size: 0.6875em;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--stvc-gold);
	margin: 0 0 5px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.stvc-lac-title {
	font-size: 1.375em;
	font-weight: 700;
	font-style: italic;
	color: #FBF8F2;
	margin: 0;
}

.stvc-lac-verified-pill {
	font-size: 0.6875em;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--stvc-gold);
	background: rgba(184, 134, 11, 0.12);
	border: 1px solid var(--stvc-gold);
	padding: 6px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

.stvc-lac-body {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
}

.stvc-lac-left {
	flex: 0 0 300px;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-right: 1px dashed var(--stvc-gold-border);
}

.stvc-lac-photo {
	width: 128px;
	height: 128px;
	border-radius: 16px;
	object-fit: cover;
	border: 3px solid var(--stvc-gold);
	box-shadow: 0 6px 16px rgba(40, 28, 6, 0.15);
	flex-shrink: 0;
}

.stvc-lac-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--stvc-gold-soft);
	font-size: 44px;
}

.stvc-lac-name {
	font-size: 1.3125em;
	font-weight: 700;
	color: var(--stvc-heading-color);
	margin: 16px 0 0;
	line-height: 1.3;
}

.stvc-lac-qualification {
	font-size: 0.78125em;
	font-style: italic;
	color: var(--stvc-text-color);
	margin: 4px 0 0;
}

.stvc-doctor-badge {
	display: inline-block;
	font-size: 0.6875em;
	font-weight: 600;
	color: var(--stvc-gold-deep);
	background: var(--stvc-gold-soft);
	padding: 2px 10px;
	border-radius: 20px;
	margin-top: 8px;
	vertical-align: middle;
}

.stvc-lac-meta {
	font-size: 0.78125em;
	color: var(--stvc-text-color);
	margin: 10px 0 0;
	letter-spacing: 0.2px;
}

.stvc-lac-left-divider {
	width: 40px;
	height: 2px;
	background: var(--stvc-gold);
	margin: 18px 0;
	opacity: 0.6;
}

.stvc-lac-left-tag {
	font-size: 0.65625em;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--stvc-gold-deep);
	font-weight: 600;
}

.stvc-lac-right {
	flex: 1;
	/* Wide enough that up to 4 stat boxes (Certificate number, Course
	   Completion, CNIC, PMDC) comfortably fit in one row, each box sized
	   to its own content (see .stvc-lac-stats below) without wrapping. */
	min-width: 700px;
	padding: 32px 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--stvc-details-bg, transparent);
	border-radius: 14px;
}

.stvc-lac-stats {
	/* Flexbox, not CSS Grid: each box should size to fit its own value
	   (so a long certificate number/CNIC never wraps inside its box) and
	   sit side by side with the others, wrapping to a new row only when
	   they genuinely run out of horizontal space. A grid with a
	   max-content minimum doesn't do this reliably — it tends to collapse
	   everything to one column instead of packing boxes onto one row. */
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.stvc-lac-stat-box {
	flex: 0 0 auto;
	background: var(--stvc-gold-soft);
	border: 1px solid var(--stvc-gold-border);
	border-radius: 10px;
	padding: 11px 14px;
}

.stvc-lac-stat-label {
	font-size: 0.625em;
	color: var(--stvc-gold-deep);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0;
	font-weight: 600;
}

.stvc-lac-stat-value {
	font-size: 0.875em;
	font-weight: 600;
	color: var(--stvc-text-color);
	white-space: nowrap;
	margin: 4px 0 0;
	letter-spacing: 0.3px;
}

.stvc-lac-course-block {
	margin: 0;
}

.stvc-lac-section-label {
	font-size: 0.6875em;
	color: var(--stvc-gold-deep);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 8px;
	font-weight: 600;
}

.stvc-lac-course-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 0;
	border-bottom: 1px dotted var(--stvc-gold-border);
	gap: 10px;
}

.stvc-lac-course-row:last-child {
	border-bottom: none;
}

.stvc-lac-course-name {
	font-size: 0.9375em;
	font-weight: 700;
	color: var(--stvc-heading-color);
}

.stvc-lac-type-pill,
.stvc-lac-procedure-pill {
	font-size: 0.78125em;
	font-weight: 600;
	letter-spacing: 0.1px;
	padding: 4px 13px;
	border-radius: 20px;
	display: inline-block;
	white-space: nowrap;
}

.stvc-lac-type-invasive {
	background: var(--stvc-maroon-bg);
	color: var(--stvc-maroon-text);
}

.stvc-lac-type-non_invasive {
	background: var(--stvc-taupe-bg);
	color: var(--stvc-taupe-text);
}

.stvc-lac-scope-group {
	margin-top: 10px;
}

.stvc-lac-scope-group:first-of-type {
	margin-top: 12px;
}

.stvc-lac-scope-label {
	font-size: 0.65625em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--stvc-gold-deep);
	margin: 0 0 6px;
	font-weight: 600;
}

.stvc-lac-scope-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.stvc-lac-scope-chip {
	font-size: 0.8125em;
	font-weight: 600;
	background: #ffffff;
	border: 1px solid var(--stvc-gold-border);
	color: var(--stvc-text-color);
	padding: 5px 13px;
	border-radius: 20px;
	white-space: nowrap;
}

.stvc-lac-note {
	background: var(--stvc-gold-soft);
	border-left: 3px solid var(--stvc-gold-deep);
	color: #5C3D0E;
	font-size: 0.8125em;
	font-style: italic;
	padding: 11px 16px;
	border-radius: 4px;
	margin: 0;
}

.stvc-lac-footer {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--stvc-gold-border);
	background: linear-gradient(120deg, var(--stvc-footer-start), var(--stvc-footer-end));
	padding: 18px 40px;
	display: flex;
	align-items: center;
	/* QR anchored at the far left corner, trainer name + signature anchored
	   at the far right corner — the classic certificate-seal/signature
	   layout, by request. */
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.stvc-lac-footer-signoff {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.stvc-lac-footer-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.stvc-lac-footer-signature {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.stvc-lac-footer-signature img {
	max-height: 40px;
	max-width: 130px;
	object-fit: contain;
	display: block;
}

.stvc-lac-footer-signature-line {
	width: 110px;
	border-top: 1px solid var(--stvc-text-color);
	margin: 4px 0 3px;
}

.stvc-lac-footer-signature-label {
	font-size: 0.625em;
	color: var(--stvc-text-color);
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.stvc-lac-seal {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--stvc-gold-deep);
	color: var(--stvc-gold-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
	background: var(--stvc-gold-soft);
}

.stvc-lac-footer-title {
	font-size: 0.875em;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--stvc-heading-color);
	margin: 0;
	white-space: nowrap;
}

.stvc-lac-footer-sub {
	font-size: 0.6875em;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--stvc-gold-deep);
	font-weight: 600;
	margin: 2px 0 0;
}

/* QR is its own block, always first in source order so it reads left of
   the trainer/signature group within the centered footer cluster. */
.stvc-lac-qr-side {
	flex-shrink: 0;
	text-align: left;
}

.stvc-lac-qr {
	width: 140px;
	height: 140px;
	margin: 0 0 4px;
	line-height: 0;
	background: #ffffff;
	padding: 6px;
	border: 1px solid var(--stvc-gold-border);
	border-radius: 8px;
}

.stvc-lac-qr img,
.stvc-lac-qr canvas,
.stvc-lac-qr table {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.stvc-lac-qr-label {
	font-size: 0.6875em;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--stvc-text-color);
	margin: 6px 0 0;
	white-space: nowrap;
}

.stvc-lac-actions {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 22px 20px;
}

.stvc-lac-download-btn {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 11px 26px;
	border-radius: 6px;
	border: 1.5px solid var(--stvc-gold-deep);
	background: #ffffff;
	color: var(--stvc-gold-deep);
	cursor: pointer;
	font-family: var(--stvc-font-body, 'Montserrat', sans-serif);
	transition: background 0.15s ease, color 0.15s ease;
	margin: 4px 6px;
}

.stvc-lac-download-btn:hover {
	background: var(--stvc-gold-deep);
	color: #ffffff;
}

/* "Download PDF" uses the browser's own native print-to-PDF (window.print())
   instead of a server-side PDF library, so it works identically on every
   host regardless of what PHP extensions are installed — same reasoning as
   the rest of this plugin's self-hosted, no-external-dependency approach.
   This stylesheet hides everything except the certificate card itself and
   asks for a landscape page, so "Print > Save as PDF" produces a clean,
   single-page certificate with no browser chrome, buttons, or site header. */
@media print {
	body * {
		visibility: hidden;
	}
	#stvc-lac-scale-wrapper,
	#stvc-lac-scale-wrapper * {
		visibility: visible;
	}
	#stvc-lac-scale-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		overflow: visible !important;
		padding: 0 !important;
		width: auto !important;
		height: auto !important;
	}
	.stvc-lac-actions {
		display: none !important;
	}
	@page {
		size: landscape;
		margin: 8mm;
	}
}

/* Contact strip below the certificate — website, help line, WhatsApp. This
   sits outside #stvc-lac-card on purpose so it never gets baked into the
   "Save as Image" export; the exported certificate stays a clean, formal
   document while the verification page still shows contact info. */
.stvc-lac-contact-bar {
	max-width: 1280px;
	margin: 0 auto 28px;
	background: linear-gradient(160deg, #FDFBF6, #F3EEE3);
	border: 1px solid #E4D3AC;
	border-radius: 14px;
	padding: 14px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
	box-shadow: 0 4px 14px rgba(40, 28, 6, 0.06);
}

.stvc-lac-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--stvc-font-body, 'Montserrat', -apple-system, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	color: #4A4940;
	text-decoration: none;
}

.stvc-lac-contact-item:hover {
	color: #8A5A12;
}

.stvc-lac-contact-icon {
	display: inline-flex;
	color: #8A5A12;
	flex-shrink: 0;
}

.stvc-lac-contact-whatsapp {
	color: #1E8449;
}

.stvc-lac-contact-whatsapp .stvc-lac-contact-icon {
	color: #25D366;
}

.stvc-lac-contact-whatsapp:hover {
	color: #25D366;
}

@media screen and (max-width: 600px) {
	.stvc-lac-contact-bar {
		padding: 14px 18px;
		gap: 10px 16px;
	}
}

/* NOTE: the certificate used to reflow into a stacked "portrait" layout
   below 900px / 600px (photo on top, details below, footer stacked). That
   was replaced by the scale-to-fit approach above — the card always keeps
   its real landscape shape and is shrunk as a whole to fit narrow screens
   instead, per request ("mobile pay b landscape mein he aa jaye"). */

/* ============================================================
   Admin: courses / doctors screens
   ============================================================ */

.stvc-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	margin-left: 6px;
}

.stvc-badge-invasive {
	background: #FCEBEB;
	color: #791F1F;
}

.stvc-badge-noninvasive {
	background: #f0efe9;
	color: #5F5E5A;
}

.stvc-course-box {
	border: 1px solid #e2e0d8;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
	background: #fff;
}

.stvc-course-box-head {
	margin-bottom: 8px;
}

.stvc-procedure-list {
	margin: 0;
	padding-left: 18px;
}

.stvc-procedure-list li {
	font-size: 13px;
	margin-bottom: 4px;
}

.stvc-delete-link {
	color: #A32D2D;
	margin-left: 12px;
	font-size: 12px;
	text-decoration: none;
}

/* ============================================================
   Add / Edit certificate form — multi-course selection
   ============================================================ */

.stvc-course-select-list {
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px 12px;
	background: #fafafa;
}

.stvc-course-checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-weight: 400;
	cursor: pointer;
}

.stvc-course-checkbox-item input[type="checkbox"] {
	margin: 0;
}

.stvc-procedure-course-group {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
	background: #fff;
}

.stvc-procedure-course-heading {
	font-weight: 600;
	font-size: 13px;
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ============================================================
   Premium backend certificate table (Certificate Base list)
   ============================================================ */

.stvc-admin-cert-table {
	margin-top: 16px;
	border: 1px solid #e2e0d8;
	border-radius: 8px;
	overflow: hidden;
	border-spacing: 0;
}

.stvc-admin-cert-table th {
	background: #FBF8F2;
	color: #6B5A2E;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 14px;
	border-bottom: 1px solid #e2e0d8;
	text-align: left;
}

.stvc-admin-cert-table td {
	padding: 12px 14px;
	vertical-align: middle;
	font-size: 13px;
	border-bottom: 1px solid #f0eee6;
}

.stvc-admin-cert-table tbody tr:last-child td {
	border-bottom: none;
}

.stvc-admin-cert-table .stvc-col-photo {
	width: 56px;
}

.stvc-admin-cert-table .stvc-col-qr {
	width: 68px;
}

.stvc-admin-cert-table .stvc-col-actions {
	width: 190px;
}

.stvc-admin-cert-photo {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid #d8d6cc;
	display: block;
}

.stvc-admin-cert-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f3ee;
	font-size: 18px;
}

.stvc-admin-cert-code {
	font-family: "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 600;
	color: #8A5A12;
}

.stvc-admin-cert-dates {
	font-size: 12.5px;
	color: #4a4940;
	white-space: nowrap;
}

.stvc-admin-cert-dates-sub {
	font-size: 11px;
	color: #8a8980;
}

.stvc-admin-cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.stvc-admin-cert-qr {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	line-height: 0;
}

/* Edit / View-PDF sit side by side, not stacked. */
.stvc-col-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.stvc-col-actions .ui.button {
	font-size: 12px;
	padding: 6px 12px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}