/**
 * Abonneo back office styles.
 */

/*
 * The brand mark in front of every Abonneo screen title.
 *
 * Done once here rather than in the ten screens: they all open with
 * `<div class="wrap abonneo-wrap"><h1>…`, so a merchant who lands on
 * "Subscriptions" or "Technical log" sees the same signature, and adding a
 * screen tomorrow inherits it without a line of PHP. The wordmark stays real
 * text — selectable, translatable, read aloud by a screen reader.
 */
.abonneo-wrap > h1 {
	display: flex;
	align-items: center;
	gap: .45em;
}

.abonneo-wrap > h1::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	background: url( ../img/abonneo-icon.svg ) no-repeat center / contain;
}

.abonneo-wrap h2 {
	margin-top: 2em;
}

.abonneo-hint {
	max-width: 60em;
	color: #50575e;
}

.abonneo-muted {
	color: #6b7280;
	font-size: .9em;
}

.abonneo-empty {
	max-width: 40em;
	margin-top: 2em;
	padding: 2em;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.abonneo-onboarding {
	max-width: 50em;
	margin-top: 1.5em;
	padding: 1.5em 2em;
	border-left: 4px solid #2271b1;
	background: #fff;
}

.abonneo-onboarding li {
	margin-bottom: 1em;
}

/* Cards */

.abonneo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.abonneo-card {
	padding: 1rem 1.2rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.abonneo-card__label {
	display: block;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #6b7280;
}

.abonneo-card__value {
	display: block;
	margin-top: .3rem;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
}

.abonneo-card__hint {
	display: block;
	margin-top: .4rem;
	font-size: .78rem;
	color: #6b7280;
}

.abonneo-cards--kpi .abonneo-card__value {
	font-size: 1.6rem;
}

/* Status pills */

.abonneo-status {
	display: inline-block;
	padding: .15em .6em;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	background: #f0f0f1;
	color: #3c434a;
}

.abonneo-status--active,
.abonneo-status--trialing,
.abonneo-status--paid,
.abonneo-status--prepaid,
.abonneo-status--redeemed {
	background: #e6f4ea;
	color: #14653a;
}

.abonneo-status--past_due,
.abonneo-status--failed,
.abonneo-status--suspended,
.abonneo-status--pending {
	background: #fdf1e3;
	color: #8a5406;
}

.abonneo-status--cancelled,
.abonneo-status--expired,
.abonneo-status--abandoned {
	background: #fbeaea;
	color: #8a1f1f;
}

/* Forms */

.abonneo-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: 1.5rem;
}

.abonneo-column {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 0 1.2rem;
}

.abonneo-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 1rem 0;
}

.abonneo-multiselect {
	min-width: 16rem;
}

.abonneo-bulk {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1rem 0;
	padding: 1rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.abonneo-variation-row td {
	background: #fbfbfc;
}

.abonneo-action-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: .8rem;
	margin: 1rem 0 2rem;
}

.abonneo-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .9rem 1rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.abonneo-action--wide {
	grid-column: 1 / -1;
	align-items: flex-start;
}

.abonneo-inline-form,
.abonneo-refund-form {
	display: inline-flex;
	gap: .3rem;
	align-items: center;
	margin-right: .3rem;
}

.abonneo-danger-zone {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid #dcdcde;
}

/* Preview */

.abonneo-preview {
	margin: 1.5rem 0;
	padding: 1.2rem 1.5rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
	border-radius: 8px;
	max-width: 46rem;
}

.abonneo-preview__summary {
	font-size: 1.05rem;
	font-weight: 600;
}

.abonneo-preview__total {
	font-weight: 600;
}

.abonneo-preview__table {
	margin-top: .8rem;
}

/* Journal */

.abonneo-journal {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 70em;
}

.abonneo-journal li {
	padding: .5rem .8rem;
	border-bottom: 1px solid #f0f0f1;
	background: #fff;
}

.abonneo-journal__date {
	color: #6b7280;
	font-variant-numeric: tabular-nums;
	margin-right: .6rem;
}

.abonneo-journal__actor {
	display: inline-block;
	min-width: 5rem;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7280;
}

.abonneo-payload {
	max-width: 40rem;
	max-height: 12rem;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
	background: #f6f7f7;
	padding: .6rem;
	border-radius: 6px;
}

.abonneo-error-text {
	color: #8a1f1f;
}

.abonneo-consent-proof {
	max-width: 60em;
	padding: .6rem .9rem;
	background: #fff;
	border-left: 4px solid #dcdcde;
	color: #50575e;
}

.abonneo-count {
	color: #50575e;
}

/* ------------------------------------------------------------------ */
/* The offer screen: three questions, a live preview.                   */
/* ------------------------------------------------------------------ */

.abonneo-offer__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
	gap: 1.5rem;
	align-items: start;
	margin-top: 1.5rem;
}

@media (max-width: 1100px) {
	.abonneo-offer__layout {
		grid-template-columns: 1fr;
	}
}

.abonneo-step {
	margin-bottom: 1.25rem;
	padding: 1.4rem 1.6rem 1.6rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
}

.abonneo-step--light {
	padding: 1.1rem 1.6rem;
	background: #f9fafb;
}

.abonneo-step h2,
.abonneo-preview--live h2 {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.abonneo-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 999px;
	background: #2271b1;
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
}

.abonneo-step__label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
}

