/* Media query for mobile devices */
@media (max-width: 800px) { /* Adjust this breakpoint as needed */
    .collapseomatic {
        padding-left: 25px; /* Increase padding for mobile to prevent text overlap */
    }

    .collapseomatic::before {
        left: 4px; /* Position the arrow closer to the edge on mobile */
        font-size: 1rem; /* Optional: Reduce the size of the arrow on mobile */
    }
}

#ps2id-dummy-offset{
  height: 0px;
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    height: 64px;
  }
}

.custom-tag {
    background-color: #4d8d56; /* Green background */
    color: #f9f9f9; /* White text */
    font-size: 12px; /* Smaller font size */
    padding: 2px 5px; /* Some padding around the text */
    margin-left: 10px; /* Space between the header text and the tag */
    display: inline-block; /* Ensure it aligns correctly */
    vertical-align: middle; /* Align with the middle of the text */
/*    border-radius: 5px; /* Rounded corners */
}

@media only screen and (max-width: 768px) { /* Adjustments for smaller screens */
    .custom-tag {
        font-size: 10px; /* Even smaller font size on mobile */
        margin-left: 5px; /* Less space on the side for tighter screens */
        padding: 1px 4px; /* Reduce padding on smaller screens */
    }
    .collapseomatic_content {
        clear: both; /* Clear floats to prevent overlap */
    }
}

/* Hide mobile title on larger screens */
.desktop-title { display: inline; }
.mobile-title { display: none; }

/* Hide desktop title and show mobile title on smaller screens */
@media only screen and (max-width: 768px) {
    .desktop-title { display: none; }
    .mobile-title { display: inline; }
}

/* VIP-nappi anthracite + jade-reunus */
.vip-top-btn{
  display:inline-block;
  background:#333333;          /* antrasiitti (tummanharmaa)  */
  color:#fff !important;       
  padding:6px 18px;
  border:3px solid #4d8d56;    /* jade-vihreä reunus          */
  font-weight:600;
  text-decoration:none;
  font-size:0.9rem;
  transition:all .25s ease;

  /* --- uusi rivi --- */
  margin-top:16px;   /* säädä px-arvoa tarpeen mukaan */
}

/* Hover – vaihdetaan taustaksi jade, teksti valkoiseksi */
.vip-top-btn:hover{
  background:#4d8d56;
  border-color:#4d8d56;
}


/* Kartan jälkeinen vip-nappi*/
/* wrapper: full-width row, flex-centred */
.vip-cta-wrapper{
    display:flex;
    justify-content:center;   /* horizontal centering */
    align-items:center;       /* vertical centering (if you add height) */
    margin:0 0 40px;    /* breathing space below */
}

/* VIP button – 4-sided jade outline that always shows */
.vip-cta-btn{
  display:inline-block;
  background:transparent;          /* keeps border visible */
  color:#fff !important;
  padding:11px 30px;               /* a hair taller than before */
  border:3px solid #4d8d56 !important; /* draw all four sides */
  box-sizing:border-box;           /* border is included in height */
  line-height:1;                   /* text stays inside the box */
  transition:.25s all;
}

/* hover / focus */
.vip-cta-btn:hover,
.vip-cta-btn:focus{
  background:#4d8d56;              /* jade fill */
  color:#fff !important;
  border-color:#4d8d56;            /* outline still jade */
}


/* full-width tap-target on small screens */
@media (max-width:600px){
    .vip-cta-btn{width:100%; text-align:center;}
}