/**
 * JoomRevoke - front end styles
 *
 * Deliberately minimal. The site template decides how the form looks; this file only
 * covers what a template cannot know about: the reference has to stand out and stay
 * readable, and the page has to print cleanly, because for a consumer whose
 * acknowledgement email never arrives this page is the only record they have.
 *
 * No colours are hard-coded that would fight a template. Everything inherits.
 *
 * @copyright  (C) 2026 agentur511. All rights reserved.
 * @license    GNU General Public License version 3 or later; see LICENSE.txt
 */

/**
 * The form is a column, not a banner.
 *
 * Templates hand a component the full content width, which on a wide screen drags a
 * seven-field form across 1200 pixels: labels far left, input lines running to the far
 * right, nothing to hold the eye. The measure below is the only layout decision this file
 * makes, and it can never widen anything - a narrow column stays narrow.
 *
 * As a token, so an operator can change it in their own template CSS without an override
 * file: --jr-form-width.
 */
.com-joomrevoke-form {
    max-width: var(--jr-form-width, 36rem);
    margin-inline: auto;
}

/**
 * The fields sit on a panel of their own.
 *
 * Heading and introduction stay on the page; everything a consumer has to fill in belongs
 * together and is framed as one block, so it is obvious where the declaration begins and
 * where it ends.
 *
 * No colour of a template is overruled here. The border and the tint are mixed from the
 * text colour that the template has already set, which keeps the panel visible on a light
 * as well as on a dark background; browsers without color-mix simply keep the plain
 * declaration above it. Radius, shadow and padding are tokens, so an operator can change
 * them in their own template CSS without an override file.
 */
.com-joomrevoke__form {
    padding: var(--jr-card-padding, clamp(1.25rem, 4vw, 2rem));
    border: 1px solid rgba(128, 128, 128, .25);
    border: 1px solid var(--jr-card-border, color-mix(in srgb, currentColor 15%, transparent));
    border-radius: var(--jr-card-radius, 10px);
    box-shadow: var(--jr-card-shadow, 0 2px 12px rgba(0, 0, 0, .06));
    background: transparent;
    background: var(--jr-card-background, color-mix(in srgb, currentColor 3%, transparent));
}

/* On paper a frame around the fields costs ink and says nothing. */
@media print {
    .com-joomrevoke__form {
        border: 0;
        box-shadow: none;
        background: none;
        padding: 0;
    }
}

.com-joomrevoke__hint {
    font-size: .9em;
    margin-top: -.5rem;
}

/**
 * Validation messages.
 *
 * Joomla's validator puts its message inside the field's label, which by default runs
 * straight on after the label text - "E-Mail-Adresse *Dieser Wert ist ungueltig." That
 * reads like part of the heading rather than like an instruction, and it is exactly the
 * place where a consumer most needs a clear one. So: own line, own colour, and the field
 * itself marked as well.
 *
 * The colour is a token with a fallback, so a template can set its own error colour
 * without an override file.
 */
.com-joomrevoke .form-control-feedback {
    display: block;
    margin-top: .2rem;
    font-size: .9em;
    font-weight: 400;
    color: var(--jr-error, #b3261e);
}

.com-joomrevoke label.invalid {
    color: var(--jr-error, #b3261e);
}

.com-joomrevoke input.invalid,
.com-joomrevoke textarea.invalid,
.com-joomrevoke .form-control-danger {
    border-color: var(--jr-error, #b3261e);
    box-shadow: 0 0 0 1px var(--jr-error, #b3261e);
}

.com-joomrevoke__note {
    font-size: .9em;
    opacity: .85;
}

/*
 * The hint under a field.
 *
 * Joomla renders it as <small class="form-text">, and templates like to paint that class
 * a light grey: YOOtheme Pro ships `.form-text{color:#b4b5ba}` in its theme.css, measured
 * on demo.joomrevoke.com on 29.08.2026. On the near-white background of this form that is
 * roughly 2:1 - far under the 4.5:1 that normal text needs, and the hints carry the
 * sentence about checking one's own e-mail address.
 *
 * So the hint takes the colour of the text around it and is only dimmed. That works on any
 * template and on a dark background too, where a fixed grey would fail the other way
 * round. With #1a1a1a on white, YOOtheme's own text colour, this lands at about 7:1.
 */
.com-joomrevoke .form-text {
    color: inherit;
    opacity: .75;
}

.com-joomrevoke__reference {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.com-joomrevoke__reference-value {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 1.4em;
    letter-spacing: .08em;
}

.com-joomrevoke__receipt {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.com-joomrevoke__receipt caption {
    text-align: left;
    font-weight: 700;
    padding-bottom: .5rem;
}

.com-joomrevoke__receipt th,
.com-joomrevoke__receipt td {
    text-align: left;
    vertical-align: top;
    padding: .5rem .75rem .5rem 0;
    border-bottom: 1px solid currentColor;
}

.com-joomrevoke__receipt th {
    width: 35%;
    font-weight: 600;
}

/* The receipt is a record. Printing it must not lose anything or waste ink. */
@media print {
    .com-joomrevoke-confirmation {
        color: #000;
    }

    .com-joomrevoke__reference {
        border-color: #000;
    }
}

/**
 * The trap field.
 *
 * Moved off screen rather than hidden with display:none: a hidden field is easy for a
 * bot to recognise and skip, while this one stays in the document and keeps its label,
 * so a screen reader announces "Please leave this field empty" instead of meeting a
 * field with no name.
 */
.com-joomrevoke__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}