/* =========================
   PAYMENT (match Home vibe)
   Scope: .payment-page
   ========================= */

/* Base / Utilities */
.payment-page { font-family: "DM Sans", sans-serif; }
.payment-page img { display:block; max-width:100%; height:auto; }
.payment-page .bg-settings { background-position:center center; background-size:cover; background-repeat:no-repeat; }
.payment-page .container { max-width:1160px; margin:0 auto; padding:0 20px; }
.payment-page .small-container { max-width:980px; margin:0 auto; padding:0 20px; }
.payment-page .col-6 { width:50%; }
@media (max-width: 992px){ .payment-page .col-6 { width:100%; } }

/* === Sticky Payment Navbar (dark) === */
.payment-sticky{
  position: sticky;
  top: calc(var(--site-header-h, 0px) + var(--wp-admin-bar, 110px));
  background: #080202;
  border-bottom: 1px solid #1a1a1a;
  transition: box-shadow .2s ease, background .2s ease;
}

.payment-sticky .container{
  display:flex; justify-content:center; align-items:center;
  min-height:100px; padding:20px 0;
  /* omogućimo horizontalni swipe na mobilnom */
  overflow: hidden; /* sakrij rubne skrol trake unutar containera */
}

.payment-sticky ul{
  display:flex;
  gap:28px;
  margin:0; padding:0; list-style:none;

  /* MOBILNI SWIPE */
/*   overflow-x:auto;  /* <— uključi horizontalni skrol */ 
/*   -webkit-overflow-scrolling:touch; */
/*   scroll-behavior:smooth; */
/*   scroll-snap-type:x proximity; */
}

@media(max-width:768px){
	.payment-sticky ul{
  display:flex;
  gap:28px;
  margin:0; padding:0; list-style:none;

  /* MOBILNI SWIPE */
   overflow-x:auto;  /* <— uključi horizontalni skrol */ 
   -webkit-overflow-scrolling:touch; 
   scroll-behavior:smooth; 
   scroll-snap-type:x proximity; 
}
}

.payment-sticky ul > li{ flex:0 0 auto; scroll-snap-align:center; }

.payment-sticky a{
  font: 500 15px/1 "DM Sans", sans-serif;
  color:#f5f5f5; text-decoration:none;
  padding:10px 14px; border-radius:999px; white-space:nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  outline: none;
}

/* HOVER = crveni akcent */
.payment-sticky a:hover,
.payment-sticky a:focus-visible{
  color:#ca262b;
  background: rgba(202,38,43,0.12);
}

/* Aktivni link ostaje crven */
.payment-sticky a.active{
  color:#ca262b; background: rgba(202,38,43,0.15);
}

/* lagana indikacija skrola (opcionalno) */
@media (max-width: 992px){
  .payment-sticky .container{ padding:14px 0; min-height:72px; }
  .payment-sticky ul{ gap:16px; padding:0 12px; }
}
/* WP admin bar offset */
body.admin-bar { --wp-admin-bar: 32px; }
section[id], article[id]{ scroll-margin-top: calc(var(--site-header-h, 0px) + var(--wp-admin-bar, 0px) + 80px); }

/* =========================
   HERO — isti stil kao Home
   ========================= */
