/* ==========================================================================
   SATURN Fasteners - Quote Request form
   Tutti i selettori sono scoped sotto #quote-form: nessun effetto sul tema.
   Riproduce fedelmente images/quote.png (952px di larghezza di riferimento).
   ========================================================================== */

#quote-form,
#quote-form * {
    box-sizing: content-box;
}

#quote-form {
    display: block;
    position: relative;
    max-width: 952px;
    margin: 0 auto;
    padding: 73px 27px 160px 27px;
    background: #ffffff;
    border-radius: 14px;
    color: #000000;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

/* ---- Testi sopra la tabella ------------------------------------------- */
#quote-form h2.qf-title {
    margin: 0 0 26px 0;
    padding: 0;
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 33px;
    font-weight: 700;
    line-height: 40px;
    color: #000000;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

#quote-form p.qf-intro {
    margin: 0 0 19px 0;
    padding: 0;
    max-width: 880px;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    text-align: left;
}

#quote-form .qf-meta {
    display: table;
    width: 100%;
    margin: 0 0 75px 0;
}

#quote-form .qf-meta > div {
    display: table-cell;
    vertical-align: top;
}

#quote-form p.qf-required {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    white-space: nowrap;
}

#quote-form p.qf-tollfree {
    margin: 0;
    padding: 4px 20px 0 0;
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 17.5px;
    line-height: 22px;
    color: #ff0000;
    text-align: right;
}

#quote-form p.qf-tollfree strong {
    font-weight: 700;
    color: #ff0000;
}

/* ---- Tabella principale ------------------------------------------------ */
#quote-form form {
    margin: 0;
    padding: 0;
}

#quote-form table.qf-table {
    width: 85%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    background: #eeeeee;
    border: 1px solid #d0d0d0;
    font-family: Tahoma, Verdana, Geneva, "DejaVu Sans Condensed", "DejaVu Sans", sans-serif;
    font-size: 15px;
    color: #000000;
}

#quote-form table.qf-table > tbody > tr > th,
#quote-form table.qf-table > tbody > tr > td {
    padding: 7px 5px 6px 6px;
    background: #eeeeee;
    border: 1px solid #d0d0d0;
    vertical-align: top;
    text-align: left;
    font-size: 15px;
    line-height: 17px;
    color: #000000;
}

#quote-form table.qf-table > tbody > tr > th {
    width: 23%;
    padding-left: 7px;
    font-weight: 700;
}

#quote-form table.qf-table > tbody > tr > th label {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 17px;
    color: #000000;
    cursor: pointer;
    text-transform: none;
}

/* ---- Campi ------------------------------------------------------------- */
#quote-form input[type="text"],
#quote-form input[type="email"],
#quote-form input[type="tel"],
#quote-form input[type="number"],
#quote-form select,
#quote-form textarea {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    display: inline-block;
    margin: 0;
    padding: 6px 6px;
    height: 19px;
    background: #ffffff;
    border: 1px solid #8c8c8c;
    border-radius: 3px;
    box-shadow: none;
    outline: none;
    font-family: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 15px;
    line-height: 19px;
    color: #000000;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: top;
    transition: none;
}

#quote-form input[type="text"],
#quote-form input[type="email"],
#quote-form input[type="tel"] {
    width: calc(62.5% - 14px);
}

#quote-form input:focus,
#quote-form select:focus,
#quote-form textarea:focus {
    outline: 2px solid #4d90fe;
    outline-offset: -1px;
}

#quote-form select#qf-dfar {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    width: auto;
    height: 30px;
    padding: 0 4px 0 4px;
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 22.5px;
    line-height: 28px;
    border-radius: 4px;
}

#quote-form textarea#qf-comment {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 139px;
    padding: 6px;
    resize: both;
    overflow: auto;
    box-sizing: border-box;
}

#quote-form input::placeholder,
#quote-form textarea::placeholder {
    color: #9a9a9a;
}

/* ---- Sotto-tabella Part Number / Qty ----------------------------------- */
#quote-form table.qf-table > tbody > tr > td.qf-parts {
    padding: 7px 32px 1px 7px;
}

#quote-form table.qf-parts-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    background: transparent;
}

/* Il tema globale (style.css) forza "thead { background: nero; color: bianco }".
   Qui il testo e' nero (vedi sotto), quindi va neutralizzato lo sfondo del
   thead, altrimenti l'intestazione risulta nera su nero e invisibile. */
#quote-form table.qf-parts-table thead {
    background-color: transparent;
    color: inherit;
}

#quote-form table.qf-parts-table th,
#quote-form table.qf-parts-table td {
    padding: 0 3px 7px 3px;
    background: transparent;
    border: 0;
    vertical-align: middle;
    font-size: 15px;
    line-height: 17px;
    color: #000000;
}

#quote-form table.qf-parts-table th {
    padding: 0 3px 10px 3px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

#quote-form table.qf-parts-table th.qf-num,
#quote-form table.qf-parts-table td.qf-num {
    width: 14px;
    padding: 0 6px 7px 5px;
    text-align: left;
    font-weight: 700;
}

#quote-form table.qf-parts-table th.qf-qty,
#quote-form table.qf-parts-table td.qf-qty {
    width: 65px;
}

#quote-form table.qf-parts-table input.qf-part {
    width: 100%;
    box-sizing: border-box;
    height: 33px;
}

