/*
 * VIALO24_HOME_SHIPMENT_COMPOSER_V1_20260918
 *
 * Customer model:
 * CommercialOrder -> Shipment[] -> Parcel[]
 */

#quoteForm.pfi-home-shipment-composer-v1 {
    position: relative;
}

#quoteForm.pfi-home-shipment-composer-v1 .type-card {
    min-width: 0;
}

#quoteForm.pfi-home-shipment-composer-v1
.type-card.pfi-product-unavailable-v1 {
    position: relative;
    opacity: .58;
    cursor: default;
}

#quoteForm.pfi-home-shipment-composer-v1
.type-card.pfi-product-unavailable-v1::after {
    content: "PROSSIMAMENTE";
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #eef3f6;
    color: #607582;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.pfi-parcel-mode-v1 {
    grid-column: 1 / -1;
    margin: 10px 0 5px;
    padding: 12px;
    border: 1px solid #dce7ed;
    border-radius: 10px;
    background: #fbfdfe;
}

/* Product V1 customer model: homogeneous group per shipment. */
#quoteForm.pfi-home-shipment-composer-v1 .pfi-parcel-mode-v1,
#quoteForm.pfi-home-shipment-composer-v1 #pfiParcelRows,
#quoteForm.pfi-home-shipment-composer-v1 .pfi-equal-parcel-scroll-v1 {
    display: none !important;
}

#quoteForm.pfi-home-shipment-composer-v1 .pfi-field-pieces-v59,
#quoteForm.pfi-home-shipment-composer-v1 .pfi-field-weight-v59 {
    display: block !important;
}

/*
 * Keep the historical PFI package row authoritative for Shipment 1.
 * display: contents lets Length / Width / Height participate directly
 * in the existing five-column .pfi-package-v59 grid.
 */
#quoteForm.pfi-home-shipment-composer-v1 #pfiDimensions {
    display: contents !important;
}

.pfi-shipment-cards-v1 {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
}

.pfi-shipment-card-v1 {
    padding: 12px;
    border: 1px solid #dce7ed;
    border-radius: 10px;
    background: #fff;
}

.pfi-shipment-card-head-v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #0c4777;
    font-size: 13px;
    font-weight: 900;
}

.pfi-shipment-card-head-v1 button {
    border: 0;
    background: transparent;
    color: #7a4b4b;
    font-size: 11px;
    cursor: pointer;
}

.pfi-shipment-card-grid-v1 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.pfi-shipment-card-grid-v1 label {
    display: grid;
    gap: 4px;
    color: #5c707d;
    font-size: 10px;
    font-weight: 800;
}

.pfi-shipment-card-grid-v1 input {
    width: 100%;
    box-sizing: border-box;
}

.pfi-shipment-card-v1 small {
    color: #657986;
    font-size: 11px;
    line-height: 1.4;
}

.pfi-add-shipment-copy-v1 {
    margin: 18px 0 10px;
    color: #4f6878;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .pfi-shipment-card-grid-v1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pfi-parcel-mode-v1[hidden] {
    display: none !important;
}

.pfi-parcel-mode-question-v1 {
    display: block;
    margin-bottom: 9px;
    color: #123f61;
    font-size: 13px;
    font-weight: 900;
}

.pfi-parcel-mode-options-v1 {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pfi-parcel-mode-option-v1 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid #d5e1e7;
    border-radius: 9px;
    background: #fff;
    color: #314a58;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.pfi-parcel-mode-option-v1:has(input:checked) {
    border-color: #16a05d;
    box-shadow: 0 0 0 1px rgba(22,160,93,.08);
}

.pfi-parcel-mode-copy-v1 {
    margin: 9px 0 0;
    color: #657986;
    font-size: 12px;
    line-height: 1.4;
}

/*
 * REGOLA UX FISSA:
 * peso + lunghezza + larghezza + altezza
 * SEMPRE sulla stessa riga.
 */

.pfi-equal-parcel-scroll-v1,
#pfiParcelRowsList {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.pfi-equal-parcel-row-v1,
#pfiParcelRowsList .pfi-parcel-row {
    box-sizing: border-box;
    min-width: 720px;
    display: grid !important;
    grid-template-columns:
        minmax(86px, .65fr)
        repeat(4, minmax(118px, 1fr));
    gap: 10px;
    align-items: end;
    margin: 0 0 8px;
    padding: 9px 10px;
    border: 1px solid #dce6eb;
    border-radius: 9px;
    background: #fff;
}

.pfi-equal-parcel-row-v1::before,
#pfiParcelRowsList .pfi-parcel-row::before {
    display: flex;
    align-items: center;
    min-height: 39px;
    color: #0c4777;
    font-size: 12px;
    font-weight: 900;
}

.pfi-equal-parcel-row-v1::before {
    content: "Singolo collo";
}

#pfiParcelRowsList .pfi-parcel-row::before {
    content: "Collo " attr(data-ordinal);
}

#pfiParcelRowsList .pfi-parcel-row legend,
#pfiParcelRowsList [data-parcel-remove] {
    display: none !important;
}

.pfi-equal-parcel-row-v1 label,
#pfiParcelRowsList .pfi-parcel-row label {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
    margin: 0 !important;
    color: #5c707d;
    font-size: 10px;
    font-weight: 800;
}

.pfi-equal-parcel-row-v1 input,
#pfiParcelRowsList .pfi-parcel-row input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Quantity authority = N. colli.
 * Il vecchio pulsante resta tecnicamente nel DOM
 * soltanto per compatibilità col controller esistente.
 */

