/*
Theme Name: Kooperant Landing
Theme URI: https://kooperant.hr/
Author: Kooperant
Description: Modularna blok-tema za Kooperant landing stranicu s responzivnim herom, interaktivnom kartom, video carouselom i interaktivnim prikazima korisničkih putanja.
Version: 2.7.6
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: kooperant-landing
*/

:root {
  --koop-primary: #432DD7;
  --koop-primary-dark: #3020B7;
  --koop-ink: #171820;
  --koop-muted: #626474;
  --koop-line: #e5e5ee;
  --koop-soft: #f7f7ff;
  --koop-white: #ffffff;
  --koop-success: #1d8a62;
  --koop-radius: 22px;
  --koop-shadow: 0 24px 64px rgba(30, 28, 74, .12);
  --koop-font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --koop-base-font-size: 16px;
  --koop-h1-size: 64px;
  --koop-h2-size: 52px;
  --koop-content-width: 1180px;
  --koop-wide-width: 1510px;
  --koop-page-padding: 32px;
  --koop-page-padding-tablet: 20px;
  --koop-page-padding-mobile: 13px;
  --koop-section-padding-y: 96px;
  --koop-section-padding-y-mobile: 64px;
  --koop-hero-max-width: 1680px;
  --koop-hero-left: 34%;
  --koop-hero-gap: 36px;
  --koop-map-height: 620px;
  --koop-map-height-tablet: 560px;
  --koop-map-height-mobile: 500px;
  --koop-block-gap: 24px;
  --koop-section-content-gap: 24px;
  --koop-columns-gap: 48px;
  --koop-cards-gap: 20px;
  --koop-hero-font-family: var(--koop-font-family);
  --koop-hero-font-weight: 830;
  --koop-hero-line-height: 1.05;
  --koop-hero-letter-spacing: -0.052em;
  --koop-hero-title-actions-gap: 22px;
  --koop-hero-actions-benefits-gap: 18px;
  --koop-page-bg: #fafaff;
  --koop-glow-rgb: 67, 45, 215;
  --koop-glow-opacity: .10;
  --koop-pattern-opacity: .035;
  --koop-decoration-size: 620px;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: var(--koop-font-family); font-size: var(--koop-base-font-size); --wp--style--block-gap: var(--koop-block-gap); background: var(--koop-page-bg); }
.wp-site-blocks, main { background: transparent; }
.editor-styles-wrapper { --wp--style--block-gap: var(--koop-block-gap); }
* { box-sizing: border-box; }
a { text-underline-offset: 3px; }

.koop-container {
  width: min(var(--koop-content-width), calc(100% - var(--koop-page-padding) - var(--koop-page-padding)));
  margin-inline: auto;
}

.koop-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(67,45,215,.2);
}

.koop-header .koop-container { width: min(var(--koop-content-width), calc(100% - var(--koop-page-padding) - var(--koop-page-padding))); }
.koop-nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.koop-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.koop-brand img {
  display: block;
  width: 178px;
  height: auto;
}

