.footer-middle {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
.text-right{
    text-align: right;
}
.pt-90 {
    padding-top: 90px !important;
}
.my-account__address-list {
    display: flex;
    gap: 1.625rem;
}

.form-floating>.form-control,
.form-floating>.form-select {
    height: 48px;
}

/* Navbar */
.navbar {
    background-color: #ffffff;
    padding: 1rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 12px 12px;
}

.navbar-brand a{
    font-size: 1rem;
    font-weight: bold;
    color: #ffff;
    text-decoration: none;
}

.navbar-brand:hover {
    color: #2563eb;
}

/* Navbar Links */
.navbar-nav {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.nav-item a, svg {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-item a:hover {
    color: #2c3e50;
}

/* Button style */
.btna {
    background-color: #2c3e50;
    display: inline-block;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btna:hover {
    background-color: #ffff;
    color: #2c3e45;
}

.btna-checkout{
    width: 100%;
    height: 3.75rem;
    text-align: center;
    font-size: 0.875rem;
}
.disabled-product {
    pointer-events: none;
    opacity: 0.6;
}

.grayscale {
    filter: grayscale(100%);
}

.disabled-btn {
    background-color: #bdc3c7 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}




.category-buttons {
    display: flex;
    flex-wrap: nowrap; /* Tidak pindah ke baris baru */
    gap: 1rem; /* Jarak antar tombol */
    justify-content: center;
    align-items: center;
    overflow-x: auto; /* Supaya tetap responsif di layar kecil */
    padding: 1rem 0;
}

.category-buttons .btnc {
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    white-space: nowrap; /* Hindari pemisahan kata */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.category-buttons .btnc:hover {
    background-color: #ffff;
    color: #2c3e50;
}

/* Dropdown */
.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    color: #374151;
    text-decoration: none;
    display: block;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #1d4ed8;
}

#header {
    background-color: #2c3e50;
    padding: 1rem 2rem;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.tablee{
    --bs-table-bg: transparent;
    --bs-table-striped-color: #222222;
    --bs-table-striped-bg: #faf9f8;
    --bs-table-active-color: #222222;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #222222;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #222222;
  line-height: 1.5;
  vertical-align: top;
  border-color: transparent; 
}.tablee > :not(caption) > tr > td,
  .tablee > :not(caption) > tr > th {
    background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
    border-bottom-width: 0; }
  .tablee > :not(caption) > tr > td {
    padding: 1.53125rem 1.5rem;
    background-color: var(--bs-table-bg); }
  .tablee > :not(caption) > tr > th {
    padding: 1.625rem 1.5rem 1.25rem;
    background-color: #2c3e50;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500; }
  .tablee > tbody {
    vertical-align: inherit; }
  .tablee > thead {
    background-color: #2c3e50;
    vertical-align: bottom; }
  .tablee > :not(:last-child) > tr:last-child > th,
  .tablee > :not(:last-child) > tr:last-child > td {
    border-bottom-color: currentColor; }

.custom-thead {
    background: #2c3e50; /* Gradien biru gelap */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.1);
}

.custom-thead th {
    border: none;
    padding: 12px;
    font-weight: 600;
}

/* Footer */
.footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 2rem 1rem;
    font-size: 0.9rem;
}
.footer a {
    color: #bdc3c7;
}
.footer a:hover {
    color: #ffffff;
}