/* Rollora – Made-to-Measure Roller Blinds. Free software, licensed under GPL-2.0-or-later. See license.txt. */
/* Blinds configurator + workshop sheet — responsive, mobile-first.
 * Targets only the existing classes .blinds-proto-configurator (the
 * configurator <form>) and .blinds-workshop-sheet (the production
 * sheet <div>). No external assets, no framework, no JavaScript.
 * Parent: this file is enqueued by the main plugin file for the
 * configurator shortcode and the workshop sheet shortcode.
 */

/* Shared box model so full-width inputs do not overflow on mobile. */
.blinds-proto-configurator,
.blinds-proto-configurator *,
.blinds-workshop-sheet,
.blinds-workshop-sheet * {
    box-sizing: border-box;
}

/* ---- Configurator form ---- */
.blinds-proto-configurator {
    max-width: 720px;
    margin: 0 auto;
}

/* Labels stack vertically; inputs fill the available width on mobile. */
.blinds-proto-configurator label {
    display: block;
    margin: 0 0 14px;
    font-weight: 600;
}

.blinds-proto-configurator input[type="text"],
.blinds-proto-configurator input[type="number"],
.blinds-proto-configurator input[type="email"],
.blinds-proto-configurator select,
.blinds-proto-configurator textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    font-size: 16px; /* 16px+ avoids iOS zoom-on-focus. */
    font-family: inherit;
}

/* Checkboxes/radios stay inline with their label text. */
.blinds-proto-configurator input[type="checkbox"],
.blinds-proto-configurator input[type="radio"] {
    display: inline-block;
    width: auto;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* Buttons span the full width on mobile. */
.blinds-proto-configurator button,
.blinds-proto-configurator input[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 17px;
    cursor: pointer;
}

.blinds-proto-configurator p {
    line-height: 1.45;
}

/* Two-column grid on screens 640px and wider. */
@media (min-width: 640px) {
    .blinds-proto-configurator {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
        align-items: start;
    }

    .blinds-proto-configurator label {
        margin-bottom: 16px;
    }

    /* Full-width rows: buttons, notices, and checkbox labels. */
    .blinds-proto-configurator > button,
    .blinds-proto-configurator > input[type="submit"],
    .blinds-proto-configurator > p,
    .blinds-proto-configurator > label:has(> input[type="checkbox"]),
    .blinds-proto-configurator > label:has(> input[type="radio"]) {
        grid-column: 1 / -1;
    }

    .blinds-proto-configurator > button,
    .blinds-proto-configurator > input[type="submit"] {
        width: auto;
        justify-self: start;
    }
}

/* ---- Workshop sheet ---- */
.blinds-workshop-sheet {
    max-width: 720px;
    margin: 0 auto;
    /* Tables scroll horizontally on small screens instead of breaking. */
    overflow-x: auto;
}

.blinds-workshop-sheet h2 {
    font-size: 1.25rem;
    line-height: 1.3;
}

.blinds-workshop-sheet table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
}

.blinds-workshop-sheet th,
.blinds-workshop-sheet td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.blinds-workshop-sheet p {
    line-height: 1.45;
}