:root {
      --bcg-color: #fff;
      --txt-color: #121212;
      --txt-color-link-hover: #1d1d1d;
      --invert-txt-color: #fff;

      --button-and-link: #e13f3d;
      --a-link-hover: #b61411;
      --btn-txt-color: #fff;
      --foot-button: #284B71;

      --card-bcg-color: transparent;
      --card-border-color: #BDBEC3;

      --card-period-bcg-color: #121212;
      --card-period-color: #fff;

      --billing-bcg-color-0: #f6f6f6;
      --billing-color-0: #808080;
      --billing-bcg-color-1: #e13f3d;
      --billing-color-1: #fff;

      --qa-bcg-color: transparent;

      --explanations-font: 'Georgia Regular', serif;
      --explanations-font-bold: 'Georgia Bold', serif;
      --explanations-font-bold-italic: 'Georgia Bold Italic', serif;
      
      --button-font: 'Slabo 27px', serif;
      --subtitles-font: 'Slabo 27px', serif;

      --card-addons-title-font: "Archivo", sans-serif;
      --title-font: "Archivo", sans-serif;
      --price-font: "Archivo", sans-serif;

      --step-bcg: #24374D;
      --step-number-color: #FA292A;
  }

#ocmContainer {

  button.period {
      font-family: "Archivo", sans-serif;
      font-weight: 500;
      font-variation-settings: "wdth" 62.5;
      color: var(--billing-color-0);
      background-color: var(--billing-bcg-color-0);
      }

  button.period:hover { background-color: var(--billing-bcg-color-1)!important; color: var(--billing-color-1)!important; }
  button.period.jedan { background-color: var(--billing-bcg-color-1); color: var(--billing-color-1); }

  .premium-no-adds,
  .premium,
  .paket,
  .foot { 
      background-color: var(--card-bcg-color);
      border-radius: 35px;
      border: 1px solid var(--card-border-color);
  }

  .with-spar-card {
    &::after {
      content: "*SPAR pokion kartica može se iskoristiti samo u trgovinama u Hrvatskoj";
      font-family: var(--explanations-font);
      line-height: 1.2;
      font-size: 14px;
      color: var(--txt-color);
      width: 72%;
      display: block;
      font-weight: 400;
      text-align: center;
      margin-inline: auto;
      margin-top: 14px;
    }

    .spar-card-info {
      p.spar-card {
        font-family: var(--title-font);
        font-variation-settings: "wdth" 75;
        font-weight: 700;
        color: var(--txt-color);
        font-size: 22px;
        letter-spacing: -0.1px;
        padding: 24px 5px 14px 5px;
      }

      img {
        width: 213px;
        rotate: -12deg;
      }
    }
  }

  .god.with-spar-card {
    .spar-card-info {
      p.spar-card {
        padding: 36px 5px 8px 5px;
      }

      img {
        width: 122px;
        rotate: -10deg;
      }
    }
  }

  &.page--daruj-pretplatu,
  &.poklon-pretplata_page {
    .step {
      background: var(--step-bcg);
      border-radius: 3.5rem;

      .to-do {
        .triangle {
          background-color: var(--invert-txt-color);
        }

        p.sto {
          color: var(--invert-txt-color);
        }
      }

      h1 {
        font-family: var(--title-font);
        color: var(--step-number-color);
        font-weight: 800;
        font-variation-settings: "wdth" 62.5;
      }
    }
  }

  .premium-no-adds,
  .premium,
  .paket { 
      .nyt-logo.img-dodatak {
        margin-block: 16px 28px;
      }

      .spar-card-info.img-dodatak {
        height: auto;
        margin-block: 0 27px;
      }
  }

  .landing-dvg {
    background-color: var(--card-bcg-color);
  }

  .triangle {
    background-color: var(--button-and-link);
  }

  .vrsta-pretplate h1 {
      font-family: var(--title-font);
      font-weight: 500;
      font-style: italic;
      font-variation-settings: "wdth" 62.5;
      color: #808080;

      span {
          color: var(--button-and-link);
      }
  }

  .landing-kartice {

      .vrsta-pretplate { 
          h1 {
              background-color: var(--card-period-bcg-color);
              color: var(--card-period-color); 
          }
      }

      .paket {
          .vrsta-pretplate h1 {
              &.zagrada {
                  font-variation-settings: "wdth" 80;
                  font-weight: 600;
              }
          }
      }
  }

  .nyt-logo {
    position: relative;
    margin-inline: auto;
    max-width: 192px;
    transform: translateX(9px);

    &::before,
    &::after {
      position: absolute;
      content: "+";
      left: -22px;
      font-family: "Archivo", sans-serif;
      font-weight: 800;
      font-size: 22px;
      line-height: 1;
      color: var(--txt-color);
    }

    &::after {
      left: 22px;
      top: 50%;
    }

    img {
      width: 100%;

      &.rokovnik-img {
        width: 12rem;
        margin-top: 0.3rem;
      }
    }
  }

  .nyt-logo:not(:has(.rokovnik-img)) {
    &::after {
      content: none;
    }
  }

  .sve-ponude {
    .premium-no-adds, 
    .premium, 
    .paket {
      .img-dodatak, .nyt-logo.img-dodatak {
        height: 38px;
        margin-block: 15px 0;
      }

      .spar-card-info.img-dodatak {
        height: 18rem;
        margin-block: 0;
      }

      &:has(.rokovnik-img) {
        .nyt-logo.img-dodatak {
          height: 152px;
        }
      }

    }

    .god.with-spar-card {
      .paket {
        .spar-card-info.img-dodatak {
            height: 18rem;
        }
      }
    }

    .paket-dodatak { 
      margin-block: -10px 16px;
    }
  }

  h3 { 
      font-family: var(--explanations-font);
      color: var(--txt-color);
  }

  .paket-dodatak h3 {
      color: var(--txt-color);
  }

  .paket-dodatak h3.bold {
      font-family: var(--explanations-font);
      line-height: 1.2;
  }

  .nabrajanje-velika h3 {
      font-family: var(--explanations-font-bold-italic);
      font-size: 22px;
      line-height: 14px; 
  }

  .nabrajanje h4,
  .nabrajanje-velika h4 {
      font-family: var(--price-font);
      color: var(--txt-color);
  }

  .nabrajanje-velika h4 {
      font-weight: 800;
      font-variation-settings: "wdth" 62.5;
  }

  .nabrajanje h4 {
      font-variation-settings: "wdth" 75;
      font-weight: 700;
  }

  span.gray {
      color: #BDBEC3;
  }

  .nabrajanje h3 {
      color: #363636;
  }

  .nabrajanje h3.bold {
      font-family: var(--explanations-font-bold-italic); 
  }

  .addon-text .nabrajanje h3::before {
      background: var(--txt-color);
  }

  button.pretplatite-se {
      font-family: var(--button-font);
      color: var(--btn-txt-color);
      background-color: var(--button-and-link);
  }

  button.pretplatite-se a { color: var(--btn-txt-color); }

  .footer.kartice {
      background: var(--card-bcg-color);
  }

  .foot-text {    
      h1 {
          font-family: var(--title-font);
          color: var(--txt-color);
          font-weight: 700;
          font-variation-settings: "wdth" 72;  
          }

      h2 {
          font-family: var(--subtitles-font);
          color: var(--txt-color);
          }

      button.pretplatite-se {
          background-color: var(--foot-button);
      }

      .icon-monitor,
      .icon-tablet,
      .icon-newspaper {
          background-color: var(--txt-color);
      }
  } 


  .nyt-banner-img.sto-clanaka-banner {
      position: relative;
      outline: 0!important;
      margin-bottom: 9rem;
      display: block;
    }

  .sto-clanaka-checkout {
    position:absolute;
    font-size: 22px;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    background-color: transparent;
    outline: 0;
    border: 0;
    animation: 3s revealSubscription ease-in-out;

    padding: 3rem;

  }

  .vise-o-akciji {
    position:absolute;
    bottom: -4rem;
    width: 100%;
    text-align: center;

    font-family: var(--subtitles-font);
    font-variation-settings: unset;
    font-weight: 400;
    color: #363636;
    font-size: 15px;
  }

          
  @media (min-width: 1024px) {

    .premium-no-adds,
    .premium,
    .paket { 
        .img-dodatak, .nyt-logo.img-dodatak {
            height: 16px;
            margin-block: 17px 0;
        }

        .spar-card-info.img-dodatak {
          height: auto;
          margin-block: 0;
        }
    }

    .landing-kartice {
        .img-dodatak, .nyt-logo.img-dodatak {
            height: 78px;
        }
    }

    .landing-kartice:has(.rokovnik-img) {
      .img-dodatak, .nyt-logo.img-dodatak {
        height: 178px;

        .rokovnik-img {
          width: 14rem;
          margin-top: 1rem;
        }
      }
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
      .landing-kartice {
        .img-dodatak, .nyt-logo.img-dodatak {
            height: 112px;
        }
      }
    }

    .sve-ponude {
        .premium-no-adds, 
        .premium, 
        .paket {
          .img-dodatak, .nyt-logo.img-dodatak {
              height: 62px;
              margin-block: 45px 40px;
          }

          &:has(.rokovnik-img) {
            .nyt-logo.img-dodatak {
              height: 172px;
              margin-block: 45px 22px;
            }
          }
        }

        .paket-dodatak { 
          margin-block: -60px 0;
        }

        .paket { 
          &:has(.rokovnik-img) {
            .paket-dodatak {
              margin-block: -40px 0;
            }
          }
        }

        .god.with-spar-card {
          .paket {
            .spar-card-info.img-dodatak {
                height: 22rem;
            }
          }
        }
    }

  }


  @media (min-width: 1280px) {

    .nyt-logo {
        &::before {
          top: -1px;
      }
    }

    .landing-pkt-god.with-spar-card {

      .spar-card-info {
        p.spar-card {
          padding: 10px 5px 14px 5px;
        }
      }
    }

    .sto-clanaka-checkout {
      font-size: 22px;
    }

    .nyt-banner-img.sto-clanaka-banner {
      margin-block: -3rem 12rem;
    }

    .vise-o-akciji {
      font-size: 17px;
    }

  }




}