@layer base {
  /* Bulma customize */
  /* override Bulma media query width */

  *::selection {
    background-color: var(--blue-very-dry);
    color: var(--blue-hard);
  }

  html {
    background-color: var(--app-backdrop);
  }

  body {
    background-color: var(--app-main-bg);
    font-family: var(--base-font);
    color: var(--black);
  }

  /* View transition for Turbo */
  html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
    animation: slide-to-right 0.5s ease-out;
  }

  .body-wrapper {
    max-width: var(--app-width);
    margin: 0 auto;

    background-color: var(--app-main-bg);
    min-height: 100vh;
  }
  .body-wrapper:has(#address-form) {
    padding: 0.75rem;
    .main-menu {
      align-items: center;
      justify-content: space-between;
      .tenant-logo {
        width: 45px !important;
        height: 45px !important;
      }
    }
    main {
      padding-top: 1rem !important;
    }
  }

  h1,h2,h3,h4,h5 {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  main {
    margin: 0 auto;
  }

  #main-nav {
    padding: 1rem 0;
    ul {
      display: flex;
      gap: 1rem;
      width: 100%;
      align-items: center;
      margin: 0;
    }

    .logout {
      text-align: end;
      flex-grow: 1;
      padding: 0;
    }
  }

  /* Hamburger button: hidden on desktop, shown on mobile */
  .hamburger-btn {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--smoke);
    margin-top: -16px;
  }

  /* Mobile dropdown menu */
  .mobile-menu {
    display: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    color: var(--smoke);
    font-size: 0.875rem;
    a { 
      font-weight: 500;
      color: inherit;
    }
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem 0.5rem;
    }
  }
  .mobile-menu:not(.hidden) {
    display: block;
  }

  .main-menu {
    display: flex;
    padding: 1rem 0 0.5rem;
    gap: 2rem;
    color: var(--smoke);
    font-size: 0.875rem;
    justify-content: space-between;

    a { color: inherit; }

    .cart-items { margin-left: auto; }

    .btn-cart {
      position: relative;
      padding: 0;
      margin: 0;
      background: none;
      border: none;

      svg {
        width: 24px;
        height: 24px;
      }
      svg path {
        fill: var(--smoke);
      }

      .cart-qty {
        font-size: 0.935rem;
        font-weight: 700;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: dodgerblue;
        position: absolute;
        top: -10px;
        right: -16px;
        width: 24px;
        height: 24px;
        border-radius: 16px;
        overflow: hidden;
      }
      .cart-qty.hidden {
        display: none;
      }

      /* Digit roll animation for cart counter */
      .digit-roll {
        display: flex;
        flex-direction: column;
        animation: digit-roll-up 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      .digit-roll-old,
      .digit-roll-new {
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      @keyframes digit-roll-up {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-24px);
        }
      }
    }
  }

  @media only screen and (max-width: 649px) {
    .hamburger-btn { display: block; }
    .menu-links, .menu-account { display: none !important; }
  }
  @media only screen and (min-width: 650px) {
    .mobile-menu { display: none !important; }
    .main-menu {
      justify-content: start;
      align-items: center;
    }
  }

  .error {
    color: red;
  }

  input[disabled] {
    opacity: 0.7;
  }

  /* tags */
  .tag {
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 4px;
    height: min-content;
  }
  .tag-paid {
    background-color: rgb(239, 250, 245);
    color: rgb(16, 51, 35);
  }
  .tag-pending {
    background-color: rgb(255, 249, 235);
    color: rgb(66, 46, 0);
  }
  .tag-payment_waiting {
    background-color: rgb(255, 183, 15);
    color: rgb(41, 29, 0);
  }
  .tag-fulfilled_waiting {
    background-color: rgb(255, 183, 15);
    color: rgb(41, 29, 0);
  }
  .tag-fulfilled {
    background-color: hsl(141, 71%, 48%);
    color: rgb(10, 31, 21);
  }

  .card {
    background-color: white;
    border-radius: 0.5rem;
  }
  .card:not(:last-child),
  .field:not(:last-child)
  {
    margin-bottom: 0;
  }

  @media only screen and (min-width: 640px) {
    .main-menu .btn-cart svg {
      width: 28px;
      height: 28px;
    }
  }

  @media screen and (min-width: 768px) {
    .body-wrapper, main {
      max-width: var(--max-store-content);
    }
  }
}