/* GSP (Global Smart Panel) - slajd u baneru početne stranice global.ba: 3 varijante, rotacija u assets/js/gsp-rotacija.js */

.gspv { position: relative; max-width: 720px; padding-right: 10px; padding-top: 6px; }

/* Phosphor ikone (font je u header-web.css; ovdje samo ikone koje slajd koristi) */
.gspv .ph { font-family: "Phosphor" !important; speak: never; font-style: normal; font-weight: normal; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }
.gspv .ph.ph-heartbeat:before { content: "\e2ac"; }
.gspv .ph.ph-magnifying-glass:before { content: "\e30c"; }
.gspv .ph.ph-arrow-counter-clockwise:before { content: "\e038"; }
.gspv .ph.ph-magic-wand:before { content: "\e6b6"; }
.gspv .ph.ph-plugs-connected:before { content: "\eb5a"; }
.gspv .ph.ph-gauge:before { content: "\e628"; }
.gspv .ph.ph-chart-bar:before { content: "\e150"; }
.gspv .ph.ph-device-mobile:before { content: "\e1e0"; }

/* zajedničko */
.gspv-oznake { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.gspv-novo { background: #ee5a09; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(238, 90, 9, .6); }
.gspv-brend { display: inline-flex; align-items: center; gap: 6px; background: rgba(43, 163, 235, .12); color: #0b6fb3; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.gspv-brend i { font-size: 15px; }
.gspv-h1 { font-size: 48px; font-weight: 800; color: #1f0846; line-height: 1.05; }
.gspv-h2 { font-size: 28px; font-weight: 800; line-height: 1.2; background: linear-gradient(90deg, #2ba3eb, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.gspv-uvod { font-size: 14px; line-height: 1.5; color: #334155; margin: 6px 0 10px; font-weight: 500; }
.gspv-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gspv-alat { display: flex; align-items: center; gap: 8px; min-width: 0; background: #fff; border: 1px solid #dbeafe; border-radius: 10px; padding: 5px 8px; box-shadow: 0 4px 14px -10px rgba(15, 23, 42, .35); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.gspv-alat:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 10px 22px -12px rgba(29, 78, 216, .45); }
.gspv-alat > span { min-width: 0; }
.gspv-alat i { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #1d4ed8; background: #eff6ff; border-radius: 8px; }
.gspv-alat b { display: block; font-size: 12.5px; font-weight: 800; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gspv-alat small { display: block; font-size: 10.5px; color: #64748b; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gspv-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gspv-cta .ms-btn { min-width: auto; padding: 9px 15px; font-size: 14px; }
.gspv-cta-red { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gspv-cta-red .gspv-cta { margin-top: 12px; }
.gspv-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: #fff7ed; border: 1px dashed #fb923c; color: #9a3412; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.gspv-pill b { color: #ee5a09; font-weight: 900; letter-spacing: .03em; }
.gspv-besplatno-red { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 14px; color: #1f0846; font-weight: 600; }
.gspv-besplatno-red b { color: #ee5a09; font-weight: 900; letter-spacing: .03em; }
.kvacica { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 11px; font-weight: 900; flex: 0 0 17px; }
.gspv-sigurno { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #166534; margin-top: 8px; }
.gspv-mikro { font-size: 12px; margin-top: 2px; }
.gspv-mikro a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.gspv-mikro a:hover { text-decoration: underline; }

/* varijanta: problem / rješenje */
.gspv3-q { font-size: 34px; font-weight: 800; color: #1f0846; line-height: 1.15; }
.gspv3-a { font-size: 20px; font-weight: 700; margin: 6px 0 12px; background: linear-gradient(90deg, #2ba3eb, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }

/* varijanta: AI fokus */
.gspv6-h { font-size: 42px; font-weight: 800; line-height: 1.1; background: linear-gradient(90deg, #1f0846, #1d4ed8 70%, #2ba3eb); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.gspv6-p { font-size: 15px; line-height: 1.5; color: #334155; margin: 6px 0 12px; font-weight: 500; }

@media (max-width: 1399.98px) {
    .gspv-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
    .gspv-h1 { font-size: 40px; } .gspv-h2 { font-size: 24px; }
    .gspv6-h { font-size: 34px; } .gspv3-q { font-size: 28px; }
}
@media (max-width: 767.98px) {
    .gspv-h1 { font-size: 32px; } .gspv6-h { font-size: 28px; } .gspv3-q { font-size: 24px; }
}