/* Popup informacji o serwisie graficznym. */
.serwis-info-icon { display:inline-block; width:35px; height:26px; margin-left:6px; object-fit:contain; vertical-align:middle; cursor:pointer; transition:opacity .18s ease,transform .18s ease; }
.serwis-info-icon:hover,.serwis-info-icon:focus { outline:none; opacity:.86; transform:translateY(-1px); }
.serwis-info-overlay { position:fixed; z-index:100000; inset:0; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(17,24,39,.72); backdrop-filter:blur(4px); cursor:default; }
.serwis-info-overlay.is-visible { display:flex; animation:serwisInfoFadeIn .2s ease-out; }
.serwis-info-box { position:relative; width:min(1080px,100%); max-height:calc(100vh - 56px); overflow:auto; box-sizing:border-box; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:18px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.32); color:#253044; text-align:left; cursor:default; animation:serwisInfoBoxIn .22s ease-out; }
.serwis-info-close { position:absolute; z-index:2; top:16px; right:16px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid #e5e7eb; border-radius:50%; background:#fff; color:#465164; box-shadow:0 3px 12px rgba(15,23,42,.08); cursor:pointer; font:300 27px/1 Arial,sans-serif; transition:border-color .18s ease,color .18s ease,transform .18s ease; }
.serwis-info-close:hover,.serwis-info-close:focus { border-color:#fb7102; color:#fb7102; outline:none; transform:rotate(4deg); }
body.serwis-info-open { overflow:hidden; }

.grafik-service-info { padding:38px 42px 40px; color:#4b5565; font-size:14px; line-height:1.58; }
.grafik-service-info p { margin:0; }
.grafik-service-heading { padding-right:58px; margin-bottom:12px; }
.grafik-service-eyebrow { display:inline-block; margin-bottom:6px; color:#e96300; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.grafik-service-heading h2 { margin:0; color:#182233; font-size:27px; line-height:1.2; font-weight:800; }
.grafik-service-intro { max-width:900px; margin-bottom:26px !important; color:#5d6675; font-size:15px; }
.grafik-service-title { display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#1f2937; font-size:16px; font-weight:800; }
.grafik-service-title i { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:#fff1e6; color:#e96300; font-size:14px; }

.grafik-service-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grafik-service-option { position:relative; display:flex; align-items:flex-start; gap:12px; min-width:0; padding:19px 17px 18px; border:1px solid #e7eaf0; border-radius:13px; background:#fff; box-shadow:0 5px 18px rgba(15,23,42,.05); }
.grafik-service-option::before { content:""; position:absolute; top:0; right:15px; left:15px; height:3px; border-radius:0 0 4px 4px; background:#fb7102; }
.grafik-service-icon { flex:0 0 32px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; background:#fb7102; color:#fff; font-size:13px; box-shadow:0 5px 12px rgba(251,113,2,.22); }
.grafik-service-content { flex:1; min-width:0; }
.grafik-service-content strong { display:block; margin:2px 0 7px; color:#202a3a; font-size:14px; font-weight:800; }
.grafik-service-content p { color:#626c7c; line-height:1.52; }
.grafik-service-title-space { margin-top:28px; }

.grafik-service-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.grafik-service-list li { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:10px; background:#f7f8fa; }
.grafik-service-list li>i { width:18px; margin-top:3px; color:#fb7102; font-size:15px; text-align:center; }
.grafik-service-list li div { flex:1; min-width:0; }
.grafik-service-list strong { display:block; color:#283242; font-weight:800; }
.grafik-service-list span { display:block; color:#687282; }
.grafik-service-final { padding:15px 17px; border-left:4px solid #fb7102; border-radius:0 10px 10px 0; background:#fff7f0; color:#555f6f; line-height:1.6; }
.grafik-service-final strong { color:#d95f00; }

@keyframes serwisInfoFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes serwisInfoBoxIn { from { opacity:0; transform:scale(.975) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@media (max-width:900px) {
    .grafik-service-options,.grafik-service-list { grid-template-columns:1fr; }
    .grafik-service-info { padding:32px; }
}
@media (max-width:600px) {
    .serwis-info-overlay { padding:12px; align-items:flex-start; }
    .serwis-info-box { width:100%; max-height:calc(100vh - 24px); border-radius:14px; }
    .serwis-info-close { top:12px; right:12px; width:36px; height:36px; }
    .grafik-service-info { padding:25px 18px 24px; font-size:13px; }
    .grafik-service-heading { padding-right:42px; }
    .grafik-service-heading h2 { font-size:21px; }
    .grafik-service-intro { font-size:14px; }
    .grafik-service-option { padding:17px 15px 16px; }
    .grafik-service-title-space { margin-top:23px; }
}