/* Front-end contest form. Mirrors gpco2026 _wpcf7.scss, scoped to the plugin. */
.signum-contest-form,
.signum-contest {
    --sc-primary: var(--bs-primary, #0d6efd);
    --sc-danger: #dc3545;
    --sc-text: #212529;
    --sc-radius: .375rem;
}

.signum-contest-form p { margin: 0 0 1rem; }

.signum-contest-form label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 500;
}

/* Fields */
.signum-contest-form input[type="text"],
.signum-contest-form input[type="email"],
.signum-contest-form input[type="tel"],
.signum-contest-form input[type="number"],
.signum-contest-form input[type="date"],
.signum-contest-form input[type="file"],
.signum-contest-form textarea,
.signum-contest-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .375rem .75rem;
    font: inherit;
    line-height: 1.5;
    color: var(--sc-text);
    background-color: #fff;
    border: 1px solid var(--sc-primary);
    border-radius: var(--sc-radius);
    transition: box-shadow .15s ease-in-out;
}

.signum-contest-form textarea { min-height: 120px; resize: vertical; }

.signum-contest-form select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.signum-contest-form input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .25rem .75rem;
    font: inherit;
    color: #fff;
    background: var(--sc-primary);
    border: 0;
    border-radius: .25rem;
    cursor: pointer;
}

.signum-contest-form input:focus,
.signum-contest-form textarea:focus,
.signum-contest-form select:focus {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sc-primary) 25%, transparent);
}

/* Form content may lay fields out as .row > .col (form 19 has up to 7 per row).
   Own grid instead of Bootstrap's: wraps instead of squeezing, works with any theme. */
.signum-contest-form .row:has(> .col) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    column-gap: 1.5rem;
    margin-inline: 0;
}

.signum-contest-form .row > .col {
    width: auto;
    max-width: none;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
}

.signum-contest-form .col > p[data-field] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.signum-contest-form .col > p[data-field] > :is(input, select, textarea) { margin-top: auto; }

/* Invalid only after the user touched the field */
.signum-contest-form :is(input, textarea, select):user-invalid { border-color: var(--sc-danger); }

/* Radio + checkbox */
.signum-contest-form .cfb-radio-label,
.signum-contest-form .cfb-label {
    /* not flex: label text may contain links, which would become separate columns */
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
}

.signum-contest-form .cfb-radio-label input,
.signum-contest-form .cfb-label input {
    position: absolute;
    left: 0;
    top: 0;
}

.signum-contest-form input[type="radio"],
.signum-contest-form input[type="checkbox"] {
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    background: #fff no-repeat center / 100%;
    border: 1px solid var(--sc-primary);
    border-radius: .25rem;
    cursor: pointer;
}

.signum-contest-form input[type="radio"] { border-radius: 50%; }

.signum-contest-form input[type="radio"]:checked,
.signum-contest-form input[type="checkbox"]:checked {
    background-color: var(--sc-primary);
}

.signum-contest-form input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.signum-contest-form input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Submit */
.signum-contest-form button[type="submit"] {
    display: inline-block;
    padding: .675rem 1.75rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    background: var(--sc-primary);
    border: 1px solid var(--sc-primary);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.signum-contest-form button[type="submit"]:hover {
    background: color-mix(in srgb, var(--sc-primary) 85%, black);
}

.signum-contest-form button[type="submit"]:disabled { opacity: .65; cursor: default; }

/* Keyboard focus — theme convention */
.signum-contest-form input:focus-visible,
.signum-contest-form textarea:focus-visible,
.signum-contest-form select:focus-visible,
.signum-contest-form button:focus-visible {
    outline: 4px dashed #ff0000;
    outline-offset: 2px;
}

/* Megapixel hint */
.signum-mpx-hint { display: block; margin-top: .4rem; font-size: .9em; line-height: 1.4; }
.signum-mpx-hint:empty { display: none; }
.signum-mpx-hint.is-bad { color: #8a1f21; }
.signum-mpx-hint.is-warn { color: #7a5c00; }
.signum-mpx-hint.is-ok { color: #005c15; }

/* Messages */
.signum-contest.errors,
.signum-contest.error,
.signum-contest.success,
.signum-contest.notice,
.signum-contest.limit-info {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--sc-radius);
}

.signum-contest.errors,
.signum-contest.error,
.signum-contest.limit-info.is-full { color: #842029; background: #f8d7da; border-color: #f5c2c7; }
.signum-contest.success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.signum-contest.notice,
.signum-contest.limit-info { color: #664d03; background: #fff3cd; border-color: #ffecb5; }

.signum-contest.errors p,
.signum-contest.limit-info p { margin: 0; }
.signum-contest.errors p + p { margin-top: .25rem; }

@media (max-width: 767.98px) {
    .signum-contest-form button[type="submit"] { width: 100%; }
}