/*======================================
Theme Name: Divi Child
Theme URI: https://divicake.com/
Description: Divi Child Theme
Version: 1.0
Author: Luka Svonja
Author URI: https://luka-svonja.de/
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* ============================================
   TYPOGRAPHY — Lato
   ============================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

/* Base */
body {
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* Headings */
h1 {
  font-weight: 900 !important;
  font-size: clamp(2rem, 5vw, 2.3rem) !important;
  line-height: 1.1 !important;
	text-transform: uppercase !important;
}

h2 {
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 3.5vw, 1.5rem) !important;
  line-height: 1.15 !important;
}

h3 {
  font-weight: 700 !important;
  font-size: clamp(1.15rem, 2.5vw, 1.2rem) !important;
  line-height: 1.2 !important;
}

h4 {
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
	text-transform: uppercase !important;
}

h5 {
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

h6 {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Paragraph */
p {
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

p.lead {
  font-weight: 300 !important;
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
}

small {
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}


/* ============================================
   FRAME ANIMATION — Für <img> immer wrap mit <div class="frame-anim">
   ============================================ */

#about-photo .et_pb_image_wrap {
  position: relative;
  display: inline-block;
}

#about-photo .et_pb_image_wrap::before,
#about-photo .et_pb_image_wrap::after {
  content: '';
  position: absolute;
  transition: width 0.4s ease, height 0.4s ease, border-color 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

#about-photo .et_pb_image_wrap::before {
  top: -6px;
  right: -6px;
  width: 48px;
  height: 28px;
  border-top: 1.5px solid #bbb;
  border-right: 1.5px solid #bbb;
}

#about-photo .et_pb_image_wrap::after {
  bottom: -6px;
  left: -6px;
  width: 48px;
  height: 28px;
  border-bottom: 1.5px solid #bbb;
  border-left: 1.5px solid #bbb;
}

#about-photo:hover .et_pb_image_wrap::before,
#about-photo:hover .et_pb_image_wrap::after {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-color: #bbb;
}

/* ============================================
   BUTTON ANIMATION
   ============================================ */

/* Wrapper */
.frame-btn-wrap {
  position: relative !important;
  display: inline-block !important;
}

.frame-btn-wrap::before,
.frame-btn-wrap::after {
  content: '' !important;
  position: absolute !important;
  width: 40px !important;
  height: 20px !important;
  transition: width 0.5s ease, height 0.5s ease !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.frame-btn-wrap::before {
  top: 0 !important;
  right: 0 !important;
  border-top: 1.5px solid #fff !important;
  border-right: 1.5px solid #fff !important;
}

.frame-btn-wrap::after {
  bottom: 0 !important;
  left: 0 !important;
  border-bottom: 1.5px solid #fff !important;
  border-left: 1.5px solid #fff !important;
}

.frame-btn-wrap:hover::before,
.frame-btn-wrap:hover::after {
  width: 99% !important;
  height: 98% !important;
}

/* Button */
a.et_pb_button.frame-btn,
.et_pb_button.frame-btn,
.et_pb_contact_submit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  transition: color 0.4s ease, background 0.4s ease !important;
  text-decoration: none !important;
}

.frame-btn-wrap:hover a.et_pb_button.frame-btn,
.frame-btn-wrap:hover .et_pb_button.frame-btn {
  background: #fff !important;
  background-image: none !important;
  color: #111 !important;
}

body #page-container .et_pb_section a.et_pb_button.frame-btn,
body #page-container .et_pb_section a.et_pb_button.frame-btn:hover,
body #page-container .et_pb_contact_submit,
body #page-container .et_pb_contact_submit:hover {
  padding: 15px 15px !important;
}

body #page-container .et_pb_section a.et_pb_button {
	font-size: 14px !important;
}

#et_pb_contact_form_0 > div.et_pb_contact > form > p.et_pb_contact_field.et_pb_contact_field_3.et_pb_contact_field_last > span > span.et_pb_contact_field_options_list {
	display: flex !important;
	gap: 20px !important;
}

#et_pb_contact_form_0 > div.et_pb_contact > form > p.et_pb_contact_field.et_pb_contact_field_3.et_pb_contact_field_last > span {
	background-color: black !important;
    padding: 20px 16px !important;
    border: 1px solid #767676 !important;
}

/* ===== PP — CF7 FORM STYLES ===== */

.pp-form-grid {
  display: grid;
  gap: 16px;
}

.pp-form-grid.pp-grid-2 {
  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
}

