/**
 * Realistec FILM — Pitch Test form
 *
 * Version: 1.2.0 - Cards match the lens and printer cards on the FILM and
 *   Stereo product pages: dark surface (#0d0b1f), 2px #1f1b3a border that
 *   turns violet on hover, selected state a 5% violet tint with a 3px violet
 *   ring, keyboard focus as a box-shadow ring (stronger when also selected)
 *   instead of an outline, and the second line in the secondary text color
 *   (#a8a3c9). Lens and size cards use the compact lens-card shape (10px
 *   corners, 10px x 4px padding); printer and range cards the printer-card
 *   shape (12px corners, 16px x 12px padding). A disabled printer keeps its
 *   resting border on hover.
 * Version: 1.1.0 - Lenticular Lens cards in two rows of five, and a disabled
 *   state for printer tiles that give no whole number of views at the chosen
 *   lens (set by pitch-test.js). Paired with pitch-test-shortcode.php 1.1.0.
 * Version: 1.0.0 - Styles for the [film_pitch_test] shortcode. Option tiles
 *   follow the printer control on the product page (upload-shortcode.php) so
 *   the two read as the same family. Colours come from the theme variables the
 *   product page uses, with the same fallbacks, and inherit the text colour so
 *   the form works on light or dark blog themes.
 */

.film-pitch-test {
    max-width: 640px;
    margin: 1.5em 0;
    padding: 20px;
    border: 1px solid var(--realistec-multi-border, rgba(128, 128, 128, 0.35));
    border-radius: 12px;
}

.film-pt-field {
    margin: 0 0 18px;
}

.film-pt-label {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
}

.film-pt-optional {
    font-weight: 400;
    opacity: 0.7;
}

.film-pt-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.film-pt-options-size {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Ten lenses, two rows of five, as on the product pages. Five stay in a row
   on phones: the cards hold only a two-digit number. */
.film-pt-options-lens {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.film-pt-option {
    position: relative;
    display: block;
    cursor: pointer;
}

/* The radio is visually hidden but stays focusable for keyboard users. */
.film-pt-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.film-pt-option span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 16px 12px;
    background: var(--realistec-multi-surface, #0d0b1f);
    border: 2px solid var(--realistec-multi-border, #1f1b3a);
    border-radius: 12px;
    text-align: center;
    line-height: 1.2;
    transition: all 0.2s ease;
}

/* Compact shape of the product pages' lens cards (v1.2.0): lens and sheet
   size, which hold only a short number. */
.film-pt-options-lens .film-pt-option span,
.film-pt-options-size .film-pt-option span {
    padding: 10px 4px;
    border-radius: 10px;
}

.film-pt-option strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.film-pt-option em {
    font-size: 12px;
    font-style: normal;
    color: var(--realistec-multi-text-secondary, #a8a3c9);
}

.film-pt-options-lens .film-pt-option em {
    font-size: 11px;
}

.film-pt-option:hover span {
    border-color: var(--realistec-multi-primary, #8b5cf6);
}

.film-pt-option input:checked + span {
    border-color: var(--realistec-multi-primary, #8b5cf6);
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Keyboard focus as a ring, never an outline, which flashed on click. */
.film-pt-option input:focus + span {
    outline: none;
}

.film-pt-option input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.film-pt-option input:focus-visible:checked + span {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}

/* Printer ruled out by the chosen lens (v1.1.0). The radio is disabled, so
   the tile cannot be chosen; the reason is in its title. Hover keeps the
   resting border so the card does not look clickable. */
.film-pt-option.film-pt-option-disabled {
    cursor: not-allowed;
}

.film-pt-option.film-pt-option-disabled span {
    opacity: 0.4;
}

.film-pt-option.film-pt-option-disabled:hover span {
    border-color: var(--realistec-multi-border, #1f1b3a);
}

.film-pt-pitch {
    width: 100%;
    max-width: 180px;
    padding: 10px 14px;
    border: 1px solid var(--realistec-multi-border, rgba(128, 128, 128, 0.35));
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.film-pt-pitch:focus {
    outline: none;
    border-color: var(--rt-violet, #8b5cf6);
}

.film-pt-help,
.film-pt-summary,
.film-pt-status {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.85;
}

.film-pt-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: #dc2626;
}

.film-pt-summary {
    margin: 0 0 14px;
    font-variant-numeric: tabular-nums;
}

.film-pt-download {
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--rt-violet, #8b5cf6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.film-pt-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Six size tiles become three per row on phones. */
@media (max-width: 520px) {
    .film-pt-options-size {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}