#quote-form table.qf-parts-table input.qf-qty {
    width: 100%;
    box-sizing: border-box;
    height: 33px;
    -moz-appearance: textfield;
    text-align: left;
}

#quote-form input.qf-qty::-webkit-outer-spin-button,
#quote-form input.qf-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Riga bottoni ------------------------------------------------------ */
#quote-form table.qf-table > tbody > tr > td.qf-actions {
    text-align: right;
    padding: 7px 5px 6px 6px;
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
}

#quote-form td.qf-actions button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 16px;
    padding: 1px 9px;
    height: 34px;
    min-width: 0;
    background: #efefef;
    background-image: linear-gradient(#f7f7f7, #e6e6e6);
    border: 1px solid #8c8c8c;
    border-radius: 3px;
    box-shadow: none;
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 22.5px;
    font-weight: 400;
    line-height: 30px;
    color: #000000;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: none;
}

#quote-form td.qf-actions button:hover {
    background-image: linear-gradient(#ffffff, #ececec);
    border-color: #6f6f6f;
}

#quote-form td.qf-actions button:active {
    background-image: linear-gradient(#e0e0e0, #f0f0f0);
}

#quote-form td.qf-actions button[disabled] {
    opacity: .6;
    cursor: default;
}

/* ---- Captcha aritmetico (solo se attivato in config.php) --------------- */
#quote-form tr.qf-math[hidden] {
    display: none;
}

#quote-form tr.qf-math input {
    width: 90px;
}

#quote-form tr.qf-math span.qf-question {
    display: inline-block;
    margin-right: 10px;
    font-size: 15px;
    line-height: 31px;
    vertical-align: top;
}

/* ---- Honeypot: fuori schermo, mai visibile ----------------------------- */
#quote-form .qf-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ---- Stato / messaggi -------------------------------------------------- */
#quote-form input.qf-invalid,
#quote-form select.qf-invalid,
#quote-form textarea.qf-invalid {
    border-color: #d40000;
    box-shadow: 0 0 0 1px #d40000;
}

#quote-form .qf-field-error {
    display: block;
    margin: 4px 0 0 0;
    font-size: 11px;
    line-height: 14px;
    color: #d40000;
    font-weight: 400;
}

#quote-form .qf-message {
    display: none;
    width: 85%;
    margin: 18px auto 0 auto;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
}

#quote-form .qf-message.qf-show {
    display: block;
}

#quote-form .qf-message.qf-success {
    background: #eef9ee;
    border-color: #6dbb6d;
    color: #1f6b1f;
}

#quote-form .qf-message.qf-error {
    background: #fdeeee;
    border-color: #e08b8b;
    color: #9b1c1c;
}

#quote-form .qf-message.qf-info {
    background: #eef3fb;
    border-color: #9db9e3;
    color: #1d3f73;
}

#quote-form noscript p {
    width: 80%;
    margin: 14px auto 0 auto;
    font-size: 13px;
    color: #9b1c1c;
}

/* ALTCHA (widget flottante che appare solo al Submit): tipografia coerente */
#quote-form altcha-widget {
    --altcha-color-base: #ffffff;
    --altcha-color-border: #8c8c8c;
    --altcha-color-text: #000000;
    --altcha-border-radius: 3px;
    font-family: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
    font-size: 13px;
}

/* ==========================================================================
   Mobile: sotto i 700px la tabella si impila; il desktop resta identico.
   ========================================================================== */
@media only screen and (max-width: 700px) {
    #quote-form {
        padding: 32px 16px 48px 16px;
        border-radius: 8px;
    }

    #quote-form h2.qf-title {
        font-size: 24px;
    }

    #quote-form .qf-meta,
    #quote-form .qf-meta > div {
        display: block;
        width: auto;
    }

    #quote-form .qf-meta {
        margin-bottom: 32px;
    }

    #quote-form p.qf-tollfree {
        padding: 12px 0 0 0;
        text-align: left;
    }

    #quote-form table.qf-table,
    #quote-form .qf-message {
        width: 100%;
    }

    #quote-form table.qf-table,
    #quote-form table.qf-table > tbody,
    #quote-form table.qf-table > tbody > tr,
    #quote-form table.qf-table > tbody > tr > th,
    #quote-form table.qf-table > tbody > tr > td {
        display: block;
        width: auto;
        box-sizing: border-box;
    }

    #quote-form table.qf-table > tbody > tr {
        margin: 0 0 2px 0;
    }

    #quote-form table.qf-table > tbody > tr > th {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    #quote-form table.qf-table > tbody > tr > td {
        border-top: 0;
    }

    #quote-form table.qf-table > tbody > tr > td.qf-parts {
        border-top: 1px solid #d0d0d0;
        padding-right: 7px;
    }

    #quote-form table.qf-table > tbody > tr > td:empty {
        display: none;
    }

    #quote-form input[type="text"],
    #quote-form input[type="email"],
    #quote-form input[type="tel"] {
        width: 100%;
        box-sizing: border-box;
        height: 33px;
    }

    #quote-form table.qf-parts-table th.qf-qty,
    #quote-form table.qf-parts-table td.qf-qty {
        width: 17%;
    }

    #quote-form table.qf-parts-table th {
        font-size: 12px;
    }

    #quote-form select#qf-dfar {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    #quote-form td.qf-actions {
        text-align: right;
    }

    #quote-form td.qf-actions button {
        font-size: 17px;
        height: 34px;
    }
}