/*
Theme Name:       VancedMedia Test Theme
Author:           Nikola
Author URI:       https://ivanovski.dev/
Description:      A custom WordPress test theme for Vanced Media.
Version:          1.0
License:          GNU General Public License v2 or later
License URI:      https://www.gnu.org/licenses/gpl-2.0.html
Tags:             calculator, responsive-layout, custom-background, custom-header, custom-logo, featured-images, flexible-header, theme-options, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary-color: #278bea;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  font-family: "GothamNarrow-Medium", Arial, sans-serif;
  line-height: 1;
  background-color: #fff;
  overflow-x: hidden;
}

main {
  width: 100%;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  width: 100%;
  height: 100%;
}

h1 {
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}

h2 {
  font-size: 48px;
  line-height: 54px;
  font-weight: inherit;
  font-family: "Roboto", sans-serif;
}

h3 {
  font-size: 25px;
  line-height: 1.2;
  font-weight: inherit;
  font-family: "Roboto", sans-serif;
}

.container {
  max-width: 1200px;
}

.header {
  background-color: var(--primary-color);
  width: 100%;
  height: 40px;
}

.calculator-section {
  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    h2 {
        font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-size: 48px;
        line-height: 54px;
    }

    .calculator {
      display: flex;
      flex-direction: column;
      gap: 24px;
      background-color: #f5f5f5;
      padding: 24px;
      border-radius: 8px;
      margin-top: 32px;

      .location {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;

        .pickup-location,
        .delivery-location {
          display: flex;
          flex-direction: column;
          gap: 8px;

          label {
            font-size: 16px;
            color: #010e16;
            font-weight: 600;
            font-family: "Open Sans", sans-serif;
          }

          input {
            width: 100%;
            border-radius: 8px;
            padding: 12px 16px;
            outline: none;
            border: none;
            border-bottom: 1px solid #9ca9b4;
            font-size: 18px;
            color: #697277;
            font-weight: 400;
            font-family: "Open Sans", sans-serif;

            &::-webkit-input-placeholder {
              color: #697277;
              opacity: 1;
            }
            &::-moz-placeholder {
              color: #697277;
              opacity: 1;
            } /* Firefox 19+ */
            &:-ms-input-placeholder {
              color: #697277;
            } /* IE 10+ */
            &::-ms-input-placeholder {
              color: #697277;
            } /* Edge */
            &::placeholder {
              color: #697277;
              opacity: .8;
              font-weight: 400;
              font-family: "Open Sans", sans-serif;
            }
          }
        }
      }

      .attributes {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;

        .item {
          display: flex;
          flex-direction: column;
          gap: 8px;

          label {
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #010E16;
          }

          input {
            border: 1px solid #9CA9B4;
            border-radius: 8px;
            padding: 12px 16px;
            font-family: "Open Sans", sans-serif;
            font-weight: 400;
            color: #010E16;
          }
        }
      }

      .calc-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            font-family: "Open Sans", sans-serif;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0.5px;
            color: #010E16;
        }

        button {
            outline: none;
            border: none;
            border-radius: 8px;
            padding: 16px;
            font-family: "Open Sans", sans-serif;
            font-size: 20px;
            color: #ffffff;
            cursor: pointer;

            &:hover {
                opacity: 0.9;
            }
        }
      }
    }
  }
}

.price-cards {
    margin-top: 36px;

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 36px;

        .price-card {
            padding: 24px;
            border: 2px solid var(--primary-color);
            border-radius: 8px;

            h3 {
                font-family: "Open Sans", sans-serif;
                font-weight: 600;
                font-size: 24px;
                line-height: 36px;
            }

            .price {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 45px;
                align-items: end;

                .netto-price {
                    font-family: "Roboto", sans-serif;
                    font-size: 28px;
                    font-weight: 500;
                    line-height: 42px;
                }

                .brutto-price {
                    font-family: "Roboto", sans-serif;
                    font-size: 44px;
                    font-weight: 500;
                    line-height: 62px;
                }

                .pinfo {
                    font-size: 13px;
                    font-family:"Open Sans", sans-serif;
                    font-weight: 400;
                    line-height: 19.5px;
                    color:#525252;
                }
            }

            ul {
                margin-top: 18px;

                li {
                    display: grid;
                    grid-template-columns: .1fr 1fr;
                    gap: 9.6;
                    margin-top: 5px;

                    svg {
                        margin-top: 5px;
                    }

                    p {
                        font-family: "Open Sans", sans-serif;
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 27px;
                        letter-spacing: 0.5px;
                    }
                }
            }

            .card-pinfo {
                font-size: 16px;
                line-height: 24px;
                font-family: "Open Sans", sans-serif;
                letter-spacing: 0.5px;
                font-weight: 400;
                margin-top: 22px;
                color: #525252;
            }
        }
    }
}