/* ========================================================= Konfigurator v2 — szkielet UX z demo AGRO-MASZ, kolorystyka i styl VAIA (zielony akcent, radius 18px). Wszystko pod .cfg — zero wpływu na inne podstrony. ========================================================= */ /* zmienne także dla elementów doczepianych do przez JS (pasek, arkusz, dialogi) */ .cfg, .cfg-bar, .cfg-sheet, .cfg-backdrop, .cfg-dialog-wrap, .cfg-infobox-wrap{ --cfg-accent: var(--green, #148a3b); --cfg-accent-dark: #0f6b2e; --cfg-hero-a: #0d3d20; --cfg-hero-b: #12592c; --cfg-panel-dark: #0b2e18; --cfg-ink: #111; --cfg-muted: var(--muted, #6b7280); --cfg-border: var(--border, #e5e7eb); --cfg-radius: var(--radius, 18px); --cfg-shadow-sel: 0 10px 24px rgba(20,138,59,.16); } /* ---------- HERO ---------- */ .cfg-hero{ position: relative; overflow: hidden; border-radius: var(--cfg-radius); background: linear-gradient(120deg, var(--cfg-hero-a), var(--cfg-hero-b)); color: #fff; padding: 34px 30px; margin: 14px 0 0; } .cfg-hero::before{ content:""; position:absolute; inset:-40% -60%; background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 3px, transparent 3px 60px); opacity:.55; animation: cfgStripes 9s linear infinite; pointer-events:none; } @keyframes cfgStripes{ from{ transform: translateX(0); } to { transform: translateX(120px); } } .cfg-hero-in{ position:relative; max-width: 46rem; } .cfg-chip{ display:inline-block; background:#fff; color: var(--cfg-accent-dark); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; padding:6px 12px; border-radius:999px; } .cfg-title{ margin:14px 0 8px; font-size: clamp(26px, 4.5vw, 42px); line-height:1.08; font-weight:950; text-transform:uppercase; letter-spacing:.01em; } .cfg-title .acc{ color:#7fe0a2; margin-right:6px; } .cfg-lede{ margin:0; color: rgba(255,255,255,.85); font-size:15px; line-height:1.55; } /* ---------- PASEK POSTĘPU ---------- */ .cfg-progress{ height:6px; border-radius:999px; background:#e5e7eb; margin:16px 0 18px; overflow:hidden; } .cfg-progress i{ display:block; height:100%; background: var(--cfg-accent); border-radius:999px; transition: width .5s ease; } /* ---------- SIATKA ---------- */ .cfg-grid{ display:grid; grid-template-columns: 1fr; gap:18px; align-items:start; } @media (min-width: 900px){ .cfg-grid{ grid-template-columns: 244px minmax(0,1fr); } } @media (min-width: 1150px){ .cfg-grid{ grid-template-columns: 244px minmax(0,1fr) 21rem; } } /* ---------- SZYNA KROKÓW ---------- */ .cfg-rail{ position:relative; background:#fff; border:1px solid var(--cfg-border); border-radius: var(--cfg-radius); padding:14px; } .cfg-rail-cap{ font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:var(--cfg-muted); margin:2px 4px 10px; } .cfg-step{ display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 10px; margin:2px 0; border:1px solid transparent; border-radius:12px; color:var(--cfg-ink); text-decoration:none; font-weight:700; font-size:14px; line-height:1.25; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .cfg-step .b{ flex:0 0 auto; width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; border:1.5px solid #d1d5db; color:var(--cfg-muted); background:#fff; } .cfg-step.done{ border-color: var(--cfg-accent); background:#fff; } .cfg-step.done .b{ border-color: var(--cfg-accent); color: var(--cfg-accent); } .cfg-step.active{ background: var(--cfg-accent); color:#fff; border-color: var(--cfg-accent); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,138,59,.25); } .cfg-step.active .b{ background:#fff; border-color:#fff; color: var(--cfg-accent); } a.cfg-step:hover{ border-color: var(--cfg-accent); } a.cfg-step.active:hover{ border-color: var(--cfg-accent); } .cfg-step.locked{ opacity:.55; cursor:default; } /* szyna pozioma na telefonie */ @media (max-width: 899px){ .cfg-rail{ display:flex; overflow-x:auto; gap:6px; padding:10px; -webkit-overflow-scrolling: touch; } .cfg-rail-cap{ display:none; } .cfg-step{ flex:0 0 auto; white-space:nowrap; margin:0; } } @media (min-width: 1150px){ .cfg-rail{ position:sticky; top:20px; } } /* ---------- PANEL KROKU ---------- */ .cfg-panel{ background:#fff; border:1px solid var(--cfg-border); border-radius: var(--cfg-radius); padding:22px; min-width:0; } .cfg-counter{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .cfg-counter .n{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:700; font-size:13px; color: var(--cfg-accent); letter-spacing:.08em; } .cfg-counter .line{ flex:1; height:1px; background: var(--cfg-border); } .cfg-legend{ margin:0 0 6px; font-size: clamp(20px, 2.6vw, 27px); font-weight:950; text-transform:uppercase; letter-spacing:.01em; display:flex; align-items:flex-start; gap:12px; } .cfg-legend > span{ min-width:0; word-break:break-word; } /* "i" przy nagłówku kroku (opis kroku z admina) */ .cfg-info-step{ position:static; flex:0 0 auto; margin-top:.35em; width:28px; height:28px; font-size:13px; text-transform:none; letter-spacing:0; } /* wersja bez JS: opis kroku jako rozwijany blok */ .cfg-stepinfo-nojs{ margin:-6px 0 14px; font-size:14px; } .cfg-stepinfo-nojs summary{ cursor:pointer; color: var(--cfg-accent); font-weight:700; } .cfg-stepinfo-nojs p{ margin:8px 0 0; color:#374151; line-height:1.55; } .cfg-hint{ margin:0 0 16px; color: var(--cfg-muted); font-size:14.5px; } /* kafle opcji */ .cfg-tiles{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* opcja bez zdjęcia: kafel kompaktowy (bez pustego pasa) */ .cfg-tile.no-img .cfg-tile-img{ display:none; } .cfg-tile.no-img .cfg-tile-body{ padding-top:16px; padding-bottom:16px; min-height:74px; justify-content:center; } .cfg-tile{ position:relative; display:flex; flex-direction:column; height:100%; border:1.5px solid var(--cfg-border); border-radius:14px; background:#fbfbfb; cursor:pointer; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; animation: cfgFadeUp .28s ease both; } .cfg-tile:hover{ border-color:#b8c0ca; } .cfg-tile input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } /* pasek akcentu z lewej — animowany przy wyborze */ .cfg-tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--cfg-accent); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; } .cfg-tile.sel, .cfg-tile:has(input:checked){ border-color: var(--cfg-accent); background:#fff; transform: translateY(-2px); box-shadow: var(--cfg-shadow-sel); } .cfg-tile.sel::before, .cfg-tile:has(input:checked)::before{ transform: scaleY(1); } .cfg-tile-img{ position:relative; height:132px; flex:0 0 132px; background:#fff; border-bottom:1px solid #f1f3f5; display:flex; align-items:center; justify-content:center; } .cfg-tile-img img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } .cfg-tile-img .ph{ font-size:30px; color:#d5dbe1; font-weight:900; } .cfg-zoom{ position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; border-radius:999px; border:1px solid var(--cfg-border); background:rgba(255,255,255,.92); color:#374151; font-size:15px; line-height:1; cursor:zoom-in; display:flex; align-items:center; justify-content:center; } .cfg-zoom:hover{ border-color: var(--cfg-accent); color: var(--cfg-accent); } .cfg-tile-body{ padding:12px 14px 14px 16px; display:flex; flex-direction:column; gap:5px; flex:1; } .cfg-tile-name{ display:flex; align-items:baseline; gap:8px; font-weight:900; font-size:15.5px; line-height:1.3; } .cfg-tile-name .mark{ margin-left:auto; color: var(--cfg-accent); font-size:13px; opacity:0; transition: opacity .2s ease; } .cfg-tile.sel .mark, .cfg-tile:has(input:checked) .mark{ opacity:1; } .cfg-tile-desc{ color: var(--cfg-muted); font-size:13.5px; line-height:1.45; } /* z JS: opis skrócony do 2 linii, pełny w oknie "i" */ .cfg-tile.has-info .cfg-tile-body{ padding-right:44px; } .cfg-tile.has-info .cfg-tile-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cfg-tile-wrap{ position:relative; height:100%; } .cfg-info{ position:absolute; right:12px; bottom:14px; z-index:2; width:26px; height:26px; border-radius:999px; border:1px solid #cbd2da; background:#fff; color:#6b7280; font-size:12px; font-weight:900; font-style:normal; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .cfg-info:hover, .cfg-info:focus-visible{ border-color: var(--cfg-accent); color: var(--cfg-accent); outline:none; } .cfg-info.on{ background: var(--cfg-accent); border-color: var(--cfg-accent); color:#fff; } /* "i" przy nagłówku kroku — w przepływie (nie absolutne), po regule .cfg-info żeby wygrać kolejnością */ .cfg-legend .cfg-info.cfg-info-step{ position:static; flex:0 0 auto; margin:.35em 0 0; width:28px; height:28px; font-size:13px; text-transform:none; letter-spacing:0; } /* okno opisu wariantu (pop-in, wyśrodkowane) */ .cfg-infobox-wrap{ display:none; position:fixed; inset:0; z-index:1195; align-items:center; justify-content:center; background: rgba(17,24,20,.6); padding:20px; } .cfg-infobox-wrap.open{ display:flex; } .cfg-infobox{ width:min(440px, 92vw); max-height:80vh; overflow-y:auto; background:#fff; border:1px solid var(--cfg-border); border-top:4px solid var(--cfg-accent); border-radius:16px; padding:18px 20px 14px; text-align:left; box-shadow: 0 22px 50px rgba(12,14,17,.35); animation: cfgPopIn .22s ease both; } .cfg-infobox-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .cfg-infobox-head h4{ margin:0; font-size:18px; font-weight:900; line-height:1.2; min-width:0; word-break:break-word; } .cfg-infobox-close{ flex:0 0 auto; border:0; background:transparent; padding:0 2px; font-size:22px; line-height:1; color:#9ca3af; cursor:pointer; } .cfg-infobox-close:hover{ color: var(--cfg-accent); } .cfg-infobox-img{ margin:14px 0 0; height:180px; border:1px solid var(--cfg-border); border-radius:10px; background:#fafafa; display:flex; align-items:center; justify-content:center; overflow:hidden; } .cfg-infobox-img img{ max-width:100%; max-height:100%; object-fit:contain; } .cfg-infobox dl{ margin:14px 0 0; display:flex; flex-direction:column; gap:12px; } .cfg-infobox dt{ margin-bottom:4px; font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color: var(--cfg-accent); } .cfg-infobox dd{ margin:0; font-size:14.5px; line-height:1.6; color:#374151; white-space:pre-line; } .cfg-infobox-note{ margin:14px 0 0; padding-top:10px; border-top:1px solid var(--cfg-border); font-size:12px; color: var(--cfg-muted); } .cfg-infobox-actions{ margin-top:14px; display:flex; gap:8px; } /* nawigacja kroku */ .cfg-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--cfg-border); } .cfg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 20px; border-radius:12px; font-weight:800; font-size:14.5px; cursor:pointer; text-decoration:none; border:1.5px solid var(--cfg-border); background:#fff; color:var(--cfg-ink); transition: background .15s ease, border-color .15s ease, transform .12s ease; } .cfg-btn:hover{ border-color:#b8c0ca; } .cfg-btn[disabled]{ opacity:.45; cursor:default; pointer-events:none; } .cfg-btn-accent{ background: var(--cfg-accent); border-color: var(--cfg-accent); color:#fff; } .cfg-btn-accent:hover{ background: var(--cfg-accent-dark); border-color: var(--cfg-accent-dark); } /* strona podsumowania (po ostatnim kroku): podsumowanie na środku, bez prawego panelu */ @media (min-width: 1150px){ .cfg-grid.cfg-grid-final{ grid-template-columns: 244px minmax(0,1fr); } } .cfg-final-wrap{ display:grid; grid-template-columns: 1fr; gap:16px; margin-top:6px; } @media (min-width: 760px){ .cfg-final-wrap{ grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); align-items:start; } } .cfg-final-prod{ display:flex; flex-direction:column; gap:12px; border:1px solid var(--cfg-border); border-radius:14px; padding:14px; background:#fbfbfb; } .cfg-final-prod img{ width:100%; max-height:260px; object-fit:contain; background:#fff; border-radius:10px; } .cfg-final-cap{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--cfg-muted); } .cfg-final-name{ font-size:20px; font-weight:950; margin-top:2px; } .cfg-summary-inline{ position:static; max-height:none; } .cfg-summary-inline .cfg-sum-rows{ max-height:420px; } .cfg-final-actions{ margin-top:18px; padding-top:16px; border-top:1px solid var(--cfg-border); } .cfg-final-actions .cfg-cta{ max-width:420px; } .cfg-final-actions .cfg-cta[disabled]{ opacity:.5; cursor:not-allowed; } .cfg-final-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .cfg-final .notice{ border-radius:12px; } /* ---------- PANEL PODSUMOWANIA (prawa kolumna) ---------- */ .cfg-summary{ background: var(--cfg-panel-dark); color:#fff; border-radius: var(--cfg-radius); border-top:4px solid var(--cfg-accent); padding:20px; min-width:0; display:flex; flex-direction:column; gap:14px; } @media (min-width: 1150px){ .cfg-summary{ position:sticky; top:24px; max-height: calc(100vh - 3rem); } } .cfg-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } .cfg-sum-head{ display:flex; align-items:flex-start; gap:10px; } .cfg-sum-title{ margin:0; font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; line-height:1.25; } /* kod konfiguracji — ramka z kreskowanym obrysem, jak w AGRO-MASZ */ .cfg-code{ border:1px dashed rgba(127,224,162,.55); background: rgba(0,0,0,.25); border-radius:10px; padding:10px 14px 11px; } .cfg-code-cap{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.55); margin-bottom:5px; } .cfg-code-val{ margin:0; font-size:14px; font-weight:700; line-height:1.55; color:#7fe0a2; word-break:break-word; } .cfg-code-val.pending{ color:rgba(255,255,255,.5); font-weight:600; font-family:inherit; } .cfg-sum-rows{ margin:0 -8px; padding:0 8px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; flex:1; min-height:40px; scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.3) transparent; } .cfg-sum-row{ display:flex; justify-content:space-between; gap:16px; padding:8px 8px; border-bottom:1px solid rgba(255,255,255,.1); animation: cfgFadeUp .3s ease both; } .cfg-sum-row dt{ min-width:0; color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.03em; line-height:1.4; word-break:break-word; } .cfg-sum-row dd{ margin:0; min-width:0; font-size:13px; font-weight:700; line-height:1.4; text-align:right; word-break:break-word; } .cfg-sum-row.hl{ margin:0 -8px; padding-left:16px; padding-right:16px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(127,224,162,.7); } .cfg-sum-empty{ color:rgba(255,255,255,.55); font-size:13px; padding:8px; } .cfg-count{ display:flex; justify-content:space-between; gap:12px; font-size:12px; color:rgba(255,255,255,.6); } .cfg-count b{ color:#fff; font-weight:700; } .cfg-cta{ display:block; width:100%; text-align:center; font-family:inherit; line-height:1.2; padding:15px 18px; border-radius:12px; background: var(--cfg-accent); color:#fff; text-decoration:none; font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.1em; border:0; cursor:pointer; transition: background .15s ease, opacity .15s ease; } .cfg-cta:hover{ background: var(--cfg-accent-dark); } .cfg-cta.off{ opacity:.55; pointer-events:none; } .cfg-cta-sub{ display:block; width:100%; text-align:center; margin-top:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.4); color:#fff; background:transparent; text-decoration:none; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition: border-color .15s ease; } .cfg-cta-sub:hover{ border-color:#fff; } .cfg-sum-actions{ padding-bottom: env(safe-area-inset-bottom, 0px); } /* ---------- MOBILNY PASEK + BOTTOM SHEET (tylko z JS) ---------- */ .cfg-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1050; background: var(--cfg-panel-dark); color:#fff; border-top:3px solid var(--cfg-accent); padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); align-items:center; gap:10px; cursor:pointer; } .cfg-bar .code{ min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:700; color:#7fe0a2; } .cfg-bar .code.pending{ color:rgba(255,255,255,.55); font-family:inherit; font-weight:600; } .cfg-bar .t{ display:flex; align-items:center; gap:8px; flex:0 0 auto; background:rgba(255,255,255,.1); padding:5px 10px; border-radius:8px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .cfg-bar .c{ background: var(--cfg-accent); color:#fff; border-radius:6px; font-size:12px; font-weight:700; padding:1px 7px; line-height:20px; } .cfg-bar .arr{ font-size:14px; opacity:.6; flex:0 0 auto; } body.cfg-js-mobile .cfg-bar{ display:flex; } body.cfg-js-mobile .cfg-summary{ display:none; } body.cfg-js-mobile main.cfg{ padding-bottom:74px; } .cfg-backdrop{ display:none; position:fixed; inset:0; z-index:1180; background: rgba(0,0,0,.5); } .cfg-sheet{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1185; background: var(--cfg-panel-dark); color:#fff; border-top-left-radius:18px; border-top-right-radius:18px; border-top:4px solid var(--cfg-accent); max-height:85dvh; overflow:hidden; padding:10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); flex-direction:column; gap:12px; } .cfg-sheet.open, .cfg-backdrop.open{ display:flex; } .cfg-backdrop.open{ display:block; } .cfg-sheet .grab{ width:40px; height:4px; border-radius:999px; flex:0 0 auto; background:rgba(255,255,255,.35); margin:2px auto 6px; } .cfg-sheet .cfg-sum-rows{ overflow-y:auto; } .cfg-sheet-close{ margin-left:auto; margin-top:-4px; margin-right:-6px; flex:0 0 auto; width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.35); background:transparent; color:rgba(255,255,255,.8); font-size:20px; line-height:1; cursor:pointer; transition: border-color .15s ease, color .15s ease; } .cfg-sheet-close:hover{ border-color:#7fe0a2; color:#7fe0a2; } html.cfg-lock, html.cfg-lock body{ overflow:hidden; } /* ---------- DIALOG "WYBIERZ OPCJĘ" ---------- */ .cfg-dialog-wrap{ display:none; position:fixed; inset:0; z-index:1190; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:20px; } .cfg-dialog-wrap.open{ display:flex; } .cfg-dialog{ background:#fff; border-radius:16px; border-top:4px solid var(--cfg-accent); max-width:380px; width:100%; padding:22px; animation: cfgPopIn .22s ease both; text-align:center; } .cfg-dialog{ position:relative; } .cfg-dialog-x{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:999px; border:1px solid var(--cfg-border); background:#fff; color:#6b7280; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .cfg-dialog-x:hover, .cfg-dialog-x:focus-visible{ border-color: var(--cfg-accent); color: var(--cfg-accent); outline:none; } .cfg-dialog h3{ margin:0 0 8px; padding-right:36px; font-size:17px; font-weight:900; } .cfg-dialog p{ margin:0 0 16px; color:var(--cfg-muted); font-size:14px; } /* ---------- STRONA PROŚBY O OFERTĘ (?p=quote), układ jak w AGRO-MASZ ---------- */ .cfg-quote-grid{ display:grid; grid-template-columns: 1fr; gap:18px; align-items:start; margin-top:18px; } @media (min-width: 1000px){ .cfg-quote-grid{ grid-template-columns: minmax(0,1fr) 22rem; } .cfg-quote-aside{ position:sticky; top:20px; } } .cfg-quote-form{ background:#fff; border:1px solid var(--cfg-border); border-radius: var(--cfg-radius); padding:22px; gap:22px; } .cfg-quote-form section{ display:block; } .cfg-q-head{ margin:0 0 4px; font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding-bottom:8px; border-bottom:2px solid var(--cfg-accent); display:inline-block; } .cfg-q-fields{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; } @media (min-width: 640px){ .cfg-q-fields{ grid-template-columns: 1fr 1fr; } } .cfg-q-label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:#374151; } .cfg-quote-form .cfg-q-label input, .cfg-quote-form .cfg-q-label textarea{ width:100%; font-weight:500; font-family:inherit; } .cfg-quote-form .cfg-q-label input:focus, .cfg-quote-form .cfg-q-label textarea:focus{ border-color: var(--cfg-accent); box-shadow:0 0 0 3px rgba(20,138,59,.15); } .cfg-q-full{ grid-column:1 / -1; } .cfg-q-consent{ padding-top:16px; border-top:1px solid var(--cfg-border); font-size:14px; } .cfg-q-consent .chk span{ line-height:1.5; } .cfg-q-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .cfg-q-actions .cfg-cta{ width:auto; min-width:260px; } .cfg-quote-aside{ display:grid; gap:14px; } .cfg-quote .cfg-summary-inline .cfg-sum-rows{ max-height:60vh; } /* ========================================================= MOBILE — układ jak w konfiguratorze AGRO-MASZ (japrivio.pl): jasny nagłówek-karta, pasek kroków bez ramki, biały dolny pasek i biały arkusz podsumowania. Desktop bez zmian. ========================================================= */ @media (max-width: 899px){ /* nagłówek: biała karta zamiast ciemnego banera */ .cfg-hero{ background:#fff; color: var(--cfg-ink); border:1px solid var(--cfg-border); border-radius:16px; padding:18px 18px 16px; margin-top:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); } .cfg-hero::before{ display:none; } .cfg-chip{ background: var(--cfg-accent); color:#fff; border-radius:8px; letter-spacing:.1em; } .cfg-title{ font-size:24px; text-transform:none; letter-spacing:0; margin:12px 0 6px; line-height:1.2; } .cfg-title .acc{ color: var(--cfg-accent); } .cfg-lede{ color: var(--cfg-muted); font-size:14px; } .cfg-progress{ margin:12px 0 14px; } /* pasek kroków: bez karty, chipy jak w AGRO-MASZ */ .cfg-rail{ background:transparent; border:0; padding:0 0 4px; border-radius:0; box-shadow:none; } .cfg-step{ background:#fff; border:1px solid #d1d5db; border-radius:8px; font-size:13px; font-weight:600; padding:6px 14px 6px 8px; } .cfg-step.done{ border-color: var(--cfg-accent); } .cfg-step.active{ transform:none; box-shadow:none; } /* panel kroku: nagłówek bez wersalików, jak w AGRO-MASZ */ .cfg-panel{ padding:18px; border-radius:16px; } .cfg-legend{ text-transform:none; letter-spacing:0; font-size:22px; } .cfg-tile{ border-radius:12px; } /* podsumowanie osadzone (strona podsumowania / prośba o ofertę): jasna karta */ .cfg-summary-inline{ background:#fff; color: var(--cfg-ink); border:1px solid var(--cfg-border); border-top:1px solid var(--cfg-border); border-radius:16px; } .cfg-summary-inline .cfg-sum-title{ text-transform:none; letter-spacing:0; font-size:18px; } .cfg-summary-inline .cfg-code{ background:#f0fdf4; border:1px dashed #86efac; border-radius:12px; } .cfg-summary-inline .cfg-code-cap{ color:#64748b; } .cfg-summary-inline .cfg-code-val, .cfg-summary-inline .cfg-code-val.pending{ color: var(--cfg-accent-dark); } .cfg-summary-inline .cfg-sum-row{ border-bottom-color:#e5e7eb; } .cfg-summary-inline .cfg-sum-row dt{ color:#64748b; } .cfg-summary-inline .cfg-sum-row dd{ color: var(--cfg-ink); } .cfg-summary-inline .cfg-sum-empty{ color:#64748b; } .cfg-final-actions .cfg-cta, .cfg-q-actions .cfg-cta{ text-transform:none; letter-spacing:0; font-size:16px; border-radius:10px; } } @media (max-width: 1149px){ /* dolny pasek: biały */ .cfg-bar{ background:#fff; color: var(--cfg-ink); border-top:1px solid var(--cfg-border); box-shadow:0 -8px 30px rgba(0,0,0,.08); } .cfg-bar .code{ color: var(--cfg-accent-dark); font-size:14px; } .cfg-bar .code.pending{ color: var(--cfg-accent-dark); font-weight:700; } .cfg-bar .t{ background:#f1f5f9; color: var(--cfg-ink); text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; } .cfg-bar .c{ background: var(--cfg-accent); color:#fff; } .cfg-bar .arr{ color:#94a3b8; opacity:1; } /* arkusz podsumowania: biały */ .cfg-sheet{ background:#fff; color: var(--cfg-ink); border-top:1px solid var(--cfg-border); box-shadow:0 -12px 40px rgba(0,0,0,.18); } .cfg-sheet .grab{ background:#cbd5e1; } .cfg-sheet .cfg-sum-title{ text-transform:none; letter-spacing:0; font-size:18px; } .cfg-sheet-close{ border-color:#cbd5e1; color:#64748b; } .cfg-sheet-close:hover{ border-color: var(--cfg-accent); color: var(--cfg-accent); } .cfg-sheet .cfg-code{ background:#f0fdf4; border:1px dashed #86efac; border-radius:12px; } .cfg-sheet .cfg-code-cap{ color:#64748b; } .cfg-sheet .cfg-code-val{ color: var(--cfg-accent-dark); } .cfg-sheet .cfg-code-val.pending{ color: var(--cfg-accent-dark); } .cfg-sheet .cfg-sum-row{ border-bottom-color:#e5e7eb; } .cfg-sheet .cfg-sum-row dt{ color:#64748b; } .cfg-sheet .cfg-sum-row dd{ color: var(--cfg-ink); } .cfg-sheet .cfg-sum-row.hl{ background:#f0fdf4; box-shadow: inset 0 0 0 1px rgba(20,138,59,.5); } .cfg-sheet .cfg-sum-empty{ color:#64748b; } .cfg-sheet .cfg-count{ color:#64748b; } .cfg-sheet .cfg-count b{ color: var(--cfg-ink); } .cfg-sheet .cfg-cta{ text-transform:none; letter-spacing:0; font-size:16px; font-weight:800; border-radius:10px; } .cfg-sheet .cfg-cta-sub{ border-color:#cbd5e1; color: var(--cfg-ink); text-transform:none; letter-spacing:0; font-size:14px; font-weight:700; border-radius:10px; } .cfg-sheet .cfg-cta-sub:hover{ border-color: var(--cfg-accent); } } /* ---------- ANIMACJE ---------- */ @keyframes cfgFadeUp{ from{ opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } } @keyframes cfgPopIn{ from{ opacity:0; transform: scale(.95); } to { opacity:1; transform: scale(1); } } @media (prefers-reduced-motion: reduce){ .cfg-hero::before{ animation:none; } .cfg-tile, .cfg-sum-row, .cfg-dialog{ animation:none; } .cfg-progress i, .cfg-tile, .cfg-step{ transition:none; } } /* drobiazgi mobile */ @media (max-width: 560px){ .cfg-hero{ padding:24px 18px; } .cfg-panel{ padding:16px; } .cfg-tiles{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; } .cfg-tile-img{ height:112px; flex-basis:112px; } .cfg-tile-body{ padding:10px 12px 12px 12px; } .cfg-tile.has-info .cfg-tile-body{ padding-right:38px; } .cfg-tile-name{ font-size:14px; } .cfg-tile-desc{ font-size:12.5px; } .cfg-info{ right:8px; bottom:10px; width:24px; height:24px; font-size:11px; } } @media (max-width: 359px){ .cfg-tiles{ grid-template-columns: 1fr; } }