#pfiAddParcel {
    display: none !important;
}

#pfiParcelRows .pfi-parcel-rows-heading {
    display: block;
    margin-bottom: 7px;
}

#pfiParcelRows .pfi-parcel-rows-heading strong {
    display: block;
    color: #5f7480;
    font-size: 12px;
    line-height: 1.4;
}

.pfi-shipment-drafts-v1[hidden],
.pfi-add-shipment-v1[hidden],
.pfi-multi-shipment-hold-v1[hidden] {
    display: none !important;
}

.pfi-shipment-drafts-v1 {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
    margin: 13px 0 4px;
}

.pfi-shipment-draft-v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid #dce7ed;
    border-radius: 9px;
    background: #f9fbfc;
}

.pfi-shipment-draft-v1.is-active {
    border-color: #16a05d;
}

.pfi-shipment-draft-v1 strong {
    color: #0c4777;
    font-size: 12px;
}

.pfi-shipment-draft-meta-v1 {
    color: #71838e;
    font-size: 11px;
    text-align: right;
}

.pfi-add-shipment-v1 {
    grid-column: 1 / -1;
    width: 100%;
    margin: 8px 0 12px;
    padding: 11px 14px;
    border: 1px dashed #8bb8a0;
    border-radius: 10px;
    background: #f8fcfa;
    color: #0b6f43;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.pfi-multi-shipment-hold-v1 {
    grid-column: 1 / -1;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid #d6e2e8;
    border-left: 3px solid #0c4777;
    border-radius: 8px;
    background: #f7fafc;
    color: #506773;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 980px) {
    #quoteForm.pfi-home-shipment-composer-v1 .shipment-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    #quoteForm.pfi-home-shipment-composer-v1 .shipment-types {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* PFI_HOME_MULTI_UX_FINAL_V1_20260920 */

/*
 * Approved visual hierarchy:
 *
 * package fields
 * -> breathing room
 * -> explanatory copy
 * -> breathing room
 * -> Add shipment
 * -> quote CTA
 */
#quoteForm.pfi-home-shipment-composer-v1
.pfi-add-shipment-copy-v1 {
    margin: 30px 0 16px !important;
    color: #3f5d70 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-add-shipment-v1 {
    margin-top: 4px !important;
    margin-bottom: 20px !important;
}

/*
 * Placeholders remain suggestions, but must be clearly readable.
 */
#quoteForm.pfi-home-shipment-composer-v1
.pfi-package-v59 input::placeholder,
#quoteForm.pfi-home-shipment-composer-v1
.pfi-shipment-card-v1 input::placeholder {
    color: #6f7f8b !important;
    opacity: .72 !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}

@media (max-width: 760px) {
    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-package-v59 input::placeholder,
    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-v1 input::placeholder {
        font-size: 18px !important;
    }
}

/* Keep the numeric value clean while showing kg inside the field, matching cm. */
#quoteForm.pfi-home-shipment-composer-v1
.pfi-field-weight-v59 .pfi-unit-v59 > small {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    right: 10px !important;
}

/* The primary quote action follows the package row with the approved 2cm gap.
 * The extra button classes deliberately outrank legacy inline Home tuning. */
@media (min-width: 761px) {
    #quoteForm.pfi-home-shipment-composer-v1
    > button.btn.btn-primary.btn-large[type="submit"] {
        margin-top: 84px !important;
    }
}

/*
 * Multi-shipment editors use the SAME five-column PFI package geometry
 * as the certified initial row.
 */
@media (min-width: 761px) {
    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1.pfi-package-v59 {
        display: grid !important;
        grid-template-columns:
            minmax(90px, 1fr)
            minmax(110px, 1.15fr)
            repeat(3, minmax(100px, 1fr)) !important;
        grid-template-rows: 64px !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
        align-items: end !important;
        padding: 0 !important;
    }

    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1
    .pfi-field-pieces-v59 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1
    .pfi-field-weight-v59 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1
    .pfi-field-length-v59 {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1
    .pfi-field-width-v59 {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    #quoteForm.pfi-home-shipment-composer-v1
    .pfi-shipment-card-grid-v1
    .pfi-field-height-v59 {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }
}

/*
 * Always-visible N. colli stepper.
 * Keep the number input itself authoritative.
 */
#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-host-v1 {
    position: relative !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-host-v1 > input[type="number"] {
    padding-right: 34px !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-host-v1
> input[type="number"]::-webkit-inner-spin-button,
#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-host-v1
> input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-controls-v1 {
    position: absolute !important;
    right: 5px !important;
    bottom: 5px !important;
    z-index: 8 !important;

    display: grid !important;
    grid-template-rows: 1fr 1fr !important;

    width: 24px !important;
    height: 34px !important;

    overflow: hidden !important;

    border: 1px solid rgba(12, 77, 120, .22) !important;
    border-radius: 6px !important;

    background: #ffffff !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-controls-v1 button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #f5f9fb !important;
    color: #0c4d78 !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    cursor: pointer !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-controls-v1 button:first-child {
    border-bottom: 1px solid rgba(12, 77, 120, .16) !important;
}

#quoteForm.pfi-home-shipment-composer-v1
.pfi-pieces-stepper-controls-v1 button:hover {
    background: #eaf4f8 !important;
}

/*
 * The shipment cards are only editors.
 * No additional internal explanatory copy is needed.
 */
#quoteForm.pfi-home-shipment-composer-v1
.pfi-shipment-card-v1 {
    margin-bottom: 12px !important;
}