:root {
    --accent-color: rgb(162,161,184);
    --accent-color-bg: rgb(255, 255, 255);
    --accent-color-active:rgb(16, 185, 129);
  }

.focus\:shadow-blue:focus {
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* Biru dengan transparansi */
}
input.invalid, select.invalid {
    border: 1px solid red !important;
}
.scrollbar-pos::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.scrollbar-pos {
    scrollbar-width: none;
}
.scrollbar-pos {
    -ms-overflow-style: none;
}
.productview {
    height: calc(94vh) !important;
}
.cartview {
    height: calc(94vh) !important;
}

/* Default button styles */
.togglebuy-button {
    background-color:rgb(16, 185, 129); /* Green background */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Rounded corners */
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for the enabled button */
.togglebuy-button:not(:disabled):hover{ /* Add active for touch events */
    background-color: #059669; /* Darker green on hover */
    color: #d1fae5; /* Light text on hover */
}

/* Disabled button styles */
.togglebuy-button:disabled {
    background-color: #d1fae5; /* Light green background */
    color: #6ee7b7; /* Light green text */
    cursor: not-allowed; /* Change cursor to show disabled state */
    opacity: 0.6; /* Slightly transparent */
}

/* Hover effect doesn't apply to disabled button */
.togglebuy-button:disabled:hover {
    background-color: #d1fae5; /* Keep the same light green color for disabled state */
    color: #6ee7b7; /* Keep the same light green text */
}

/* Default button styles */
.paymentButton {
    background-color:rgb(16, 185, 129); /* Green background */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Rounded corners */
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for the enabled button */
.paymentButton:not(:disabled):hover{ /* Add active for touch events */
    background-color: #059669; /* Darker green on hover */
    color: #d1fae5; /* Light text on hover */
}

/* Disabled button styles */
.paymentButton:disabled {
    background-color: #d1fae5; /* Light green background */
    color: #6ee7b7; /* Light green text */
    cursor: not-allowed; /* Change cursor to show disabled state */
    opacity: 0.6; /* Slightly transparent */
}

/* Hover effect doesn't apply to disabled button */
.paymentButton:disabled:hover {
    background-color: #d1fae5; /* Keep the same light green color for disabled state */
    color: #6ee7b7; /* Keep the same light green text */
}

/* Default button styles */
.paymentButton-close {
    background-color:rgb(212, 17, 17); /* Green background */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Rounded corners */
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for the enabled button */
.paymentButton-close:not(:disabled):hover{ /* Add active for touch events */
    background-color:rgb(204, 20, 20); /* Darker green on hover */
    color:rgb(250, 209, 209); /* Light text on hover */
}

/* Disabled button styles */
.paymentButton-close:disabled {
    background-color:rgb(250, 209, 209); /* Light green background */
    color:rgb(231, 110, 110); /* Light green text */
    cursor: not-allowed; /* Change cursor to show disabled state */
    opacity: 0.6; /* Slightly transparent */
}

/* Hover effect doesn't apply to disabled button */
.paymentButton-close:disabled:hover {
    background-color:rgb(250, 209, 209); /* Keep the same light green color for disabled state */
    color:rgb(231, 110, 110); /* Keep the same light green text */
}

.tabbar {
    background-color: var(--accent-color-bg);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height: 70px;
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s;
  }
  .tabbar ul,
  .tabbar li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .tabbar ul {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--accent-color-bg);
    align-self: flex-end;
    justify-content: center;
    height: 75px;
  }
  .tabbar li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin-right: 5px;
    transition: all 0.4s;
    background-color: var(--accent-color-bg);
    width: 60px;
    height: 60px;
    position: relative;
    color: var(--accent-color);;
    cursor: pointer;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    align-items: center;
    top: 10px;
    left: 0;
  }
  .tabbar li:last-child {
    margin-right: 0;
  }

  .tabbar .active {
    width: 60px;
    height: 60px;
    /* top: -1rem; */
  }

  .tabbar .active:before, .tabbar .active:after {
    position: absolute;
    content: " ";
    width: 15px;
    height: 13px;
    border-bottom: 5px solid var(--accent-color-bg);;
    top: 8px;
  }
  .tabbar .active:before {
    border-bottom-right-radius: 100%;
    left: -7px;
  }
  .tabbar .active:after {
    border-bottom-left-radius: 100%;
    right: -7px;
  }

  .tabbarmenu.active {
    color: var(--accent-color-active);
  }
  
  .tabbarmenu i{
    font-size: 1.7rem;
  }

  .tabbar .active i {
    font-size: 2rem;
  }

@media (max-width: 768px) {
    .productview {
        height: calc(90vh - 5vh) !important;
    }
    .cartview {
        height: calc(90vh - 5vh) !important;
    }
}
@media (min-width: 768px) {
    .tabbar {
        display: none;
    }
}