.pricing {
    padding: var(--section-padding);
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--section-padding);

    .title {
        font-size: 2.5em; /* Pienempi perusfonttiokoko mobiilille */
    }

    .description {
        font-size: 1.25em; /* Pienempi kuvaus mobiilille */
        margin-top: 1em;
    }
}

/* Lisätään media queryt responsiivisuutta varten */
@media screen and (min-width: 640px) {
    .pricing-header {
        .title {
            font-size: 3em; /* Keskikokoinen tableteille */
        }
        .description {
            font-size: 1.4em;
        }
    }
}

@media screen and (min-width: 1024px) {
    .pricing-header {
        .title {
            font-size: 4em; /* Suurin desktop-laitteille */
        }
        .description {
            font-size: 1.5em;
        }
    }
}

/* Yleinen pricing-tiers asettelu */
.pricing-tiers {
    display: grid;
    gap: 1.5em;
    justify-content: center;
    
    /* Oletuksena yksi sarake mobiililla */
    grid-template-columns: minmax(280px, 1fr);
}

/* Tabletti/keskikokoinen näyttö: 2 tier-laatikkoa vierekkäin */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    .pricing-tiers {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

/* Suurempi näyttö: 3 tier-laatikkoa vierekkäin */
@media screen and (min-width: 1100px) {
    .pricing-tiers {
        grid-template-columns: repeat(3, minmax(280px, 1fr));
    }
}

/* Kun näytöllä on varmasti riittävästi tilaa 3 laatikon rinnakkain näyttämiseen */
@media screen and (min-width: 1400px) {
    .pricing-tiers {
        grid-template-columns: repeat(3, 18em);
    }
}

/* Muokataan pricing-tier-laatikon tyyliä niin, että valinnan näyttö on selkeämpi */
.pricing-tier {
    --tier-color: var(--green);
    --subtitle-color: var(--tier-color);

    background-color: var(--white);
    padding: 1.5em; /* Pienennetty 2em -> 1.5em */
    border-radius: 1em;
    border: 0.25em solid var(--white-bis); /* Muutettu väritön reunus */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75em; /* Pienennetty gap 1em -> 0.75em */
    transition-duration: 0.3s;
    transition-property: box-shadow, transform, border-color;
    cursor: pointer;
}

/* Muutetaan hover-efektiä vähän hienovaraisemmaksi */
.pricing-tier:hover {
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Valitun tier-laatikon tyylit */
.tier-selected {
    border-color: var(--tier-color); /* Käytetään tier-color väriä reunukseen */
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Tier-tyypeille omat värit reunukseen */
.pricing-tier.is-starter.tier-selected {
    border-color: var(--purple);
}

.pricing-tier.is-professional.tier-selected {
    border-color: var(--pink);
}

.pricing-tier.is-enterprise.tier-selected {
    border-color: var(--red);
}

.list {
    li {
        padding: 0.2em 0; /* Pienennetty padding 0.25em -> 0.2em */
    }

    li:not(:last-child) {
        border-bottom: 1px solid rgb(0 0 0 / 10%);
    }
}

.button {
    --accent: var(--tier-color);
    margin-top: auto;
}

&.is-starter {
    --tier-color: var(--purple);
}

&.is-professional {
    --tier-color: var(--pink);
}

&.is-enterprise {
    --tier-color: var(--red);
}

@media screen and (min-width: 1100px) {
    .pricing-tiers {
        grid-template-columns: repeat(3, 18em); /* Pienennetty 20em -> 18em */
    }
}

/* Muokataan media query -arvoja pienemmiksi */
@media screen and (min-width: 1200px) {
    .pricing-tiers {
        font-size: 1rem; /* Pienennetty 1.125rem -> 1rem */
    }
}

@media screen and (min-width: 1400px) {
    .pricing-tiers {
        font-size: 1.1rem; /* Pienennetty 1.25rem -> 1.1rem */
    }
}


/* Näyttävämpi animoitu reuna valituille laatikoille */
.feature-selected {
  position: relative;
  overflow: visible;
  z-index: 1;
  /* Lisää box-shadow vain valituille laatikoille */
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.feature-selected::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: inherit;
  z-index: -1;
  
  /* Voimakkaammat värit ja selkeämpi värikontrasti */
  background: 
    linear-gradient(
      90deg, 
      var(--pink) 0%,     /* Punainen */
      var(--red) 25%,    /* Oranssi */
      var(--purple) 50%,    /* Punainen */
      var(--cyan) 75%,    /* Oranssi */
      var(--blue) 100%    /* Punainen */
    );
    
  /* Suurempi tausta mahdollistaa isomman liikkeen */
  background-size: 400% 100%;
  
  /* Maski reunan luomiseksi - korjattu syntaksi */
  mask:
    linear-gradient(#fff 0%, #fff 100%) content-box,
    linear-gradient(#fff 0%, #fff 100%);
  -webkit-mask:
    linear-gradient(#fff 0%, #fff 100%) content-box,
    linear-gradient(#fff 0%, #fff 100%);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 4px;
  border: 0;
  
  /* Hitaampi animaatio mutta isompi liike */
  animation: border-rotate 20s linear infinite;
}

/* Animaatio koko reunan ympäri */
@keyframes border-rotate {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400% 0;
  }
}

/* Tyyli disabloitua ominaisuutta varten */
.feature-disabled {
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}

.feature-disabled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.is-hidden { display: none; }

/* Yhteenvetoalueen tyylit */
.summary-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 3em 0;
  padding: 0 1rem; /* Lisää vaakasuuntainen padding */
}

.summary-box {
  //background: linear-gradient(135deg, var(--dark-blue) 50%, var(--blue) 100%);
  color: var(--black);
  border-radius: 1em;
  padding: 2em;
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}

.summary-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.summary-title {
  font-size: 1.5em;
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
  color: var(--black);
}

.selected-services {
  margin-bottom: 1.5em;
  min-height: 50px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.service-item:last-child {
  border-bottom: none;
}

.summary-total {
  font-size: 1.5em;
  text-align: right;
  margin: 1em 0;
  font-weight: bold;
  color: var(--black);
}

.button.is-contact {
  background-color: var(--white);
  color: var(--blue);
  width: 100%;
  text-align: center;
  margin-top: 1em;
  font-weight: bold;
  transition: all 0.3s ease;
}

.button.is-contact:hover {
  background-color: var(--light-blue);
  color: var(--white);
  transform: translateY(-2px);
}

/* Varmistetaan että container-luokalla on maksimileveys */
.pricing-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.pricing-tier .list li {
    padding: 0.2em 0; /* Pienennetty padding 0.25em -> 0.2em */
    font-size: 0.95em; /* Hieman pienempi fonttikoko */
}
/* Perusfonttikokojen säätäminen mobiilille */
@media screen and (max-width: 767px) {
    .pricing-header .title,
    h1.title {
        font-size: 1.8em !important; /* Huomattavasti pienempi mobiilissa */
        word-wrap: break-word; /* Varmistaa, että pitkät sanat rikkoutuvat tarvittaessa */
        overflow-wrap: break-word;
        hyphens: auto; /* Lisää tavutuksen tarvittaessa */
        line-height: 1.2;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    /* Pienempi alaotsikoiden koko mobiilissa */
    .pricing-header .description {
        font-size: 1.1em !important;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Keskikokoisten laitteiden (tablettien) fonttikoot */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .pricing-header .title,
    h1.title {
        font-size: 2.75em !important; /* Keskikokoinen tableteille */
    }
    
    .pricing-header .description {
        font-size: 1.2em !important;
    }
}

/* Suurempien näyttöjen fonttikoot säilyvät nykyisinä */