.abonneo-step__choice {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.abonneo-step .abonneo-product-search,
.abonneo-step .select2-container {
	width: 100% !important;
	max-width: 32rem;
}

.abonneo-category-select {
	min-width: 20rem;
}

/* One sentence per decision, read like a sentence. */
.abonneo-sentence {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: .6rem 0;
	font-size: 1.05rem;
}

.abonneo-sentence--sub {
	margin-left: 1.5rem;
	font-size: .95rem;
	color: #50575e;
}

.abonneo-sentence--option {
	margin-top: 1.2rem;
	font-size: .92rem;
	color: #50575e;
}

.abonneo-sentence select,
.abonneo-sentence input[type="number"] {
	font-size: 1rem;
}

.abonneo-amount {
	width: 7rem;
	font-size: 1.15rem;
	font-weight: 600;
	text-align: right;
}

.abonneo-currency {
	font-weight: 600;
}

/* Everything else, folded away. */
.abonneo-advanced {
	margin: .5rem 0 1.5rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
}

.abonneo-advanced > summary {
	padding: .9rem 1.6rem;
	cursor: pointer;
	font-weight: 600;
	color: #2271b1;
}

.abonneo-advanced > summary:hover,
.abonneo-advanced > summary:focus-visible {
	color: #135e96;
}

.abonneo-advanced__body {
	padding: 0 1.6rem 1rem;
	border-top: 1px solid #f0f0f1;
}

.abonneo-advanced__body h3 {
	margin: 1.4rem 0 .2rem;
	font-size: .95rem;
}

.abonneo-advanced__body .form-table th {
	width: 16rem;
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.abonneo-advanced__body .form-table td {
	padding-top: .6rem;
	padding-bottom: .6rem;
}

/* The preview sticks while the merchant scrolls the options. */
.abonneo-preview--live {
	position: sticky;
	top: 3rem;
	margin: 0;
	max-width: none;
}

.abonneo-offers .abonneo-col-status { width: 7rem; }
.abonneo-offers .abonneo-col-actions { width: 6rem; }

.abonneo-list-footer {
	margin-top: 1.5rem;
}

/* A flex rule must never win over the hidden attribute. */
.abonneo-offer [hidden] {
	display: none !important;
}

/* Durations of an offer: one line per commitment length. */
.abonneo-durations {
	width: 100%;
	max-width: 46rem;
	margin: .5rem 0 .75rem;
	border-collapse: collapse;
}

.abonneo-durations th {
	padding: .3rem .5rem;
	text-align: left;
	font-size: .8rem;
	font-weight: 600;
	color: #50575e;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.abonneo-durations td {
	padding: .35rem .5rem;
	vertical-align: middle;
	border-top: 1px solid #f0f0f1;
}

.abonneo-durations__length input {
	width: 4.5rem;
	text-align: right;
}

.abonneo-durations__discount {
	white-space: nowrap;
}

.abonneo-durations__discount input {
	width: 5.5rem;
	text-align: right;
}

.abonneo-durations__remove {
	width: 2rem;
	text-align: right;
}

.abonneo-durations__remove button {
	padding: 0 .3rem;
	line-height: 1;
	color: #b32d2e;
}

.abonneo-durations__label {
	color: #50575e;
	font-size: .9rem;
}

.abonneo-preview__offers td:nth-child(n+2),
.abonneo-preview__offers th:nth-child(n+2) {
	text-align: right;
}

.abonneo-preview__saving {
	color: #007017;
	font-weight: 600;
}

.abonneo-preview__offers td:last-child {
	white-space: nowrap;
}

/* Payment methods screen */

.abonneo-gateways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.abonneo-gateway {
	padding: 1rem 1.2rem 1.2rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left-width: 4px;
	border-radius: 8px;
}

.abonneo-gateway--connected { border-left-color: #00a32a; }
.abonneo-gateway--unconfigured,
.abonneo-gateway--inactive { border-left-color: #dba617; }
.abonneo-gateway--absent,
.abonneo-gateway--listed { border-left-color: #c3c4c7; }
.abonneo-gateway--sandbox { border-left-color: #72aee6; }

.abonneo-gateway__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
}

.abonneo-gateway__header h2 {
	margin: 0;
	font-size: 1.1rem;
}

.abonneo-gateway__state {
	display: inline-block;
	padding: .15em .6em;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	background: #f0f0f1;
}

.abonneo-gateway--connected .abonneo-gateway__state { background: #edfaef; color: #00450c; }
.abonneo-gateway--unconfigured .abonneo-gateway__state,
.abonneo-gateway--inactive .abonneo-gateway__state { background: #fcf9e8; color: #674e00; }

.abonneo-gateway__verified {
	flex-basis: 100%;
	font-size: .8rem;
}

.abonneo-gateway__verified--yes { color: #00450c; }
.abonneo-gateway__verified--no { color: #674e00; }

.abonneo-gateway__caps {
	margin: .8rem 0;
	padding-left: 1.1rem;
	list-style: disc;
	color: #50575e;
	font-size: .85rem;
}

.abonneo-gateway__caps li { margin: .1rem 0; }

.abonneo-gateway__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .3rem 1rem;
	margin: .5rem 0 1rem;
}

.abonneo-gateway__facts dt { font-weight: 600; }
.abonneo-gateway__facts dd { margin: 0; }
.abonneo-gateway__check--ok { color: #00450c; }
.abonneo-gateway__check--ko { color: #8a2424; }

.abonneo-gateway__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.abonneo-gateway__actions .abonneo-inline-form { display: inline; }

.abonneo-gateway__webhook {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid #f0f0f1;
}

.abonneo-gateway__webhook h3 {
	margin: 0 0 .4rem;
	font-size: .95rem;
}

.abonneo-gateway__webhook-form { display: block; }
.abonneo-gateway__webhook-form p { margin: .6rem 0; }
.abonneo-gateway__webhook-form label { display: block; font-weight: 600; }
.abonneo-gateway__webhook-form input[type="text"],
.abonneo-gateway__webhook-form input[type="password"] {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: .25rem;
	font-weight: 400;
}