/**
 * Frontend styles.
 *
 * Everything is scoped under .tqacm-wrap and uses only its own properties, so
 * the custom Tadreab theme keeps control of the page around it. Colours are
 * declared as custom properties on the wrapper — a theme can restyle the whole
 * component by redefining those four values, with no !important arms race.
 */

.tqacm-wrap {
	--tqacm-border: #e2e4e7;
	--tqacm-accent: #1e6f5c;
	--tqacm-text: #1d2327;
	--tqacm-muted: #646970;

	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	color: var(--tqacm-text);
	text-align: right;
}

.tqacm-wrap *,
.tqacm-wrap *::before,
.tqacm-wrap *::after {
	box-sizing: inherit;
}

.tqacm-wrap .tqacm-heading {
	margin: 0 0 12px;
	font-size: 1.25em;
}

/* ---- form ---------------------------------------------------------------- */

.tqacm-wrap .tqacm-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
	margin-bottom: 16px;
}

.tqacm-wrap .tqacm-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--tqacm-border);
	border-radius: 6px;
	font-size: 16px; /* 16px keeps iOS Safari from zooming the page on focus. */
	letter-spacing: 0.08em;
	direction: ltr;
	text-align: center;
	text-transform: uppercase;
}

.tqacm-wrap .tqacm-input:focus {
	outline: 2px solid var(--tqacm-accent);
	outline-offset: 1px;
}

.tqacm-wrap .tqacm-button {
	display: inline-block;
	padding: 10px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--tqacm-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.tqacm-wrap .tqacm-button:hover,
.tqacm-wrap .tqacm-button:focus {
	filter: brightness( 1.1 );
	color: #fff;
}

/* ---- notices ------------------------------------------------------------- */

.tqacm-notice {
	padding: 12px 16px;
	margin: 0 0 16px;
	border: 1px solid var(--tqacm-border, #e2e4e7);
	border-radius: 6px;
	background: #f7f7f7;
	text-align: right;
}

.tqacm-notice p {
	margin: 0;
}

.tqacm-notice__detail {
	margin-top: 6px !important;
	font-size: 0.9em;
	color: var(--tqacm-muted, #646970);
}

.tqacm-notice--success { background: #eaf7ee; border-color: #b7e0c3; }
.tqacm-notice--error   { background: #fdecec; border-color: #f0b8b8; }
.tqacm-notice--info    { background: #eef4fb; border-color: #c3d9f0; }
.tqacm-notice--denied  { background: #fdf4e7; border-color: #f0d5a8; }

.tqacm-notice--denied .tqacm-button {
	margin-top: 8px;
}

/* ---- status table -------------------------------------------------------- */

.tqacm-wrap .tqacm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.tqacm-wrap .tqacm-table th,
.tqacm-wrap .tqacm-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--tqacm-border);
	text-align: right;
	vertical-align: top;
}

.tqacm-wrap .tqacm-table th {
	font-weight: 600;
	color: var(--tqacm-muted);
	font-size: 0.9em;
}

.tqacm-wrap .tqacm-row--dim {
	opacity: 0.55;
}

.tqacm-wrap .tqacm-days {
	display: block;
	font-size: 0.85em;
	color: var(--tqacm-muted);
}

.tqacm-wrap .tqacm-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 0.85em;
	white-space: nowrap;
}

.tqacm-wrap .tqacm-badge--active  { background: #d7f5dd; color: #005c1f; }
.tqacm-wrap .tqacm-badge--expired { background: #fcf0e4; color: #8a4b00; }

/* Narrow screens: let the table scroll rather than break the page layout. */
@media ( max-width: 600px ) {
	.tqacm-wrap .tqacm-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}