@media (max-width: 600px) {
  .pp-form-grid.pp-grid-2 {
    grid-template-columns: 100%;
  }
}

.pp-label {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0;
}

.wpcf7-form .pp-label,
.wpcf7 .pp-label {
  margin-bottom: 16px;
}

.pp-label > span.wpcf7-form-control-wrap {
  display: block;
}

/* ===== BASE FIELD STYLES ===== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  background-color: #000000;
  color: #767676;
  border: 1px solid #767676;
  border-radius: 0px;
  padding: 20px 16px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #767676;
  opacity: 1;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #ffffff;
  outline: none;
}

.wpcf7 input[type="text"]:not(:placeholder-shown),
.wpcf7 input[type="email"]:not(:placeholder-shown),
.wpcf7 input[type="number"]:not(:placeholder-shown),
.wpcf7 input[type="date"]:not(:placeholder-shown),
.wpcf7 input[type="tel"]:not(:placeholder-shown),
.wpcf7 textarea:not(:placeholder-shown) {
  color: #ffffff;
}

.wpcf7 select:not([value=""]) {
  color: #ffffff;
}

.wpcf7 textarea {
  min-height: 180px;
  resize: vertical;
}

.wpcf7 input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.5);
  cursor: pointer;
}

.wpcf7 input[type="date"]:focus::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.wpcf7 input[type="number"]::-webkit-inner-spin-button,
.wpcf7 input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wpcf7 input[type="number"] {
  -moz-appearance: textfield;
}

.wpcf7 select {
  background-color: black;
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* ===== RADIO BUTTONS ===== */

.pp-radio-group {
  background-color: #000000;
  border: 1px solid #767676;
  border-radius: 4px;
  padding: 20px 16px;
  margin-bottom: 16px;
}

.pp-radio-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.wpcf7 .pp-radio-group .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.wpcf7 .pp-radio-group .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.wpcf7 .pp-radio-group .wpcf7-list-item label {
  font-size: 16px;
  color: #767676;
  cursor: pointer;
}

.wpcf7 .pp-radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: #ffffff;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
}

.wpcf7 .pp-radio-group input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid #767676;
  border-radius: 50%;
  background-color: #000000;
  cursor: pointer;
  position: relative;
}

.wpcf7 .pp-radio-group input[type="radio"]:checked {
  border-color: #ffffff;
  background-color: #000000;
}

.wpcf7 .pp-radio-group input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
}


/* ===== VALIDATION ERRORS ===== */

.wpcf7 .wpcf7-not-valid {
  border-color: #e24b4a !important;
}

