#modal.offer-composition-dialog { --composition-line:color-mix(in srgb,var(--text) 13%,transparent); width:min(1040px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 40px); padding:0; border-radius:7px; border:1px solid var(--composition-line); background:var(--surface); overflow:hidden; }
#modal.offer-composition-dialog[open] { display:flex; flex-direction:column; }
#modal.offer-composition-dialog>.modal-head { flex:none; padding:19px 25px; border-bottom:1px solid var(--composition-line); }
#modal.offer-composition-dialog>.modal-head h2 { font-family:var(--font-display,'Barlow Condensed',sans-serif); font-size:27px; font-weight:500; letter-spacing:.2px; }
#modal.offer-composition-dialog>.modal-head button { width:32px; height:32px; padding:0; color:var(--muted); font-size:20px; }
#modal.offer-composition-dialog>.modal-body { display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden; }
#modal .offer-composition { display:flex; flex-direction:column; min-height:0; margin:0; color:var(--text); font:13px var(--font-body,'IBM Plex Sans',sans-serif); }
#modal .offer-composition-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; min-height:0; overflow:auto; overscroll-behavior:contain; }
#modal .offer-composition-main { min-width:0; padding:22px 25px; }
#modal .offer-composition-main h3 { margin:0; font-size:15px; font-weight:500; }
#modal .offer-composition-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
#modal .offer-composition-heading span { font-size:11px; color:var(--muted); }
#modal .offer-composition-details { min-width:0; padding:22px 25px; border-left:1px solid var(--composition-line); background:color-mix(in srgb,var(--text) 2%,transparent); }
#modal .offer-composition-details h3 { margin:0 0 20px; font-size:15px; font-weight:500; }
#modal .offer-composition-search>label { display:block; margin-bottom:7px; }
#modal .offer-composition-search>[data-offer-result-count] { display:block; font-size:10px; color:var(--muted); }
#modal .offer-composition-search>[data-offer-result-count]:empty { display:none; }
#modal .offer-composition .field { margin:0 0 17px; }
#modal .offer-composition label { font-size:11px; color:var(--muted); font-weight:400; }
#modal .offer-composition .field>label,#modal .offer-composition .field>span { display:block; margin-bottom:6px; }
#modal .offer-composition input,#modal .offer-composition select { min-width:0; width:100%; min-height:36px; padding:8px 10px; border:1px solid var(--composition-line); border-radius:4px; color:var(--text); background:var(--surface-input); font:inherit; }
#modal .offer-composition input:focus,#modal .offer-composition select:focus { outline:1px solid var(--accent-bright); outline-offset:0; border-color:var(--accent-bright); box-shadow:none; }
#modal .offer-composition button:focus-visible,#modal .offer-composition a:focus-visible { outline:2px solid var(--accent-bright); outline-offset:3px; }
#modal .offer-composition [data-offer-search] { font-size:13px; min-height:42px; padding-inline:12px; }
#modal .offer-composition-results { max-height:175px; margin:6px 0 12px; padding:3px 0; overflow:auto; border:1px solid var(--composition-line); border-radius:4px; }
#modal .offer-composition-results:empty { display:none; }
#modal .offer-composition-results button { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; min-height:39px; border:0; border-radius:0; padding:9px 11px; background:transparent; text-align:left; font-size:12px; font-weight:400; }
#modal .offer-composition-results button:hover,#modal .offer-composition-results [aria-selected="true"] { background:color-mix(in srgb,var(--accent) 13%,transparent); }
#modal .offer-composition-results small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
#modal .offer-composition-results p { padding:8px 12px; margin:0; color:var(--muted); font-size:12px; }
#modal .offer-composition-add { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:11px 0; border-bottom:1px solid var(--composition-line); }
#modal .offer-composition-add>strong { flex:1; font-size:12px; font-weight:500; }
#modal .offer-composition-add input { width:70px; text-align:center; font-variant-numeric:tabular-nums; }
#modal .offer-composition-add button { padding:8px 10px; font-size:12px; }
#modal .offer-composition-lines { list-style:none; padding:0; margin:17px 0 0; }
#modal .offer-composition-line { display:grid; grid-template-columns:minmax(0,1fr) 74px 28px; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--composition-line); }
#modal .offer-composition-line a { color:var(--text); font-size:13px; font-weight:500; text-decoration:none; overflow-wrap:anywhere; }
#modal .offer-composition-line a:hover { color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
#modal .offer-composition-line small { display:block; margin-top:5px; font-size:11px; color:var(--muted); }
#modal .offer-component-name>strong { font-weight:500; }
#modal .offer-component-cost { display:block; margin-top:5px; font-variant-numeric:tabular-nums; }
#modal .offer-component-cost strong { font-weight:400; }
#modal .offer-component-quantity label { display:block; font-size:9px; margin-bottom:4px; text-align:center; }
#modal .offer-component-quantity>span { display:none; }
#modal .offer-component-unavailable { color:var(--red); }
#modal .offer-composition .catalog-money-input { display:flex; gap:0; border:1px solid var(--composition-line); border-radius:4px; background:var(--surface-input); }
#modal .offer-composition .catalog-money-input>span { padding:0 0 0 10px; font-size:12px; color:var(--muted); }
#modal .offer-composition .catalog-money-input input { border:0; background:transparent; }
#modal .offer-composition-line input { text-align:center; font-variant-numeric:tabular-nums; }
#modal .offer-composition-line [data-offer-remove] { width:28px; height:30px; min-height:30px; padding:0; border:0; background:transparent; color:var(--muted); font-size:19px; }
#modal .offer-composition-line [data-offer-remove]:hover { color:var(--red); }
#modal .offer-composition-line [aria-invalid="true"] { border-color:var(--red); }
#modal .offer-composition-line .danger { color:var(--red); }
#modal .offer-composition-main [data-offer-empty] { padding:30px 0; margin:0; color:var(--muted); font-size:12px; }
#modal .offer-composition-footer { flex:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0; padding:16px 25px; border-top:1px solid var(--composition-line); background:var(--surface); }
#modal .offer-composition-total { font-size:11px; color:var(--muted); }
#modal .offer-composition-total strong { display:block; color:var(--text); font-size:23px; font-weight:500; font-variant-numeric:tabular-nums; margin-top:3px; }
#modal .offer-composition-total [data-offer-unit-total] { display:block; margin-top:4px; }
#modal .offer-composition-actions { display:flex; gap:9px; margin-left:auto; }
#modal .offer-composition-actions button { min-height:36px; padding:8px 13px; font-size:12px; }
#modal .offer-composition [data-offer-status] { order:1; flex:1 1 100%; margin:0; font-size:12px; line-height:1.5; color:var(--red); }
#modal .offer-composition [data-offer-status]:empty { display:none; }
#modal .offer-composition [hidden] { display:none; }
@media(max-width:1100px) { #modal .offer-composition-layout { grid-template-columns:minmax(0,1fr) 270px; } }
@media(max-width:720px) { #modal.offer-composition-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); } #modal .offer-composition-layout { grid-template-columns:1fr; } #modal .offer-composition-details { border-left:0; border-top:1px solid var(--composition-line); } #modal .offer-composition-main,#modal .offer-composition-details { padding:18px; } #modal.offer-composition-dialog>.modal-head,#modal .offer-composition-footer { padding:14px 18px; } }
@media(max-width:420px) { #modal .offer-composition-line { grid-template-columns:minmax(0,1fr) 62px 25px; gap:7px; } #modal .offer-composition-total strong { font-size:20px; } #modal .offer-composition-actions button { padding-inline:9px; } }