/* ==========================================================================
   Price Proposal Form – NicLen-Design (Artboard „Product page“, Design-Canvas „NicLen Produktarchiv“)
   Box auf #F3F6F9, Felder 48 px, Button 52 px, Navy #112333, Radius überall 0.
   Alle Selektoren mit .pvf-wrapper davor, damit Theme- und Kit-Styles für input/button nicht greifen.
   ========================================================================== */

.pvf-wrapper {
    --pvf-navy: #112333;
    --pvf-text: #3D4450;
    --pvf-muted: #5F6672;
    --pvf-field: #C9D2DC;
    --pvf-bg: #F3F6F9;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--pvf-text);
    font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
    scroll-margin-top: 24px;
}

/* Graue Box nur mit eigener Überschrift (Widget). Der reine Shortcode sitzt in einer Box des Templates. */
.pvf-wrapper:has(> .pvf-head) {
    padding: 32px;
    background: var(--pvf-bg);
    border-radius: 0;
}

.pvf-wrapper *,
.pvf-wrapper *::before,
.pvf-wrapper *::after {
    box-sizing: border-box;
}

/* Überschrift und Intro */
.pvf-wrapper .pvf-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pvf-wrapper .pvf-title {
    margin: 0;
    padding: 0;
    font-family: "Lato", "Noto Sans", sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pvf-navy);
}

.pvf-wrapper .pvf-intro {
    font-size: 16px;
    line-height: 1.6;
}
.pvf-wrapper .pvf-intro > * {
    margin: 0;
}
.pvf-wrapper .pvf-intro > * + * {
    margin-top: 8px;
}

/* Formular: Preis | Menge nebeneinander, sobald Platz ist; E-Mail, Nachricht und Button volle Breite */
.pvf-wrapper .pvf-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
    margin: 0;
}

.pvf-wrapper .pvf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.pvf-wrapper .pvf-field--wide {
    grid-column: 1 / -1;
}

.pvf-wrapper .pvf-field label {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pvf-navy);
}

.pvf-wrapper .pvf-field input,
.pvf-wrapper .pvf-field textarea {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--pvf-field);
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--pvf-navy);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .15s;
}

.pvf-wrapper .pvf-field textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}

.pvf-wrapper .pvf-field input::placeholder,
.pvf-wrapper .pvf-field textarea::placeholder {
    color: var(--pvf-muted);
    opacity: 1;
}

.pvf-wrapper .pvf-field input:hover,
.pvf-wrapper .pvf-field textarea:hover {
    border-color: var(--pvf-navy);
}

.pvf-wrapper .pvf-field input:focus,
.pvf-wrapper .pvf-field textarea:focus {
    border-color: var(--pvf-navy);
    box-shadow: none;
    outline: none;
}
.pvf-wrapper .pvf-field input:focus-visible,
.pvf-wrapper .pvf-field textarea:focus-visible {
    outline: 2px solid var(--pvf-navy);
    outline-offset: 2px;
}

/* Button: weiß mit Navy-Rahmen, Hover gefüllt */
.pvf-wrapper .pvf-submit {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    margin: 0;
    padding: 0 28px;
    border: 1.5px solid var(--pvf-navy);
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--pvf-navy);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.pvf-wrapper .pvf-submit svg {
    flex: none;
    width: 18px;
    height: 18px;
}

.pvf-wrapper .pvf-submit:hover,
.pvf-wrapper .pvf-submit:focus,
.pvf-wrapper .pvf-submit:active {
    background: var(--pvf-navy);
    border-color: var(--pvf-navy);
    color: #FFFFFF;
    box-shadow: none;
    outline: none;
}
.pvf-wrapper .pvf-submit:focus-visible {
    outline: 2px solid var(--pvf-navy);
    outline-offset: 2px;
}

/* Meldungen nach dem Absenden */
.pvf-wrapper .pvf-notice {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 0;
    font-size: 15px;
    line-height: 1.5;
}
.pvf-wrapper .pvf-success {
    background: #EAF5EE;
    border-color: #2E7D4F;
    color: #1B4D31;
}
.pvf-wrapper .pvf-error {
    background: #FDEEEE;
    border-color: #C62828;
    color: #7B1D1A;
}

@media (max-width: 767px) {
    .pvf-wrapper:has(> .pvf-head) {
        padding: 20px;
    }
    .pvf-wrapper .pvf-submit {
        justify-self: stretch;
    }
}