/* ==========================================================================
   „Mniej pilnowania. Więcej pewności.” – 3 karty z mini-oknami w wyglądzie wtyczki.
   Pętla: zmiana ceny w panelu → nowa cena na stronie → pliki dla dane.gov.pl.
   ========================================================================== */

.sig-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1240px; /* 1200 px treści – jak sekcja „Funkcje” poniżej */
    gap: 22px;
}

/* Liczby pod oknami: spokojniejsze, żeby nie przykrywały wizualizacji */
.sig-grid-3 .sig-visual { padding: 18px 18px 16px; }
.sig-grid-3 .sig-num { margin-top: 14px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.4px; }
.sig-grid-3 .sig-label { margin-top: 3px; font-size: 10px; color: #5f6b66; }

.sig-grid-3 .sig-card:nth-child(even) { margin-top: 28px; }

.s3-mini {
    --g-700: #0a7a48;
    --g-600: #0c9256;
    --g-300: #a7dfc1;
    --g-100: #e5f5e9;
    --g-50: #ebf7f0;
    --line: #e1e9e4;
    --ink: #101c19;
    --muted: #5f6b66;
    position: relative;
    height: 196px;
    font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;
    font-size: 11px;
    line-height: 1.35;
    color: var(--ink);
    text-align: left;
}

/* Mini-okno jak karta w panelu */
.s3-win {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 28, 25, .04), 0 10px 24px rgba(16, 28, 25, .07);
    overflow: hidden;
}

.s3-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s3-head b { font-size: 12px; font-weight: 600; }
.s3-muted { color: var(--muted); font-size: 10px; }

.s3-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--g-100);
    color: var(--g-700);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

[data-s3-saved] { opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
[data-s3-saved].is-on { opacity: 1; transform: scale(1); }

/* Pola formularza */
.s3-field label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }

.s3-input {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid #cfdad4;
    border-radius: 7px;
    background: #ffffff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: border-color .2s, box-shadow .2s, background .3s;
}

.s3-input em { margin-left: auto; font-style: normal; color: var(--muted); }
.s3-input.is-focus { border-color: var(--g-600); box-shadow: 0 0 0 1px var(--g-600); }

.s3-caret { width: 1px; height: 14px; background: var(--ink); opacity: 0; }
.s3-input.is-focus .s3-caret { animation: s3-blink 1s steps(1) infinite; }
@keyframes s3-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.s3-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s3-auto { background: #f7faf8; color: #2f3d38; }
.s3-auto.is-flash { background: var(--g-50); border-color: var(--g-300); }

.s3-btn {
    align-self: flex-start;
    margin-top: auto;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--g-600);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    transition: transform .15s, background .15s;
}

.s3-btn.is-press { transform: scale(.94); background: var(--g-700); }

/* Strona dewelopera */
.s3-site { gap: 7px; }

.s3-bar { display: flex; align-items: center; gap: 4px; margin: -12px -12px 2px; padding: 7px 10px; background: #fafbfa; border-bottom: 1px solid #eef2ef; }
.s3-bar i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; }
.s3-bar i:nth-child(2) { background: #febc2e; }
.s3-bar i:nth-child(3) { background: #28c840; }
.s3-bar span { margin-left: 8px; padding: 1px 8px; border-radius: 5px; background: #f0f3f1; color: var(--muted); font-size: 9px; }

.s3-unit { display: flex; align-items: center; justify-content: space-between; }
.s3-unit b { font-size: 12px; font-weight: 600; }

.s3-prices { position: relative; display: flex; align-items: baseline; gap: 8px; height: 24px; }
.s3-prices s { color: var(--muted); font-size: 11px; transition: opacity .4s; }
.s3-prices b { font-size: 18px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.s3-prices b.is-in { animation: s3-up .55s cubic-bezier(.22, 1, .36, 1); color: var(--g-700); }
@keyframes s3-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.s3-tl { position: relative; display: grid; gap: 5px; margin: 2px 0 0; padding: 0 0 0 14px; list-style: none; }
.s3-tl::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.s3-tl li { position: relative; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.s3-tl li i { position: absolute; left: -14px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #c3cdc8; }
.s3-tl li b { font-weight: 500; color: #2f3d38; font-variant-numeric: tabular-nums; }
.s3-tl li:last-child i { background: var(--g-600); box-shadow: 0 0 0 3px var(--g-100); }
.s3-tl li:last-child { color: var(--ink); }
.s3-tl li.is-new { animation: s3-up .55s cubic-bezier(.22, 1, .36, 1); }
.s3-tl li.is-out { animation: s3-out .4s forwards; }
@keyframes s3-out { to { opacity: 0; transform: translateY(-6px); height: 0; margin-top: -5px; } }

/* Pliki */
.s3-files { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.s3-files li { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.s3-files li:last-child { border-bottom: 0; }
.s3-files b { display: block; font-size: 11px; font-weight: 600; }
.s3-files span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

.s3-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--g-600); box-shadow: 0 0 0 3px var(--g-50); transition: background .3s, box-shadow .3s; }
.s3-files li.is-wait .s3-dot { background: transparent; box-shadow: none; border: 1.5px solid var(--g-300); border-top-color: var(--g-600); animation: s3-spin .7s linear infinite; }
.s3-files li.is-pop .s3-dot { animation: s3-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes s3-spin { to { transform: rotate(360deg); } }
@keyframes s3-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

.s3-ready {
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--g-600);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    transition: opacity .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.s3-ready.is-off { opacity: 0; transform: scale(.85); }

/* Karta, w której właśnie coś się dzieje */
.sig-grid-3 .sig-card { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .4s; }
.sig-grid-3 .sig-card.is-live { border-color: #bfe3cd; box-shadow: 0 14px 34px rgba(12, 146, 86, .10); }

@media (max-width: 1024px) {
    .sig-grid-3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
    .sig-grid-3 .sig-card:nth-child(n) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .s3-mini *, .s3-mini *::before { animation: none !important; transition: none !important; }
}

.sig-grid-3.is-ready .sig-card {
    transition: opacity .7s ease, translate .7s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .4s;
}