:root {
  --main-white-color: white;
  --border-muted: #C76A00;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  border: solid 1px #C76A00;
  border-radius: 20px;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.25) 0%, rgba(255, 204, 0, 0.25) 100%);
}

.navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.app-button--bold, .profile-sidebar__link--active {
  font-weight: 700;
  font-style: Bold;
  font-size: 17px;
  leading-trim: CAP_HEIGHT;
  line-height: 100%;
  letter-spacing: 0%;
}

.app-button, .profile-sidebar__link {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.2) 0%, rgba(153, 123, 0, 0.2) 100%);
}

.dropdown li:hover, .modal-primary-button:hover, .auth-btn:hover, .balance-btn:hover, .profile-btn:hover, .app-button:hover, .profile-sidebar__link:hover, .nav-link:hover {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
  color: white;
}

.modal-primary-button, .app-button--active, .profile-sidebar__link--active, .active {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}

.product-card {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.profile-info {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.profile-sidebar__header {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.table {
    border: solid 1px #C76A00;
}

.table thead {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}

.table tbody, .dropdown {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.search-input, .text-input {
  color: #FFFFFFCC;
  border: 1px solid #C76A00;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.2) 0%, rgba(153, 123, 0, 0.2) 100%);
}

.modal {
  border: 1px solid #C76A00;
  border-radius: 20px;
}

.form {
  border: 1px solid #C76A00;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.navbar-links {
  background-color: unset;
}

.product-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 15px 22px;
    text-align: center;
}

.product-card-footer > div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product-card-name {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}

.product-card-price {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
    color: #d97706;
}

.nav-link-icon {
  width: 36px;
  height: 36px;
}

.product-modal-title,
.recharge-panel-header {
    position: relative;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 50px;
}

.product-modal-title::after,
.recharge-panel-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    width: 180px;
    height: 8px;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(214,123,16,.35),
            #d67b10,
            #ff9a1f
        ) left center/75px 2px no-repeat,

        linear-gradient(
            to left,
            transparent,
            rgba(214,123,16,.35),
            #d67b10,
            #ff9a1f
        ) right center/75px 2px no-repeat;

    filter: drop-shadow(0 0 4px rgba(255,140,0,.45));
}

.product-modal-title::before,
.recharge-panel-header::before {
    content: "◈";
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%);
    color: #d67b10;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(214,123,16,.7);
}

.empty-icon {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}


@media (max-width: 768px) {
    .navbar {
        position: static;
    }

    .navbar-brand {
        position: static;
        transform: none;
    }

    .navbar-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    .navbar-brand-logo {
        height: 34px;
    }
}