/* WebG Pay, public side: the button, the form "Data for the invoice", the pages Thanks and Not completed. It lives inside the template of the site, so it only
   sets what it needs (a card, spacing, the states of a field) and takes everything else from the page: text colour and font are inherited, the accent is
   currentColor unless the site sets --wgp-accent. A state is never shown by colour alone: an error has its sentence, a field in error has aria-invalid. */

.wgp { --wgp-accent: currentColor; --wgp-line: color-mix(in srgb, currentColor 25%, transparent); --wgp-bad: #b3261e; --wgp-muted: color-mix(in srgb, currentColor 65%, transparent); box-sizing: border-box; max-width: 100%; }
.wgp *, .wgp *::before, .wgp *::after { box-sizing: inherit; }
.wgp [hidden], .wgp .wgp-hp { display: none !important; }

.wgp-card { max-width: 40rem; margin: 2rem auto; padding: 1.5rem; border: 1px solid var(--wgp-line); border-radius: .75rem; }
.wgp-card h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
.wgp-card p { margin: 0 0 .9rem; max-width: 72ch; }
.wgp-muted { color: var(--wgp-muted); }
.wgp-brand { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--wgp-line); font-size: .875rem; overflow-wrap: anywhere; }
.wgp-help, .wgp .wgp-help { color: var(--wgp-muted); font-size: .875rem; }

.wgp-btn { display: inline-block; min-height: 2.75rem; padding: .6rem 1.2rem; border: 1px solid currentColor; border-radius: .4rem; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.wgp-btn:hover { text-decoration: none; background: color-mix(in srgb, currentColor 8%, transparent); }
.wgp-btn[disabled], .wgp-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.wgp-btn-sec { font-weight: 400; }
.wgp a:focus-visible, .wgp button:focus-visible, .wgp input:focus-visible, .wgp select:focus-visible, .wgp [tabindex="-1"]:focus-visible { outline: 3px solid var(--wgp-accent); outline-offset: 2px; }

.wgp-status { margin: .75rem 0 0; color: var(--wgp-bad); font-weight: 600; }
.wgp-closed { margin: 0; font-weight: 600; }
.wgp-privacy { font-size: .875rem; }

/* the form of the invoice data */
.wgp-invoice form { margin: 1rem 0; }
.wgp-field { margin: 0 0 1rem; }
.wgp-field > label { display: block; font-weight: 600; margin-bottom: .25rem; }
.wgp-field input[type="text"], .wgp-field input[type="email"], .wgp-field select { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid var(--wgp-line); border-radius: .4rem; font: inherit; color: inherit; background: transparent; }
.wgp-field input[aria-invalid="true"], .wgp-field select[aria-invalid="true"] { border-color: var(--wgp-bad); border-width: 2px; }
.wgp-req { color: var(--wgp-bad); font-weight: 700; }
.wgp-field .wgp-help { display: block; margin-top: .25rem; }
.wgp-field .wgp-err { display: block; margin-top: .25rem; color: var(--wgp-bad); font-size: .9rem; font-weight: 600; }
.wgp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 1rem; }
.wgp-summary { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 2px solid var(--wgp-bad); border-radius: .5rem; }
.wgp-summary p, .wgp-summary ul { margin: 0 0 .4rem; }
.wgp-summary ul { padding-left: 1.2rem; }
.wgp-actions { margin: 1.25rem 0 .5rem; }

@media (max-width: 520px) {
    .wgp-card { margin: 1rem 0; padding: 1rem; border-radius: .5rem; }
    .wgp-row { grid-template-columns: minmax(0, 1fr); }
    .wgp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wgp * { animation: none !important; transition: none !important; } }

/* Small notes under the button, the price and the seats: the colour of the text of the page (never the pale grey of "muted" or "meta", which is under 4.5:1 on a white page),
   the size a little smaller, and never forced to capitals whatever the template does to "meta". */
.wgp-note {
    color: inherit;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: normal;
}

/* The details of the course (when, where, online) are the main fact of the page: the colour of the text of the page, a readable size, never forced to capitals. The
   selector is as specific as the rules of the template for "meta" text, so that it wins with any template. */
.wgp-course .el-meta.wgp-meta,
.wgp-course .el-meta.wgp-meta .el-meta-item {
    color: inherit;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: normal;
}

/* "Last seats": the same colour as the rest of the text (red on a pale grey is under 4.5 to 1), told apart by weight. */
.wgp-note.wgp-low {
    font-weight: 600;
}

/* The bot check: one widget, under the button that was pressed (course) or above the button of the form of the invoice. */
.wgp-ts {
    margin: 0.75rem 0;
}
.wgp-ts:empty {
    margin: 0;
}