#navLoginBtn {
  background-color: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

#navLoginBtn:hover {
  background-color: white;
  color: var(--bg-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#navBuyBtn {
  background-color: var(--riderq-red);
  color: white;
  border: 2px solid var(--riderq-red);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

#navBuyBtn:hover {
  background-color: #c62828;
  border: 2px solid #c62828;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#get-yours-btn:active, #navBuyBtn:active, #navLoginBtn:active, #loginBtn:active, #editProfileBtn:active, #signupBtn:active, #buyBtn:active, #verifyBtn:active {
  transform: scale(0.97) !important;
}

#loginBtn, #signupBtn, #verifyBtn {
    background-color: var(--bg-dark);
    border: 2px solid var(--bg-dark);
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

#loginBtn:hover, #signupBtn:hover, #verifyBtn:hover {
    background-color: white;
    color: var(--bg-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#editProfileBtn {
  background-color: var(--bg-dark);;
  border: 2px solid var(--bg-dark);
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#editProfileBtn:hover {
  background-color: white;
  color: var(--bg-dark);
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#get-yours-btn, #buyBtn {
  background-color: var(--riderq-red);
  color: white;
  border: 2px solid var(--riderq-red);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

#get-yours-btn:hover, #buyBtn:hover {
  background-color: #c62828;
  border: 2px solid #c62828;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#buyBtn:hover {
  background-color: #c62828;
  border: 2px solid #c62828;
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
}

#msgModalCloseBtn {
  background-color: var(--riderq-red);
  color: white;
  border: 2px solid var(--riderq-red);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: all 0.1s ease;
  letter-spacing: 0.5px;
}

#msgModalCloseBtn:hover {
  background-color: #c62828;
  border: 2px solid #c62828;
}

#helpFab {
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  z-index: 1050;

  transition: all 0.1s ease;
  background-color: var(--riderq-red);
  color: white;
  border-color: var(--riderq-red);
}

#helpFab:hover {
  background-color: #c62828;
  transform: scale(1.02);
}

#saveProfileBtn, #saveProfileBtnBtm {
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #145a32;
  background-color: #145a32;
}

#saveProfileBtn:hover, #saveProfileBtnBtm:hover {
  color: #145a32;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

#cancelProfileBtn, #cancelProfileBtnBtm {
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #374151;
  background-color: #374151;
}

#cancelProfileBtn:hover, #cancelProfileBtnBtm:hover {
  color: #374151;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

.add-item-btn {
  background-color: #006d32 !important;
  color: white !important;
  border-color: #006d32 !important;

  max-width: 40% !important;
}

.add-item-btn:hover {
  background-color: #16a34a !important;
  color: white !important;
  border-color: #16a34a !important;
}

.add-item-btn:active {
  transform: scale(0.98);
  background-color: #16a34a !important;
  color: white !important;
  border-color: #16a34a !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow {
  margin-right: 8px !important;
}


#viewProfileBtn,
#getQrBtn {
    background: #E53935;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    padding: 12px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

#viewProfileBtn span,
#getQrBtn span {
    margin-left: 8px;
    font-size: 1.2rem;
}


#viewProfileBtn:hover,
#getQrBtn:hover {
    background: #c62828;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


#viewProfileBtn:focus,
#getQrBtn:focus,
#viewProfileBtn:active,
#getQrBtn:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229,57,53,0.5);
}


@media (max-width: 576px) {
    .col-md-3 {
        margin-bottom: 10px;
        width: 100%;
    }

    #viewProfileBtn,
    #getQrBtn {
        width: 100%;
    }
}


#printQRBtn, #downloadQRBtn {
  background-color: var(--riderq-red);
  color: white;
  border: 1px solid var(--riderq-red);
  transition: 0.2s ease;
}

#printQRBtn:hover,
#downloadQRBtn:hover {
  background-color: #c62828;
  border: 1px solid #c62828;
}