.payment-page .hero-section{
  display:flex; flex-direction:column; align-items:center;
  background-color:#080202;
  background-image:url("../img/Blur-red-bg.svg");
  background-repeat:no-repeat; background-position:95% 70px; background-size:contain;
}
.payment-page .inner-hero{ display:flex; justify-content:center; align-items:center; padding-top:40px; flex-wrap:wrap; }
.payment-page .info-hero{ padding-right:100px; display:flex; flex-direction:column; gap:30px; }
.payment-page .info-hero h1{ color:#ffffff; font-size:72px; font-weight:600; }
.payment-page .info-hero h1 span{ color:#ca262b; font-size:72px; }
.payment-page .info-hero .lead{ color:#cfcecd; font-weight:500; font-size:20px; max-width:640px; }
.payment-page .hero-img{ display:flex; justify-content:center; }
@media (max-width: 992px){ .payment-page .info-hero{ padding-right:0; text-align:center; } }

/* CTA gumbi */
.payment-page .btn-white{
  cursor:pointer; border:none; background:#ffffff; color:#080202;
  font-weight:600; font-size:16px; padding:12px 18px; border-radius:12px;
  transition:transform .2s ease, filter .2s ease;
}
.payment-page .btn-white:hover{ transform:scale(1.04); filter:brightness(0.95); }
.payment-page .btn-grey{
  cursor:pointer; color:#ffffff; background:#1a1a1a; border:1px solid #333;
  font-weight:600; font-size:16px; padding:12px 18px; border-radius:10px;
}
.payment-page .btn-grey:hover{ background:#222; }

/* =========================
   Pre-list intro (information)
   ========================= */
.payment-page .information{
  padding:100px 0; display:flex; justify-content:center;
  background-color:#080202;
  background-image:url("../img/bg-2.svg");
  background-position:70px 240px; background-repeat:no-repeat;
}
.payment-page .payment-intro .sub{ color:#9c9999; font-weight:500; font-size:20px; }
.payment-page .payment-intro h2{
  font-weight:400; font-size:64px; color:#ffffff; line-height:70px; text-align:left;
}
.payment-page .payment-intro h2 span{ color:#ca262b; }

/* =========================
   Solutions zig-zag (sa više razmaka)
   ========================= */
.solutions-list {
  background:#080202;
  padding:140px 0;
  display:flex;
  flex-direction:column;
  gap:160px;
}
.solutions-list .container{
  display:flex;
  flex-direction:column;
  gap:80px;           /* razmak između svake kartice */
}
@media (max-width: 992px){
  .solutions-list .container{ gap:56px; }
}
@media (max-width: 768px){
  .solutions-list .container{ gap:40px; }
}

.solution-row {
  display:flex; align-items:center; gap:80px; flex-wrap:wrap;
}
.solution-row.reverse { flex-direction:row-reverse; }
.solution-image { flex:1 1 45%; }
.solution-image img { width:100%; border-radius:8px; object-fit:cover; }
.solution-text {
  flex:1 1 45%; display:flex; flex-direction:column; gap:24px;
}
.solution-text h3 {
  font-family:"DM Sans", sans-serif; font-weight:400; font-size:52px; color:#ffffff; margin:0;
}
.solution-text p {
  font-family:"DM Sans", sans-serif; font-size:22px; font-weight:400; color:#cfcecd; margin:0; line-height:1.6;
}
.solution-text .read-more {
  display:inline-block; margin-top:20px; cursor:pointer; color:#080202; background:#ffffff; border:none;
  font-weight:600; font-size:16px; border-radius:999px; padding:12px 22px; text-decoration:none; transition:transform .2s ease;
}
.solution-text .read-more:hover { transform:scale(1.05); }

/* === REVIEW unutar text stupa (ispod gumba) === */
.solution-text .solution-review{
  margin-top: 8px;
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 16px 18px;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solution-text .solution-review .stars{
  font-size: 16px; letter-spacing: 2px; color: #6b6b6b;
}
.solution-text .solution-review .star.filled{ color:#f59e0b; }
.solution-text .solution-review blockquote{
  color:#e7e7e7; font-size:16px; line-height:1.6; margin:0;
}
.solution-text .solution-review .author{
  color:#bdbdbd; font-size:14px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .solutions-list { gap:100px; padding:80px 0; }
  .solution-row, .solution-row.reverse { flex-direction:column; gap:40px; }
  .solution-text h3 { font-size:36px; }
  .solution-text p { font-size:18px; }
  .solution-text .solution-review{ padding:14px 16px; }
  .solution-text .solution-review blockquote{ font-size:15px; }
}

/* === Pre-list intro (slika iznad + tekst ispod) === */
.payment-intro-block {
  background-color: #080202;
  background-image: url("../img/bg-2.svg");
  background-repeat: no-repeat;
  background-position: 70px 240px;
  padding: 100px 0;
  display:flex; flex-direction:column; align-items:center; gap:60px;
}
.payment-intro-block .intro-img-wrap {
  max-width: 1200px; margin:0 auto; padding:0 20px;
}
.payment-intro-block .intro-img-wrap img {
  width:100%; border-radius:8px; display:block;
  max-height:300px; object-fit:cover;
}
.payment-intro-block .intro-text { text-align:center; }
.payment-intro-block h2 {
  font-family:"DM Sans", sans-serif; font-weight:400; font-size:64px; color:#ffffff; line-height:70px;
}
.payment-intro-block h2 span { color:#ca262b; }
.payment-intro-block .sub {
  color:#9c9999; font-weight:500; font-size:20px; margin-top:20px;
}

/* =========================
   Help
   ========================= */
.payment-page .help .left-container-box h2{
  font-weight:400; font-size:64px; color:#ffffff; line-height:70px;
}
.payment-page .help .left-container-box h2 span{ color:#ca262b; }
.payment-page .help .sub{
  color:#9c9999; font-weight:500; font-size:20px; padding:20px 0 30px 0;
}

/* =========================
   Reviews (global carousel – ako koristiš)
   ========================= */
.payment-page .lates-news{ display:flex; justify-content:center; padding:100px 0; background:#ffffff; }
.payment-page .inner-new-container{ display:flex; flex-direction:column; gap:40px; align-items:center; }
.payment-page .text-black{ width:100%; }
.payment-page .text-black h2{ font-weight:400; font-size:64px; color:#080202; }
.payment-page .news-card-warp{ max-width:100%; overflow:auto; }
.payment-page .news-card{ display:flex; gap:20px; }
.payment-page .review-card{ width:400px; display:flex; flex-direction:column; gap:15px; background:#fff; }
.payment-page .review-card blockquote{ color:#080202; }
.payment-page .stars{ color:#f59e0b; }

/* =========================
   Logo scroller & marquee
   ========================= */
.payment-page .logo-scroller-container,
.payment-page .marquee-container{
  padding:80px 0; width:100%; opacity:.5; overflow:hidden; position:relative;
}
.payment-page .logo-scroller,
.payment-page .marquee{
  display:flex; width:max-content; gap:40px;
}
.payment-page .logo-scroller img,
.payment-page .marquee img{ width:170px; height:auto; flex-shrink:0; }