:root {

  --px-brand-red: #F43F5E;      /* Coral romantic accent */
  /*--px-brand-forest: #064E3B; */   /* Outdoor trust / navbar */
  /*--px-brand-forest: #074232;*/
  /*--px-brand-forest: #2b8169;*/
  --px-brand-forest: #1f5f52;

  --px-brand-teal: #0F766E;     /* Discovery + map vibe */

  --px-brand-red-pojacano: #fa0003;
  /*--px-brand-red-dublje: #c91b1d;*/

  /*--px-brand-red-dublje: #d12c2c ;*/
  /*--px-brand-red-dublje: #d71c1c;*/
  --px-brand-red-dublje: var(--px-brand-red);


  --px-nav-bg: var(--px-brand-forest);
  --px-nav-text: rgba(255, 255, 255, 0.92);
  --px-nav-link-hover: #FFFFFF;


  --px-body-bg: #0B1220;

  /* Soft mist overlay above outdoor photos */
  /*--px-overlay-bg: rgba(240, 253, 244, 0.82);*/
  /*--px-overlay-bg: rgba(236, 253, 245, 0.72);*/
  --px-overlay-bg:rgb(236 253 245 / 46%);

  /* Optional darker overlay for night mode */
  --px-overlay-bg-dark: rgba(15, 23, 42, 0.72);


  --px-text-main: #0F172A;      /* Headings */
  --px-text-soft: #334155;      /* Paragraphs */
  --px-text-muted: #64748B;     /* Helper text */
  --px-text-invert: #FFFFFF;    /* On dark navbar */


  /*--px-welcome-color-1: var(--px-brand-red);
  --px-welcome-color-2: var(--px-brand-teal);*/

  --px-welcome-color-1: var(--px-brand-red-dublje);
  --px-welcome-color-2: var(--px-brand-teal);

  --px-subtitle: rgba(15, 23, 42, 0.72);


  /* CTA 1 = Primary action (Upload / Join) */
  --px-cta1-bg: var(--px-brand-red);
  --px-cta1-text: #FFFFFF;
  --px-cta1-hover: #E11D48;

  /* CTA 2 = Secondary action (Discovery Map) */
  --px-cta2-bg: var(--px-brand-teal);
  --px-cta2-text: #FFFFFF;
  --px-cta2-hover: #0D9488;

  /* CTA 3 = Neutral / Soft action (Learn More) */
  --px-cta3-bg: rgba(255, 255, 255, 0.85);
  --px-cta3-text: var(--px-text-main);
  --px-cta3-border: rgba(0, 0, 0, 0.12);

   /* DODATAK CTA */

  /* Primary Pixalong CTA (Upload / Add Photo) */
  --px-btn-primary-bg: #0f766e;
  --px-btn-primary-hover: #115e59;
  --px-btn-primary-text: #ffffff;

  /* Social CTA (Send Message) */
  --px-btn-social-bg: #2563eb;
  --px-btn-social-bg-neznije: #3f74e8;
  --px-btn-social-hover: #1d4ed8;
  --px-btn-social-text: #ffffff;

  --px-btn-social-pink-bg: #ec4899; /* pink-500 */
  --px-btn-social-pink-hover: #be185d; /* pink-700 */

  /* Secondary CTA (Load More / View / Next page) */
  --px-btn-secondary-bg: rgba(255, 255, 255, 0.78);
  --px-btn-secondary-text: #0f172a;
  --px-btn-secondary-border: rgba(15, 23, 42, 0.15);

  /* Utility CTA (Edit / Adjust) */
  --px-btn-tertiary-text: #0f766e;
  --px-btn-tertiary-hover-bg: rgba(15, 118, 110, 0.12);

  /* Danger Only */
  --px-btn-danger-bg: #dc2626;
  --px-btn-danger-hover: #b91c1c;
  --px-btn-danger-text: #ffffff;


  /*--px-card-bg: rgba(255, 255, 255, 0.92);*/
  --px-card-bg: rgba(255, 255, 255, 0.61);
  --px-card-border: rgba(0, 0, 0, 0.08);
  --px-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.10);


  --px-radius-xl: 18px;
  --px-radius-pill: 999px;

  --px-transition: 220ms ease;
}


