@font-face {
  font-family: "Gilroy";
  src: url("/public/fonts/Gilroy-Light.otf") format("opentype");
  font-weight: 300; /* Gilroy Light is typically a font-weight of 300 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Verdana";
  src: url("/public/fonts/verdana.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body {
  font-family: 'Gilroy', sans-serif;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f2ef, #e8d8c3);
  color: #333;
}

a {
  &:link,
  &:visited,
  &:hover,
  &:active {
    text-decoration: none;
    color: inherit;
  }
}

.thai {
  font-family: "Noto Sans Thai", sans-serif;
}
.hide {
  display: none;
}
#product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.product,
.banner,
.project {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 2rem;
  min-width: 300px;
  max-width: 400px;
  height: fit-content;
  flex: 1 1 30%;
  background: #fefefe;
  padding: 25px;
  box-sizing: border-box;
  text-align: center;

  &.large {
    min-width: 100%;
    padding: 0 25px;
  }

  @media screen and (max-width: 695px) {
    &.large {
      display: none;
    }
  }

  @media screen and (min-width: 696px) {
    &.small {
      display: none;
    }
  }

  &.project {
    @media screen and (min-width: 696px) {
      min-width: 100%;
      a {
        display: flex;
        flex-direction: column;

        p {
          padding: 0 20px;
        }
      }
    }

    border: 3px solid #fff;
    background-image: repeating-linear-gradient(
        130deg,              /* 45 degree angle for diagonal */
        #ffffff 0,          /* White, starts at 0% */
        #ffffff 3px,        /* White, ends at 1px (thin line) */
        #FFEA99 1px,        /* Yellow, starts at 1px */
        #FFEA99 10px        /* Yellow, ends at 10px (width of the stripe) */
    );

    button {
      display: inline-block;
      background-color: #fff;
      padding: 8px 20px; /* Adjust padding for mobile finger-tap area */
      margin-top: 15px; /* Spacing below the title */

      /* Typography */
      font-family: inherit; /* Use the site's main font */
      font-size: 14px;
      font-weight: 500; /* Medium weight for readability */
      text-transform: uppercase;
      text-decoration: none; /* Remove default underline from the <a> tag */
      color: #333; /* Dark gray/charcoal text color */

      /* Border & Background */
      border: 1px solid #333; /* 1px thin border in dark gray */
      border-radius: 4px; /* Slightly rounded corners */

      /* Transition for smooth feedback */
      transition: all 0.2s ease-in-out;

      place-self: center;

      &:hover, &:active {
        background-color: rgba(51, 51, 51, 0.05); /* Very light gray background fill (5% opacity) */
        color: #000; /* Optional: Make text pure black on tap/hover */
        border-color: #000;
      }
    }
  }

  img {
    width: 100%;
    height: auto;

    &.product-image {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #ddd;
    }
  }

  .slider-container {
    position: relative;
    display: grid;
    align-items: center;
    gap: 20px;

    img {
      max-width: 600px;
      transition: opacity 0.5s ease-in-out;
      opacity: 0;

      &.show {
        opacity: 1;
      }
    }

    .slider-btn {
      cursor: pointer;
      border: none;
      position: absolute;
      width: 45px;
      height: 45px;

      background-color: rgba(0, 0, 0, 0.05);
      background-image: url('images/icons/slider-button.svg');
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center;

      &.previous-btn {
        transform: translateY(-50%) rotateY(180deg);
        left: 0;
        top: 50%;
      }

      &.next-btn {
        right: 0;
      }
    }
  }

  .product-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;

    .product-price {
      display: inline-block;
      width: 100%;
      font-weight: 600;

      &::before {
        content: "€";
      }

    }

    .vat {
      grid-row: 2;
      font-size: 0.6em;
    }

    button {
      background-color: rgb(0, 116, 212);
      color: white;
      border-radius: 5px;
      width: 150px;
      max-width: 300px;
      height: 35px;
      border: none;
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

      .icon {
        width: 15px;
        height: 15px;
        background-image: url('images/icons/credit-card.svg');
        background-size: 100%;
        background-repeat: no-repeat;
      }

      .loader {
        border: 3px solid #f3f3f3; /* Light grey border */
        border-top: 3px solid #3498db; /* Blue border for the spinning part */
        border-radius: 50%;
        width: 9px;
        height: 9px;

        /* Initially hide the spinner */
        display: none;

        /* Animation definition */
        animation: spin 1s linear infinite;

        &.loading {
          display: inline-block;
        }
      }
    }

    .via-stripe {
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .stripe-icon {
        width: 30px;
        height: 14px;
      }
    }
  }

  &.disabled {
    .vat {
      display: none !important;
    }

    .product-price {
      font-style: italic !important;

      &::before {
        content: "Event Exclusive" !important;
      }
    }

    .stripe-link {
      background-color: #A0A0A0 !important;
      box-shadow: none !important;
      border: 1px solid #999 !important;
      opacity: 0.8 !important;
    }
  }
}