/* * VIALO24_HOME_MODEL_A_ROW_AUTHORITY_V2_20260921 * Presentation only for the Home Model A shipment rows. * One visible five-field row = one Shipment. */ #quoteForm.pfi-home-model-a-row-authority-v2 #pieces[data-pfi-home-shadow-pieces-v2="1"]{display:none!important} #quoteForm.pfi-home-model-a-row-authority-v2 #pfiHomePiecesVisibleV2{display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box!important} #quoteForm.pfi-home-model-a-row-authority-v2 #pfiParcelRows, #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-parcel-mode-v1, #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-equal-parcel-scroll-v1, #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-shipment-drafts-v1, #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-multi-shipment-hold-v1, #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-home-shipment-title-v1{display:none!important} .pfi-home-primary-shipment-label-v2{margin:18px 0 9px;color:#0c4777;font-size:13px;font-weight:900} .pfi-home-primary-shipment-label-v2[hidden]{display:none!important} .pfi-home-model-a-controls-v2{width:100%;box-sizing:border-box;margin:28px 0 0} .pfi-home-add-shipment-copy-v2{margin:0 0 12px;color:#526b7a;font-size:12px;line-height:1.45;font-weight:700} .pfi-home-add-shipment-v2{width:100%;min-height:42px;box-sizing:border-box;padding:10px 14px;border:1px dashed #8bb8a0;border-radius:10px;background:#f8fcfa;color:#0b6f43;font:inherit;font-size:12px;font-weight:900;cursor:pointer} .pfi-home-add-shipment-v2:hover{border-color:#5a9d78;background:#f1faf5} .pfi-home-add-shipment-v2:focus-visible{outline:3px solid rgba(240,200,8,.58);outline-offset:3px} .pfi-home-extra-shipments-v2{display:grid;gap:16px;width:100%;margin-top:18px} .pfi-home-shipment-card-v2{width:100%;box-sizing:border-box;padding:14px 14px 13px;border:1px solid #d6e2e8;border-radius:10px;background:#fff} .pfi-home-shipment-card-head-v2{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px} .pfi-home-shipment-card-head-v2 strong{color:#0c4777;font-size:13px;font-weight:900} .pfi-home-shipment-card-head-v2 button{appearance:none;width:auto;min-height:0;margin:0;padding:3px 0;border:0;background:transparent;color:#8a4a4a;font:inherit;font-size:11px;font-weight:700;cursor:pointer} .pfi-home-shipment-fields-v2{display:grid;grid-template-columns:120px 145px repeat(3,minmax(0,1fr));gap:14px;align-items:end;min-width:0} .pfi-home-shipment-field-v2{display:grid!important;grid-template-rows:minmax(28px,auto) 46px;gap:5px;min-width:0;margin:0!important} .pfi-home-shipment-field-v2>span{display:flex;align-items:flex-end;min-width:0;color:#0c4d78;font-size:11px;line-height:1.15;font-weight:800} .pfi-home-shipment-input-wrap-v2{position:relative;min-width:0} .pfi-home-shipment-input-wrap-v2 input{display:block;width:100%;min-width:0;height:46px;min-height:46px;box-sizing:border-box;margin:0;padding:0 36px 0 11px;border:1px solid rgba(0,146,70,.30);border-bottom:4px solid #f0c808;border-radius:10px;background:#fff;color:#173d58;font:inherit;font-weight:700} .pfi-home-shipment-input-wrap-v2 input:focus{outline:none;border-color:rgba(0,146,70,.62);box-shadow:0 4px 0 rgba(240,200,8,.72),0 0 0 3px rgba(0,146,70,.09)} .pfi-home-shipment-input-wrap-v2 input::placeholder{color:#87939d;opacity:.46;font-weight:400} .pfi-home-shipment-input-wrap-v2 small{position:absolute;top:50%;right:9px;transform:translateY(-50%);margin:0;color:#0c4d78;font-size:9px;font-weight:800;pointer-events:none} .pfi-home-shipment-note-v2{margin:12px 0 0;color:#627885;font-size:11px;line-height:1.4} @media(max-width:899px){.pfi-home-shipment-fields-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pfi-home-shipment-field-v2{grid-template-rows:auto 46px}} @media(max-width:520px){.pfi-home-model-a-controls-v2{margin-top:22px}.pfi-home-shipment-card-v2{padding:13px 12px 12px}.pfi-home-shipment-card-head-v2{align-items:flex-start;flex-direction:column;gap:5px}.pfi-home-shipment-fields-v2{grid-template-columns:minmax(0,1fr);gap:10px}.pfi-home-shipment-field-v2>span{font-size:11px}} /* * VIALO24_HOME_PIECES_STEPPER_CSS_V1_20260925 * VIALO24_HOME_PIECES_STEPPER_DIRECT_CHILD_SAFE_V2_20260925 * VIALO24_HOME_PIECES_HORIZONTAL_STEPPER_V3_20260925 * * Integrated quantity control: * * [ − ] VALUE [ + ] * * No wrapper around the input. * Existing direct-child selectors remain authoritative. */ .v24-pieces-stepper-host-v3 { position: relative !important; } .v24-pieces-stepper-host-v3 > input[type="number"] { padding-left: 42px !important; padding-right: 42px !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; font-variant-numeric: tabular-nums; } .v24-pieces-stepper-host-v3 > input[type="number"]::-webkit-inner-spin-button, .v24-pieces-stepper-host-v3 > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .v24-pieces-stepper-controls-v3 { position: absolute; display: flex; align-items: stretch; justify-content: space-between; box-sizing: border-box; z-index: 4; pointer-events: none; overflow: hidden; border-radius: 9px; background: transparent; } .v24-pieces-stepper-controls-v3 button { appearance: none; width: 34px; min-width: 34px; height: 100%; min-height: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; border: 0; background: #f5f9fb; color: #0b5484; font-family: inherit; font-size: 19px; line-height: 1; font-weight: 800; cursor: pointer; user-select: none; touch-action: manipulation; box-shadow: none; transform: none; transition: background .12s ease, color .12s ease; } .v24-pieces-stepper-minus-v3 { border-right: 1px solid #d5e1e8 !important; border-radius: 8px 0 0 8px !important; } .v24-pieces-stepper-plus-v3 { border-left: 1px solid #d5e1e8 !important; border-radius: 0 8px 8px 0 !important; } .v24-pieces-stepper-controls-v3 button:hover { background: #e8f3f8; color: #073e65; box-shadow: none; transform: none; } .v24-pieces-stepper-controls-v3 button:active { background: #dcecf4; box-shadow: none; transform: none; } .v24-pieces-stepper-controls-v3 button:focus-visible { position: relative; z-index: 2; outline: 2px solid rgba(11,84,132,.30); outline-offset: -2px; } /* * VIALO24_HOME_PIECES_CLEAN_CIRCULAR_V4_20260925 * * Visual-only refinement of the V3 quantity stepper. * * Goal: * - preserve the normal Vialo24 input; * - keep the numeric value visually dominant; * - use two quiet circular +/- controls; * - remove the cramped segmented-control appearance. */ .v24-pieces-stepper-host-v3 > input[type="number"] { padding-left: 34px !important; padding-right: 34px !important; text-align: center !important; font-weight: 800 !important; } /* * Transparent positioning layer only. * It must not look like a second input placed over the real input. */ .v24-pieces-stepper-controls-v3 { overflow: visible !important; border-radius: 0 !important; background: transparent !important; } /* * Small independent circular controls. */ .v24-pieces-stepper-controls-v3 button { position: absolute !important; top: 50% !important; width: 23px !important; min-width: 23px !important; height: 23px !important; min-height: 23px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #c9d9e4 !important; border-radius: 999px !important; background: #f4f8fb !important; color: #0b5484 !important; box-shadow: none !important; transform: translateY(-50%) !important; font-size: 16px !important; line-height: 1 !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .v24-pieces-stepper-minus-v3 { left: 5px !important; right: auto !important; border-right: 1px solid #c9d9e4 !important; } .v24-pieces-stepper-plus-v3 { right: 5px !important; left: auto !important; border-left: 1px solid #c9d9e4 !important; } .v24-pieces-stepper-controls-v3 button:hover { background: #e8f3f8 !important; border-color: #a9c4d5 !important; color: #073e65 !important; box-shadow: none !important; transform: translateY(-50%) !important; } .v24-pieces-stepper-controls-v3 button:active { background: #dcecf4 !important; border-color: #9bbacc !important; box-shadow: none !important; transform: translateY(-50%) !important; } .v24-pieces-stepper-controls-v3 button:focus-visible { outline: 2px solid rgba(11,84,132,.28) !important; outline-offset: 1px !important; box-shadow: none !important; } /* * VIALO24_HOME_PIECES_BARE_V5_20260925 * * Final visual direction requested: * * − VALUE + * * Only the glyphs are visible. * The click/touch targets remain comfortably sized but have: * - no border * - no circle * - no background * - no shadow * - no separator */ .v24-pieces-stepper-host-v3 > input[type="number"] { padding-left: 31px !important; padding-right: 31px !important; text-align: center !important; font-weight: 800 !important; } .v24-pieces-stepper-controls-v3 { overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .v24-pieces-stepper-controls-v3 button, .v24-pieces-stepper-controls-v3 button:hover, .v24-pieces-stepper-controls-v3 button:active, .v24-pieces-stepper-controls-v3 button:focus, .v24-pieces-stepper-controls-v3 button:focus-visible { width: 27px !important; min-width: 27px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; outline: 0 !important; outline-offset: 0 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: #0b5484 !important; transform: none !important; font-size: 20px !important; line-height: 1 !important; font-weight: 800 !important; } .v24-pieces-stepper-minus-v3 { left: 3px !important; right: auto !important; } .v24-pieces-stepper-plus-v3 { right: 3px !important; left: auto !important; } .v24-pieces-stepper-controls-v3 button:hover { color: #073e65 !important; } .v24-pieces-stepper-controls-v3 button:active { color: #009246 !important; } .v24-pieces-stepper-controls-v3 button:focus-visible { color: #009246 !important; } /* * VIALO24_HOME_PIECES_VERTICAL_CENTER_V6_20260926 * * V5 visual language is preserved: * * − VALUE + * * Geometry correction only: * V5 inherited top:50% from V4 while removing translateY(-50%), * which positioned the invisible button boxes below the input. * * Buttons now fill the control layer vertically and center only * their glyphs. No visible border/background/chrome is introduced. */ .v24-pieces-stepper-controls-v3 button, .v24-pieces-stepper-controls-v3 button:hover, .v24-pieces-stepper-controls-v3 button:active, .v24-pieces-stepper-controls-v3 button:focus, .v24-pieces-stepper-controls-v3 button:focus-visible { top: 0 !important; bottom: 0 !important; height: auto !important; min-height: 0 !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .v24-pieces-stepper-minus-v3 { left: 6px !important; right: auto !important; } .v24-pieces-stepper-plus-v3 { right: 6px !important; left: auto !important; } /* * VIALO24_HOME_ADDED_SHIPMENT_PIECES_ALIGN_V7_20260926 * * Row 1 already visually passes. * * Additional Model A shipment rows use: * .pfi-home-shipment-input-wrap-v2 * > input[data-pfi-home-shipment-field="pieces"] * * Give that exact input the same centered quantity presentation * as the canonical first row, with enough specificity to beat the * historical Home cascade. */ #quoteForm.pfi-home-model-a-row-authority-v2 .pfi-home-shipment-input-wrap-v2.v24-pieces-stepper-host-v3 > input[type="number"][data-pfi-home-shipment-field="pieces"] { padding-left: 31px !important; padding-right: 31px !important; text-align: center !important; text-indent: 0 !important; direction: ltr !important; font-weight: 800 !important; box-sizing: border-box !important; }