#topnav , .dropdown-div {
  background: var(--px-nav-bg);
  color: var(--px-nav-text);
}

.page-overlay {
  background: var(--px-overlay-bg);
  /*background: rgb(213 255 226 / 66%);*/
}

.cta-primary {
  background: var(--px-cta1-bg);
  color: var(--px-cta1-text);
}

.cta-primary-dublje {
  background: var(--px-brand-red-dublje);
  color: var(--px-cta1-text);
}

.cta-primary2 {
  /*background: var(--px-btn-primary-bg);*/
  background: var(--px-brand-forest);
  color: var(--px-btn-primary-text);
}

.cta-primary2:hover {
  background: var(--px-btn-primary-hover);
}

.cta-secondary {
  background: var(--px-cta2-bg);
  color: var(--px-cta2-text);
}

.cta-secondary2 {
  background: var(--px-btn-secondary-bg);
  color: var(--px-btn-secondary-text);
  border-color: var(--px-btn-secondary-border);
}

.pagination span, .pagination a, .cta-neutral3 {

  /*background: var(--px-btn-primary-bg);*/
  background: var(--px-text-soft);

  /*background: var(--px-text-muted);*/

  color: var(--px-btn-primary-text);
  
  /*background: var(--px-nav-bg);
  background: #4b5563;
    background: #bedead;
  color: var(--px-nav-text);
    color: var(--px-text-main);
  border-color: var(--px-cta3-border);*/
}

.pagination span:hover, .pagination a:hover, .cta-neutral3:hover  {
  color: var(--px-btn-primary-text);
  opacity: .9;
}

.cta-neutral {
  background: var(--px-cta3-bg);
  color: var(--px-cta3-text);
  border-color: var(--px-cta3-border);
}

.cta-neutral2 {
  background: #d2dbd9;
  background: #c6eae3;

  color: var(--px-cta3-text);
  border-color: var(--px-cta3-border);
}

 

.cta-neutral3 {
  /*
  vidi pagination, gore
  background: var(--px-text-soft);
  color: var(--px-nav-text);*/
  /*border-color: var(--px-cta3-border);*/
}

.cta-neutral4 {
  background: var(--px-text-muted);
  color: var(--px-nav-text);
  border-color: var(--px-cta3-border);
}




.cta-social {
  background: var(--px-btn-social-bg);
  border-color: var(--px-btn-social-text);
}

.cta-social:hover {
  background: var(--px-btn-social-hover);
}

.cta-social2 {
  background: var(--px-btn-social-pink-bg);
  color: white;
}

.cta-social:hover2 {
  background: var(--px-btn-social-pink-hover);
}


.cta-utility {
  background: var(--px-btn-tertiary-text);
}

.cta-utility:hover {
  background: var(--px-btn-tertiary-hover-bg);
}

.cta-close {

}

.cta-welcome-1 {
  background: var(--px-welcome-color-1);
  color: var(--px-cta1-text);
}

.cta-welcome-2 {
  background: var(--px-welcome-color-2);
  color: var(--px-cta1-text);
}

.social-message {
  background: var(--px-btn-social-bg);
  color: var(--px-cta2-text);
}

.social-message2 {
  background: var(--px-btn-social-pink-bg);
  color: var(--px-cta2-text);
}

.title-forest{
  color: var(--px-brand-forest);
}

.title-social {
  color: var(--px-btn-social-bg);
}

#welcome-headline, .upload-headline {
     color: var(--px-welcome-color-1);
}

#welcome-subheadline {
    /*color: var(--px-subtitle);*/
    color: var(--px-welcome-color-1);

}

.paragraph {
    color: var(--px-text-soft);
}

.paragraph-light {
    color: var(--px-text-invert);
}


.card{
  background: var(--px-card-bg);
  border-color: var(--px-card-border);
  text-shadow: var(--px-shadow-soft);
}

.card-opaque {
    background: #ffffff;
}

.topnav-background {
  background: var(--px-nav-bg);
}

/*.green-card {
    background: rgb(217, 236, 231);
}*/

/*.highlight-border {
    border-color: var(--px-cta1-bg);
}*/