/* Reference steps 06–09 only; genuine controls, prices and validation retained. */ #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) { --theme-surface: rgba(7,32,49,.78); --theme-surface-muted: rgba(8,37,55,.62); --theme-surface-strong: #0b3047; --theme-text: #f4faff; --theme-text-muted: #c9deea; --ink: #f4faff; --muted: #c9deea; --line: rgba(190,225,245,.48); --accent: #00d8ee; color: #f4faff; color-scheme: dark; min-width: 0; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-control-block,.g4s-player-personalization,.g4s-personalization-choice,.g4s-player-live-price,.g4s-order-selection-card,.g4s-price-detail-disclosure,.g4s-final-next-card,.g4s-checkout-state) { background: rgba(7,29,45,.68); color: #f4faff; border-color: rgba(190,225,245,.42); box-shadow: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(h2,h3,h4,label,strong,summary) { color: #f4faff; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-asset-note,.g4s-field label,small,.g4s-price-tax-note) { color: #d1e3ed; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(h2,h3,.g4s-form-step-head h2,.g4s-reference-upload-title) { font-family: 'G4S Rubik',Arial,sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-form-step-head h2,.g4s-reference-upload-title) { font-size: clamp(25px,2.65vw,44px); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input:not([type=file]),select,textarea) { width: 100%; max-width: 100%; min-width: 0; border: 1px solid rgba(207,235,250,.65); border-radius: 8px; background: rgba(4,27,44,.8); color: #fff; box-shadow: none; font: 400 16px/1.35 'G4S Reference Sans',Arial,sans-serif; padding: 9px 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input,textarea)::placeholder { color: #b7cad5; opacity: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) select option { background: #0c2d43; color: #fff; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input,select,button,textarea):disabled { opacity: .5; cursor: not-allowed; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(button,input,select,textarea,summary):focus-visible { outline: 2px solid #00e8fe; outline-offset: 3px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-btn,.g4s-order-edit-link,.g4s-order-note-add) { min-height: 36px; font-size: 12px; white-space: normal; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-btn.success { background: linear-gradient(110deg,#00c9e3,#007bb2); border-color: #89f4ff; color: white; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-btn.secondary { background: rgba(13,43,61,.8); color: white; border-color: rgba(209,235,250,.6); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-warning,.g4s-player-validation-error,.g4s-final-status-panel.is-open) { background: #482b28; border: 1px solid #edb49f; color: #fff1e7; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-warning,.g4s-player-validation-error,.g4s-final-status-panel.is-open) :is(strong,small,p,span,h2) { color: inherit; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) [hidden] { display: none !important; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-logo-upload-preview,.g4s-placement-preview-panel) { width: 100%; max-width: 100%; margin: 0; padding: 13px; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-canvas-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 0; height: 100%; padding: 8px; margin: 0; background: radial-gradient(ellipse at 50% 20%,rgba(115,184,218,.17),transparent 65%),rgba(5,30,48,.32); border: 1px solid rgba(207,235,250,.55); border-radius: 13px; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-shirt-editor { position: relative; flex: 0 1 auto; width: min(100%,440px); height: auto; aspect-ratio: 520 / 680; min-height: 0; max-height: 100%; max-width: 100%; padding: 0; margin: 0; transform: none; border: 0; border-radius: 8px; background: transparent; box-shadow: none; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-shirt-editor::after { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-shirt-editor > img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-view-tabs { position: static; display: flex !important; flex: 0 0 auto; transform: none; width: auto; max-width: 100%; min-height: 38px; margin: 0 auto; padding: 3px; gap: 3px; background: rgba(4,31,49,.9); border: 1px solid #82b8d2; border-radius: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-view-tabs button { min-width: 75px; padding: 8px 12px; background: transparent; color: white; border: 0; border-radius: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-view-tabs button.is-active { background: #007c9f; box-shadow: inset 0 0 12px #00cee9; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-mobile-product-toolbar,.g4s-mobile-preview-actions,.g4s-mobile-view-tabs) { display: none !important; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-step { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); grid-template-rows: auto minmax(0,1fr); gap: 14px 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-title { margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-design-control-stack { display: block; min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { height: 100%; padding: 14px; display: grid; align-content: start; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block { margin: 0; padding: 12px; border: 1px solid #98baca; border-radius: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block > h3 { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block .g4s-field { margin: 0; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block .g4s-field > label:first-child { font-size: 15px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-heading { display: grid; gap: 4px; padding: 10px 14px; margin: 5px 0 8px; border: 1px solid #00d8ee; border-radius: 11px; background: rgba(0,124,163,.22); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-heading strong { font-size: 21px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-heading small { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 132px; padding: 18px; margin: 0; gap: 10px; border: 1px dashed #bed6e4; border-radius: 11px; background: rgba(17,51,71,.45); color: white; text-align: center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload span { font-size: 18px; text-transform: uppercase; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload small { font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block .g4s-asset-note { margin: 8px 0; font-size: 12px; line-height: 1.45; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-skip-logo { min-height: 32px; width: auto; padding: 6px 16px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-sleeve-sponsor { border: 1px solid #9cbccc; border-radius: 12px; padding: 0 12px; background: rgba(9,38,57,.65); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-sleeve-sponsor > summary { padding: 12px 0; cursor: pointer; font-size: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-sleeve-sponsor > summary small { margin-left: 10px; font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-logo-notes { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid #90aebd; border-radius: 11px; font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-logo-notes textarea { display: block; min-height: 65px; height: 65px; resize: vertical; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-vector-inline-note { padding: 9px 12px; margin: 0; font-size: 11px; line-height: 1.35; background: rgba(6,37,53,.78); color: #dcecf5; border-color: #8fb3c8; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-vector-inline-note :is(strong,span,p) { color: inherit; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-preview-title { margin: 3px 0; font-size: 18px; text-align: right; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-step { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 12px 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-no-logo { padding: 10px 16px; font-size: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-design-control-stack { display: flex; flex-direction: column; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-panel { padding: 16px; display: grid; align-content: start; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-panel > h2 { font-size: 28px; margin: 0 0 4px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle { display: grid; grid-template-columns: 34px 1fr; min-height: 60px; margin: 0; padding: 10px 12px; gap: 2px 10px; background: rgba(8,44,63,.7); color: white; border: 1px solid #59bfd4; border-radius: 12px; text-align: left; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > span { grid-row: 1 / 3; align-self: center; background: #0d3d52; color: white; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle.is-active { background: rgba(0,132,164,.3); border-color: #00e8fe; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle.is-active > span { background: #00b8d5; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > strong { font-size: 15px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > small { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-club-name-control { padding: 13px; margin: 0; border: 1px solid #0bcfe9; border-radius: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-club-name-control h3 { font-size: 18px; margin: 0 0 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-club-name-control .g4s-field { gap: 6px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info { margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary { min-height: 57px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-confirm-configuration { margin: 8px 0 0; min-height: 45px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel { padding: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel :is(.g4s-design-active-editor-head,h3,.g4s-asset-note,[data-key="club_name"]) { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel:not(:has([data-key="logo_front"],[data-key="sponsor"])) { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel .g4s-control-block { padding: 0; margin: 0; background: transparent; border: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel .g4s-plus-grid { display: flex; flex-wrap: wrap; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-inspector-panel .g4s-plus-toggle { flex: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-preview-panel { display: flex; flex-direction: column; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-form-step-head { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-form-step-head h2 { font-size: 29px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-form-step-head .g4s-kicker { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-workbench { display: block; flex: 1; min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-kit-panel { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 10px; gap: 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage-head { flex: 0 0 auto; margin: 0; color: white; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage-head :is(span,em) { color: #00e8fe; font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage-head strong { font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage .g4s-canvas-wrap { flex: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-mobile-team-table-shell { display: none !important; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-step-layout { gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-panel { padding: 10px 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head { margin: 0; padding: 0; gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head h2 { font-size: clamp(24px,2.3vw,38px); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head > p { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics { display: flex; gap: 7px; flex-wrap: nowrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics > span { padding: 8px 10px; font-size: 11px; white-space: nowrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics strong { color: #00e8fe; font-size: 18px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-kit { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { padding: 12px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head h2 { font-size: 20px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head > div > span { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head > div:last-child { display: flex; gap: 7px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment > .g4s-asset-note { font-size: 11px; margin: 0 0 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-entry-workspace { display: grid !important; grid-template-columns: minmax(0,.31fr) minmax(0,.32fr) minmax(0,.37fr); grid-template-rows: minmax(0,1fr) auto; gap: 10px; align-items: stretch; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-roster,.g4s-team-player-panel,.g4s-reference-player-preview) { padding: 11px; min-height: 0; max-height: none; border-radius: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-roster { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 8px; overflow: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-roster-head { display: flex; justify-content: space-between; flex: 0 0 auto; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-roster-list { display: flex; flex-direction: column; gap: 5px; min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player { display: grid; flex: 0 0 auto; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; gap: 2px 10px; min-height: 59px; padding: 7px 9px; background: rgba(12,46,65,.65); color: white; text-align: left; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > span { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 31px; height: 34px; font-size: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > strong { grid-column: 2; font-size: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > em { grid-column: 2; font-size: 10px; color: #d4e7f1; font-style: normal; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > small { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player.is-active { background: linear-gradient(100deg,rgba(0,177,204,.65),rgba(0,91,127,.8)); border-color: #00e8fe; box-shadow: inset 0 0 12px #007c9f; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel { display: flex; flex-direction: column; gap: 8px; overflow: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head > span { font-size: 16px; font-weight: 700; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head > strong { font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head > small { font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization { padding: 8px; gap: 7px; margin: 0; border-radius: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization-head { display: grid; gap: 3px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization-head strong { font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization-head small { font-size: 10px; line-height: 1.3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-grid { display: grid; grid-template-columns: 1fr; gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,1.1fr); gap: 7px; padding: 5px; align-items: center; border-radius: 7px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-choice > span { display: grid; gap: 2px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-choice strong { font-size: 11px; line-height: 1.2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-choice small { font-size: 9px; line-height: 1.25; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice > div { padding: 0; gap: 3px; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice button { min-height: 32px; padding: 4px; border-radius: 6px; font-size: 9px; line-height: 1.2; background: #163f55; color: white; border: 1px solid #6c91a5; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice button.is-active { background: #007991; border-color: #00e8fe; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-live-price { padding: 6px 8px; gap: 2px 6px; font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-live-price strong { color: #00e8fe; font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-live-price small { font-size: 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-fields,.g4s-team-player-sizes) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 9px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-fields,.g4s-team-player-sizes) > :is(label,div) { display: grid; min-width: 0; gap: 3px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel :is(input,select) { height: 34px; min-height: 34px; padding: 5px 8px; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel label > span { font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-sizes .is-disabled { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle { display: flex; padding: 0; background: #163f55; min-height: 34px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle button { flex: 1; min-width: 0; min-height: 34px; padding: 4px; font-size: 10px; color: white; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle button.is-active { background: #007e9e; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-delete-active { margin: 0; min-height: 28px; padding: 5px; font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview { display: flex; flex-direction: column; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview h3 { flex: 0 0 auto; font-size: 18px; margin: 0 0 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview .g4s-reference-product-preview { position: relative; width: 100%; height: auto; min-height: 0; margin: auto; aspect-ratio: 520 / 680; background: transparent; border: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview .g4s-reference-product-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { grid-column: 2 / 4; grid-row: 2; padding: 7px 10px; min-height: 0; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs { display: flex; flex-direction: row; align-items: stretch; gap: 10px; margin: 0; min-width: 0; overflow-x: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button { min-height: 28px; padding: 4px 14px; font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll caption { font-size: 10px; padding-bottom: 3px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll :is(th,td) { padding: 5px; font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-step-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 12px; align-items: stretch; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-overview-panel { min-height: 0; padding: 13px; gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { min-height: 65px; margin: 0; gap: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-form-step-head { margin: 0; padding: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview .g4s-reference-outfit { height: 100%; min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { gap: 10px; overflow: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review { padding: 0; border: 0; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-quick-review { display: flex; flex-direction: column; gap: 10px; padding: 0; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile { padding: 12px; min-height: 0; border-radius: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head { gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > div > span { color: #00e8fe; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > div > strong { font-size: 18px; line-height: 1.3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .is-kit-review .g4s-order-review-head > div > strong { font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure { border-color: rgba(183,216,237,.35); background: transparent; margin-top: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure > summary { padding: 8px; background: rgba(2,32,51,.6); font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure > summary strong { color: #00e8fe; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure-body { padding: 0 6px; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals { display: flex; flex-direction: column; gap: 0; margin: 4px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals > div { display: flex; justify-content: space-between; min-height: 32px; padding: 7px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(187,216,234,.25); border-radius: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals dt { font-size: 12px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals dd { font: 500 13px 'G4S Rubik',Arial,sans-serif; color: white; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div { display: block; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div > span { display: block; color: #00e8fe; font-size: 12px; margin-bottom: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-label { font-size: 15px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-add { float: right; min-height: 29px; padding: 5px 8px; font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel p { font-size: 11px; line-height: 1.45; margin: 8px 0 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel textarea { min-height: 80px; height: 80px; resize: vertical; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-counter { text-align: right; font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-flow-actions { padding: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-flow-action-buttons { gap: 7px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-secondary-actions { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-final-status-panel { padding: 10px; margin-bottom: 10px; grid-template-columns: 1fr; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-final-status-panel h2 { font-size: 18px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-final-status-panel :is(p,small) { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { position: static; align-self: stretch; min-height: 0; overflow: auto; padding: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-head h2 { font-size: 17px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-head .g4s-pill { font-size: 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total { padding: 12px; margin: 0; background: rgba(4,27,42,.65); border-color: #668a9e; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total > span { font-size: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total > strong { color: #00e8fe; font: 700 26px 'G4S Rubik',Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-tax-note { font-size: 10px; line-height: 1.4; margin: 9px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line { padding: 8px 0; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure { margin: 6px 0; padding: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure > summary { padding: 8px 0; font-size: 11px; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { overflow: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-design-control-stack { overflow: auto; } } @media (max-width: 1100px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-logo-upload-step,.g4s-logo-placement-step,.g4s-summary-step-layout,.g4s-reference-summary-body) { grid-template-columns: 1fr; height: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-logo-upload-preview,.g4s-placement-preview-panel) { min-height: 410px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-step .g4s-placement-preview-panel { grid-row: auto; grid-column: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-step .g4s-design-control-stack { grid-row: auto; grid-column: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-entry-workspace { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); height: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-roster { grid-column: 1 / -1; grid-row: auto; max-height: 210px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { grid-column: 1 / -1; grid-row: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-head { flex-wrap: wrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { height: 480px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { overflow: visible; } } @media (max-width: 600px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) { gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-form-step-head h2,.g4s-reference-upload-title) { font-size: 27px; line-height: 1.12; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-form-panel,.g4s-panel) { padding: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-shirt-editor { width: 100%; max-height: none; aspect-ratio: 520 / 680; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-canvas-wrap { width: 100%; min-height: 0; padding: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-logo-upload-preview,.g4s-placement-preview-panel) { min-height: 370px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) .g4s-view-tabs button { min-width: 65px; min-height: 40px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block { padding: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-preview-title { font-size: 16px; text-align: left; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-form-step-head h2 { font-size: 25px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary small { white-space: normal; font-size: 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-entry-workspace { display: flex !important; flex-direction: column; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-roster { max-height: 230px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel { overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics { gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics > span { padding: 7px 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head { flex-wrap: wrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head > div:last-child { flex-wrap: wrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment-head .g4s-btn { min-height: 40px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel :is(input,select) { min-height: 42px; height: 42px; font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice { grid-template-columns: minmax(0,1fr) 155px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice button { min-height: 42px; font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle button { min-height: 42px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview { min-height: 340px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { width: 100%; max-width: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll { overflow-x: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { flex-wrap: wrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-reference-role-tabs { width: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { height: 430px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-add { float: none; display: block; margin-top: 8px; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) { font-family: 'G4S Reference Sans',Arial,sans-serif; font-size: 16px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(p,small,label,summary,input,select,textarea,button) { font-family: 'G4S Reference Sans',Arial,sans-serif; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(h2,h3,h4,.g4s-reference-upload-title) { font-family: 'G4S Reference Sans',Arial,sans-serif; font-weight: 700; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input:not([type=file]),select,textarea) { -webkit-text-fill-color: #f4faff; color: #f4faff; font-size: 16px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input,textarea)::placeholder { -webkit-text-fill-color: #c1d5e0; color: #c1d5e0; font-weight: 400; opacity: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(input,select,textarea):disabled { -webkit-text-fill-color: #c1d5e0; color: #c1d5e0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) > .g4s-message { position: fixed; z-index: 40; top: 78px; right: 28px; left: auto; width: min(560px,calc(100vw - 32px)); margin: 0; padding: 12px 42px 12px 16px; border: 1px solid #54d7ef; border-radius: 12px; background: #075572; color: #fff; box-shadow: 0 8px 25px #001b35; font: 400 16px/1.35 'G4S Reference Sans',Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) > .g4s-message.is-error { background: #593025; border-color: #ffc1a8; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) > .g4s-message button { color: #fff; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) > .g4s-message[data-message-code="logo-skipped"]:not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-title { font-size: clamp(32px,3.15vw,52px); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-primary-block .g4s-asset-note { font-size: 14px; line-height: 1.35; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-heading { position: relative; padding-left: 72px; min-height: 64px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-upload-heading::before { content: ''; position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border: 2px solid #b6f8ff; border-radius: 50%; background: rgba(0,174,205,.5); box-shadow: 0 0 12px #00cee5; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload::before { content: ''; display: block; width: 42px; height: 35px; background: white; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 31H9a7 7 0 0 1-1-14A13 13 0 0 1 33 13a9 9 0 0 1 5 18h-3M24 37V19m-7 7 7-7 7 7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload { gap: 8px; min-height: 135px; padding: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-upload-drop.is-primary-upload small { font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-sleeve-sponsor > summary { font-size: 22px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-logo-notes { font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { overflow-y: auto; max-height: 100%; scrollbar-width: thin; scrollbar-color: #6bdeec #14364c; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-vector-inline-note { font-size: 14px; line-height: 1.35; min-height: 94px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-vector-inline-note small { font: 400 14px/1.35 'G4S Reference Sans',Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-vector-inline-note > span { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-no-logo { min-height: 48px; display: flex; align-items: center; font-size: 16px; background: rgba(0,112,164,.73); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > strong { font-size: 18px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > small { font-size: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-plus-toggle > span { border: 1px solid #9deeff; border-radius: 50%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-club-name-control .g4s-field label { font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary { font-size: 19px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary small { font-size: 12px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-preview-panel { min-height: 0; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage { overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage .g4s-canvas-wrap { flex: 1 1 0; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-shirt-editor { width: min(100%,380px); flex-shrink: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics > span { background: rgba(0,76,104,.6); color: white; border: 1px solid #78c9e5; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics > span strong { font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head { order: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-fields { order: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-sizes { order: 2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization { order: 3; padding: 6px; gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-validation-error { order: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-delete-active { order: 4; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization-head small { font-size: 11px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-personalization .g4s-personalization-choice { padding: 3px 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-choice strong { font-size: 12px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-personalization-choice small { font-size: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel label > span { font-size: 12px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel :is(input,select) { font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > strong { font-size: 17px; font-weight: 500; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > em { font-size: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { grid-template-columns: minmax(0,1fr); grid-template-rows: 42px minmax(0,1fr); gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-price-detail-disclosure,.g4s-price-detail-disclosure > summary,.g4s-price-detail-body,.g4s-price-list,.g4s-benefit-panel,.g4s-order-detail-disclosure,.g4s-order-detail-disclosure > summary,.g4s-final-missing-list > span) { background: rgba(4,30,46,.66); border-color: rgba(184,219,239,.35); color: #f3faff; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure > summary :is(span,strong) { color: #e8f8ff; font-size: 12px; font-weight: 500; white-space: normal; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure > summary::after { color: #00e8fe; background: #164962; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-body { padding: 6px 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-list { padding: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line :is(span,strong) { color: #f3faff; font-size: 14px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-selection-card[role="note"] { padding: 12px; font-size: 14px; line-height: 1.35; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-selection-card[role="note"] :is(p,ul) { margin: 8px 0; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-form-step-head { display: block; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-form-step-head h2 { margin: 3px 0; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] { padding-top: 30px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-design-control-stack { height: 100%; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { height: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] > .g4s-reference-breadcrumb { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-stack { min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-reference-step-nav { position: relative; bottom: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-multistep-form { min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment > .g4s-asset-note { font-size: 14px; line-height: 1.2; margin-bottom: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { display: block; } } @media (max-width: 600px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"])) > .g4s-message { top: 12px; right: 12px; width: calc(100vw - 24px); font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { max-height: none; overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > strong { font-size: 16px; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options { order: 3; flex: 0 0 auto; margin: 0; border: 1px solid #79b8ce; border-radius: 10px; background: rgba(4,32,49,.78); color: #f4faff; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; font: 500 16px/1.3 "G4S Reference Sans",Arial,sans-serif; color: #f4faff; cursor: pointer; list-style: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options > summary::-webkit-details-marker { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options > summary::after { content: "+"; font-size: 24px; color: #00e8fe; line-height: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options[open] > summary::after { content: "−"; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-print-options > .g4s-player-personalization { order: initial; margin: 0; border: 0; border-top: 1px solid rgba(171,216,238,.35); border-radius: 0 0 10px 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-form-step-head h2,.g4s-reference-upload-title) { font-family: Arial,sans-serif; font-weight: 700; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-reference-preview-title,.g4s-placement-stage-head strong,.g4s-club-name-control h3,.g4s-reference-print-info summary strong) { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 20px; font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer:is([data-config-step-current="logo-upload"],[data-config-step-current="logo-place"],[data-config-step-current="team"],[data-config-step-current="summary"]) :is(.g4s-field label,.g4s-asset-note,.g4s-plus-toggle small,.g4s-reference-logo-notes,.g4s-reference-upload-heading small,.g4s-vector-inline-note small) { font-size: 16px; font-weight: 400; line-height: 1.3; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: auto minmax(0,1fr); overflow: hidden; padding-top: 30px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-step { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: auto minmax(0,1fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-design-control-stack { min-height: 0; height: 100%; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { display: block; box-sizing: border-box; height: 100%; min-height: 0; max-height: 100%; overflow-y: auto; padding-bottom: 18px; overscroll-behavior: contain; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel > * + * { margin-top: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-preview { display: grid; align-self: stretch; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; max-height: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-canvas-wrap { display: flex; height: 100%; min-height: 0; overflow: hidden; padding: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-shirt-editor { height: 100%; width: auto; aspect-ratio: 520/680; min-height: 0; max-height: 100%; max-width: 100%; flex: 0 1 auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0,1fr); overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-logo-placement-step { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: 48px minmax(0,1fr); align-items: stretch; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-preview-panel { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; max-height: 100%; align-self: stretch; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-workbench { display: grid; grid-template-rows: minmax(0,1fr); height: 100%; min-height: 0; max-height: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; max-height: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage .g4s-canvas-wrap { display: grid; grid-template-rows: 40px minmax(0,1fr); justify-items: center; align-items: center; height: 100%; min-height: 0; max-height: 100%; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-shirt-editor { height: 100%; min-height: 0; max-height: 100%; width: auto; max-width: 100%; aspect-ratio: 520/680; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-view-tabs { height: 40px; min-height: 40px; align-self: start; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-design-control-stack { height: 100%; min-height: 0; overflow-y: auto; } } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0,1fr); overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-step-layout { height: 100%; min-height: 0; grid-template-rows: auto minmax(0,1fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-workbench { height: 100%; min-height: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { display: grid; height: 100%; min-height: 0; max-height: 100%; grid-template-rows: auto auto minmax(0,1fr); gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-entry-workspace { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0,1fr) 160px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-roster { height: 100%; min-height: 0; overflow-y: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel { height: 100%; min-height: 0; overflow-y: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; justify-items: center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview h3 { width: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview .g4s-reference-product-preview { width: auto; height: 100%; max-width: 100%; max-height: 100%; margin: 0; aspect-ratio: 520/680; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { height: 160px; max-height: 160px; overflow: hidden; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-panel label > span,.g4s-team-player-role-field > span,.g4s-team-mobile-roster-head,.g4s-reference-size-scroll th,.g4s-reference-size-scroll td) { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 16px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > em { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 16px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > strong { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 18px; font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle button { font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-order-check-details,.g4s-order-check-details > summary,.g4s-order-checklist) { background: rgba(4,30,46,.66); color: #eef8ff; border-color: #7099af; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-check-details > summary :is(span,strong) { color: #eef8ff; font: 500 16px/1.3 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-check-details > summary::after { color: #00e8fe; background: #164962; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { display: block; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 9px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line :is(span,strong) { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 16px; font-weight: 400; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line > strong { max-width: none; min-width: 0; white-space: nowrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure.is-price-lines { border: 0; border-radius: 0; background: transparent; overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .is-price-lines .g4s-price-detail-body { display: block; padding: 0; border: 0; background: transparent; overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .is-price-lines .g4s-price-list { border: 0; border-radius: 0; background: transparent; overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals dt,#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals dd { font: 400 16px/1.3 "G4S Reference Sans",Arial,sans-serif; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) { height: 100svh; max-height: 100svh; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-multistep-form { grid-template-columns: 218px minmax(0,1fr); padding-left: 28px; padding-right: 28px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0,1fr); overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-step-layout { height: 100%; min-height: 0; max-height: 100%; grid-template-columns: minmax(0,1fr) 300px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-overview-panel { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: auto minmax(0,1fr); overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { min-height: 74px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-body { height: 100%; min-height: 0; max-height: 100%; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0,1fr) 48px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview .g4s-reference-outfit { height: 100%; min-height: 0; max-height: 100%; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview .g4s-reference-mannequin { display: block; height: 100%; width: auto; min-height: 0; max-height: 100%; max-width: 100%; aspect-ratio: 2/3; overflow: hidden; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview .g4s-reference-mannequin-image { width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { height: 100%; min-height: 0; max-height: 100%; overflow-y: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { height: 100%; min-height: 0; max-height: 100%; overflow-y: auto; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-quick-review > .is-kit-review { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-edit-link { min-height: 40px; padding: 8px 14px; border: 1px solid #b0d4e8; border-radius: 11px; background: rgba(8,40,58,.75); color: #fff; -webkit-text-fill-color: #fff; font: 500 16px/1.25 "G4S Reference Sans",Arial,sans-serif; box-shadow: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details { margin-top: 10px; padding: 0 12px; border: 1px solid #718fa2; border-radius: 11px; background: rgba(8,34,50,.58); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details > summary { min-height: 40px; padding: 10px 0; cursor: pointer; font: 400 16px/1.25 "G4S Reference Sans",Arial,sans-serif; color: #d9edf7; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details :is(p,ul) { font: 400 15px/1.35 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-workbench { grid-template-columns: minmax(0,1fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-placement-stage { width: 100%; max-width: 100%; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-shirt-editor.has-reference-photo,#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-place"] .g4s-shirt-editor.has-reference-photo { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview .g4s-reference-product-preview.has-reference-photo { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-roster,.g4s-team-player-panel) { background: linear-gradient(145deg,rgba(18,74,108,.42),rgba(8,37,53,.48)); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-preview { background: linear-gradient(180deg,rgba(3,30,48,.18),rgba(3,30,48,.08)),url("img/reference-20261024/stadium.png") center bottom / cover no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head { display: block; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head > .g4s-kicker { display: block; margin: 0 0 3px; color: #eff9ff; font: 400 16px/1.2 "G4S Reference Sans",Arial,sans-serif; text-transform: uppercase; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head > span { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-panel { padding-top: 9px; padding-bottom: 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total { padding: 10px 12px; min-height: 56px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total > strong { font: 600 24px/1.15 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-tax-note,#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-tax-note strong { font: 400 12px/1.35 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line { padding: 7px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line :is(span,strong) { font-size: 14px; line-height: 1.35; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-detail-disclosure > summary { min-height: 30px; padding: 5px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line.is-total { padding: 10px; margin-top: 5px; background: rgba(0,29,45,.9); border: 1px solid #528c9d; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line.is-total :is(span,strong) { font-size: 18px; font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line.is-total > strong { color: #00e8fe; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price > .g4s-warning { padding: 8px 10px; font: 400 12px/1.3 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-actions { display: none !important; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-intro { flex: 0 0 auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-intro h3 { margin: 0 0 5px; font: 600 20px/1.2 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-note { margin: 0; color: #e0eff7; font: 400 14px/1.3 "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 7px; margin-top: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-actions button { min-height: 36px; padding: 6px 10px; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-fields.is-reference-primary { grid-template-columns: minmax(0,1fr); gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary :is(input,select) { height: 40px; min-height: 40px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-extra-options { order: 2; flex: 0 0 auto; padding: 0 10px; border: 1px solid #79b8ce; border-radius: 10px; background: rgba(4,32,49,.55); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-extra-options > summary { min-height: 42px; padding: 10px 0; color: white; font: 400 15px/1.3 "G4S Reference Sans",Arial,sans-serif; cursor: pointer; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-extra-options[open] { padding-bottom: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-metrics > span { font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface { display: grid; place-items: center; height: 100%; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; container-type: size; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface .g4s-reference-product-preview.has-reference-photo { width: min(100cqw,100cqh); height: min(100cqw,100cqh); max-width: 100%; max-height: 100%; aspect-ratio: 1; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { grid-template-rows: minmax(0,1fr); gap: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-roster-list { flex: 1 1 0; overflow-y: auto; } } @media (max-width: 960px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-roster-actions { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface { height: 360px; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-size-primary > label,#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-quantity { display: grid; gap: 5px; margin: 0 0 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-extra-options .g4s-team-player-sizes { margin-top: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button.is-primary-part { min-width: 150px; font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs svg { width: 24px; height: 24px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll { width: 100%; height: auto; min-height: 78px; overflow-x: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll table { margin: 0; height: auto; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="team"]) .g4s-config-stack > .g4s-reference-step-nav { height: 72px; min-height: 72px; max-height: 72px; padding: 5px 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="team"]) .g4s-reference-step-nav > .g4s-btn { min-height: 58px; height: 58px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="team"]) .g4s-multistep-form { padding-bottom: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-step-layout { gap: 4px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { padding-top: 8px; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review { display: contents; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-quick-review { order: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel { order: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details { order: 2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-flow-actions { order: 3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-final-status-panel { order: -1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details:not([open]) { padding: 0 10px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-missing-view-details > summary { min-height: 40px; padding: 10px 0; font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { background: linear-gradient(180deg,rgba(3,30,48,.12),rgba(3,30,48,.06)),url("img/reference-20261024/stadium.png") center bottom / cover no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview .g4s-reference-mannequin-layer.is-sponsor { display: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel p { font-size: 14px; line-height: 1.4; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel textarea { min-height: 94px; height: 94px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-check-details > summary { grid-template-columns: minmax(0,1fr) auto 24px; gap: 4px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-check-details > summary :is(span,strong) { overflow: visible; text-overflow: clip; white-space: normal; font-size: 14px; } @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-multistep-form { padding-bottom: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-config-stack > .g4s-reference-step-nav { width: calc(100% - 316px); height: 72px; min-height: 72px; max-height: 72px; padding: 5px 9px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-reference-step-nav > .g4s-btn { min-height: 58px; height: 58px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] { overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-step-layout { position: static; overflow: visible; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { position: absolute; z-index: 4; top: 0; right: 0; width: 300px; height: calc(100% + 54px); max-height: none; overflow-y: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line { padding: 10px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line :is(span,strong) { font-size: 16px; line-height: 1.3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-overview-panel { position: relative; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { padding-right: 286px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-reference-role-tabs { margin-left: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-preview { position: static; grid-template-rows: minmax(0,1fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views { position: absolute; top: 18px; right: 14px; width: 274px; border: 1px solid #7caac5; border-radius: 12px; padding: 3px; z-index: 5; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views button { flex: 1; min-height: 44px; font-size: 14px; } } /* V8 bounded final typography adjustments. */ @media (min-width: 1101px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head h2 { font-size: 42px; } } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-form-step-head > .g4s-kicker { color: #fff; text-transform: uppercase; } /* V10 desktop roster density: nine rows at reference size, remaining rows scroll. */ @media (min-width: 961px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player { min-height: 45px; padding: 3px 12px; gap: 2px 10px; grid-template-areas: "num name" "num meta"; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > strong { font-size: 16px; line-height: 18px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > em { font-size: 14px; line-height: 17px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-roster-list { gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-player-role-toggle button.is-active { border-color: #70f7ff; background: linear-gradient(180deg,#008faa 0%,#005370 52%,#007e9a 100%); color: #fff; box-shadow: inset 0 0 12px rgba(0,239,255,.85), 0 0 12px rgba(0,232,254,.65); } } /* V11 desktop reference alignment, steps 08/09 only. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-step-layout { gap: 0; border: 1px solid rgba(147,223,255,.7); border-radius: 18px; background: linear-gradient(145deg,rgba(5,74,129,.46),rgba(4,30,48,.6)); box-shadow: inset 0 0 14px rgba(69,196,255,.12); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-focus-panel { padding: 10px 24px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-assignment { padding: 8px 12px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-form-step-head h2 { font-family: "G4S Rubik",Arial,sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -.015em; line-height: 1.08; border: 0; padding-bottom: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-form-step-head h2 { font-family: "G4S Rubik",Arial,sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -.015em; line-height: 1.08; border: 0; padding-bottom: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-entry-workspace { grid-template-columns: minmax(0,.31fr) minmax(0,.32fr) minmax(0,.37fr); column-gap: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-player-roster,.g4s-team-player-panel,.g4s-reference-player-preview) { border-color: rgba(142,220,255,.55); box-shadow: inset 0 0 9px rgba(74,172,224,.2),0 4px 10px rgba(1,18,31,.15); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-team-roster-intro h3,.g4s-team-player-head > span,.g4s-reference-player-preview h3) { font-family: "G4S Reference Sans",Arial,sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 24px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-panel { padding: 10px 17px; gap: 6px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-head { flex: 0 0 auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-fields.is-reference-primary { flex: 0 0 auto; gap: 32px; margin: 16px 0 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary :is(.g4s-team-player-size-primary > label,label.is-number,label.is-name) { gap: 4px; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary label > span { font-size: 14px; line-height: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary :is(input,select) { height: 40px; min-height: 40px; font-size: 18px; background: rgba(9,37,56,.72); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary .g4s-player-role-toggle { min-height: 46px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .is-reference-primary .g4s-player-role-toggle button { min-height: 44px; font-size: 16px; border-radius: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-player-extra-options,.g4s-player-print-options) { flex: 0 0 auto; background: rgba(5,34,51,.48); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] :is(.g4s-player-extra-options,.g4s-player-print-options) > summary { min-height: 30px; padding-top: 5px; padding-bottom: 5px; font-size: 14px; line-height: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player { position: relative; padding-right: 30px; border-radius: 9px; background: linear-gradient(110deg,rgba(24,72,100,.72),rgba(8,40,58,.55)); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player::after { content: ""; position: absolute; right: 14px; top: calc(50% - 5px); width: 9px; height: 9px; border-top: 1.5px solid #e3fbff; border-right: 1.5px solid #e3fbff; transform: rotate(45deg); pointer-events: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player.is-active { border-color: #50f2ff; background: linear-gradient(100deg,rgba(0,163,191,.85),rgba(0,75,102,.86)); box-shadow: inset 0 0 13px rgba(0,237,255,.85),0 0 7px rgba(0,232,254,.45); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-mobile-player > span { border-color: rgba(139,231,255,.65); box-shadow: inset 0 0 9px rgba(64,194,246,.42); background: linear-gradient(135deg,#164c68,#071e2e); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-summary { background: linear-gradient(180deg,rgba(16,68,96,.5),rgba(3,38,44,.57)); border-color: rgba(143,219,244,.65); grid-template-rows: 48px minmax(0,1fr); gap: 5px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button { border-radius: 13px; background: rgba(8,35,55,.75); border-color: rgba(144,217,242,.65); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button.is-primary-part { min-width: 175px; min-height: 46px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-tabs button.is-active { border-color: #67f5ff; background: linear-gradient(180deg,#008faa,#00435e); box-shadow: inset 0 0 14px #00cfe5,0 0 7px rgba(0,232,254,.45); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll table { border-collapse: separate; border-spacing: 5px 2px; border: 0; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll caption { font-size: 11px; padding: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll :is(th,td) { border-top: 0; border-bottom: 0; border-left: 0; padding: 5px; color: #f3fdff; background: transparent; font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-size-scroll tbody td { border: 1px solid rgba(111,239,255,.8); border-radius: 11px; background: linear-gradient(140deg,rgba(1,59,72,.8),rgba(0,17,25,.9)); box-shadow: inset 0 0 9px rgba(0,216,243,.45); font-size: 19px; font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface .has-reference-photo .g4s-number-layer { width: calc(var(--slot-w) * 1.8%) !important; max-width: 70% !important; height: calc(var(--slot-h) * 1.8%) !important; top: calc(var(--y) * 1% + 6%); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface .has-reference-photo .g4s-name-layer { width: calc(var(--slot-w) * 1.5%) !important; max-width: 70% !important; height: calc(var(--slot-h) * 1.5%) !important; top: calc(var(--y) * 1% + 5%); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-reference-player-surface .has-reference-photo .g4s-club-layer { width: calc(var(--slot-w) * 1.1%) !important; max-width: 70% !important; height: calc(var(--slot-h) * 1.1%) !important; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-overview-panel { padding: 16px; gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { min-height: 73px; padding-right: 300px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-reference-role-tabs { flex: 0 0 300px; margin-left: auto; border-radius: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-role-tabs button { min-width: 140px; min-height: 50px; border-radius: 11px; font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views { top: 20px; right: 16px; width: 290px; padding: 0; border: 0; background: rgba(3,34,60,.7); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views button { min-height: 50px; border-radius: 12px; text-transform: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-reference-role-tabs,.g4s-reference-summary-views) button.is-active { border: 1px solid #00ecff; background: linear-gradient(180deg,rgba(0,117,151,.8),rgba(0,43,69,.9)); box-shadow: inset 0 0 10px rgba(0,220,255,.6); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-body { gap: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { gap: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile { padding: 20px 22px 12px; border-radius: 19px; background: linear-gradient(145deg,rgba(17,61,91,.7),rgba(5,30,47,.72)); border-color: rgba(137,208,243,.65); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head { min-height: 70px; align-items: start; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > div > span { font-size: 16px; line-height: 22px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > div > strong { font-size: 24px; line-height: 1.2; font-weight: 600; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-order-edit-link,.g4s-order-note-add) { min-height: 39px; padding: 8px 14px; font-size: 14px; border-radius: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure > summary { min-height: 44px; font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure > summary strong { font-size: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals > div { min-height: 37px; padding: 9px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel { padding: 20px 22px; border-radius: 19px; background: linear-gradient(145deg,rgba(15,51,74,.78),rgba(5,31,44,.78)); gap: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: start; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div > span { grid-column: 1; margin: 0; font-size: 16px; line-height: 22px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-label { grid-column: 1; font-size: 18px; line-height: 24px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-add { grid-column: 2; grid-row: 1 / 3; float: none; margin: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel p { grid-column: 1 / -1; margin-top: 12px; font-size: 15px; line-height: 1.4; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel textarea { min-height: 96px; height: 96px; font-size: 14px; line-height: 1.4; border-radius: 13px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-head .g4s-pill { font-size: 12px; font-weight: 400; padding: 6px 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total { min-height: 76px; padding: 14px; gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total > span { font-size: 16px; line-height: 1.3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-total > strong { font-size: 28px; font-weight: 600; white-space: nowrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line { padding: 8px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-line :is(span,strong) { font-size: 14px; line-height: 1.35; } /* Sidebar geometry is scoped to the same two desktop screens. */ #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-stepper { padding-top: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-step-tab { flex: 0 0 61.5px; min-height: 0; max-height: 61.5px; grid-template-columns: 34px 28px minmax(0,1fr); column-gap: 10px; padding-left: 1px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-step-tab strong { font-family: "G4S Reference Condensed",Arial,sans-serif; font-size: 17px; font-weight: 400; letter-spacing: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-step-tab::before { left: 19px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-step-tab.is-active::after { inset: 5px -4px; border-radius: 12px; border-color: #00efff; background: linear-gradient(100deg,rgba(0,186,215,.75),rgba(0,68,101,.8)); box-shadow: inset 0 0 16px rgba(0,235,255,.8),0 0 15px rgba(0,232,254,.55); } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-config-step-tab.is-active > span { border-color: #85faff; box-shadow: 0 0 15px #00e8fe,inset 0 0 8px rgba(0,223,255,.5); } } /* V12: keep the complete logo note above the desktop step navigation. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-upload"]) { height: 100svh; max-height: 100svh; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-panel { padding-bottom: 4px; overflow-y: auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-reference-logo-notes { margin-top: 8px; } } /* V12 browser follow-up: primary fields and complete review note. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="team"] .g4s-team-player-fields.is-reference-primary { margin-top: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile { padding-top: 16px; padding-bottom: 4px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head { min-height: 50px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure { margin-top: 2px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-team-totals > div { min-height: 32px; padding: 6px 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-disclosure-body .g4s-order-detail-disclosure > summary { min-height: 30px; padding-top: 4px; padding-bottom: 4px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-theme { display: none; } } /* V17 audited labels, header geometry and decorative summary icons. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary small { margin-left: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info summary::after { content: ""; justify-self: center; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-layer[data-config-step-current="logo-place"] .g4s-reference-print-info[open] summary::after { transform: translateY(3px) rotate(225deg); } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar { grid-template-columns: 500px 196px minmax(220px,1fr); padding-inline: clamp(40px,4.9vw,82px); } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar > div:nth-child(2) { padding-left: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar > div:nth-child(3) { padding-left: 26px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-brand { gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark { box-sizing: border-box; flex: 0 0 190px; width: 190px; padding-right: 24px; border-right: 1px solid rgba(219,244,255,.65); } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark > strong { font-family: "G4S Reference Condensed",Arial,sans-serif; font-size: 44px; font-weight: 700; line-height: 1; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-brand > span:not(.g4s-reference-top-wordmark) { font-size: 22px; font-weight: 400; letter-spacing: .28em; white-space: nowrap; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-reference-role-tabs,.g4s-reference-summary-views) button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding-inline: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-reference-role-tabs,.g4s-reference-summary-views) button::before { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 28px; background: currentColor; pointer-events: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-role-tabs button[data-role="field"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m8%203-6%204%203%205%203-2v11h12V10l3%202%203-5-6-4c-2%203-10%203-12%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m8%203-6%204%203%205%203-2v11h12V10l3%202%203-5-6-4c-2%203-10%203-12%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-role-tabs button[data-role="keeper"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2025-5-9c-1-2%201-3%202-2l3%203V7c0-3%203-3%203%200V4c0-3%203-3%203%200v2c0-3%203-3%203%200v2c0-3%203-3%203%200v10l-2%207Z%22%2F%3E%3Cpath%20d%3D%22M12%207v8M15%206v8M18%208v7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2025-5-9c-1-2%201-3%202-2l3%203V7c0-3%203-3%203%200V4c0-3%203-3%203%200v2c0-3%203-3%203%200v2c0-3%203-3%203%200v10l-2%207Z%22%2F%3E%3Cpath%20d%3D%22M12%207v8M15%206v8M18%208v7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views button[data-view="front"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203-7%204%203%205%204-2v14h12V10l4%202%203-5-7-4Z%22%2F%3E%3Cpath%20d%3D%22M9%203c1%206%2011%206%2012%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203-7%204%203%205%204-2v14h12V10l4%202%203-5-7-4Z%22%2F%3E%3Cpath%20d%3D%22M9%203c1%206%2011%206%2012%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views button[data-view="back"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203-7%204%203%205%204-2v14h12V10l4%202%203-5-7-4Z%22%2F%3E%3Cpath%20d%3D%22M9%203c1%202%2011%202%2012%200M12%208h6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203-7%204%203%205%204-2v14h12V10l4%202%203-5-7-4Z%22%2F%3E%3Cpath%20d%3D%22M9%203c1%202%2011%202%2012%200M12%208h6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > div { grid-column: 2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head > .g4s-order-edit-link { grid-column: 3; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head::before { content: ""; grid-column: 1; grid-row: 1; align-self: start; width: 40px; height: 48px; background: #f5fcff; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%228%22%20rx%3D%226%22%20ry%3D%227%22%2F%3E%3Cpath%20d%3D%22M2%2028v-3c0-5%206-8%2013-8s13%203%2013%208v3Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%228%22%20rx%3D%226%22%20ry%3D%227%22%2F%3E%3Cpath%20d%3D%22M2%2028v-3c0-5%206-8%2013-8s13%203%2013%208v3Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div { grid-template-columns: 48px minmax(0,1fr) auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 40px; height: 44px; background: #f5fcff; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202h22c2%200%203%201%203%203v17c0%202-1%203-3%203h-3v6l-7-6H4c-2%200-3-1-3-3V5c0-2%201-3%203-3Z%22%2F%3E%3Cpath%20d%3D%22M6%209h18M6%2014h18M6%2019h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202h22c2%200%203%201%203%203v17c0%202-1%203-3%203h-3v6l-7-6H4c-2%200-3-1-3-3V5c0-2%201-3%203-3Z%22%2F%3E%3Cpath%20d%3D%22M6%209h18M6%2014h18M6%2019h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div > span { grid-column: 2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-label { grid-column: 2; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-add { grid-column: 3; } } @media (min-width: 1600px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { padding-right: 364px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head .g4s-reference-role-tabs { flex-basis: 330px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-views { right: 30px; width: 298px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-head { grid-template-columns: 64px minmax(0,1fr) auto; column-gap: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel > div { grid-template-columns: 64px minmax(0,1fr) auto; column-gap: 20px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] :is(.g4s-order-review-head,.g4s-order-note-panel > div)::before { margin-left: 12px; } } /* V18: complete wordmark and bounded review-card spacing correction. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="team"],[data-config-step-current="summary"])) .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark > strong { flex-shrink: 0; width: max-content; max-width: none; overflow: visible; text-overflow: clip; transform: scaleX(.95); transform-origin: left center; } } @media (min-width: 1600px) and (min-height: 900px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile { padding-top: 20px; padding-bottom: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel { padding-bottom: 12px; } } /* V21: completion marks follow real state in step 07. */ @media (min-width: 1280px) and (min-height: 860px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab:not(.is-complete) > span, #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab.is-active > span { font-size: 14px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab:not(.is-complete) > span::after, #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab.is-active > span::after { content: none; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab.is-complete:not(.is-active) > span { font-size: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-place"]) .g4s-config-stepper .g4s-config-step-tab.is-complete:not(.is-active) > span::after { content: "✓"; color: #fff; font-size: 24px; font-weight: 600; line-height: 1; } } /* V24: measured 08/09 geometry at the large reference viewport only. Keep player fields and native extra disclosures intact; review content may scroll. */ @media (min-width: 1600px) and (min-height: 900px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="team"]) .g4s-config-stepper { align-self: start; margin-top: 10px; height: calc(100svh - 168px); max-height: calc(100svh - 168px); padding-top: 10px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-multistep-form { grid-template-columns: 219px minmax(0,1fr); column-gap: 18px; padding: 14px 28px 1px 29px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-config-stepper { align-self: start; height: calc(100svh - 133px); max-height: calc(100svh - 133px); padding-top: 22px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-config-stack { grid-template-rows: minmax(0,1fr) 75px; gap: 1px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="summary"]) .g4s-config-stack > .g4s-reference-step-nav { width: calc(100% - 318px); height: 75px; min-height: 75px; max-height: 75px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-step-layout { grid-template-columns: minmax(0,1fr) 303px; column-gap: 15px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price { width: 303px; height: calc(100svh - 133px); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-summary-overview-panel { padding-left: 20px; gap: 8px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { margin-bottom: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-body { grid-template-columns: minmax(0,.81fr) minmax(0,1.19fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-details { gap: 18px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile { padding-top: 32px; padding-bottom: 23px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel { padding: 28px 26px 7px 23px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-note-panel p { margin-top: 20px; } } /* V26: browser-measured header correction, aligns preview y186 and notes y557. */ @media (min-width: 1600px) and (min-height: 900px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-reference-summary-head { padding-bottom: 1px; } } /* V27: measured step-09 typography, review-card rhythm, and price-row spacing. */ @media (min-width: 1600px) and (min-height: 900px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-form-step-head h2 { transform: translate(3px,-1px) scaleX(1.0605); transform-origin: left center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) { box-sizing: border-box; height: 353px; min-height: 353px; padding: 32px 22px 2px; grid-template-rows: 52px minmax(0,1fr); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review):has(.g4s-order-detail-disclosure[open]) { height: auto; grid-template-rows: 52px auto; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-head { min-height: 52px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-head > div { gap: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-edit-link { width: 147px; min-width: 147px; box-sizing: border-box; justify-content: center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure { margin-top: 0; border: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure > summary { display: grid; box-sizing: border-box; grid-template-columns: minmax(0,1fr); grid-template-rows: 22px 46px; align-content: start; row-gap: 12px; width: 100%; height: 88px; min-height: 88px; padding: 8px 0 0; border: 0; background: transparent; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure > summary span { grid-column: 1; grid-row: 1; align-self: center; color: #f4faff; font: 400 16px/22px "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure > summary strong { grid-column: 1; grid-row: 2; display: flex; box-sizing: border-box; align-items: center; justify-content: space-between; width: 100%; height: 46px; min-height: 46px; padding: 0 12px; border: 1px solid rgba(143,219,244,.45); border-radius: 10px; background: rgba(2,32,51,.6); color: #00e8fe; font: 600 16px/20px "G4S Reference Sans",Arial,sans-serif; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure > summary strong::after { content: ""; display: block; box-sizing: border-box; width: 10px; height: 10px; border: 0; border-top: 2px solid #e8f8ff; border-right: 2px solid #e8f8ff; border-radius: 0; background: transparent; transform: rotate(45deg); } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure-body { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 0 6px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-reference-team-totals { margin: 12px 0 0; gap: 0; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-reference-team-totals > div { box-sizing: border-box; height: 33.5px; min-height: 33.5px; padding: 0; align-items: center; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure-body .g4s-order-detail-disclosure > summary { box-sizing: border-box; height: 22px; min-height: 22px; padding: 0 38px 0 8px; font-size: 12px; line-height: 16px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure-body .g4s-order-detail-disclosure > summary::after { right: 6px; width: 18px; height: 18px; font-size: 12px; } #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-price-list > .g4s-price-line:not(.is-total) { padding-block: 10px; } } /* V28: align the source status line with the adjacent player heading column. */ @media (min-width: 1600px) and (min-height: 900px) { #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer[data-config-step-current="summary"] .g4s-order-review-tile:not(.is-kit-review) .g4s-order-review-disclosure > summary span { margin-left: 80px; transform: translateY(-6px); } }