.wpcf7 .wpcf7-not-valid-tip {
  color: #e24b4a;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

.wpcf7 .wpcf7-response-output {
  border: 1px solid #767676;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 14px;
  color: #767676;
  border-radius: 4px;
}

.wpcf7 p {
  margin: 0 !important;
  padding: 0 !important;
}

.wpcf7 .pp-form-grid p,
.wpcf7 .pp-radio-group p {
  display: contents !important;
}

.wpcf7 .pp-form-grid p {
  display: contents;
}

div.et_pb_code_inner div.pg-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pg-row {
    display: grid !important;
    gap: 8px !important;
}

.pg-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.pg-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.pg-item {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}

.pg-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.pg-item:hover img {
    transform: scale(1.04) !important;
}


@media (max-width: 768px) {
    div.et_pb_code_inner div.pg-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    div.et_pb_code_inner .pg-row {
        display: contents !important;
    }
	.pp-form-grid {
  		display: grid;
  		gap: 0px;
	}
}


.pp-acceptance-wrapper {
    margin-top: 15px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
}

.pp-acceptance-wrapper .wpcf7-list-item {
    margin: 0 !important;
    display: flex;
    align-items: flex-start; 
    gap: 10px;
}

/* Stil za sam tekst i link */
.pp-acceptance-wrapper label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.pp-acceptance-wrapper label a {
    color: #fff !important; 
    text-decoration: underline !important;
    transition: color 0.2s ease;
}

.pp-acceptance-wrapper label a:hover {
    color: #ffffff !important;
}


.pp-acceptance-wrapper input[type="checkbox"] {
    accent-color: #fff !important;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
}


.pg-lightbox {
    position: fixed;
    z-index: 9999999; /* Da bude iznad Divi menija i svega */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Crna prozirna pozadina */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.pg-lightbox-content {
    max-width: 85%;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border-radius: 4px;
    animation: zoomIn 0.3s ease;
}

/* Dugme za zatvaranje (X) */
.pg-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
.pg-lightbox-close:hover {
    color: #bbb;
}

/* Strelice za levo/desno */
.pg-lightbox-arrow {
    position: absolute;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    transition: 0.2s;
    top: 50%;
    transform: translateY(-50%);
}
.pg-lightbox-arrow:hover {
    color: #bbb;
}
.pg-arrow-left { left: 20px; }
.pg-arrow-right { right: 20px; }

/* Kursor prstić na slikama u gridu */
.pg-lightbox-trigger {
    cursor: pointer;
}

/* Efekat pojavljivanja slike */
@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .pg-lightbox-content {
        max-width: 95%;
    }
    .pg-lightbox-arrow {
        font-size: 35px;
        padding: 10px;
    }
    .pg-arrow-left { left: 5px; }
    .pg-arrow-right { right: 5px; }
}

/* --- HOVER DROP SHADOW EFEKAT --- */
.pg-item {
    transition: box-shadow 0.4s ease, transform 0.4s ease !important;
    will-change: box-shadow;
}

.pg-item:hover {
    box-shadow: 0px 0px 20px 2px rgba(255, 109, 65, 0.5) !important;
}

/* ===== PORTFOLIO GRID ===== */

/* 3 kolone */
.et_pb_filterable_portfolio .et_pb_portfolio_items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

@media (max-width: 980px) {
  .et_pb_filterable_portfolio .et_pb_portfolio_items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .et_pb_filterable_portfolio .et_pb_portfolio_items {
    grid-template-columns: 1fr !important;
  }
}

/* Reset Divi default float layout */
.et_pb_filterable_portfolio .et_pb_grid_item {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== KARTICE ===== */

.et_pb_filterable_portfolio .et_pb_portfolio_item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Slika — fiksna visina, cover */
.et_pb_filterable_portfolio .et_portfolio_image {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
}

.et_pb_filterable_portfolio .et_portfolio_image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

/* Zoom na hover */
.et_pb_filterable_portfolio .et_pb_portfolio_item:hover .et_portfolio_image img {
  transform: scale(1.05) !important;
}

/* Sakrij Divi default overlay */
.et_pb_filterable_portfolio .et_overlay {
  display: none !important;
}

/* Gradient overlay — uvijek vidljiv, tekst čitljiv */
.et_pb_filterable_portfolio .et_portfolio_image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Tekst preko slike */
.et_pb_filterable_portfolio .et_pb_module_header,
.et_pb_filterable_portfolio .post-meta {
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
  color: #ffffff !important;
}

.et_pb_filterable_portfolio .et_pb_module_header {
  bottom: 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

.et_pb_filterable_portfolio .et_pb_module_header a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.et_pb_filterable_portfolio .post-meta {
  bottom: 12px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.65) !important;
}

.et_pb_filterable_portfolio .post-meta a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
}

/* Drop shadow na hover */
.et_pb_filterable_portfolio .et_pb_portfolio_item {
  transition: box-shadow 0.3s ease !important;
}

.et_pb_filterable_portfolio .et_pb_portfolio_item:hover {
  box-shadow: 0 8px 32px rgba(255, 100, 65, 0.15) !important;
}

/* Portfolio item — border radius + stroke */
.et_pb_filterable_portfolio .et_pb_portfolio_item {
  border-radius: 4px !important;
  border: 1px solid #5A5A5A !important;
  overflow: hidden !important;
}

/* ===== FILTER TAB ===== */

.et_pb_portfolio_filters {
  margin-bottom: 32px !important;
}

.et_pb_portfolio_filters ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.et_pb_portfolio_filter {
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_portfolio_filter a {
  display: inline-block !important;
  padding: 10px 0 !important;
  margin-right: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.et_pb_portfolio_filter a:hover {
  color: rgba(255,255,255, 1) !important;
  background: transparent !important;
	font-weight: bold !important;
}

.et_pb_portfolio_filter a.active {
  color: rgba(255,255,255, 1) !important;
  border-bottom: 2px solid #ffffff !important;
  background: transparent !important;
}

/* Mobile */
@media (max-width: 768px) {
  .et_pb_portfolio_filters ul {
    border-bottom: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  .et_pb_portfolio_filters ul::-webkit-scrollbar {
    display: none !important;
  }

  .et_pb_portfolio_filter {
    flex-shrink: 0 !important;
  }

  .et_pb_portfolio_filter a {
    display: inline-block !important;
    padding: 6px 14px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .et_pb_portfolio_filter a.active {
    border: 1px solid #ffffff !important;
    color: rgba(255,255,255, 1) !important;
	  font-weight: bold !important;
  }
}

/* ---  SELECT PLACEHOLDER --- */
.wpcf7-form-control.wpcf7-select:has(option:first-child:checked),
select.wpcf7-select:invalid {
    color: rgba(255, 255, 255, 0.5) !important; 
}

.wpcf7-form-control.wpcf7-select option {
    color: #ffffff !important;
    background-color: #1a1a1a !important; 
}

.wpcf7-form-control.wpcf7-select option:not(:first-child) {
    color: #ffffff !important;
}

/* Submit button sam */
input.wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 25px !important;
  background: white !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  font-size: 18px !important;
  font-family: inherit !important;
  width: 100% !important;
  transition: color 0.4s ease, background 0.4s ease !important;
}


/* ===== REELS GRID ===== */

.pr-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.pr-item {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid #5A5A5A;
    border-radius: 4px;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
}

.pr-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.pr-item.playing video {
    pointer-events: auto;
}

/* Play button */
.pr-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.pr-play-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    margin-left: 3px;
}

.pr-item.playing .pr-play-btn {
    opacity: 0;
}

/* Title overlay */
.pr-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 11px;
	line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 !important;
    z-index: 2;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pr-item.playing .pr-title {
    opacity: 0;
}

@media (max-width: 768px) {
    .pr-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== STORIES ===== */

.ps-wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ps-item {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}

.ps-phone {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
}

.ps-screen {
    width: 100%;
    height: 100%;
}

.ps-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ===== VIDEOS 16:9 ===== */

.pv-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pv-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #5A5A5A;
    border-radius: 4px;
    cursor: pointer;
}

.pv-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sakrij native kontrole by default, pokazuj samo na aktivnom */
.pv-item video {
    pointer-events: none;
}

.pv-item.playing video {
    pointer-events: auto;
}

/* Play button */
.pv-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.pv-play-btn svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    margin-left: 4px;
}

.pv-item.playing .pv-play-btn {
    opacity: 0;
    pointer-events: none;
}

/* Title overlay */
.pv-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 12px;
	line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 !important;
    z-index: 2;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pv-item.playing .pv-title {
    opacity: 0;
}

@media (max-width: 768px) {
    .pv-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Makni disabled state sa submit dugmeta */
input.wpcf7-submit:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

input.wpcf7-submit[disabled] {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.pp-submit-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.pp-submit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}

/* ===== REELS PLAY BUTTON ===== */
.pr-item {
    cursor: pointer;
}

.pr-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.pr-play-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    margin-left: 3px;
}

.pr-item.playing .pr-play-btn {
    opacity: 0;
}

/* ===== SHOWREEL LIGHTBOX ===== */

.sr-lightbox {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999999 !important;
  background: rgba(0, 0, 0, 0.92) !important;
  display: none;
  align-items: center;
  justify-content: center;
}

.sr-lightbox.active {
  display: flex !important;
}

.sr-lightbox-inner {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
}

#srIframeWrap {
  width: 100%;
  height: 100%;
}

#srIframeWrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.sr-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
  z-index: 10;
}

@media (max-width: 768px) {
  .sr-lightbox-inner {
    width: 100vw !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* Resetujemo roditeljski kontejner */
  .et_pb_filterable_portfolio .et_pb_portfolio_filters ul.clearfix {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    padding-top: 10px !important; /* Tvoj padding */
    text-align: left !important; /* Možeš staviti i center ako želiš da budu u sredini */
  }
  
  /* Forsiramo dugmiće da se poređaju jedan pored drugog kao reči u rečenici */
  .et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    display: inline-block !important;
    float: none !important; /* Poništavamo Divi-jev float ako postoji */
    width: auto !important;
    margin-right: 8px !important; /* Razmak između dugmića desno */
    margin-bottom: 8px !important; /* Razmak ako odu u novi red */
  }

  /* Čišćenje linkova unutar dugmića */
  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
    display: block !important;
    width: auto !important;
  }
}

@media (min-width: 981px) and (max-width: 1350px) {
  .et_pb_column_0_tb_header,
  .et_pb_column_2_tb_header {
    width: 67% !important;
  }
  .et_pb_column_1_tb_header,
  .et_pb_column_3_tb_header {
    width: 36% !important;
  }
}