.koop-menu { display: flex; align-items: center; gap: 28px; }
.koop-menu a { color: var(--koop-ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.koop-menu a:hover { color: var(--koop-primary); }
.koop-contact-link { padding: 12px 0; }
.koop-language {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  color: #555665;
  background: #f0f0f4;
  font-size: .78rem;
  font-weight: 750;
}

.koop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-weight: 780;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.koop-btn:hover { transform: translateY(-2px); }
.koop-btn-primary { color: #fff; background: var(--koop-primary); box-shadow: 0 12px 28px rgba(67,45,215,.24); }
.koop-btn-primary:hover { color: #fff; background: var(--koop-primary-dark); }
.koop-btn-secondary { color: #2c2d35; background: rgba(255,255,255,.92); border-color: #c9c9d1; box-shadow: 0 6px 16px rgba(20,20,40,.04); }
.koop-btn-secondary:hover { color: var(--koop-primary-dark); border-color: #a8a3ed; }
.koop-btn-small { min-height: 44px; padding-inline: 22px; border-radius: 9px; }
.koop-play { color: var(--koop-primary); font-size: .82em; }

.koop-hero {
  position: relative;
  overflow: hidden;
  padding: 16px 0 32px;
  background-color: var(--koop-page-bg);
  background-image:
    linear-gradient(rgba(50,50,68,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50,50,68,.045) 1px, transparent 1px),
    radial-gradient(circle at 92% 12%, rgba(67,45,215,.11), transparent 30%);
  background-size: 48px 48px, 48px 48px, auto;
}
.koop-hero .koop-container {
  width: min(var(--koop-hero-max-width), calc(100% - var(--koop-page-padding) - var(--koop-page-padding)));
  max-width: none !important;
}
.koop-hero-grid {
  width: 100%;
  max-width: none !important;
  min-height: calc(100vh - 124px);
  display: grid;
  grid-template-columns: minmax(0, var(--koop-hero-left)) minmax(0, 1fr);
  gap: var(--koop-hero-gap);
  align-items: center;
}
.koop-hero-grid > * {
  min-width: 0;
  max-width: none;
}
.koop-hero-copy { padding: 30px 0 22px; }
:where(.koop-hero h1) {
  max-width: 590px;
  margin: 0;
  color: #18191f;
  font-size: clamp(2.8rem,3.65vw,var(--koop-h1-size));
  font-family: var(--koop-hero-font-family);
  line-height: var(--koop-hero-line-height);
  letter-spacing: var(--koop-hero-letter-spacing);
  font-weight: var(--koop-hero-font-weight);
}
.koop-hero h1 span { display: block; color: var(--koop-primary); }
.koop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--koop-hero-title-actions-gap); }
.koop-benefits {
  max-width: 610px;
  margin-top: var(--koop-hero-actions-benefits-gap);
  padding-top: 15px;
  border-top: 1px solid #dcdce5;
}
.koop-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 39px;
  color: #2d2e37;
  font-size: .94rem;
  line-height: 1.35;
  font-weight: 510;
}
.koop-benefit-icon {
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: var(--koop-primary);
  background: #e9e6ff;
}
.koop-benefit-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.koop-hero-map-column,
.koop-map-frame {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
.koop-map-frame {
  position: relative;
  overflow: hidden;
  height: var(--koop-map-height) !important;
  border: 1px solid #d3d3da;
  border-radius: 24px;
  background: #f2f2f5;
  box-shadow: 0 20px 55px rgba(30,30,45,.12);
}
.koop-map-frame iframe {
  display: block;
  width: 100% !important;
  min-width: 100%;
  max-width: none !important;
  height: 100% !important;
  border: 0;
  background: #f2f2f5;
}

.koop-section { padding-block: var(--koop-section-padding-y); padding-inline: 0; }
.koop-section-soft { background: var(--koop-soft); }
.koop-section-dark { color:#fff; background:#1d1d35; }
:where(.koop-kicker) { margin:0 0 12px; color:var(--koop-primary); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; }
.koop-section-dark :where(.koop-kicker) { color:#a9a3ff; }
:where(.koop-section h2) { margin:0; max-width:880px; color:var(--koop-ink); font-size:clamp(2rem,4vw,var(--koop-h2-size)); line-height:1.08; letter-spacing:-.045em; }
.koop-section-dark h2 { color:#fff; }
:where(.koop-lead) { max-width:820px; margin:20px 0 0; color:var(--koop-muted); font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.75; }
.koop-section-dark :where(.koop-lead) { color:#c7c7d7; }
.koop-two-col { display:grid; grid-template-columns: .92fr 1.08fr; gap:var(--koop-columns-gap); align-items:start; }
.koop-note-card { padding:30px; border:1px solid #e3e1ff; border-radius:var(--koop-radius); background:#fff; box-shadow:0 15px 38px rgba(37,34,94,.08); }
.koop-note-card strong { display:block; margin-bottom:10px; color:var(--koop-primary); font-size:1.1rem; }
:where(.koop-note-card p) { margin:0; color:var(--koop-muted); line-height:1.7; }

.koop-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--koop-cards-gap); margin-top:42px; }
.koop-card { padding:28px; border:1px solid var(--koop-line); border-radius:var(--koop-radius); background:#fff; box-shadow:0 12px 34px rgba(36,34,86,.06); }
.koop-card-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:var(--koop-primary); font-size:1.25rem; font-weight:850; }
:where(.koop-card h3) { margin:22px 0 9px; color:var(--koop-ink); font-size:1.2rem; letter-spacing:-.02em; }
:where(.koop-card p) { margin:0; color:var(--koop-muted); line-height:1.65; }

.koop-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:44px; counter-reset:step; }
.koop-step { position:relative; min-height:240px; padding:24px 21px; border-radius:18px; background:#fff; border:1px solid var(--koop-line); }
.koop-step-number { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff; background:var(--koop-primary); font-weight:850; }
:where(.koop-step h3) { margin:21px 0 10px; color:var(--koop-ink); font-size:1.06rem; line-height:1.3; }
:where(.koop-step p) { margin:0; color:var(--koop-muted); font-size:.93rem; line-height:1.6; }

.koop-visibility { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--koop-columns-gap); align-items:center; }
.koop-profile-card { padding:22px; border-radius:26px; background:#fff; box-shadow:var(--koop-shadow); border:1px solid #e3e1ff; }
.koop-profile-cover { height:150px; border-radius:18px; background:linear-gradient(135deg,#432DD7,#8379ff); }
.koop-profile-row { display:flex; gap:16px; align-items:center; padding:20px 6px 10px; }
.koop-avatar { width:70px; height:70px; margin-top:-48px; border:5px solid #fff; border-radius:20px; background:#e9e7ff; }
.koop-profile-lines { flex:1; }
.koop-profile-lines div { height:10px; margin:8px 0; border-radius:6px; background:#ececf2; }
.koop-profile-lines div:first-child { width:48%; height:14px; background:#29293c; }
.koop-tag-row { display:flex; flex-wrap:wrap; gap:8px; padding:10px 6px 5px; }
.koop-tag { padding:8px 11px; border-radius:999px; color:#4a43bb; background:#efeeff; font-size:.78rem; font-weight:730; }

.koop-audience-legacy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px; }
.koop-audience-legacy article { padding:30px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
:where(.koop-audience h3) { margin:0 0 12px; color:#fff; font-size:1.2rem; }
:where(.koop-audience p) { margin:0; color:#c9c9d9; line-height:1.65; }

.koop-faq { max-width:900px; margin-top:38px; }
.koop-faq details { border-top:1px solid var(--koop-line); }
.koop-faq details:last-child { border-bottom:1px solid var(--koop-line); }
.koop-faq summary { cursor:pointer; list-style:none; padding:23px 38px 23px 0; color:var(--koop-ink); font-weight:760; position:relative; }
.koop-faq summary::-webkit-details-marker { display:none; }
.koop-faq summary::after { content:"+"; position:absolute; right:4px; top:19px; color:var(--koop-primary); font-size:1.5rem; }
.koop-faq details[open] summary::after { content:"–"; }
:where(.koop-faq details p) { margin:-5px 0 24px; color:var(--koop-muted); line-height:1.7; }

.koop-cta { padding:clamp(38px,6vw,72px); border-radius:30px; text-align:center; background:linear-gradient(135deg,#432DD7,#6f63ff); box-shadow:0 26px 70px rgba(67,45,215,.25); }
.koop-cta h2 { margin-inline:auto; color:#fff; }
:where(.koop-cta p) { max-width:710px; margin:18px auto 0; color:#e7e5ff; font-size:1.08rem; line-height:1.65; }
.koop-cta .koop-actions { justify-content:center; }
.koop-cta .koop-btn-primary { color:var(--koop-primary); background:#fff; }
.koop-cta .koop-btn-secondary { color:#fff; background:transparent; border-color:rgba(255,255,255,.55); }

.koop-footer { padding:44px 0 28px; color:#c9c9d8; background:#151527; }
.koop-footer-grid { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; }
.koop-footer .koop-brand { color:#fff; }
:where(.koop-footer p) { max-width:560px; margin:14px 0 0; line-height:1.6; }
.koop-footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.koop-footer-links a { color:#ddddec; text-decoration:none; }
.koop-footer-bottom { margin-top:35px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.9rem; }

@media (max-width: 1240px) {
  .koop-hero .koop-container { width: min(var(--koop-hero-max-width), calc(100% - var(--koop-page-padding-tablet) - var(--koop-page-padding-tablet))); }
  .koop-hero-grid { grid-template-columns: minmax(0, var(--koop-hero-left)) minmax(0, 1fr); gap: min(var(--koop-hero-gap), 32px); }
  :where(.koop-hero h1) { font-size: clamp(2.65rem,4.4vw,3.55rem); }
}

@media (max-width: 1040px) {
  .koop-hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .koop-hero-copy { max-width: 720px; padding-top: 54px; }
  :where(.koop-hero h1) { max-width: 700px; }
  .koop-map-frame { height: var(--koop-map-height-tablet) !important; min-height: 0; }
  .koop-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .koop-step:last-child { grid-column:span 2; }
  .koop-cards,.koop-audience-legacy { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .koop-cards .koop-card:last-child,.koop-audience-legacy article:last-child { grid-column:span 2; }
}

@media (max-width: 820px) {
  .koop-contact-link { display:none; }
  .koop-hero .koop-container { width:min(760px, calc(100% - var(--koop-page-padding-tablet) - var(--koop-page-padding-tablet))); }
  .koop-two-col,.koop-visibility { grid-template-columns:1fr; }
  .koop-footer-grid { display:grid; }
}

@media (max-width: 640px) {
  .koop-container { width:min(var(--koop-content-width), calc(100% - var(--koop-page-padding-mobile) - var(--koop-page-padding-mobile))); }
  .koop-header .koop-container { width:calc(100% - var(--koop-page-padding-mobile) - var(--koop-page-padding-mobile)); }
  .koop-nav { min-height:66px; gap:12px; }
  .koop-brand img { width:142px; }
  .koop-menu { gap:7px; }
  .koop-language { display:none; }
  .koop-menu .koop-btn { min-height:39px; padding-inline:13px; font-size:.78rem; }
  .koop-hero { padding-top:0; background-size:34px 34px,34px 34px,auto; }
  .koop-hero-copy { padding:44px 0 10px; }
  :where(.koop-hero h1) { font-size:clamp(2.35rem,11.5vw,3.05rem); line-height:1.02; }
  .koop-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .koop-actions .koop-btn { width:100%; padding-inline:12px; font-size:.88rem; }
  .koop-benefit { align-items:flex-start; padding:5px 0; font-size:.9rem; }
  .koop-map-frame { min-height:0; height:var(--koop-map-height-mobile) !important; border-radius:18px; }
  .koop-cards,.koop-audience-legacy,.koop-steps { grid-template-columns:1fr; }
  .koop-cards .koop-card:last-child,.koop-audience-legacy article:last-child,.koop-step:last-child { grid-column:auto; }
  .koop-card,.koop-step,.koop-audience-legacy article { padding:23px; }
  .koop-footer-links { display:grid; gap:10px; }
  .koop-footer .koop-brand img { width:160px; }
}

@media (max-width: 420px) {
  .koop-brand img { width:128px; }
  .koop-actions { grid-template-columns:1fr; }
  .koop-map-frame { min-height:0; height:var(--koop-map-height-mobile) !important; }
}


@media (max-width: 1040px) {
  :root {
    --koop-page-padding: var(--koop-page-padding-tablet);
  }
}

@media (max-width: 640px) {
  :root {
    --koop-page-padding: var(--koop-page-padding-mobile);
    --koop-section-padding-y: var(--koop-section-padding-y-mobile);
  }
  .is-style-koop-padding-large { padding: 32px !important; }
  .is-style-koop-padding-medium { padding: 24px !important; }
}

/* Video carousel */
.koop-section-heading {
  display: grid;
  gap: var(--koop-section-content-gap);
  text-align: center;
}
.koop-section-heading h2,
.koop-section-heading :where(.koop-lead) {
  margin: 0 auto;
}
.koop-video-section {
  overflow: hidden;
  background: #fbfbfd;
}
.koop-video-carousel {
  position: relative;
  width: min(100%, 1080px);
  margin: 42px auto 0;
  padding-inline: 58px;
}
.koop-video-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 24px;
}
.koop-video-viewport::-webkit-scrollbar { display: none; }
.koop-video-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  width: max-content;
  margin: 0;
}
.koop-video-slide {
  flex: 0 0 min(920px, calc(100vw - 160px));
  width: min(920px, calc(100vw - 160px));
  scroll-snap-align: start;
  margin: 0;
}
.koop-video-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 1px solid #ddddea;
  border-radius: 22px;
  background:
    linear-gradient(rgba(67,45,215,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,45,215,.05) 1px, transparent 1px),
    linear-gradient(135deg, #f8f7ff, #efeff8);
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: 0 20px 52px rgba(28,28,62,.10);
}
.koop-video-media:empty::before {
  content: "Dodajte video iz Medijske zbirke";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #5e5f70;
  font-weight: 700;
}
.koop-video-media video,
.koop-video-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
:where(.koop-video-slide h3) {
  max-width: 780px;
  margin: 20px auto 0;
  color: var(--koop-ink);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  text-align: center;
}
.koop-carousel-button {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 12px 28px rgba(67,45,215,.25);
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  transition: transform .2s ease, opacity .2s ease;
}
.koop-carousel-button:hover { transform: scale(1.06); }
.koop-carousel-button:disabled { opacity: .35; cursor: default; transform: none; }
.koop-carousel-prev { left: 0; }
.koop-carousel-next { right: 0; }
.koop-video-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 12px;
  margin-top: 22px;
}
.koop-video-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8c6d8;
  cursor: pointer;
}
.koop-video-dot.is-active { background: var(--koop-primary); }

/* Kome je Kooperant namijenjen */
.koop-audience-section {
  background: #fafafd;
}
.koop-audience-columns {
  gap: 24px;
  margin-top: 44px;
}
.koop-audience-card {
  height: 100%;
  min-height: 350px;
  padding: 36px 32px;
  border: 1px solid #dedee7;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 32px rgba(29,29,61,.04);
}
.koop-audience-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border: 1px solid #dedee8;
  border-radius: 14px;
  color: var(--koop-primary);
  background: #fff;
}
.koop-audience-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(.koop-audience-card h3) {
  margin: 0 auto 14px;
  color: var(--koop-ink);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}
:where(.koop-audience-card p) {
  margin: 0;
  color: var(--koop-muted);
  line-height: 1.65;
}
.koop-audience-link {
  margin-top: 22px !important;
}
.koop-audience-link a {
  color: var(--koop-primary);
  font-weight: 750;
  text-decoration: none;
}
.koop-audience-link a:hover { text-decoration: underline; }

@media (max-width: 1040px) {
  .koop-video-slide {
    flex-basis: calc(100vw - 136px);
    width: calc(100vw - 136px);
  }
  .koop-audience-columns { flex-wrap: wrap !important; }
  .koop-audience-columns > .wp-block-column { flex-basis: calc(50% - 12px) !important; }
  .koop-audience-columns > .wp-block-column:last-child { flex-basis: 100% !important; }
}

@media (max-width: 720px) {
  .koop-video-carousel { padding-inline: 0; }
  .koop-video-slide {
    flex-basis: calc(100vw - 30px);
    width: calc(100vw - 30px);
  }
  .koop-carousel-button {
    top: auto;
    bottom: -2px;
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 1.7rem;
  }
  .koop-carousel-prev { left: calc(50% - 74px); }
  .koop-carousel-next { right: calc(50% - 74px); }
  .koop-video-dots { margin-top: 32px; padding-bottom: 10px; }
  .koop-audience-columns { display: grid !important; grid-template-columns: 1fr; }
  .koop-audience-columns > .wp-block-column,
  .koop-audience-columns > .wp-block-column:last-child { flex-basis: auto !important; }
  .koop-audience-card { min-height: auto; padding: 30px 24px; }
}

/* Modularne sekcije i Gutenberg prilagodbe */
.koop-page-sections,
.koop-page-sections > .wp-block-post-content {
  margin: 0;
  padding: 0;
}

.koop-btn-wrap .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.koop-btn-wrap .wp-block-button__link:hover { transform: translateY(-2px); }
.koop-btn-primary-wrap .wp-block-button__link {
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 12px 28px rgba(67,45,215,.24);
}
.koop-btn-primary-wrap .wp-block-button__link:hover { color:#fff; background:var(--koop-primary-dark); }
.koop-btn-secondary-wrap .wp-block-button__link {
  color: #2c2d35;
  background: rgba(255,255,255,.92);
  border-color: #c9c9d1;
  box-shadow: 0 6px 16px rgba(20,20,40,.04);
}
.koop-btn-secondary-wrap .wp-block-button__link:hover { color:var(--koop-primary-dark); border-color:#a8a3ed; }
.koop-cta-primary-wrap .wp-block-button__link { color:var(--koop-primary); background:#fff; }
.koop-cta-secondary-wrap .wp-block-button__link { color:#fff; background:transparent; border-color:rgba(255,255,255,.55); }

.koop-benefit-block {
  position: relative;
  padding-left: 39px;
}
.koop-benefit-block::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: var(--koop-primary);
  background: #e9e6ff;
  font-weight: 850;
}

:where(.koop-note-card h3) {
  margin: 0 0 10px;
  color: var(--koop-primary);
  font-size: 1.1rem;
}
:where(.koop-note-card > p) { margin:0; color:var(--koop-muted); line-height:1.7; }
.koop-step-number { margin:0; }
.koop-section-cta { padding-top: 0; }

.is-style-koop-white-section,
.is-style-koop-soft-section,
.is-style-koop-dark-section {
  padding-block: var(--koop-section-padding-y);
  padding-inline: 0;
}
.is-style-koop-white-section { background:#fff; }
.is-style-koop-soft-section { background:var(--koop-soft); }
.is-style-koop-dark-section { color:#fff; background:#1d1d35; }
.is-style-koop-dark-section h1,
.is-style-koop-dark-section h2,
.is-style-koop-dark-section h3 { color:#fff; }
.is-style-koop-dark-section p { color:#c7c7d7; }


/* Brzi padding stilovi dostupni u editoru za Group, Columns i Column blokove */
.is-style-koop-padding-none { padding: 0 !important; }
.is-style-koop-padding-small { padding: 16px !important; }
.is-style-koop-padding-medium { padding: 32px !important; }
.is-style-koop-padding-large { padding: 56px !important; }

/* Custom padding iz Gutenberga uvijek ima prednost nad početnim paddingom teme. */
.koop-section[style*="padding"],
.is-style-koop-white-section[style*="padding"],
.is-style-koop-soft-section[style*="padding"],
.is-style-koop-dark-section[style*="padding"] {
  box-sizing: border-box;
}

.wp-block-kooperant-video-carousel { margin-block-start:0; }
.koop-video-slide[hidden] { display:none !important; }
.koop-video-editor-actions { font-family:var(--koop-font-family); }

@media (max-width: 640px) {
  .koop-btn-wrap { width:100%; }
  .koop-btn-wrap .wp-block-button__link { width:100%; padding-inline:12px; font-size:.88rem; }
}


/* v0.6 – Kooperant glavna boja, sadržajne sekcije i planovi */

/* Naslov svakog videa prikazuje se iznad videa bez promjene postojećeg sadržaja bloka. */
.koop-video-slide {
  display: flex;
  flex-direction: column;
}
:where(.koop-video-slide h3) {
  order: -1;
  margin: 0 auto 20px;
}
.koop-video-section .koop-section-heading :where(.koop-lead) {
  display: none;
}
.koop-video-section .koop-section-heading {
  margin-bottom: 36px;
}

/* Kartice ciljnih korisnika: cijela kartica je klikabilna preko postojeće poveznice. */
.koop-audience-card {
  position: relative;
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.koop-audience-card:hover,
.koop-audience-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(67,45,215,.34);
  box-shadow: 0 20px 48px rgba(33,26,93,.11);
}
.koop-audience-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.koop-audience-link a:focus-visible::after {
  outline: 3px solid rgba(67,45,215,.38);
  outline-offset: 3px;
}
.koop-audience-icon {
  border-color: #ded9ff;
  background: #f4f1ff;
}
.koop-audience-columns > .wp-block-column:nth-child(1) .koop-audience-icon svg,
.koop-audience-columns > .wp-block-column:nth-child(2) .koop-audience-icon svg,
.koop-audience-columns > .wp-block-column:nth-child(3) .koop-audience-icon svg {
  display: none;
}
.koop-audience-icon::before {
  content: "";
  width: 29px;
  height: 29px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.koop-audience-columns > .wp-block-column:nth-child(1) .koop-audience-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432DD7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 0 1 16 0'/%3E%3Cpath d='M3 14h18v3H3zM9 14V8m6 6V8'/%3E%3C/svg%3E");
}
.koop-audience-columns > .wp-block-column:nth-child(2) .koop-audience-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432DD7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18M5 9v9m4-9v9m6-9v9m4-9v9M3 20h18M12 3l9 5H3z'/%3E%3C/svg%3E");
}
.koop-audience-columns > .wp-block-column:nth-child(3) .koop-audience-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432DD7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='10' height='16' rx='1'/%3E%3Cpath d='M8 8h2m-2 4h2m-2 4h2M14 9h6v11h-6M17 13h1'/%3E%3C/svg%3E");
}

/* Urediva sekcija slika + tekst. */
.koop-feature-section {
  background: #fff;
}
.koop-feature-section.is-soft {
  background: var(--koop-soft);
}
.koop-feature-columns {
  align-items: center !important;
  gap: var(--koop-columns-gap);
}
.koop-feature-media {
  min-width: 0;
}
.koop-feature-image {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--koop-line);
  border-radius: 24px;
  background:
    linear-gradient(rgba(67,45,215,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,45,215,.045) 1px, transparent 1px),
    #f7f6ff;
  background-size: 36px 36px;
  box-shadow: var(--koop-shadow);
}
.koop-feature-image:empty,
.koop-feature-image:not(:has(img)) {
  min-height: 430px;
}
.koop-feature-image:empty::before,
.koop-feature-image:not(:has(img))::before {
  content: "Dodajte sliku";
  display: grid;
  place-items: center;
  min-height: 430px;
  color: var(--koop-muted);
  font-weight: 750;
}
.koop-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}
.koop-feature-copy {
  max-width: 650px;
}
:where(.koop-feature-title) {
  margin: 0 0 12px;
  color: var(--koop-primary);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 820;
  letter-spacing: -.025em;
}
:where(.koop-feature-subtitle) {
  margin: 0;
  color: var(--koop-ink);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.koop-feature-copy .wp-block-list {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding-left: 1.3em;
  color: var(--koop-muted);
  line-height: 1.6;
}
.koop-feature-copy .wp-block-list li::marker {
  color: var(--koop-primary);
}
.koop-feature-copy .wp-block-buttons {
  margin-top: 30px;
}

/* Planovi pretplate – svi tekstovi, liste i gumbi su standardni Gutenberg blokovi. */
.koop-pricing-section {
  background: #fafafd;
}
.koop-pricing-columns {
  align-items: stretch !important;
  gap: var(--koop-cards-gap);
  margin-top: 48px;
}
.koop-pricing-columns > .wp-block-column {
  display: flex;
}
.koop-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 34px 30px;
  border: 1px solid #dddde7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 36px rgba(31,29,75,.06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.koop-pricing-card:hover {
  transform: translateY(-5px);
  border-color: rgba(67,45,215,.3);
  box-shadow: 0 22px 52px rgba(31,29,75,.11);
}
.koop-pricing-card.is-featured {
  border: 2px solid var(--koop-primary);
  box-shadow: 0 22px 54px rgba(67,45,215,.14);
}
:where(.koop-pricing-badge) {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  margin: -10px 0 16px;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff;
  background: var(--koop-primary);
  font-size: .75rem;
  font-weight: 800;
}
:where(.koop-pricing-card h3) {
  margin: 0;
  color: var(--koop-ink);
  font-size: 1.35rem;
}
:where(.koop-pricing-description) {
  min-height: 50px;
  margin: 10px 0 0;
  color: var(--koop-muted);
  line-height: 1.55;
}
.koop-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 24px;
}
:where(.koop-price) {
  margin: 0;
  color: var(--koop-ink);
  font-size: clamp(2.4rem, 4vw, 3.25rem);
  line-height: 1;
  font-weight: 840;
  letter-spacing: -.045em;
}
:where(.koop-price-period) {
  margin: 0;
  color: var(--koop-muted);
  font-size: .9rem;
}
.koop-pricing-card .wp-block-buttons {
  margin-top: 24px;
}
.koop-pricing-card .wp-block-button,
.koop-pricing-card .wp-block-button__link {
  width: 100%;
}
.koop-pricing-card .wp-block-button__link {
  justify-content: center;
}
.koop-pricing-card .wp-block-separator {
  width: 100%;
  margin: 26px 0;
  border-color: #e7e6ee;
}
.koop-pricing-card .wp-block-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #343541;
}
.koop-pricing-card .wp-block-list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
}
.koop-pricing-card .wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--koop-primary);
  font-weight: 850;
}

/* U svim novim obrascima korisnik može koristiti Gutenberg margin, padding i block gap kontrole. */
.koop-feature-section,
.koop-feature-columns,
.koop-feature-media,
.koop-feature-copy,
.koop-pricing-section,
.koop-pricing-columns,
.koop-pricing-card,
.koop-audience-card {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .koop-feature-columns {
    flex-wrap: wrap !important;
  }
  .koop-feature-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
  .koop-feature-image:empty,
  .koop-feature-image:not(:has(img)),
  .koop-feature-image:empty::before,
  .koop-feature-image:not(:has(img))::before {
    min-height: 330px;
  }
  .koop-pricing-columns {
    flex-wrap: wrap !important;
  }
  .koop-pricing-columns > .wp-block-column {
    flex-basis: calc(50% - 11px) !important;
  }
  .koop-pricing-columns > .wp-block-column:last-child {
    flex-basis: 100% !important;
  }
}

@media (max-width: 640px) {
  :where(.koop-feature-title) {
    font-size: 1rem;
  }
  :where(.koop-feature-subtitle) {
    font-size: 2rem;
  }
  .koop-pricing-columns {
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .koop-pricing-columns > .wp-block-column,
  .koop-pricing-columns > .wp-block-column:last-child {
    flex-basis: auto !important;
  }
  .koop-pricing-card {
    padding: 30px 24px;
  }
}


/* v0.9 – tipografski stilovi daju početni izgled, ali ne zaključavaju Gutenberg kontrole. */
:where(.wp-block-heading.is-style-koop-hero-heading, .is-style-koop-hero-heading) {
  font-family: var(--koop-hero-font-family);
  font-size: clamp(2.35rem, 5vw, var(--koop-h1-size));
  font-weight: var(--koop-hero-font-weight);
  font-style: normal;
  line-height: var(--koop-hero-line-height);
  letter-spacing: var(--koop-hero-letter-spacing);
  text-transform: none;
  text-decoration: none;
}
:where(.wp-block-heading.is-style-koop-section-heading, .is-style-koop-section-heading) {
  font-family: var(--koop-font-family);
  font-size: clamp(2rem, 4vw, var(--koop-h2-size));
  font-weight: 760;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-transform: none;
  text-decoration: none;
}
:where(.wp-block-heading.is-style-koop-card-heading, .is-style-koop-card-heading) {
  font-family: var(--koop-font-family);
  font-size: 1.25rem;
  font-weight: 740;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-transform: none;
  text-decoration: none;
}
:where(.wp-block-paragraph.is-style-koop-lead-text, .is-style-koop-lead-text) {
  font-family: var(--koop-font-family);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
:where(.wp-block-paragraph.is-style-koop-kicker-text, .is-style-koop-kicker-text) {
  font-family: var(--koop-font-family);
  font-size: .76rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Tipografija gumba nasljeđuje postavke Button bloka. */
:where(.koop-btn-wrap) {
  font-family: var(--koop-font-family);
  font-size: 1rem;
  font-weight: 780;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.koop-btn-wrap .wp-block-button__link {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: inherit;
}

/* Brzi spacing stilovi za roditeljske blokove (Group/Row/Stack, Columns i Buttons). */
.is-style-koop-gap-none { gap: 0 !important; --wp--style--block-gap: 0 !important; }
.is-style-koop-gap-tight { gap: 12px !important; --wp--style--block-gap: 12px !important; }
.is-style-koop-gap-normal { gap: var(--koop-block-gap) !important; --wp--style--block-gap: var(--koop-block-gap) !important; }
.is-style-koop-gap-relaxed { gap: 40px !important; --wp--style--block-gap: 40px !important; }
.is-style-koop-gap-large { gap: 64px !important; --wp--style--block-gap: 64px !important; }

/* Gutenberg custom blockGap ostaje mjerodavan kada je korisnik unese u editoru. */
.wp-block-group[style*="--wp--style--block-gap"],
.wp-block-columns[style*="--wp--style--block-gap"],
.wp-block-buttons[style*="--wp--style--block-gap"] {
  gap: var(--wp--style--block-gap);
}


/* v0.9 – Gutenberg tipografske postavke (custom i preset) imaju prednost nad dizajnerskim defaultima teme. */
:where(.koop-section, .koop-hero, .koop-feature-section, .koop-pricing-section, .koop-audience-section)
:where(.has-text-transform-uppercase) { text-transform: uppercase; }

/* Custom HTML i ostali tekstualni elementi mogu naslijediti od roditeljskog bloka. */
:where(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-buttons) {
  font-family: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* =========================================================
   v1.0 – responzivno ponašanje za desktop, laptop, tablet i mobitel
   ========================================================= */

/* Svi mediji ostaju unutar roditeljskog elementa. */
:where(img, video, iframe, svg, canvas) {
  max-width: 100%;
}

/* Flex/grid djeca smiju se suziti bez horizontalnog overflowa. */
:where(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover,
       .wp-block-media-text, .koop-hero-copy, .koop-hero-map-column,
       .koop-feature-copy, .koop-feature-media) {
  min-width: 0;
}

/* Dugi naslovi, URL-ovi i riječi ne probijaju ekran. */
:where(h1, h2, h3, h4, h5, h6, p, li, a) {
  overflow-wrap: break-word;
}

/* Uređivi Gutenberg stupci i redovi. */
.wp-block-columns {
  max-width: 100%;
}
.wp-block-columns > .wp-block-column {
  min-width: 0;
}
.wp-block-buttons {
  row-gap: 10px;
}
.wp-block-button__link {
  text-align: center;
}

/* Header: sadržaj se smanjuje bez prelamanja izvan ekrana. */
@media (max-width: 1180px) {
  .koop-nav { min-height: 70px; gap: 18px; }
  .koop-brand img { width: 160px; }
  .koop-menu { gap: 18px; }
  .koop-header .koop-btn-small { min-height: 42px; padding-inline: 18px; }
}

/* Laptop i tablet: HERO prelazi u jedan stupac, karta ostaje puna širina. */
@media (max-width: 1040px) {
  .koop-header .koop-container,
  .koop-container,
  .koop-hero .koop-container {
    width: min(100%, calc(100% - (var(--koop-page-padding-tablet) * 2)));
  }

  .koop-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto;
    gap: 34px;
  }

  /* Podržava i HERO koji je korisnik ručno složio kao Columns ili Row. */
  .koop-hero .koop-container > .wp-block-columns,
  .koop-hero .koop-container.is-layout-flex,
  .koop-hero .koop-container > .wp-block-group.is-layout-flex {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 34px !important;
  }
  .koop-hero .koop-container > .wp-block-columns > .wp-block-column,
  .koop-hero .koop-container.is-layout-flex > *,
  .koop-hero .koop-container > .wp-block-group.is-layout-flex > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .koop-hero-copy {
    max-width: 760px;
    padding-top: 46px;
    padding-bottom: 0;
  }
  .koop-hero h1 {
    max-width: 760px;
  }
  .koop-map-frame {
    width: 100% !important;
    height: var(--koop-map-height-tablet) !important;
  }

  .koop-two-col,
  .koop-visibility {
    grid-template-columns: minmax(0, 1fr);
  }

  .koop-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .koop-step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .koop-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .koop-cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .koop-video-carousel {
    width: min(100%, 940px);
    padding-inline: 52px;
  }
  .koop-video-slide {
    flex-basis: min(820px, calc(100vw - 150px));
    width: min(820px, calc(100vw - 150px));
  }
}

/* Tablet: kartice u dvije kolone, sadržajne sekcije u jednom stupcu. */
@media (max-width: 900px) {
  .koop-section {
    padding-block: max(56px, calc(var(--koop-section-padding-y-mobile) + 8px));
  }

  .koop-feature-columns,
  .koop-pricing-columns,
  .koop-audience-columns {
    width: 100%;
  }

  .koop-feature-columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 36px !important;
  }
  .koop-feature-columns > .wp-block-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .koop-feature-copy {
    max-width: 760px;
  }

  .koop-pricing-columns,
  .koop-audience-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--koop-cards-gap) !important;
  }
  .koop-pricing-columns > .wp-block-column,
  .koop-audience-columns > .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  .koop-pricing-columns > .wp-block-column:last-child:nth-child(odd),
  .koop-audience-columns > .wp-block-column:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Mobitel: jedan stupac, čitljivi gumbi i manji razmaci. */
@media (max-width: 720px) {
  .koop-header .koop-container,
  .koop-container,
  .koop-hero .koop-container {
    width: min(100%, calc(100% - (var(--koop-page-padding-mobile) * 2)));
  }

  .koop-nav {
    min-height: 64px;
    gap: 12px;
  }
  .koop-brand img { width: 142px; }
  .koop-menu { gap: 10px; }
  .koop-contact-link { display: none; }
  .koop-language { min-height: 36px; padding-inline: 10px; }
  .koop-header .koop-btn-small { min-height: 40px; padding-inline: 14px; }

  .koop-hero {
    padding-bottom: 22px;
    background-size: 34px 34px, 34px 34px, auto;
  }
  .koop-hero-copy {
    padding-top: 38px;
  }
  .koop-actions,
  .koop-hero .wp-block-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .koop-actions .wp-block-button,
  .koop-actions .wp-block-button__link,
  .koop-hero .wp-block-buttons .wp-block-button,
  .koop-hero .wp-block-buttons .wp-block-button__link {
    width: 100%;
  }
  .koop-map-frame {
    height: var(--koop-map-height-mobile) !important;
    border-radius: 18px;
  }

  .koop-section {
    padding-block: var(--koop-section-padding-y-mobile);
  }
  .koop-section-heading {
    gap: min(var(--koop-section-content-gap), 18px);
  }

  .koop-cards,
  .koop-steps,
  .koop-pricing-columns,
  .koop-audience-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .koop-cards > *,
  .koop-steps > *,
  .koop-pricing-columns > .wp-block-column,
  .koop-audience-columns > .wp-block-column {
    grid-column: auto !important;
  }

  .koop-card,
  .koop-step,
  .koop-audience-card,
  .koop-pricing-card {
    min-height: 0;
    padding: 26px 22px;
  }

  .koop-video-carousel {
    width: 100%;
    padding-inline: 0;
    margin-top: 30px;
  }
  .koop-video-slide {
    flex-basis: calc(100vw - (var(--koop-page-padding-mobile) * 2));
    width: calc(100vw - (var(--koop-page-padding-mobile) * 2));
  }
  .koop-video-media {
    border-radius: 16px;
  }
  .koop-video-slide h3 {
    margin-top: 14px;
    padding-inline: 6px;
  }

  .koop-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  .koop-brand img { width: 128px; }
  .koop-language { display: none; }

  .koop-actions,
  .koop-hero .wp-block-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .koop-map-frame {
    height: min(var(--koop-map-height-mobile), 72vh) !important;
    min-height: 360px;
  }

  .koop-pricing-card,
  .koop-audience-card,
  .koop-card,
  .koop-step {
    padding: 24px 20px;
  }
}

/* Dostupnost i uređaji bez hovera. */
@media (hover: none) {
  .koop-btn:hover,
  .koop-btn-wrap .wp-block-button__link:hover,
  .koop-pricing-card:hover,
  .koop-audience-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Opcionalni responsive stilovi koje je moguće odabrati u Gutenberg editoru. */
@media (max-width: 1040px) {
  .wp-block-columns.is-style-koop-stack-tablet {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .wp-block-columns.is-style-koop-stack-tablet > .wp-block-column {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .wp-block-group.is-style-koop-row-wrap-tablet {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 720px) {
  .wp-block-columns.is-style-koop-stack-mobile,
  .wp-block-columns.is-style-koop-stack-reverse-mobile {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .wp-block-columns.is-style-koop-stack-reverse-mobile {
    flex-direction: column-reverse !important;
  }
  .wp-block-columns.is-style-koop-stack-mobile > .wp-block-column,
  .wp-block-columns.is-style-koop-stack-reverse-mobile > .wp-block-column {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .wp-block-group.is-style-koop-row-stack-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .wp-block-group.is-style-koop-row-stack-mobile > * {
    width: 100%;
  }
}



/* v1.1 – povezane, dekorativne pozadine bez tvrdih prijelaza */
.koop-section,
.koop-video-section,
.koop-audience-section,
.koop-feature-section,
.koop-pricing-section,
.is-style-koop-white-section,
.is-style-koop-soft-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
}

.koop-section-soft,
.koop-video-section,
.koop-audience-section,
.koop-feature-section,
.koop-feature-section.is-soft,
.koop-pricing-section,
.is-style-koop-white-section,
.is-style-koop-soft-section {
  background-color: transparent;
}

.koop-section::before,
.koop-video-section::before,
.koop-audience-section::before,
.koop-feature-section::before,
.koop-pricing-section::before,
.is-style-koop-white-section::before,
.is-style-koop-soft-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -1px;
  pointer-events: none;
  opacity: 1;
}

.koop-section::after,
.koop-video-section::after,
.koop-audience-section::after,
.koop-feature-section::after,
.koop-pricing-section::after,
.is-style-koop-white-section::after,
.is-style-koop-soft-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--koop-page-bg) 0, transparent 13%, transparent 87%, var(--koop-page-bg) 100%);
}

/* Svaka vrsta sekcije ima drugačiju dekoraciju, ali istu osnovnu boju. */
.koop-section::before,
.is-style-koop-white-section::before {
  background:
    radial-gradient(circle var(--koop-decoration-size) at 12% 48%, rgba(var(--koop-glow-rgb), var(--koop-glow-opacity)), transparent 68%);
}

.koop-section-soft::before,
.is-style-koop-soft-section::before {
  background:
    radial-gradient(circle var(--koop-decoration-size) at 88% 42%, rgba(var(--koop-glow-rgb), var(--koop-glow-opacity)), transparent 68%),
    linear-gradient(rgba(var(--koop-glow-rgb), var(--koop-pattern-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--koop-glow-rgb), var(--koop-pattern-opacity)) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
}

.koop-video-section::before {
  background:
    radial-gradient(circle calc(var(--koop-decoration-size) + 30px) at 88% 18%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .005)), transparent 69%),
    radial-gradient(circle calc(var(--koop-decoration-size) - 130px) at 8% 88%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .045)), transparent 72%);
}

.koop-audience-section::before {
  background:
    radial-gradient(circle calc(var(--koop-decoration-size) - 30px) at 10% 28%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .01)), transparent 70%),
    radial-gradient(circle calc(var(--koop-decoration-size) - 190px) at 92% 82%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .052)), transparent 72%);
}

.koop-feature-section::before {
  background:
    radial-gradient(ellipse calc(var(--koop-decoration-size) + 90px) calc(var(--koop-decoration-size) - 170px) at 50% 50%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .048)), transparent 72%);
}

.koop-pricing-section::before {
  background:
    radial-gradient(circle calc(var(--koop-decoration-size) + 90px) at 50% 88%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .012)), transparent 72%),
    linear-gradient(115deg, transparent 0 47%, rgba(var(--koop-glow-rgb), var(--koop-pattern-opacity)) 47.5% 48%, transparent 48.5% 100%);
  background-size: auto, 78px 78px;
}

/* Tamna sekcija postaje zaobljeni panel na istoj osnovnoj pozadini. */
.is-style-koop-dark-section,
.koop-section-dark {
  color: inherit;
  background: transparent;
}
.is-style-koop-dark-section > .koop-container,
.koop-section-dark > .koop-container {
  padding: clamp(40px, 6vw, 78px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(132,118,255,.42), transparent 34%),
    linear-gradient(135deg, #19182d 0%, #242048 62%, #3524b9 100%);
  box-shadow: 0 30px 80px rgba(31,25,94,.18);
}
.is-style-koop-dark-section > .koop-container h1,
.is-style-koop-dark-section > .koop-container h2,
.is-style-koop-dark-section > .koop-container h3,
.koop-section-dark > .koop-container h1,
.koop-section-dark > .koop-container h2,
.koop-section-dark > .koop-container h3 { color:#fff; }
.is-style-koop-dark-section > .koop-container p,
.koop-section-dark > .koop-container p { color:#d3d1e7; }

/* Ručno birani stilovi pozadine za bilo koji Group blok. */
.is-style-koop-bg-clean,
.is-style-koop-bg-glow-left,
.is-style-koop-bg-glow-right,
.is-style-koop-bg-grid,
.is-style-koop-bg-waves {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
}
.is-style-koop-bg-clean::before,
.is-style-koop-bg-glow-left::before,
.is-style-koop-bg-glow-right::before,
.is-style-koop-bg-grid::before,
.is-style-koop-bg-waves::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.is-style-koop-bg-clean::before { background: transparent; }
.is-style-koop-bg-glow-left::before {
  background: radial-gradient(circle var(--koop-decoration-size) at 8% 50%, rgba(var(--koop-glow-rgb), var(--koop-glow-opacity)), transparent 68%);
}
.is-style-koop-bg-glow-right::before {
  background: radial-gradient(circle var(--koop-decoration-size) at 92% 50%, rgba(var(--koop-glow-rgb), var(--koop-glow-opacity)), transparent 68%);
}
.is-style-koop-bg-grid::before {
  background:
    radial-gradient(circle var(--koop-decoration-size) at 82% 22%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .02)), transparent 68%),
    linear-gradient(rgba(var(--koop-glow-rgb), var(--koop-pattern-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--koop-glow-rgb), var(--koop-pattern-opacity)) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
}
.is-style-koop-bg-waves::before {
  background:
    radial-gradient(ellipse 70% 34% at 16% 20%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .022)), transparent 72%),
    radial-gradient(ellipse 68% 30% at 84% 82%, rgba(var(--koop-glow-rgb), calc(var(--koop-glow-opacity) - .046)), transparent 74%);
}

/* Uklanja eventualne jednopikselne crte između susjednih sekcija. */
.koop-page-sections > .wp-block-group,
.koop-page-sections > section,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > section {
  margin-block-start: 0;
  margin-bottom: -1px;
}

@media (max-width: 640px) {
  :root { --koop-decoration-size: 430px; }
  .is-style-koop-dark-section > .koop-container,
  .koop-section-dark > .koop-container {
    padding: 32px 22px;
    border-radius: 24px;
  }
}

/* =========================================================
   Kooperant Landing 1.2 — Poppins, uređivi stilovi i carousel
   ========================================================= */

body,
.editor-styles-wrapper {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Naslovi, podnaslovi i sadržajni elementi */
.is-style-koop-eyebrow-heading,
.wp-block-heading.is-style-koop-eyebrow-heading {
  margin: 0;
  color: var(--koop-primary);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.is-style-koop-subtitle-text,
.wp-block-paragraph.is-style-koop-subtitle-text {
  margin: 0;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.is-style-koop-body-muted,
.wp-block-paragraph.is-style-koop-body-muted {
  color: var(--koop-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.is-style-koop-feature-list,
.wp-block-list.is-style-koop-feature-list {
  margin: 0;
  padding-left: 1.35em;
  color: #30313c;
  font-size: 16px;
  line-height: 1.55;
}

.is-style-koop-feature-list li + li,
.wp-block-list.is-style-koop-feature-list li + li {
  margin-top: 7px;
}

.is-style-koop-title-stack,
.wp-block-group.is-style-koop-title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px !important;
}

.is-style-koop-title-stack > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.is-style-koop-content-card,
.wp-block-group.is-style-koop-content-card {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(67,45,215,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 48px rgba(31,28,79,.08);
}

.is-style-koop-app-image,
.wp-block-image.is-style-koop-app-image {
  overflow: hidden;
  border: 1px solid rgba(67,45,215,.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(31,28,79,.12);
}

.is-style-koop-app-image img,
.wp-block-image.is-style-koop-app-image img {
  display: block;
  width: 100%;
  height: auto;
}

.wp-block-button.is-style-koop-primary-button .wp-block-button__link {
  color: #fff;
  border: 1px solid var(--koop-primary);
  background: var(--koop-primary);
  box-shadow: 0 12px 28px rgba(67,45,215,.24);
}

.wp-block-button.is-style-koop-primary-button .wp-block-button__link:hover {
  color: #fff;
  border-color: var(--koop-primary-dark);
  background: var(--koop-primary-dark);
}

.wp-block-button.is-style-koop-secondary-button .wp-block-button__link {
  color: var(--koop-ink);
  border: 1px solid #cbc9db;
  background: rgba(255,255,255,.96);
}

.wp-block-button.is-style-koop-secondary-button .wp-block-button__link:hover {
  color: var(--koop-primary-dark);
  border-color: rgba(67,45,215,.48);
}

/* Slika + tekst sekcije */
.koop-feature-columns {
  gap: clamp(36px, 5vw, 72px) !important;
}

.koop-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px !important;
}

.koop-feature-copy .koop-title-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.koop-feature-title {
  margin: 0 !important;
  color: var(--koop-primary);
  font-family: "Poppins", sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}

.koop-feature-subtitle {
  margin: 0 !important;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 500 !important;
  line-height: 1.32 !important;
  letter-spacing: -.014em !important;
}

.koop-feature-image {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Video carousel: uvijek samo jedan cijeli video */
.koop-video-carousel {
  width: min(1180px, calc(100% - 32px));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 64px;
}

.koop-video-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.koop-video-track {
  display: flex;
  align-items: stretch;
  gap: 0 !important;
  width: 100%;
}

.koop-video-slide {
  display: flex;
  flex: 0 0 100% !important;
  flex-direction: column;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.koop-video-slide > h3 {
  order: -1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 24px !important;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.koop-video-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

.koop-video-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #11121a;
}

.koop-video-section .koop-section-heading {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.koop-video-section .koop-section-heading .koop-lead:empty {
  display: none;
}

/* Pretplatnički modeli */
.koop-pricing-section .koop-section-heading {
  text-align: center;
}

.koop-pricing-columns {
  align-items: stretch !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
  margin-top: clamp(36px, 5vw, 58px);
}

.koop-pricing-columns > .wp-block-column {
  display: flex;
}

.koop-pricing-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 20px !important;
  min-height: 100%;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(67,45,215,.15);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 42px rgba(31,28,79,.07);
}

.koop-pricing-card.is-featured {
  border-color: rgba(67,45,215,.62);
  box-shadow: 0 24px 62px rgba(67,45,215,.17);
  transform: translateY(-10px);
}

.koop-pricing-card h3 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.koop-pricing-description {
  min-height: 72px;
  margin: 0 !important;
  color: var(--koop-muted);
  font-size: 15px;
  line-height: 1.6;
}

.koop-price-row {
  align-items: baseline;
  gap: 8px !important;
}

.koop-price {
  margin: 0 !important;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.koop-price-period {
  margin: 0 !important;
  color: var(--koop-muted);
  font-size: 14px;
}

.koop-pricing-card .wp-block-buttons,
.koop-pricing-card .wp-block-button,
.koop-pricing-card .wp-block-button__link {
  width: 100%;
}

.koop-pricing-card .wp-block-button__link {
  justify-content: center;
}

.koop-pricing-card .wp-block-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.koop-pricing-card .wp-block-list li {
  position: relative;
  padding-left: 28px;
  color: #353642;
  font-size: 15px;
  line-height: 1.5;
}

.koop-pricing-card .wp-block-list li + li {
  margin-top: 12px;
}

.koop-pricing-card .wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--koop-primary);
  font-weight: 700;
}

.koop-pricing-badge {
  align-self: flex-start;
  margin: -8px 0 0 !important;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--koop-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .koop-video-carousel {
    width: 100%;
    padding-inline: 50px;
  }

  .koop-pricing-card.is-featured {
    transform: none;
  }
}

@media (max-width: 600px) {
  .koop-video-carousel {
    padding-inline: 0;
  }

  .koop-video-slide > h3 {
    margin-bottom: 18px !important;
    font-size: 19px !important;
  }

  .koop-video-media {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }

  .koop-feature-columns {
    gap: 32px !important;
  }
}


/* =========================================================
   Kooperant Landing 1.3 — video do kraja, timeline i responsive UI
   ========================================================= */

/* Opća sigurnost za responzivno ponašanje svih sekcija. */
.koop-page-sections,
.koop-page-sections > *,
.koop-section,
.koop-section > *,
.koop-container,
.wp-block-columns,
.wp-block-column,
.wp-block-group,
.wp-block-image,
.wp-block-video {
  min-width: 0;
}

.koop-section img,
.koop-section video,
.koop-section iframe,
.koop-section svg {
  max-width: 100%;
}

/* Video carousel — potpuno zatvoren viewport, samo jedan video. */
.koop-video-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 18%, rgba(67,45,215,.10), transparent 31%),
    radial-gradient(circle at 12% 82%, rgba(67,45,215,.05), transparent 27%),
    var(--koop-page-bg);
}

.koop-video-section .koop-section-heading {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.koop-video-section .koop-section-heading h2 {
  max-width: 820px;
  font-size: clamp(28px, 4.5vw, var(--koop-carousel-title-size, 58px));
  line-height: 1.08;
  letter-spacing: -.045em;
}

.koop-video-section .koop-section-heading .koop-lead,
.koop-video-section .koop-section-heading .koop-lead:empty {
  display: none !important;
}

.koop-video-carousel {
  position: relative;
  width: min(1160px, calc(100% - (var(--koop-page-padding) * 2)));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 !important;
}

.koop-video-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
  touch-action: pan-y;
}

.koop-video-viewport::-webkit-scrollbar {
  display: none;
}

.koop-video-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate3d(0,0,0);
  transition: transform .58s cubic-bezier(.22,.78,.24,1);
  will-change: transform;
}

.koop-video-carousel.is-reduced-motion .koop-video-track {
  transition: none;
}

.koop-video-slide {
  position: relative;
  display: flex !important;
  flex: 0 0 100% !important;
  flex-direction: column;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1;
  visibility: visible;
  scroll-snap-align: none;
}

.koop-video-slide[aria-hidden="true"] {
  pointer-events: none;
}

.koop-video-slide > h3 {
  order: -1;
  width: min(940px, 100%);
  max-width: 100%;
  min-height: 2.8em;
  margin: 0 auto clamp(18px, 2.5vw, 28px) !important;
  padding-inline: 68px;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.018em;
  text-align: center;
}

.koop-video-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(rgba(67,45,215,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,45,215,.045) 1px, transparent 1px),
    linear-gradient(135deg, #f8f7ff, #eeeefe);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 24px 70px rgba(29,27,75,.12);
}

.koop-video-media video,
.koop-video-media iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0f1016;
}

/* Frontend video je namjerno bez ugrađenih kontrola. */
body:not(.wp-admin) .koop-video-media video {
  pointer-events: none;
}
body:not(.wp-admin) .koop-video-media video::-webkit-media-controls,
body:not(.wp-admin) .koop-video-media video::-webkit-media-controls-enclosure {
  display: none !important;
  opacity: 0 !important;
}

.koop-carousel-button {
  position: absolute;
  z-index: 8;
  top: calc(50% + 30px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 0 3px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 50%;
  color: #fff;
  background: rgba(27,25,53,.78);
  box-shadow: 0 14px 38px rgba(18,18,40,.24);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 31px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.koop-carousel-button:hover,
.koop-carousel-button:focus-visible {
  background: var(--koop-primary);
  transform: translateY(-50%) scale(1.06);
}

.koop-carousel-prev { left: 18px !important; }
.koop-carousel-next { right: 18px !important; }

.koop-carousel-meta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 18px;
}

.koop-video-progress {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  background: rgba(67,45,215,.15);
}

.koop-video-progress > span {
  display: block;
  width: var(--koop-video-progress, 0%);
  height: 100%;
  background: var(--koop-primary);
  transition: width .18s linear;
}

.koop-carousel-status {
  min-width: 52px;
  color: var(--koop-muted);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.koop-video-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  min-height: 12px;
  margin-top: 18px;
}

.koop-video-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c7c4db;
  transition: width .22s ease, background .22s ease;
}

.koop-video-dot.is-active {
  width: 28px;
  background: var(--koop-primary);
}

/* Istaknuta, potpuno uređiva sekcija. */
.koop-highlight-section {
  position: relative;
  overflow: hidden;
}

.koop-highlight-shell {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
  padding: clamp(30px, 4.2vw, 64px);
  border: 1px solid rgba(67,45,215,.12);
  background: rgba(255,255,255,.82);
  box-shadow: 0 26px 80px rgba(31,28,79,.09);
}

.koop-highlight-media {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background:
    linear-gradient(rgba(67,45,215,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,45,215,.05) 1px, transparent 1px),
    linear-gradient(145deg, #f8f7ff, #eceafd);
  background-size: 38px 38px, 38px 38px, auto;
}

.koop-highlight-media .wp-block-image,
.koop-highlight-media .wp-block-image img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.koop-highlight-media .wp-block-image img {
  min-height: 380px;
  object-fit: cover;
}

.koop-highlight-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px !important;
}

.koop-highlight-copy > * {
  margin-block: 0 !important;
}

.koop-highlight-copy h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.koop-highlight-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.koop-highlight-list li {
  position: relative;
  padding-left: 30px;
  color: #353642;
  font-size: 16px;
  line-height: 1.55;
}

.koop-highlight-list li + li { margin-top: 12px; }
.koop-highlight-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--koop-primary);
  font-weight: 800;
}

/* Timeline sekcija. */
.koop-timeline-section {
  position: relative;
  overflow: hidden;
}

.koop-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(42px, 6vw, 72px);
}

.koop-timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 31px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(67,45,215,.18), var(--koop-primary), rgba(67,45,215,.18));
}

.koop-timeline-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.koop-timeline-marker {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border: 8px solid var(--koop-page-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 12px 30px rgba(67,45,215,.28);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.koop-timeline-card {
  flex: 1;
  width: 100%;
  padding: 26px 22px;
  border: 1px solid rgba(67,45,215,.13);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 40px rgba(31,28,79,.07);
}

.koop-timeline-card h3 {
  margin: 0 0 10px;
  color: var(--koop-ink);
  font-size: 20px;
  line-height: 1.3;
}

.koop-timeline-card p {
  margin: 0;
  color: var(--koop-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Dorađeni pretplatnički modeli. */
.koop-pricing-section {
  position: relative;
  overflow: hidden;
}

.koop-pricing-card {
  overflow: hidden;
  border-radius: 0;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.koop-pricing-card:hover {
  transform: translateY(-6px);
  border-color: rgba(67,45,215,.36);
  box-shadow: 0 28px 70px rgba(31,28,79,.13);
}

.koop-pricing-card.is-featured {
  border-top: 5px solid var(--koop-primary);
  transform: translateY(-10px);
}

/* Responzivnost novih i postojećih sekcija. */
@media (max-width: 1100px) {
  .koop-video-carousel {
    width: min(100%, calc(100% - (var(--koop-page-padding-tablet) * 2)));
  }

  .koop-highlight-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .koop-highlight-media {
    min-height: 340px;
  }

  .koop-timeline {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .koop-timeline::before {
    display: none;
  }
}

@media (max-width: 782px) {
  .koop-video-carousel {
    width: calc(100% - (var(--koop-page-padding-tablet) * 2));
  }

  .koop-video-slide > h3 {
    min-height: 0;
    padding-inline: 56px;
  }

  .koop-carousel-button {
    top: calc(50% + 22px);
    width: 42px;
    height: 42px;
    font-size: 27px;
  }

  .koop-carousel-prev { left: 10px !important; }
  .koop-carousel-next { right: 10px !important; }

  .koop-highlight-shell {
    padding: 26px;
  }

  .koop-pricing-card.is-featured,
  .koop-pricing-card:hover {
    transform: none;
  }
}

@media (max-width: 600px) {
  .koop-video-carousel {
    width: calc(100% - (var(--koop-page-padding-mobile) * 2));
  }

  .koop-video-section .koop-section-heading h2 {
    font-size: clamp(28px, 10vw, var(--koop-carousel-title-size, 58px));
  }

  .koop-video-slide > h3 {
    margin-bottom: 16px !important;
    padding-inline: 0;
    font-size: 18px !important;
    line-height: 1.45;
  }

  .koop-video-media {
    aspect-ratio: 16 / 10;
  }

  .koop-carousel-button {
    top: auto;
    bottom: 29px;
    transform: none;
  }

  .koop-carousel-button:hover,
  .koop-carousel-button:focus-visible {
    transform: scale(1.04);
  }

  .koop-carousel-prev { left: 0 !important; }
  .koop-carousel-next { right: 0 !important; }

  .koop-carousel-meta {
    padding-inline: 52px;
  }

  .koop-video-dots {
    margin-top: 20px;
  }

  .koop-highlight-shell {
    gap: 30px;
    padding: 20px;
  }

  .koop-highlight-media,
  .koop-highlight-media .wp-block-image img {
    min-height: 250px;
  }

  .koop-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 38px;
  }

  .koop-timeline::before {
    display: block;
    top: 26px;
    bottom: 26px;
    left: 25px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(67,45,215,.18), var(--koop-primary), rgba(67,45,215,.18));
  }

  .koop-timeline-item {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    align-items: start;
    gap: 18px;
    padding-bottom: 26px;
    text-align: left;
  }

  .koop-timeline-item:last-child { padding-bottom: 0; }

  .koop-timeline-marker {
    width: 52px;
    height: 52px;
    margin: 0;
    border-width: 6px;
    font-size: 15px;
  }

  .koop-timeline-card {
    padding: 22px 20px;
  }
}


/* =========================================================
   v1.4 — potpuno editabilni header i footer (template parts)
   ========================================================= */
.koop-header .wp-block-site-logo,
.koop-footer .wp-block-site-logo {
  margin: 0;
  line-height: 0;
}
.koop-header .wp-block-site-logo img,
.koop-footer .wp-block-site-logo img {
  display: block;
  width: 178px;
  max-width: 100%;
  height: auto;
}
.koop-header-actions {
  gap: 18px;
}
.koop-main-navigation {
  font-size: .94rem;
  font-weight: 700;
}
.koop-main-navigation .wp-block-navigation-item__content {
  color: var(--koop-ink);
  text-decoration: none;
}
.koop-main-navigation .wp-block-navigation-item__content:hover,
.koop-main-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--koop-primary);
}
.koop-header-buttons,
.koop-header-buttons .wp-block-button,
.koop-header-buttons .wp-block-button__link {
  margin: 0;
}
.koop-header .koop-login-button .wp-block-button__link {
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 10px 24px rgba(67,45,215,.20);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}
.koop-header .koop-login-button .wp-block-button__link:hover {
  background: var(--koop-primary-dark);
}
.koop-header .koop-language {
  margin: 0;
}

.koop-footer-inner {
  width: min(var(--koop-content-width), calc(100% - var(--koop-page-padding) - var(--koop-page-padding)));
  margin-inline: auto;
}
.koop-footer-columns {
  gap: clamp(28px,4vw,68px);
  margin: 0;
}
.koop-footer .wp-block-site-logo img {
  filter: brightness(0) invert(1);
  opacity: .94;
}
.koop-footer-tagline {
  max-width: 540px;
  margin: 16px 0 0;
  color: #c9c9d8;
  line-height: 1.7;
}
.koop-footer-heading {
  margin: 0 0 16px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.koop-footer-navigation {
  gap: 10px;
  align-items: flex-start;
}
.koop-footer-navigation .wp-block-navigation-item__content,
.koop-footer-contact a {
  color: #ddddec;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.5;
}
.koop-footer-navigation .wp-block-navigation-item__content:hover,
.koop-footer-contact a:hover {
  color: #fff;
}
.koop-footer-contact {
  margin: 0 0 18px;
}
.koop-footer-buttons .wp-block-button__link {
  border-color: rgba(255,255,255,.42);
  color: #fff;
  background: transparent;
}
.koop-footer-bottom {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #aeadbf;
  font-size: .86rem;
  gap: 16px 32px;
}
.koop-footer-bottom p {
  margin: 0;
}
.koop-standard-page > * {
  max-width: 900px;
}

@media (max-width: 900px) {
  .koop-header-actions { gap: 10px; }
  .koop-main-navigation .koop-contact-link { display: none; }
  .koop-footer-columns { flex-wrap: wrap !important; }
  .koop-footer-columns > .wp-block-column { flex-basis: calc(50% - 24px) !important; }
  .koop-footer-brand-column { flex-basis: 100% !important; }
}

@media (max-width: 640px) {
  .koop-header .wp-block-site-logo img,
  .koop-footer .wp-block-site-logo img { width: 142px; }
  .koop-header-actions { gap: 7px; }
  .koop-main-navigation { display: none; }
  .koop-header .koop-language { display: none; }
  .koop-header .koop-login-button .wp-block-button__link {
    min-height: 40px;
    padding: 9px 14px;
    font-size: .78rem;
  }
  .koop-footer-inner {
    width: calc(100% - var(--koop-page-padding-mobile) - var(--koop-page-padding-mobile));
  }
  .koop-footer-columns > .wp-block-column { flex-basis: 100% !important; }
  .koop-footer-bottom { align-items: flex-start; }
}


/* =========================================================
   v1.6 — uglađenija slika + tekst sekcija te postavke headera i footera
   ========================================================= */
.koop-header {
  min-height: var(--koop-header-height);
  color: var(--koop-header-text);
  background: var(--koop-header-bg);
  background: color-mix(in srgb, var(--koop-header-bg) 96%, transparent);
}
.koop-header .koop-nav {
  min-height: var(--koop-header-height);
}
.koop-header .koop-main-navigation .wp-block-navigation-item__content,
.koop-header .koop-contact-link,
.koop-header .koop-language {
  color: var(--koop-header-text);
}
.koop-header .koop-main-navigation .wp-block-navigation-item__content:hover,
.koop-header .koop-main-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--koop-primary);
}

.koop-footer {
  color: var(--koop-footer-text);
  background: var(--koop-footer-bg);
  background:
    radial-gradient(circle at 12% 0%, rgba(110, 91, 255, .22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--koop-footer-bg) 92%, #000 8%), var(--koop-footer-bg));
}
.koop-footer-tagline,
.koop-footer-navigation .wp-block-navigation-item__content,
.koop-footer-contact,
.koop-footer-contact a,
.koop-footer-bottom {
  color: var(--koop-footer-text);
}
.koop-footer-heading {
  color: #fff;
}
.koop-footer-bottom {
  border-top-color: color-mix(in srgb, var(--koop-footer-text) 22%, transparent);
}
.koop-footer-navigation .wp-block-navigation-item__content:hover,
.koop-footer-contact a:hover {
  color: #fff;
}

.koop-feature-section {
  padding-block: clamp(68px, 7vw, 104px);
}
.koop-feature-columns {
  align-items: center !important;
  gap: clamp(42px, 6vw, 88px) !important;
}
.koop-feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.koop-feature-image {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(67,45,215,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 20px 60px rgba(40,31,108,.10);
}
.koop-feature-image img {
  width: 100%;
  border-radius: 10px;
}
.koop-feature-copy {
  max-width: 610px;
  gap: 16px !important;
}
.koop-feature-copy .koop-title-stack {
  gap: 5px !important;
}
.koop-feature-title {
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: .055em !important;
}
.koop-feature-subtitle {
  max-width: 590px;
  font-size: clamp(23px, 1.7vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.32 !important;
  letter-spacing: -.018em !important;
}
.koop-feature-copy .wp-block-list,
.koop-feature-copy .is-style-koop-feature-list {
  margin: 5px 0 0 !important;
  padding-left: 22px !important;
  color: var(--koop-muted);
  font-size: 15px !important;
  font-weight: 400;
  line-height: 1.52 !important;
}
.koop-feature-copy .wp-block-list li,
.koop-feature-copy .is-style-koop-feature-list li {
  margin: 0 !important;
}
.koop-feature-copy .wp-block-list li + li,
.koop-feature-copy .is-style-koop-feature-list li + li {
  margin-top: 7px !important;
}
.koop-feature-copy .wp-block-list li::marker,
.koop-feature-copy .is-style-koop-feature-list li::marker {
  color: var(--koop-primary);
  font-size: .9em;
}
.koop-feature-copy .wp-block-buttons {
  margin-top: 12px !important;
}
.koop-feature-copy .wp-block-button__link,
.koop-feature-copy .koop-btn {
  min-height: 44px !important;
  padding: 10px 20px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 9px 22px rgba(67,45,215,.18);
}

@media (max-width: 782px) {
  .koop-feature-section { padding-block: 58px; }
  .koop-feature-columns { gap: 34px !important; }
  .koop-feature-copy { max-width: none; }
  .koop-feature-subtitle { font-size: clamp(22px, 5.5vw, 27px) !important; }
  .koop-feature-image { max-width: 680px; }
}

@media (max-width: 480px) {
  .koop-feature-section { padding-block: 44px; }
  .koop-feature-image { padding: 6px; border-radius: 14px; }
  .koop-feature-copy { gap: 14px !important; }
  .koop-feature-title { font-size: 12px !important; }
  .koop-feature-subtitle { font-size: 22px !important; }
  .koop-feature-copy .wp-block-list,
  .koop-feature-copy .is-style-koop-feature-list { font-size: 14.5px !important; }
  .koop-feature-copy .wp-block-button__link,
  .koop-feature-copy .koop-btn { min-height: 42px !important; padding: 9px 17px !important; }
}


/* =========================================================
   v1.7 — promjenjiva veličina naslova video carousela
   ========================================================= */
.koop-carousel-section-title {
  font-size: clamp(28px, 4.5vw, var(--koop-carousel-title-size, 58px)) !important;
}

@media (max-width: 600px) {
  .koop-carousel-section-title {
    font-size: clamp(28px, 10vw, var(--koop-carousel-title-size, 58px)) !important;
  }
}


/* =========================================================
   v1.8 — kompaktniji SaaS UI inspiriran ritmom InsiderCX-a
   Boje Kooperanta ostaju nepromijenjene.
   ========================================================= */

/* Tipografski ritam */
body,
.editor-styles-wrapper {
  color: var(--koop-ink);
  font-family: var(--koop-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.006em;
}

:where(h1,h2,h3,h4,h5,h6),
:where(.wp-block-heading) {
  text-wrap: balance;
}

:where(.koop-section h2),
:where(.koop-section-heading h2) {
  max-width: 820px;
  font-size: clamp(34px, 3.45vw, 46px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

:where(.koop-kicker),
.is-style-koop-eyebrow-heading,
.wp-block-heading.is-style-koop-eyebrow-heading {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .075em;
}

:where(.koop-lead) {
  max-width: 720px;
  margin-top: 14px;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.008em;
}

/* Kompaktniji vertikalni ritam sekcija */
.koop-section,
.koop-video-section,
.koop-audience-section,
.koop-feature-section,
.koop-pricing-section,
.koop-timeline-section {
  padding-block: clamp(62px, 6.4vw, 84px);
}

.koop-section-heading {
  margin-bottom: clamp(26px, 3vw, 38px);
}

.koop-container {
  width: min(1220px, calc(100% - 56px));
}

/* Header */
.koop-header {
  border-bottom-color: rgba(67,45,215,.11);
  box-shadow: 0 1px 0 rgba(17,18,32,.02);
}
.koop-header .koop-container {
  width: min(1220px, calc(100% - 56px));
}
.koop-nav {
  gap: 22px;
}
.koop-header .wp-block-site-logo img,
.koop-brand img {
  width: 164px;
}
.koop-main-navigation,
.koop-menu a {
  font-size: 14px;
  font-weight: 600;
}
.koop-header .koop-login-button .wp-block-button__link {
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(67,45,215,.16);
}

/* Hero */
.koop-hero {
  padding: 12px 0 30px;
}
.koop-hero-grid {
  min-height: min(760px, calc(100vh - 92px));
  gap: clamp(34px, 4.6vw, 72px);
}
.koop-hero-copy {
  padding-block: 24px;
}
:where(.koop-hero h1) {
  max-width: 650px;
  font-size: clamp(42px, 4.15vw, 62px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.046em;
}
.koop-actions {
  gap: 10px;
  margin-top: 18px;
}
.koop-btn,
.wp-block-button__link {
  min-height: 43px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.koop-benefits {
  margin-top: 16px;
  padding-top: 13px;
}
.koop-benefit {
  min-height: 35px;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.koop-benefit-icon {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.koop-map-frame {
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(30,30,45,.09);
}

/* Kartice i proces */
.koop-cards,
.koop-audience-columns,
.koop-pricing-columns {
  gap: 16px !important;
  margin-top: clamp(28px, 3vw, 38px);
}
.koop-card,
.koop-audience-card,
.koop-pricing-card,
.koop-note-card,
.koop-timeline-card {
  border-color: rgba(23,24,32,.10);
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(31,28,79,.045);
}
.koop-card,
.koop-audience-card {
  padding: 24px;
}
.koop-card-icon,
.koop-audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
:where(.koop-card h3),
:where(.koop-audience-card h3),
.koop-timeline-card h3 {
  margin-top: 17px;
  margin-bottom: 7px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
:where(.koop-card p),
:where(.koop-audience-card p),
.koop-timeline-card p {
  font-size: 14.5px;
  line-height: 1.58;
}
.koop-audience-link {
  margin-top: 16px !important;
}
.koop-audience-link a {
  font-size: 13.5px;
  font-weight: 600;
}
.koop-step {
  min-height: 210px;
  padding: 21px 19px;
  border-radius: 14px;
}
.koop-step-number {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 13px;
}

/* Slika + tekst, u ritmu referentne stranice */
.koop-feature-section {
  padding-block: clamp(62px, 6.5vw, 86px);
}
.koop-feature-columns {
  gap: clamp(42px, 5.5vw, 74px) !important;
}
.koop-feature-image {
  max-width: 590px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.koop-feature-image img {
  border-radius: 0;
}
.koop-feature-copy {
  max-width: 590px;
  gap: 14px !important;
}
.koop-feature-copy .koop-title-stack {
  gap: 7px !important;
}
.koop-feature-title {
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: .075em !important;
}
.koop-feature-subtitle {
  max-width: 570px;
  font-size: clamp(25px, 2.05vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}
.koop-feature-copy .wp-block-paragraph:not(.koop-feature-title) {
  color: var(--koop-muted);
  font-size: 15px;
  line-height: 1.62;
}
.koop-feature-copy .wp-block-list,
.koop-feature-copy .is-style-koop-feature-list {
  margin-top: 2px !important;
  padding-left: 20px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}
.koop-feature-copy .wp-block-list li + li,
.koop-feature-copy .is-style-koop-feature-list li + li {
  margin-top: 5px !important;
}
.koop-feature-copy .wp-block-buttons {
  margin-top: 8px !important;
}

/* Video carousel — čišći, kompaktniji i potpuno zatvoren prikaz */
.koop-video-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(67,45,215,.075), transparent 29%),
    radial-gradient(circle at 8% 90%, rgba(67,45,215,.035), transparent 25%),
    var(--koop-page-bg);
}
.koop-video-section .koop-section-heading {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto clamp(24px, 3vw, 34px);
  text-align: center;
}
.koop-video-section .koop-section-heading::before {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .085em;
}
.koop-video-section .koop-section-heading h2,
.koop-carousel-section-title {
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(32px, 3.65vw, var(--koop-carousel-title-size, 46px)) !important;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.koop-carousel-description {
  max-width: 660px;
  margin: 12px auto 0;
  color: var(--koop-muted);
  font-size: 16px;
  line-height: 1.6;
}
.koop-video-carousel {
  width: min(1080px, calc(100% - 56px));
  padding: 0 !important;
}
.koop-video-viewport {
  border: 1px solid rgba(23,24,32,.11) !important;
  border-radius: 0 !important;
  background: #fff;
  box-shadow: 0 18px 52px rgba(29,27,75,.09);
}
.koop-video-slide > h3 {
  min-height: 0;
  margin: 0 auto 14px !important;
  padding-inline: 52px;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.016em;
}
.koop-video-media {
  border-radius: 0 !important;
  background: #0f1016;
  box-shadow: none;
}
.koop-carousel-button {
  top: calc(50% + 20px);
  width: 40px;
  height: 40px;
  padding-bottom: 2px;
  border: 1px solid rgba(67,45,215,.20);
  color: var(--koop-primary);
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 24px rgba(30,28,74,.12);
  font-size: 25px;
}
.koop-carousel-button:hover,
.koop-carousel-button:focus-visible {
  color: #fff;
  background: var(--koop-primary);
}
.koop-carousel-prev { left: 12px !important; }
.koop-carousel-next { right: 12px !important; }
.koop-carousel-meta {
  gap: 14px;
  margin-top: 13px;
}
.koop-video-progress {
  height: 2px;
}
.koop-carousel-status {
  min-width: 44px;
  font-size: 12px;
  font-weight: 600;
}
.koop-video-dots {
  margin-top: 13px;
}
.koop-video-dot {
  width: 7px;
  height: 7px;
}
.koop-video-dot.is-active {
  width: 20px;
  border-radius: 99px;
}

/* Planovi pretplate */
.koop-pricing-section .koop-section-heading {
  max-width: 760px;
  margin-inline: auto;
}
.koop-pricing-columns {
  margin-top: 32px;
}
.koop-pricing-card {
  gap: 15px !important;
  padding: 26px;
  border-radius: 15px;
}
.koop-pricing-card.is-featured {
  transform: translateY(-5px);
  border-color: rgba(67,45,215,.40);
  box-shadow: 0 18px 42px rgba(67,45,215,.12);
}
.koop-pricing-card h3 {
  font-size: 20px;
  font-weight: 650;
}
.koop-pricing-description {
  min-height: 0;
  font-size: 14px;
  line-height: 1.55;
}
.koop-price {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
}
.koop-pricing-card .wp-block-list li {
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.45;
}
.koop-pricing-card .wp-block-list li + li {
  margin-top: 8px;
}
.koop-pricing-badge {
  margin-top: -4px !important;
  padding: 5px 9px;
  font-size: 11px;
}

/* Timeline */
.koop-timeline {
  margin-top: 34px;
}
.koop-timeline-item {
  gap: 14px;
}
.koop-timeline-marker {
  width: 46px;
  height: 46px;
  font-size: 13px;
}
.koop-timeline-card {
  padding: 20px;
}

/* FAQ */
.koop-faq {
  margin-top: 26px;
}
.koop-faq summary {
  padding-block: 18px;
  font-size: 15px;
  font-weight: 600;
}
:where(.koop-faq details p) {
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Footer */
.koop-footer {
  padding: 48px 0 24px;
}
.koop-footer-columns {
  gap: clamp(24px, 3.5vw, 52px);
}
.koop-footer-heading {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 650;
}
.koop-footer-tagline,
.koop-footer-navigation .wp-block-navigation-item__content,
.koop-footer-contact a {
  font-size: 13.5px;
  line-height: 1.6;
}
.koop-footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  font-size: 12.5px;
}

/* Mobilni ritam */
@media (max-width: 900px) {
  .koop-container,
  .koop-header .koop-container {
    width: min(100% - 40px, 1220px);
  }
  .koop-hero-grid {
    min-height: auto;
    gap: 34px;
  }
  .koop-video-carousel {
    width: min(100% - 40px, 1080px);
  }
  .koop-carousel-button {
    top: auto;
    bottom: 22px;
  }
  .koop-pricing-card.is-featured {
    transform: none;
  }
}

@media (max-width: 600px) {
  .koop-section,
  .koop-video-section,
  .koop-audience-section,
  .koop-feature-section,
  .koop-pricing-section,
  .koop-timeline-section {
    padding-block: 48px;
  }
  .koop-container,
  .koop-header .koop-container {
    width: calc(100% - 28px);
  }
  :where(.koop-section h2),
  :where(.koop-section-heading h2) {
    font-size: clamp(29px, 9vw, 36px);
  }
  :where(.koop-hero h1) {
    font-size: clamp(38px, 11vw, 48px);
  }
  .koop-video-section .koop-section-heading {
    width: calc(100% - 28px);
  }
  .koop-video-carousel {
    width: calc(100% - 28px);
  }
  .koop-video-slide > h3 {
    margin-bottom: 11px !important;
    padding-inline: 0;
    font-size: 16px !important;
  }
  .koop-carousel-button {
    width: 38px;
    height: 38px;
  }
  .koop-carousel-meta {
    padding-inline: 46px;
  }
  .koop-feature-subtitle {
    font-size: 24px !important;
  }
  .koop-card,
  .koop-audience-card,
  .koop-pricing-card,
  .koop-timeline-card {
    padding: 21px;
  }
}

/* =========================================================
   Kooperant Landing 1.9 — interaktivni hero, proširene publike,
   pretplatnički toggle, kompaktniji video UI i ljubičasti footer
   ========================================================= */

/* HERO V2 */
.koop-hero-v2 .koop-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 42px 28px;
}
.koop-hero-eyebrow {
  margin: 0 0 12px !important;
  color: var(--koop-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
}
.koop-hero-summary {
  max-width: 580px;
  margin: 18px 0 0 !important;
  color: var(--koop-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.koop-benefits-editable {
  display: grid;
  gap: 8px !important;
  width: 100%;
}
.koop-benefit-editable {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 36px;
  margin: 0 !important;
}
.koop-benefit-editable .wp-block-image {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0 !important;
}
.koop-benefit-editable .wp-block-image img {
  display: block;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px;
}
.koop-benefit-editable p {
  margin: 0 !important;
  color: #30313b;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.koop-map-demo-card {
  overflow: hidden;
  border: 1px solid rgba(67,45,215,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 60px rgba(31,29,75,.12);
}
.koop-map-demo-intro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(67,45,215,.12);
  background: linear-gradient(135deg, #fff 0%, #f7f5ff 100%);
}
.koop-map-demo-copy {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  min-width: 0;
}
.koop-map-demo-eyebrow {
  margin: 0 !important;
  color: var(--koop-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
}
.koop-map-demo-title {
  margin: 0 !important;
  color: var(--koop-ink);
  font-size: clamp(17px,1.5vw,21px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.018em !important;
}
.koop-map-demo-text {
  max-width: 700px;
  margin: 0 !important;
  color: var(--koop-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.koop-map-demo-badge {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 8px 11px;
  border: 1px solid rgba(67,45,215,.18);
  border-radius: 999px;
  color: var(--koop-primary);
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.koop-map-demo-card .koop-map-frame {
  height: var(--koop-map-height) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* KOME JE NAMIJENJEN — PROŠIRENE KARTICE */
.koop-audience-wide,
.koop-pricing-wide {
  width: min(1360px, calc(100% - (var(--koop-page-padding) * 2))) !important;
  max-width: 1360px !important;
}
.koop-audience-columns-detailed {
  align-items: stretch !important;
  gap: clamp(18px,2vw,28px) !important;
  margin-top: 38px;
}
.koop-audience-columns-detailed > .wp-block-column {
  display: flex;
}
.koop-audience-card-detailed {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-height: 500px;
  padding: 30px;
  text-align: left;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(67,45,215,.045), transparent 120px),
    #fff;
}
.koop-audience-card-top {
  min-height: 64px;
  margin-bottom: 18px;
}
.koop-audience-icon-image {
  flex: 0 0 64px;
  margin: 0 !important;
}
.koop-audience-icon-image img {
  display: block;
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px;
}
.koop-audience-label {
  max-width: 150px;
  margin: 0 !important;
  color: var(--koop-primary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .075em;
  text-align: right;
}
.koop-audience-card-detailed h3 {
  margin: 0 0 12px !important;
  font-size: clamp(20px,1.7vw,25px) !important;
  line-height: 1.22 !important;
  text-align: left;
}
.koop-audience-intro {
  margin: 0 0 20px !important;
  color: var(--koop-muted) !important;
  font-size: 14px;
  line-height: 1.62 !important;
}
.koop-audience-card-detailed .wp-block-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.koop-audience-card-detailed .wp-block-list li {
  position: relative;
  padding-left: 22px;
  color: #343541;
  font-size: 13.5px;
  line-height: 1.5;
}
.koop-audience-card-detailed .wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--koop-primary);
  font-weight: 700;
}
.koop-audience-actions {
  margin-top: auto !important;
  padding-top: 24px;
}
.koop-audience-actions .wp-block-button__link {
  min-height: 42px;
  padding-inline: 17px;
  font-size: 13px;
  font-weight: 600;
}

/* PRETPLATNIČKI TOGGLE I PROŠIRENE KARTICE */
.koop-pricing-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 26px auto 0;
  padding: 4px;
  border: 1px solid rgba(67,45,215,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(31,29,75,.06);
  font-size: 13px;
  font-weight: 600;
}
.koop-pricing-toggle button {
  min-height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: #565765;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.koop-pricing-toggle button.is-active {
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 5px 16px rgba(67,45,215,.25);
}
.koop-pricing-saving {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 4px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--koop-primary);
  background: #eeebff;
  font-size: .88em;
  font-weight: 600;
  white-space: nowrap;
}
.koop-pricing-columns-v2 {
  gap: clamp(20px,2.2vw,30px) !important;
  margin-top: 34px !important;
}
.koop-pricing-card-v2 {
  gap: 14px !important;
  min-height: 620px;
  padding: 30px;
  border-radius: 18px;
}
.koop-pricing-card-v2.is-featured {
  transform: translateY(-7px);
}
.koop-plan-label {
  margin: 0 !important;
  color: var(--koop-primary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
}
.koop-pricing-price {
  margin-top: 8px;
  font-size: clamp(38px,3.6vw,52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.koop-pricing-price .koop-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.koop-pricing-price .koop-price {
  margin: 0 !important;
  font: inherit;
  color: var(--koop-ink);
}
.koop-pricing-price .koop-price-period {
  margin: 0 !important;
  color: var(--koop-muted);
  font-size: .28em;
  font-weight: 500;
  letter-spacing: 0;
}
.koop-price-note {
  min-height: 20px;
  margin: 8px 0 0 !important;
  color: var(--koop-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
.koop-price-note[hidden] { display: none !important; }
.koop-plan-includes {
  margin: 0 !important;
  color: var(--koop-ink);
  font-size: 12px;
  font-weight: 650;
}
.koop-pricing-price-editor {
  padding: 14px;
  border: 1px dashed rgba(67,45,215,.35);
  border-radius: 12px;
}
.koop-pricing-price-preview-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

/* VIDEO — kompaktniji naslov sekcije i jasniji naslov svakog videa */
.koop-video-section .koop-section-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(900px, calc(100% - 32px));
  margin: 0 auto 28px;
  text-align: center;
}
.koop-video-section .koop-section-heading::before {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 auto 2px;
  padding: 0 11px;
  border: 1px solid rgba(67,45,215,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  box-shadow: 0 6px 18px rgba(31,29,75,.05);
}
.koop-video-section .koop-section-heading h2 {
  margin: 0 !important;
  font-size: clamp(31px,4vw,var(--koop-carousel-title-size,52px));
  line-height: 1.08;
}
.koop-video-track { counter-reset: koop-video-slide; }
.koop-video-slide { counter-increment: koop-video-slide; }
.koop-video-slide > h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(67,45,215,.13);
  border-bottom: 0;
  color: var(--koop-ink);
  background: rgba(255,255,255,.95);
  font-size: clamp(15px,1.35vw,18px) !important;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-align: left;
}
.koop-video-slide > h3::before {
  content: counter(koop-video-slide, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  color: #fff;
  background: var(--koop-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.koop-video-media {
  border: 1px solid rgba(67,45,215,.13) !important;
  border-top: 0 !important;
}

/* FOOTER V2 — zadana Kooperant ljubičasta */
.koop-footer-v2,
.koop-footer {
  color: var(--koop-footer-text, #fff);
  background: var(--koop-footer-bg, #432DD7) !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 92% 100%, rgba(255,255,255,.08), transparent 28%) !important;
}
.koop-footer-v2 {
  padding: 50px 0 22px;
}
.koop-footer-cta-row {
  gap: 32px !important;
  padding-bottom: 38px;
}
.koop-footer-cta-copy {
  max-width: 720px;
}
.koop-footer-eyebrow {
  margin: 0 0 8px !important;
  color: rgba(255,255,255,.72);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
}
.koop-footer-cta-title {
  margin: 0 !important;
  color: #fff;
  font-size: clamp(24px,2.8vw,38px) !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
}
.koop-footer-cta-text {
  margin: 10px 0 0 !important;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.6;
}
.koop-footer-cta-buttons {
  flex: 0 0 auto;
}
.koop-footer-primary-button .wp-block-button__link {
  min-height: 43px;
  padding-inline: 18px;
  color: var(--koop-primary) !important;
  background: #fff !important;
  font-size: 13px;
  font-weight: 650;
}
.koop-footer-outline-button .wp-block-button__link {
  min-height: 43px;
  padding-inline: 18px;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 600;
}
.koop-footer-divider {
  width: 100%;
  margin: 0 0 34px !important;
  border-color: rgba(255,255,255,.22) !important;
}
.koop-footer-columns {
  gap: clamp(28px,4vw,64px) !important;
}
.koop-footer-logo img,
.koop-footer .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}
.koop-footer-heading {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.koop-footer-tagline,
.koop-footer-navigation .wp-block-navigation-item__content,
.koop-footer-contact,
.koop-footer-contact a,
.koop-footer-bottom,
.koop-footer-bottom p {
  color: rgba(255,255,255,.78) !important;
}
.koop-footer-navigation .wp-block-navigation-item__content:hover,
.koop-footer-contact a:hover {
  color: #fff !important;
}
.koop-footer-bottom {
  border-top-color: rgba(255,255,255,.20) !important;
}

@media (max-width: 1080px) {
  .koop-map-demo-intro {
    align-items: flex-start !important;
  }
  .koop-map-demo-badge {
    display: none;
  }
  .koop-audience-columns-detailed {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .koop-audience-columns-detailed > .wp-block-column:last-child {
    grid-column: 1 / -1;
  }
  .koop-audience-card-detailed {
    min-height: 460px;
  }
}

@media (max-width: 900px) {
  .koop-hero-v2 .koop-hero-copy { padding-top: 26px; }
  .koop-map-demo-card .koop-map-frame { height: var(--koop-map-height-tablet) !important; }
  .koop-audience-wide,
  .koop-pricing-wide {
    width: calc(100% - 40px) !important;
  }
  .koop-pricing-columns-v2 {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .koop-pricing-columns-v2 > .wp-block-column:last-child {
    grid-column: 1 / -1;
  }
  .koop-pricing-card-v2 { min-height: auto; }
  .koop-footer-cta-row {
    align-items: flex-start !important;
  }
}

@media (max-width: 720px) {
  .koop-map-demo-intro {
    padding: 17px;
  }
  .koop-map-demo-text { display: none; }
  .koop-map-demo-card .koop-map-frame { height: var(--koop-map-height-mobile) !important; }
  .koop-audience-wide,
  .koop-pricing-wide {
    width: calc(100% - 28px) !important;
  }
  .koop-audience-columns-detailed,
  .koop-pricing-columns-v2 {
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .koop-audience-columns-detailed > .wp-block-column:last-child,
  .koop-pricing-columns-v2 > .wp-block-column:last-child {
    grid-column: auto;
  }
  .koop-audience-card-detailed {
    min-height: auto;
    padding: 24px;
  }
  .koop-pricing-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 14px;
  }
  .koop-pricing-toggle button {
    width: 100%;
    padding-inline: 10px;
  }
  .koop-pricing-saving {
    grid-column: 1 / -1;
    justify-content: center;
    margin: 2px 0 0;
  }
  .koop-video-slide > h3 {
    min-height: 50px;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .koop-video-slide > h3::before {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  .koop-footer-cta-row {
    display: grid !important;
  }
  .koop-footer-cta-buttons,
  .koop-footer-cta-buttons .wp-block-button,
  .koop-footer-cta-buttons .wp-block-button__link {
    width: 100%;
  }
  .koop-footer-cta-buttons .wp-block-button__link {
    justify-content: center;
  }
}

/* =========================================================
   Kooperant Landing 2.0 — ispravni slika+tekst obrasci i
   proširena sekcija "Predstavite tvrtku"
   ========================================================= */

/* Pouzdan, uredan prikaz svih slika u novim slika+tekst obrascima. */
.koop-media-text .koop-feature-image,
.koop-company-presentation__image {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(67,45,215,.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(31,29,75,.10);
}
.koop-media-text .koop-feature-image img,
.koop-company-presentation__image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  border-radius: inherit;
}
.koop-media-text .koop-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px !important;
}
.koop-media-text .koop-feature-title,
.koop-company-presentation .koop-feature-title {
  margin: 0 !important;
  color: var(--koop-primary);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase;
}
.koop-media-text .koop-feature-subtitle {
  margin: 0 !important;
  color: var(--koop-ink);
  font-size: clamp(27px, 2.45vw, 38px) !important;
  font-weight: 550 !important;
  line-height: 1.18 !important;
  letter-spacing: -.035em !important;
}
.koop-media-text .koop-feature-lead {
  max-width: 620px;
  margin: 2px 0 0 !important;
  color: var(--koop-muted);
  font-size: 15px;
  line-height: 1.62;
}
.koop-media-text .wp-block-list {
  margin: 2px 0 0 !important;
}
.koop-media-text .wp-block-buttons {
  margin-top: 6px !important;
}

/* Predstavite tvrtku — posebna uređiva sekcija. */
.koop-company-presentation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 96px);
  background:
    radial-gradient(circle at 12% 20%, rgba(67,45,215,.075), transparent 28%),
    radial-gradient(circle at 90% 82%, rgba(67,45,215,.04), transparent 25%),
    var(--koop-page-bg);
}
.koop-company-presentation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(67,45,215,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,45,215,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.koop-company-presentation__columns {
  gap: clamp(44px, 6vw, 82px) !important;
}
.koop-company-presentation__media {
  min-width: 0;
}
.koop-company-presentation__image {
  box-shadow: 0 26px 70px rgba(31,29,75,.13);
}
.koop-company-presentation__labels {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px !important;
  margin: 12px 0 0 !important;
}
.koop-company-presentation__labels > .wp-block-column {
  min-width: 0;
  margin: 0 !important;
  flex-basis: auto !important;
}
.koop-company-label {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 10px 11px 10px 31px;
  border: 1px solid rgba(67,45,215,.11);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(31,29,75,.045);
}
.koop-company-label::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--koop-primary);
  box-shadow: 0 0 0 5px rgba(67,45,215,.09);
  transform: translateY(-50%);
}
.koop-company-label p {
  margin: 0 !important;
  color: #353642;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
.koop-company-presentation__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px !important;
  max-width: 610px;
}
.koop-company-presentation__title {
  margin: 0 !important;
  color: var(--koop-ink);
  font-size: clamp(30px, 2.7vw, 42px) !important;
  font-weight: 550 !important;
  line-height: 1.16 !important;
  letter-spacing: -.038em !important;
}
.koop-company-presentation__lead {
  margin: 0 !important;
  color: var(--koop-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.koop-company-presentation__list {
  margin: 0 !important;
  padding-left: 21px !important;
  color: #41424e;
  font-size: 14.5px !important;
  line-height: 1.52 !important;
}
.koop-company-presentation__list li + li {
  margin-top: 6px !important;
}
.koop-company-presentation__copy .wp-block-buttons {
  margin-top: 7px !important;
}
.koop-company-presentation__copy .wp-block-button__link {
  min-height: 44px;
  padding: 10px 19px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 980px) {
  .koop-media-text .koop-feature-columns,
  .koop-company-presentation__columns {
    flex-wrap: wrap !important;
  }
  .koop-media-text .koop-feature-columns > .wp-block-column,
  .koop-company-presentation__columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .koop-media-text .koop-feature-image,
  .koop-company-presentation__media,
  .koop-company-presentation__copy {
    max-width: 760px;
    margin-inline: auto;
  }
  .koop-company-presentation__labels {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .koop-media-text .koop-feature-columns,
  .koop-company-presentation__columns {
    gap: 30px !important;
  }
  .koop-media-text .koop-feature-subtitle,
  .koop-company-presentation__title {
    font-size: 27px !important;
  }
  .koop-company-presentation {
    padding-block: 48px;
  }
  .koop-company-presentation__labels {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px !important;
  }
  .koop-company-label {
    min-height: 48px;
  }
}


/* ============================================================
   Kooperant Landing 2.1 — izbor ponašanja headera, timeline
   varijante, moderni obrasci i usklađen video okvir
   ============================================================ */

/* Header se po zadanom pomiče sa stranicom. Sticky se uključuje u
   Izgled → Kooperant postavke → Zaglavlje i podnožje. */
.koop-header {
  position: relative;
  top: auto;
}
body.koop-header-sticky .koop-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(26, 24, 68, .08);
}
body.admin-bar.koop-header-sticky .koop-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.koop-header-sticky .koop-header { top: 46px; }
}

/* Naslov videozapisa i video sada imaju potpuno isti vanjski rub. */
.koop-video-viewport {
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 20px 60px rgba(31, 28, 79, .10);
}
.koop-video-slide > h3 {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid rgba(67, 45, 215, .15) !important;
  border-bottom: 0 !important;
}
.koop-video-media {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid rgba(67, 45, 215, .15) !important;
  border-top: 0 !important;
}

/* Zajednički naslov novih sekcija. */
.koop-modern-heading {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vw, 58px);
  text-align: center;
}
.koop-modern-heading > * { margin: 0 !important; }
.koop-modern-heading h2 {
  font-size: clamp(31px, 4vw, 50px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.038em;
}
.koop-modern-heading p:last-child {
  color: var(--koop-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.65;
}

/* Timeline 1: kompaktni horizontalni koraci. */
.koop-timeline-compact {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.koop-timeline-compact::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(67,45,215,.10), rgba(67,45,215,.62), rgba(67,45,215,.10));
}
.koop-timeline-compact-item {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  text-align: center;
}
.koop-timeline-compact-marker {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 7px solid var(--koop-page-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--koop-primary);
  box-shadow: 0 9px 24px rgba(67,45,215,.23);
  font-size: 12px;
  font-weight: 700;
}
.koop-timeline-compact-item h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}
.koop-timeline-compact-item p:last-child {
  margin: 0;
  color: var(--koop-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Timeline 2: vertikalni naizmjenični prikaz. */
.koop-timeline-vertical {
  position: relative;
  display: grid;
  gap: 20px;
  max-width: 1040px;
  margin-inline: auto;
}
.koop-timeline-vertical::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(67,45,215,.10), var(--koop-primary), rgba(67,45,215,.10));
  transform: translateX(-50%);
}
.koop-timeline-vertical-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}
.koop-timeline-vertical-card {
  padding: 22px 24px;
  border: 1px solid rgba(67,45,215,.12);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 38px rgba(31,28,79,.07);
}
.koop-timeline-vertical-item:nth-child(odd) .koop-timeline-vertical-card { grid-column: 1; }
.koop-timeline-vertical-item:nth-child(even) .koop-timeline-vertical-card { grid-column: 3; }
.koop-timeline-vertical-item:nth-child(odd) .koop-timeline-vertical-marker,
.koop-timeline-vertical-item:nth-child(even) .koop-timeline-vertical-marker { grid-column: 2; grid-row: 1; }
.koop-timeline-vertical-marker {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline: auto;
  border: 6px solid var(--koop-page-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--koop-primary);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(67,45,215,.25);
}
.koop-timeline-vertical-card > * { margin-block: 0 !important; }
.koop-timeline-vertical-card h3 {
  margin-bottom: 7px !important;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}
.koop-timeline-vertical-card p {
  color: var(--koop-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Timeline 3: roadmap po fazama. */
.koop-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.koop-roadmap-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(67,45,215,.13);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(31,28,79,.07);
}
.koop-roadmap-phase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--koop-primary), #7668f6);
}
.koop-roadmap-number {
  width: max-content;
  margin: 0 0 18px !important;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--koop-primary);
  background: rgba(67,45,215,.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
}
.koop-roadmap-phase h3 {
  margin: 0 0 9px;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.25;
}
.koop-roadmap-phase > p:not(.koop-roadmap-number) {
  margin: 0 0 20px;
  color: var(--koop-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.koop-roadmap-phase ul {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(67,45,215,.10);
  list-style: none;
}
.koop-roadmap-phase li {
  position: relative;
  padding-left: 22px;
  color: #373743;
  font-size: 14px;
  line-height: 1.5;
}
.koop-roadmap-phase li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--koop-primary);
  font-weight: 800;
}

/* Moderna sekcija: bento mreža funkcionalnosti. */
.koop-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.koop-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 238px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(67,45,215,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 46px rgba(31,28,79,.07);
}
.koop-bento-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,45,215,.13), transparent 68%);
  pointer-events: none;
}
.koop-bento-card.is-large { grid-column: span 7; min-height: 310px; }
.koop-bento-card.is-medium { grid-column: span 5; min-height: 310px; }
.koop-bento-card.is-third { grid-column: span 4; }
.koop-bento-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 24px !important;
  border-radius: 11px;
  color: #fff;
  background: var(--koop-primary);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 9px 22px rgba(67,45,215,.20);
}
.koop-bento-card h3 {
  margin: auto 0 8px;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.koop-bento-card p:last-child {
  margin: 0;
  max-width: 540px;
  color: var(--koop-muted);
  font-size: 14.5px;
  line-height: 1.62;
}

/* Moderna sekcija: brojke i povjerenje. */
.koop-proof-shell {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: stretch;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid rgba(67,45,215,.12);
  background: rgba(255,255,255,.90);
  box-shadow: 0 22px 64px rgba(31,28,79,.08);
}
.koop-proof-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px !important;
}
.koop-proof-copy > * { margin: 0 !important; }
.koop-proof-copy h2 {
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.038em;
}
.koop-proof-copy p:not(.koop-kicker) {
  color: var(--koop-muted);
  font-size: 16px;
  line-height: 1.65;
}
.koop-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.koop-proof-stat {
  min-width: 0;
  padding: 23px;
  border: 1px solid rgba(67,45,215,.11);
  background: linear-gradient(145deg, rgba(250,250,255,.95), #fff);
}
.koop-proof-value {
  margin: 0 0 6px !important;
  color: var(--koop-primary);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.koop-proof-label {
  margin: 0 !important;
  color: #3f3f4b;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 1050px) {
  .koop-timeline-compact { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 28px; }
  .koop-timeline-compact::before { display: none; }
  .koop-roadmap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .koop-roadmap-phase:last-child { grid-column: 1 / -1; }
  .koop-bento-card.is-large,
  .koop-bento-card.is-medium { grid-column: span 6; }
  .koop-bento-card.is-third { grid-column: span 4; }
  .koop-proof-shell { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
  .koop-timeline-compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .koop-timeline-vertical::before { left: 22px; transform: none; }
  .koop-timeline-vertical-item {
    grid-template-columns: 46px minmax(0,1fr);
    gap: 14px;
  }
  .koop-timeline-vertical-item:nth-child(n) .koop-timeline-vertical-marker {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }
  .koop-timeline-vertical-item:nth-child(n) .koop-timeline-vertical-card {
    grid-column: 2;
    grid-row: 1;
  }
  .koop-roadmap-grid { grid-template-columns: 1fr; }
  .koop-roadmap-phase:last-child { grid-column: auto; }
  .koop-bento-card.is-large,
  .koop-bento-card.is-medium,
  .koop-bento-card.is-third { grid-column: span 6; min-height: 230px; }
  .koop-proof-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .koop-timeline-compact { grid-template-columns: 1fr; gap: 0; }
  .koop-timeline-compact-item {
    grid-template-columns: 46px minmax(0,1fr);
    gap: 0 15px;
    padding-bottom: 24px;
    text-align: left;
  }
  .koop-timeline-compact-marker { grid-row: 1 / span 2; margin: 0; }
  .koop-timeline-compact-item h3 { align-self: end; }
  .koop-timeline-compact-item p:last-child { align-self: start; }
  .koop-timeline-vertical-card { padding: 19px; }
  .koop-bento-grid { grid-template-columns: 1fr; }
  .koop-bento-card.is-large,
  .koop-bento-card.is-medium,
  .koop-bento-card.is-third { grid-column: auto; min-height: 220px; }
  .koop-proof-shell { padding: 20px; }
  .koop-proof-stats { grid-template-columns: 1fr; }
}

/* =========================================================
   Kooperant Landing 2.2 — hero prilagođen visini zaslona
   Bez novih blokova i bez novih tekstova.
   ========================================================= */

/* Hero i header zajedno stanu u visinu zaslona na većim ekranima. */
@media (min-width: 1041px) {
  .koop-hero-v2 {
    padding-block: 0;
  }

  .koop-hero-v2 .koop-container {
    width: min(1600px, calc(100% - 56px));
  }

  .koop-hero-v2 .koop-hero-grid {
    min-height: calc(100svh - var(--koop-header-height));
    grid-template-columns: minmax(380px, 29%) minmax(0, 1fr);
    gap: clamp(30px, 3vw, 52px);
    align-items: stretch;
    padding-block: 18px;
  }

  .admin-bar .koop-hero-v2 .koop-hero-grid {
    min-height: calc(100svh - var(--koop-header-height) - 32px);
  }

  .koop-hero-v2 .koop-hero-copy {
    align-self: center;
    justify-content: center;
    padding-block: 24px;
  }

  /* Referentni prikaz nema dodatni nadnaslov iznad glavnog hero naslova. */
  .koop-hero-v2 .koop-hero-eyebrow {
    display: none;
  }

  .koop-hero-v2 h1 {
    max-width: 490px;
    font-size: clamp(42px, 3.15vw, 55px);
    line-height: 1.15;
    letter-spacing: -0.045em;
  }

  .koop-hero-v2 .koop-hero-summary {
    max-width: 480px;
    margin-top: 20px !important;
    font-size: 14px;
    line-height: 1.55;
  }

  .koop-hero-v2 .koop-actions {
    margin-top: 16px;
  }

  .koop-hero-v2 .koop-benefits {
    max-width: 480px;
    margin-top: 14px;
    padding-top: 12px;
  }

  .koop-hero-v2 .koop-benefit-editable {
    min-height: 32px;
  }

  .koop-hero-v2 .koop-benefit-editable p {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .koop-hero-v2 .koop-hero-map-column {
    display: flex;
    min-height: 0;
    align-items: stretch;
  }

  .koop-hero-v2 .koop-map-demo-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100svh - var(--koop-header-height) - 36px);
    border-radius: 20px;
  }

  .admin-bar .koop-hero-v2 .koop-map-demo-card {
    max-height: calc(100svh - var(--koop-header-height) - 68px);
  }

  .koop-hero-v2 .koop-map-demo-intro {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 13px 16px;
  }

  .koop-hero-v2 .koop-map-demo-copy {
    gap: 2px !important;
  }

  .koop-hero-v2 .koop-map-demo-eyebrow {
    font-size: 9px;
  }

  .koop-hero-v2 .koop-map-demo-title {
    font-size: clamp(15px, 1.2vw, 18px) !important;
  }

  /* Postojeći opis ostaje u sadržaju, ali se u kompaktnom hero prikazu ne prikazuje. */
  .koop-hero-v2 .koop-map-demo-text {
    display: none;
  }

  .koop-hero-v2 .koop-map-demo-badge {
    padding: 7px 10px;
    font-size: 10px;
  }

  .koop-hero-v2 .koop-map-demo-card .koop-map-frame {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
}

/* Na nižim laptopima dodatno se smanjuju naslov i karta bez horizontalnog reza. */
@media (min-width: 1041px) and (max-height: 760px) {
  .koop-hero-v2 .koop-hero-grid {
    padding-block: 10px;
  }

  .koop-hero-v2 h1 {
    font-size: clamp(38px, 3vw, 49px);
  }

  .koop-hero-v2 .koop-hero-summary {
    margin-top: 14px !important;
    font-size: 13px;
  }

  .koop-hero-v2 .koop-actions {
    margin-top: 13px;
  }

  .koop-hero-v2 .koop-benefits {
    margin-top: 11px;
    padding-top: 10px;
  }

  .koop-hero-v2 .koop-benefit-editable {
    min-height: 28px;
  }

  .koop-hero-v2 .koop-map-demo-intro {
    min-height: 58px;
    padding-block: 10px;
  }
}

/* Tablet i mobitel ostaju prirodne visine kako se sadržaj ne bi rezao. */
@media (max-width: 1040px) {
  .koop-hero-v2 .koop-hero-grid {
    min-height: auto;
    padding-block: 0 36px;
  }

  .koop-hero-v2 .koop-map-demo-card {
    max-height: none;
  }
}

/* =========================================================
   Kome je Kooperant namijenjen – interaktivne journey sekcije
   ========================================================= */
.koop-audience-journey {
  position: relative;
  isolation: isolate;
}

.koop-audience-journey .koop-section-heading {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.koop-role-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 20px;
}

.koop-role-trigger {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(67, 45, 215, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 28px rgba(31, 28, 78, .05);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.koop-role-trigger:hover,
.koop-role-trigger:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(67, 45, 215, .38);
  box-shadow: 0 16px 34px rgba(45, 34, 132, .10);
  outline: none;
}

.koop-role-trigger.is-active {
  color: var(--koop-white);
  border-color: var(--koop-primary);
  background: linear-gradient(135deg, var(--koop-primary), #6756ef);
  box-shadow: 0 18px 40px rgba(67, 45, 215, .24);
}

.koop-role-trigger .wp-block-image {
  flex: 0 0 auto;
  margin: 0;
}

.koop-role-trigger img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  border-radius: 12px;
}

.koop-role-trigger.is-active img {
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 6px rgba(255,255,255,.10);
}

.koop-role-trigger p,
.koop-role-trigger h3 {
  margin: 0;
}

.koop-role-trigger .koop-role-label {
  color: var(--koop-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.koop-role-trigger.is-active .koop-role-label,
.koop-role-trigger.is-active h3,
.koop-role-trigger.is-active p {
  color: var(--koop-white);
}

.koop-role-trigger h3 {
  margin-top: 3px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.22;
}

.koop-role-panels {
  min-width: 0;
}

.koop-audience-journey.is-enhanced .koop-role-panel:not(.is-active),
.koop-audience-journey-accordion.is-enhanced .koop-audience-accordion-panel[hidden] {
  display: none !important;
}

.koop-role-panel {
  border: 1px solid rgba(67, 45, 215, .13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(67,45,215,.09), transparent 34%),
    rgba(255,255,255,.88);
  box-shadow: 0 22px 62px rgba(34, 31, 84, .09);
  overflow: hidden;
}

.koop-role-panel-inner {
  padding: clamp(24px, 4vw, 46px);
}

.koop-role-panel-intro {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: end;
  margin-bottom: 34px;
}

.koop-role-panel-intro h3 {
  margin: 5px 0 0;
  font-size: clamp(27px, 3.1vw, 42px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.koop-role-panel-intro p {
  margin: 0;
  color: var(--koop-muted);
  font-size: 16px;
  line-height: 1.65;
}

.koop-journey-horizontal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.koop-journey-horizontal::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 21px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(67,45,215,.15), rgba(67,45,215,.72), rgba(67,45,215,.15));
}

.koop-journey-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 10px 16px;
}

.koop-journey-step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border: 6px solid #f8f7ff;
  border-radius: 50%;
  background: var(--koop-primary);
  color: var(--koop-white);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(67,45,215,.22);
}

.koop-journey-step h4 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.28;
}

.koop-journey-step p:not(.koop-journey-step-number) {
  margin: 0;
  color: var(--koop-muted);
  font-size: 13px;
  line-height: 1.52;
}

/* Varijanta 2 – navigator lijevo, timeline desno */
.koop-audience-journey-split .koop-audience-split-shell {
  display: grid;
  grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.koop-audience-journey-split .koop-role-selector {
  grid-template-columns: 1fr;
  align-content: start;
  margin: 0;
}

.koop-audience-journey-split .koop-role-trigger {
  min-height: 118px;
}

.koop-audience-journey-split .koop-role-panel {
  height: 100%;
}

.koop-audience-journey-split .koop-role-panel-inner {
  height: 100%;
}

.koop-audience-journey-split .koop-role-panel-intro {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.koop-journey-vertical {
  position: relative;
  display: grid;
  gap: 4px;
}

.koop-journey-vertical::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 21px;
  width: 2px;
  background: linear-gradient(var(--koop-primary), rgba(67,45,215,.13));
}

.koop-journey-vertical .koop-journey-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  padding: 0 0 17px;
}

.koop-journey-vertical .koop-journey-step-number {
  grid-row: 1 / span 2;
  margin: 0;
}

.koop-journey-vertical .koop-journey-step h4 {
  margin-top: 3px;
}

/* Varijanta 3 – accordion cards */
.koop-audience-accordion-cards {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.koop-audience-accordion-card {
  min-width: 0;
  flex: 1 1 0;
  border: 1px solid rgba(67,45,215,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  overflow: hidden;
  transition: flex .35s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.koop-audience-accordion-card.is-active {
  flex: 2.2 1 0;
  border-color: rgba(67,45,215,.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(67,45,215,.11), transparent 34%),
    #fff;
  box-shadow: 0 22px 60px rgba(34,31,84,.10);
}

.koop-audience-accordion-trigger {
  min-height: 166px;
  padding: 22px;
  cursor: pointer;
  outline: none;
}

.koop-audience-accordion-trigger:hover,
.koop-audience-accordion-trigger:focus-visible {
  background: rgba(67,45,215,.035);
}

.koop-audience-accordion-trigger .wp-block-image {
  margin: 0 0 18px;
}

.koop-audience-accordion-trigger img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
}

.koop-audience-accordion-trigger h3 {
  margin: 4px 0 6px;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.18;
}

.koop-audience-accordion-trigger p {
  margin: 0;
  color: var(--koop-muted);
  font-size: 13px;
  line-height: 1.5;
}

.koop-audience-accordion-panel {
  padding: 0 22px 24px;
}

.koop-audience-accordion-panel .koop-journey-horizontal {
  grid-template-columns: repeat(5, minmax(115px, 1fr));
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.koop-audience-accordion-panel .koop-journey-step {
  padding-inline: 4px;
}

.editor-styles-wrapper .koop-audience-journey .koop-role-panel,
.editor-styles-wrapper .koop-audience-journey-accordion .koop-audience-accordion-panel {
  display: block !important;
}

@media (max-width: 980px) {
  .koop-role-panel-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .koop-journey-horizontal {
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }

  .koop-journey-step {
    scroll-snap-align: start;
  }

  .koop-audience-journey-split .koop-audience-split-shell {
    grid-template-columns: 1fr;
  }

  .koop-audience-journey-split .koop-role-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .koop-audience-journey-split .koop-role-trigger {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .koop-role-selector,
  .koop-audience-journey-split .koop-role-selector {
    grid-template-columns: 1fr;
  }

  .koop-role-trigger {
    padding: 14px 16px;
  }

  .koop-role-trigger .wp-block-group {
    flex-wrap: nowrap !important;
  }

  .koop-role-panel-inner {
    padding: 22px 16px;
  }

  .koop-audience-accordion-cards {
    flex-direction: column;
  }

  .koop-audience-accordion-card,
  .koop-audience-accordion-card.is-active {
    flex: 1 1 auto;
  }

  .koop-audience-accordion-trigger {
    min-height: auto;
  }

  .koop-audience-accordion-panel .koop-journey-horizontal {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .koop-audience-accordion-panel .koop-journey-horizontal::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .koop-role-trigger,
  .koop-audience-accordion-card {
    transition: none;
  }
}


/* =========================================================
   Kooperant Landing 2.5 — lakša tipografija gumba
   ========================================================= */
:where(.wp-block-button__link, .koop-btn, button.koop-btn) {
  font-weight: 500 !important;
}

.koop-header .koop-login-button .wp-block-button__link,
.koop-feature-copy .wp-block-button__link,
.koop-company-presentation__copy .wp-block-button__link,
.koop-audience-actions .wp-block-button__link,
.koop-pricing-card .wp-block-button__link,
.koop-footer-primary-button .wp-block-button__link,
.koop-footer-outline-button .wp-block-button__link {
  font-weight: 500 !important;
}


/* v2.7 — čistiji demo panel i HTML anchor na video carouselu */
.koop-map-demo-eyebrow,
.koop-map-demo-badge {
  display: none !important;
}

.koop-map-demo-intro {
  display: block;
}

.koop-map-demo-copy {
  width: 100%;
  max-width: 100%;
}


/* =========================================================
   Kooperant Landing 2.7.3 — transparentni video carousel i
   podesivi unutarnji razmak videa od ruba okvira
   ========================================================= */
.wp-block-kooperant-video-carousel.koop-video-section,
.koop-video-section {
  background: transparent !important;
  background-image: none !important;
}
.koop-video-carousel,
.koop-video-viewport,
.koop-video-track,
.koop-video-slide,
.koop-video-slide > h3,
.koop-video-media {
  background-color: transparent !important;
  background-image: none !important;
}
.koop-video-viewport {
  box-shadow: none !important;
}
.koop-video-media {
  box-sizing: border-box;
  padding: var(--koop-video-frame-padding, 0px) !important;
}
.koop-video-media video,
.koop-video-media iframe {
  box-sizing: border-box;
}


/* =========================================================
   Kooperant Landing 2.7.4 — uređivi razmak glavnog naslova
   i uravnoteženiji UI video carousela
   ========================================================= */
.koop-video-section {
  --koop-carousel-title-gap: 28px;
}

.koop-video-section .koop-section-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto var(--koop-carousel-title-gap, 28px) !important;
  padding-inline: clamp(8px, 2vw, 24px);
  text-align: center;
}

/* Uklanja ostatke starog dekorativnog oblačića iz ranijih verzija. */
.koop-video-section .koop-section-heading::before {
  display: none !important;
  content: none !important;
}

.koop-video-section .koop-section-heading h2,
.koop-video-section .koop-carousel-section-title {
  width: auto;
  max-width: 760px;
  margin: 0 auto !important;
  color: var(--koop-ink);
  font-family: "Poppins", sans-serif;
  font-size: clamp(28px, 3.2vw, var(--koop-carousel-title-size, 46px)) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.028em !important;
  text-align: center;
  text-wrap: balance;
}

.koop-video-section .koop-carousel-description {
  max-width: 680px;
  margin: 0 auto !important;
  color: var(--koop-muted);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

/* Naslov pojedinog videa ostaje povezan s videom, ali je vizualno mirniji. */
.koop-video-section .koop-video-slide > h3 {
  min-height: 52px;
  padding: 10px clamp(14px, 1.8vw, 20px) !important;
  border-color: rgba(67,45,215,.13) !important;
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: clamp(14px, 1.25vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.koop-video-section .koop-video-slide > h3::before {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 10px;
}

@media (max-width: 720px) {
  .koop-video-section .koop-section-heading {
    width: min(100%, calc(100% - 20px));
    padding-inline: 0;
  }

  .koop-video-section .koop-section-heading h2,
  .koop-video-section .koop-carousel-section-title {
    font-size: clamp(26px, 8vw, var(--koop-carousel-title-size, 46px)) !important;
    line-height: 1.18 !important;
  }

  .koop-video-section .koop-video-slide > h3 {
    min-height: 48px;
    padding: 9px 11px !important;
    font-size: 13.5px !important;
  }
}


/* =============================================================
   Kooperant Landing 2.7.5 — opcionalni glavni naslov carousela
   ============================================================= */


/* =============================================================
   Kooperant Landing 2.7.6 — boja, veličina od 9 px i čišći UI naslova
   ============================================================= */
.koop-video-section .koop-section-heading h2,
.koop-video-section .koop-carousel-section-title {
  color: var(--koop-carousel-title-color, var(--koop-ink)) !important;
  font-size: min(var(--koop-carousel-title-size, 46px), max(28px, 3.2vw)) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -.026em !important;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .koop-video-section .koop-section-heading h2,
  .koop-video-section .koop-carousel-section-title {
    font-size: min(var(--koop-carousel-title-size, 46px), max(22px, 8vw)) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
  }
}